HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码,可更换照片及表白内容。
使用方法
1、表白对话在assets/dialog.json
2、女朋友照片放在img中，直接替换即可
3、代码包需要放在WEB服务器里运行，本地用浏览器直接打开index.html无法从json文件里读取相应的照片及表白的话。
运行效果
完整代码下载地址：HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=100%, initial-scale=1"><title>与宝贝聊天中</title><link href="css/main.min.css" rel="stylesheet" type="text/css"><link rel="Shortcut Icon" href="favicon.ico"/><link rel="preload" href="img/love-the-girl.jpg" as="image"><link rel="preload" href="img/news-wuhanfeiyan.jpg" as="image"><link rel="preload" href="img/separate.jpeg" as="image"><link rel="preload" href="img/in-sichuan.jpeg" as="image"><link rel="preload" href="img/lucky-me.jpg" as="image"><link rel="preload" href="img/breakfast.jpg" as="image"><link rel="preload" href="img/exercise-together.jpg" as="image"><link rel="preload" href="img/travel.jpg" as="image"><link rel="preload" href="img/foot.jpg" as="image"><link rel="preload" href="img/marry-me.png" as="image"><link rel="preload" href="img/kiss-my-princess.png" as="image"></head><body><div id="mobile" :class="{ 'has-prompt': hasPrompt }"><div id="mobile-head"><div id="mobile-head-title">与宝贝聊天中</div></div><div id="mobile-body"><div id="mobile-body-bg"></div><div id="mobile-body-content"><div id="mock-msg-row" class="msg-row"><div id="mock-msg" class="msg" v-html="latestMsgContent"></div></div><div class="msg-row"v-for="(msg, index) in messages":key="index":class="msg.author === 'author' ? 'msg-author' : 'msg-me'"><div class="msg":class="'msg-bounce-in-' + (msg.author === 'author' ? 'left': 'right')":style="msg.width && msg.height && {width: msg.width - 26 + 'px', height: msg.height - 18 + 'px'}"v-html="msg.content"></div></div></div></div><div id="mobile-foot"><div id="prompt"><div id="prompt-head"><div class="say-something">我想说……</div><a href="javascript:;" class="close-btn"v-on:click="togglePrompt(false)"></a></div><div id="prompt-body"><ul class="responses" v-if="lastDialog"><li v-for="res in lastDialog.responses"><a href="javascript:;" v-on:click="respond(res)">{{ res.content }}</a></li></ul><div class="next-topic"v-if="!lastDialog || !lastDialog.responses"><ul class="topics"><li v-for="topic in nextTopics"><a href="javascript:;" v-on:click="ask(topic)">{{ topic.brief }}</a></li></ul></div></div></div><div id="input-hint" class="say-something"v-on:click="togglePrompt(true)":class="{'clickable': !isTyping }"><span v-if="!isTyping">我想说……</span><span v-if="isTyping">江叔叔正在输入中</span></div></div><div id="prompt-bg" v-on:click="togglePrompt(false)"></div></div><div class="extra-link" id="meta-link"><a class="letters" href="https://blog.csdn.net/weixin_42756970" target="_blank">源码</a></div><script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script><script src="//cdn.bootcss.com/vue/2.2.6/vue.min.js"></script><script src="js/index-min.js"></script></body>
</html>dialog.json
{"fromMe": [{"id": "0000","details": [["💐💐💐情人节快乐💐💐💐","我的宝贝😘","🌹🌹🌹送你花花🌹🌹🌹","<pre>🍀🍀🍀🌹🍀🍀🍀🌹🍀🍀🍀 \n🍀🍀🌹🌹🌹🍀🌹🌹🌹🍀🍀 \n🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 \n🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 \n🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹 \n🍀🌹🌹🌹🌹🌹🌹🌹🌹🌹🍀 \n🍀🍀🌹🌹🌹🌹🌹🌹🌹🍀🍀 \n🍀🍀🍀🌹🌹🌹🌹🌹🍀🍀🍀 \n🍀🍀🍀🍀🍀🌹🍀🍀🍀🍀🍀</pre>","几日不见📅","十分想念😘","<img src='img/love-the-girl.jpg'>","你说你讨厌异地恋🤔","一场全国性的新肺炎😷","<img src='img/news-wuhanfeiyan.jpg'>","让咱们不得不来一场异地恋😂","<img src='img/separate.jpeg'>","稍等一下🙂","让我再看一眼你的照片😘","<img src='img/in-sichuan.jpeg'>","跟你在一起的每一天📅","都让我感到十分想念📬","<img src='img/lucky-me.jpg'>","想念你做的早餐🍲","<img src='img/breakfast.jpg'>","想念跟你一起锻炼🛹","<img src='img/exercise-together.jpg'>","想念跟你一起旅游的时候🚂","<img src='img/travel.jpg'>","我们的脚印能一起出现🎠","<img src='img/foot.jpg'>","永远在一起的誓言💑","我想再重复一遍😍","<img src='img/marry-me.png'>","嫁给我吧💍"]],"responses": [{"content": "我愿意","nextAuthor": ["0001"]}]}, {"id": "0001","details": [["<img src='img/kiss-my-princess.png'>","宝贝我好开心呀😁","今后每一天的相见😍","你都是我的初恋😘","给你的那些承诺😙","我都会一一兑现😉"]]}],"fromUser": []
}
完整代码下载地址：HTML情人节表白代码，给女朋友的电子情书代码，女朋友表白代码
