微信对话生成器

2 years ago · 952cf24d32
commit 952cf24d32
44 changed files with 14083 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,14 @@
+# 微信对话生成器
+
+## 功能介绍
+```
+微信对话生成器，是一款在线微信聊天对话制作的工具，它可以设置苹果或安卓状态栏，包括手机电量、手机时间等，还可以设置不同用户的角色，然后发送文字、语音、红包、转账等多种好玩的功能，可谓是一款娱乐制作神器
+```
+
+## 演示图例
+
+
+## 特别声明
+```
+此软件只用于娱乐使用，切勿用于非法途径，由此产生任何纠纷由使用者本人自己承担，禁止用于各种违法犯罪行为！！
+```
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,565 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>在线微信对话生成器</title>
+	<meta name="keywords" content="免费在线微信对话生成器" />
+	<meta name="description" content="在线微信对话生成器是一款在线微信聊天对话制作的工具" />
+	<meta name="render" content="webkit">
+	<link rel="icon" href="favicon.png">
+	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
+	<meta content="telephone=no, address=no" name="format-detection">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+	<script type="text/javascript">
+		var _path = { images: '' }
+		var page = { data: {} }
+	</script>
+	<link rel="stylesheet" href="static/app/css/zui.min.css">
+	<link rel="stylesheet" href="static/app/css/app.css">
+	<link rel="stylesheet" href="static/app/css/wallet.css">
+	<script type="text/javascript" src="static/app/js/common.bundle.js"></script>
+	<script type="text/javascript" src="static/app/js/chat.bundle.js"></script>
+</head>
+<body>
+	<div id="vueApp" class="wrapper">
+		<div class="container-fluid page-content">
+			<div id="pageHeader">微信对话生成器</div>
+			<div class="edit-content">
+				<div class="tab">
+					<ul class="nav nav-tabs">
+						<li class="active"><a data-tab href="#tabContent1">外观设置</a></li>
+						<li><a data-tab href="#tabContent2">对话设置</a></li>
+					</ul>
+					<div class="tab-content">
+						<div class="tab-pane active" id="tabContent1">
+							<!-- 外观设置 -->
+							<div class="view-setting">
+								<div class="view-set-item">
+									<span>手机信号：</span>
+									<select v-model="phone.single" class="form-control">
+										<option value="1">1格</option>
+										<option value="2">2格</option>
+										<option value="3">3格</option>
+										<option value="4" selected="selected">4格</option>
+									</select>
+								</div>
+								<div class="view-set-item">
+									<span>网络信号：</span>
+									<select v-model="phone.wifi" class="form-control">
+										<option value="1">wifi</option>
+										<option value="2">3G</option>
+										<option value="3">4G</option>
+										<option value="4">5G</option>
+									</select>
+								</div>
+								<div class="view-set-item">
+									<span>wifi信号：</span>
+									<select v-model="phone.wifi_single" class="form-control">
+										<option value="1">1格</option>
+										<option value="2">2格</option>
+										<option value="3" selected="selected">3格</option>
+									</select>
+								</div>
+								<div class="view-set-item">
+									<span>手机时间：</span>
+									<select v-model="phone.time_hour" class="form-control edit-phone-time-hour"></select>
+									<select v-model="phone.time_mini" class="form-control edit-phone-time-mini"></select>
+								</div>
+								<div class="view-set-item">
+									<span>充电中：</span>
+									<label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="1"> 是</label>
+									<label class="my-radio"><input type="radio" name="charge"v-model="phone.battery_charge" value="0" checked> 否</label>
+								</div>
+								<div class="view-set-item">
+									<span>手机电量：</span>
+									<input @change="onBatteryChange($event)" type="range" v-model="phone.battery_amount"
+										min="0" max="100" value="50" />
+									&nbsp;&nbsp;&nbsp;{{phone.battery_amount}}%
+								</div>
+								<div class="view-set-item">
+									<span>听筒模式：</span>
+									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="1"> 是</label>
+									<label class="my-radio"><input type="radio" name="phone-ear" v-model="phone.ear" value="0" checked> 否</label>
+								</div>
+								<div class="view-set-item">
+									<span>消息数目：</span>
+									<input type="number" name="phone-msg-count" class="form-control" v-model.number="setting.message">
+								</div>
+								<div class="view-set-item">
+									<span>聊天标题：</span>
+									<input type="text" class="form-control" v-model="setting.title">
+								</div>
+								<div class="view-set-item">
+									<span>语音模式：</span>
+									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="1"> 是</label>
+									<label class="my-radio"><input type="radio" name="phone-voice" v-model="setting.voice" value="0" checked> 否</label>
+								</div>
+								<div class="view-set-item">
+									<span>聊天背景：</span>
+									<a class="a-phone-set-bg" href="javascript:;" title="选择背景图">
+										<font>+</font>
+										<img class="img-phone-set-bg" :src="setting.background" />
+										<input @change="setBackground($event)" type="file" />
+										<span @click="deleteBackground" v-if="setting.background != ''">x</span>
+									</a>
+								</div>
+							</div>
+						</div>
+						<!-- 对话设置 -->
+						<div class="tab-pane" id="tabContent2">
+							<div class="dialog-user">
+								<div class="dialog-user-title">编辑和选择用户（<font>第一个用户默认是自己</font>）</div>
+								<div class="dialog-user-items">
+									<div class="dialog-user-item el-remove">
+										<div class="dialog-user-face">
+											<a class="dialog-user-face-a" href="javascript:;">
+												<input type="file" placeholder="点击更换头像">
+												<i></i>
+											</a>
+											<input type="text" value="微信对话生成器" />
+											<a class="dialog-user-select">选择用户</a>
+											<a class="dialog-user-delete">x</a>
+										</div>
+									</div>
+									<div class="dialog-user-item el-remove">
+										<div class="dialog-user-face">
+											<a class="dialog-user-face-a" href="javascript:;">
+												<input type="file" placeholder="点击更换头像">
+												<i style="background-image: url(/static/app/images/10014.jpg)"></i>
+											</a>
+											<input type="text" value="马先生" />
+											<a class="dialog-user-select">选择用户</a>
+											<a class="dialog-user-delete">x</a>
+										</div>
+									</div>
+									<div v-for="(user, index) in users" class="dialog-user-item">
+										<div class="dialog-user-face">
+											<a class="dialog-user-face-a" href="javascript:;">
+												<input @change="setUserImage($event, index)" type="file"
+													placeholder="点击更换头像">
+												<i :style="'background-image: url(' + user.image + ')'"></i>
+											</a>
+											<input type="text" v-model="user.name" />
+											<a @click="selectUser(index)"
+												:class="['dialog-user-select', {'dialog-user-selected':user.selected}]">选择用户</a>
+											<a v-if="!user.is_me" @click="delUser(index)" class="dialog-user-delete"
+												title="删除用户">x</a>
+										</div>
+									</div>
+									<div class="dialog-user-item">
+										<a @click="addUser" class="dialog-user-item-add" href="javascript:;"
+											title="添加用户">+</a>
+									</div>
+								</div>
+
+								<div class="dialog-user-content-title">发送人：{{getSender()}}</div>
+								<div class="dialog-user-content">
+									<div class="dialog-user-content-panel">
+										<textarea v-model="setting.dialog_content"
+											class="edit-dialog-text form-control"></textarea>
+									</div>
+									<div class="view-setting view-setting2">
+										<div class="view-set-item">
+											<span>红包或转账金额：</span>
+											<input v-model.number="setting.dialog_money" type="number"
+												class="form-control">
+										</div>
+										<div class="view-set-item">
+											<span>添加聊天时间：</span>
+											<select v-model="setting.date_year"
+												class="form-control edit-phone-time-year">
+												<option value="">-</option>
+											</select>
+											<select v-model="setting.date_month"
+												class="form-control edit-phone-time-month" style="width: 60px;">
+												<option value="">-</option>
+											</select>
+											<select v-model="setting.date_day" class="form-control edit-phone-time-day"
+												style="width: 60px;">
+												<option value="">-</option>
+											</select>
+											<select v-model="setting.date_xinqi" class="form-control">
+												<option value="">-</option>
+												<option value="星期一">星期一</option>
+												<option value="星期二">星期二</option>
+												<option value="星期三">星期三</option>
+												<option value="星期四">星期四</option>
+												<option value="星期五">星期五</option>
+												<option value="星期六">星期六</option>
+												<option value="星期日">星期日</option>
+											</select>
+											<select v-model="setting.date_shiduan" class="form-control"
+												style="width: 60px;">
+												<option value="">-</option>
+												<option value="上午">上午</option>
+												<option value="下午">下午</option>
+												<option value="凌晨">凌晨</option>
+											</select>
+											<select v-model="setting.date_hour"
+												class="form-control edit-phone-time-hour" style="width: 60px;">
+
+											</select>
+											：
+											<select v-model="setting.date_min" class="form-control edit-phone-time-mini"
+												style="width: 60px;">
+
+											</select>
+										</div>
+										<div class="view-set-item">
+											<span>语音时间：</span>
+											<input v-model.number="setting.dialog_voice" type="number"
+												class="form-control">
+											&nbsp;&nbsp;&nbsp;
+											<label>是否已读：</label>
+											<label class="my-radio"><input type="radio"
+													v-model="setting.dialog_voice_isread" value="1" checked>
+												是</label>
+											<label class="my-radio"><input type="radio"
+													v-model="setting.dialog_voice_isread" value="0"> 否</label>
+										</div>
+										<div class="view-set-item">
+											<span>红包备注：</span>
+											<input v-model="setting.dialog_repacket_remark" type="text"
+												class="form-control">
+										</div>
+										<div class="view-set-item">
+											<span>转账备注：</span>
+											<input v-model="setting.dialog_trans_remark" type="text"
+												class="form-control">
+										</div>
+									</div>
+									<div class="btn-groups">
+										<div class="btn-group">
+											<button @click="addTextDialog" class="btn btn-success">添加文字对话</button>
+											<button @click="addNoticeDialog" class="btn btn-primary">添加时间</button>
+											<button class="btn btn-primary btn-send-image">添加图片对话<input
+													@change="addImageDialog($event)" type="file"></button>
+
+										</div>
+										<div class="btn-group">
+											<button @click="addVoiceDialog" class="btn btn-primary">添加语音对话</button>
+											<button @click="addRedpacketDialog" class="btn btn-primary">添加红包对话</button>
+											<button @click="addTransferDialog" class="btn btn-primary">添加转账对话</button>
+										</div>
+									</div>
+									<button class="btn-clear" @click="cleanDialogs" href="javascript:;">清空聊天内容</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- phone -->
+				<div class="phone-wrap">
+					<div class="phone-content">
+						<div id="phone" class="phone">
+							<div class="phone-top">
+								<div class="phone-bar">
+									<div class="phone-time">{{phone.time_hour}}:{{phone.time_mini}}</div>
+									<div
+										:class="['phone-sigle', {'phone-sigle-v1':phone.single == 1}, {'phone-sigle-v2':phone.single == 2}, {'phone-sigle-v3':phone.single == 3}, {'phone-sigle-v4':phone.single == 4}]">
+										信号</div>
+									<div
+										:class="['phone-wifi', {'phone-wifi-v2':phone.wifi > 1}, phone.wifi == 1 ? 'phone-wifi-s' + phone.wifi_single : '']">
+										<template v-if="phone.wifi == 1">
+											wifi
+										</template>
+										<template v-else-if="phone.wifi == 2">
+											3G
+										</template>
+										<template v-else-if="phone.wifi == 3">
+											4G
+										</template>
+										<template v-else-if="phone.wifi == 4">
+											5G
+										</template>
+									</div>
+									<div :class="['phone-battery', {'phone-battery-charge':phone.battery_charge == 1}]">
+										<span>
+											<font :style="[{width: phone.battery_amount + '%'}]">电量</font>
+											<i></i>
+										</span>
+									</div>
+								</div>
+								<div class="phone-nav">
+									<div class="phone-nav-left">
+										<div class="phone-nav-back">返回</div>
+										<span v-if="setting.message && setting.message > 0">{{setting.message}}</span>
+									</div>
+									<div class="phone-nav-center">
+										<span>
+											<font>{{setting.title}}</font>
+											<i v-if="phone.ear == 1"></i>
+										</span>
+									</div>
+									<div class="phone-nav-right">
+										<div class="phone-nav-more">更多</div>
+									</div>
+								</div>
+							</div>
+
+							<div class="phone-bg">
+								<img @load="onBackgroundLoad($event)" :src="setting.background" />
+							</div>
+
+							<div class="phone-water"></div>
+
+							<div class="phone-body">
+								<div class="wechat-content">
+									<template v-for="(dialog, index) in dialogs">
+										<div :class="['wechat-dialog', {'wechat-dialog-right':dialog.is_me}]">
+											<div v-if="dialog.type != 'notice'" class="wechat-dialog-face">
+												<img :src="getUserById(dialog.user_id).image" />
+											</div>
+
+											<template v-if="dialog.type == 'text'">
+												<div class="wechat-dialog-text">{{dialog.content}}</div>
+											</template>
+
+											<template v-if="dialog.type == 'image'">
+												<div
+													:class="['wechat-dialog-text', 'wechat-dialog-image', {'wechat-dialog-image-noborder':setting.background != ''}]">
+													<img :src="dialog.image">
+												</div>
+											</template>
+
+											<template v-if="dialog.type == 'voice'">
+												<div class="wechat-dialog-text wechat-dialog-voice">
+													<div v-if="dialog.is_me"
+														:style="{width: getVoiceLength(dialog.time) + 'px'}"></div>
+													<span v-if="dialog.is_me">{{dialog.time}}"</span>
+													<i></i>
+													<span v-if="!dialog.is_me">{{dialog.time}}"</span>
+													<div v-if="!dialog.is_me"
+														:style="{width: getVoiceLength(dialog.time) + 'px'}"></div>
+													<em v-if="!dialog.is_me && dialog.isread == '0'"></em>
+												</div>
+											</template>
+
+											<template v-if="dialog.type == 'notice'">
+												<div class="wechat-dialog-notice">
+													<span
+														:class="[{'wechat-dialog-notice-has-bg':setting.background != ''},{'wechat-dialog-notice-system':dialog.is_system}]"
+														v-html="dialog.content"></span>
+												</div>
+											</template>
+
+											<template v-if="dialog.type == 'transfer' || dialog.type == 'redpacket'">
+												<div
+													:class="['wechat-dialog-text', 'wechat-dialog-trans', {'wechat-dialog-trans-get':dialog.is_get}]">
+													<div
+														:class="['wechat-dialog-trans-content', {'wechat-dialog-redp-content':dialog.type == 'redpacket'}]">
+														<i></i>
+														<div>
+															<span
+																v-if="dialog.type == 'transfer'">¥{{moneyFormat(dialog.money,
+																2, '', false)}}</span>
+															<font v-if="dialog.type == 'transfer'">{{dialog.remark}}
+															</font>
+															<span
+																v-if="dialog.type == 'redpacket'">{{dialog.remark}}</span>
+															<font v-if="dialog.type == 'redpacket' && dialog.is_get">
+																已领取</font>
+														</div>
+													</div>
+													<div class="wechat-dialog-trans-bottom">
+														<span v-if="dialog.type == 'transfer'">微信转账</span>
+														<span v-if="dialog.type == 'redpacket'">微信红包</span>
+													</div>
+												</div>
+											</template>
+
+											<a @click="deleteDialog(index)" class="a-wechat-dialog-del"
+												href="javascript:;" title="删除对话">X</a>
+
+											<div v-if="!dialog.is_get && dialog.type == 'redpacket'"
+												class="a-wechat-dialog-menu">
+												<a @click="redpacketGet(index)">领取</a>
+											</div>
+											<div v-if="!dialog.is_get && dialog.type == 'transfer'"
+												class="a-wechat-dialog-menu">
+												<a @click="transferGet(index)">领取</a>
+											</div>
+										</div>
+									</template>
+
+									<div class="wechat-dialog el-remove">
+										<div class="wechat-dialog-notice">
+											<span class="wechat-dialog-notice-has-bg">2019年5月20日 下午4:20</span>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-voice">
+											<span>1"</span><i></i>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-voice">
+											<i></i><span>1"</span><em></em>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-image"><img
+												src="static/app/images/dialog-demo1.jpeg"></div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text">
+											hellohelhellohellohellohellohellohellolohello</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans">
+											<div class="wechat-dialog-trans-content">
+												<i></i>
+												<div>
+													<span>¥1.00</span>
+													<font>转账给微截图</font>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信转账</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+										<div class="a-wechat-dialog-menu">
+											<a>领取</a>
+										</div>
+									</div>
+									<div class="wechat-dialog el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
+											<div class="wechat-dialog-trans-content">
+												<i></i>
+												<div>
+													<span>¥1.00</span>
+													<font>转账给微截图</font>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信转账</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans">
+											<div class="wechat-dialog-trans-content">
+												<i></i>
+												<div>
+													<span>¥1.00</span>
+													<font>转账给微截图</font>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信转账</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
+											<div class="wechat-dialog-trans-content">
+												<i></i>
+												<div>
+													<span>¥1.00</span>
+													<font>转账给微截图</font>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信转账</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+
+									<div class="wechat-dialog el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans">
+											<div class="wechat-dialog-trans-content wechat-dialog-redp-content">
+												<i></i>
+												<div>
+													<span>恭喜发财，大吉大利</span>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信红包</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+									<div class="wechat-dialog wechat-dialog-right el-remove">
+										<div class="wechat-dialog-face">
+											<img src="static/app/images/user-face.png" />
+										</div>
+										<div class="wechat-dialog-text wechat-dialog-trans wechat-dialog-trans-get">
+											<div class="wechat-dialog-trans-content wechat-dialog-redp-content">
+												<i></i>
+												<div>
+													<span>恭喜发财，大吉大利</span>
+												</div>
+											</div>
+											<div class="wechat-dialog-trans-bottom">
+												<span>微信红包</span>
+											</div>
+										</div>
+										<a class="a-wechat-dialog-del" href="javascript:;" title="删除对话">X</a>
+									</div>
+								</div>
+							</div>
+
+							<div class="phone-bottom">
+								<div class="phone-bottom-chat">
+									<div class="wechat-bottom">
+										<div
+											:class="['wechat-bottom-icon', 'wechat-voice-icon', {'wechat-voice-say-icon':setting.voice == 1}]">
+											语音</div>
+										<div :class="['wechat-input', {'wechat-input-say':setting.voice == 1}]">
+											<template v-if="setting.voice == 1">按住 说话</template>
+											<template v-else>输入框</template>
+										</div>
+										<div class="wechat-bottom-icon wechat-emoji-icon">表情</div>
+										<div class="wechat-bottom-icon wechat-more-icon">更多功能</div>
+									</div>
+								</div>
+								<div class="phone-bottom-bar">
+									<i>返回桌面</i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>
--- a/static/app/css/app.css
+++ b/static/app/css/app.css
--- a/static/app/css/jquery.range.css
+++ b/static/app/css/jquery.range.css
@ -0,0 +1,177 @@
+.slider-container {
+  width: 300px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+.slider-container .back-bar {
+  height: 10px;
+  position: relative;
+}
+.slider-container .back-bar .selected-bar {
+  position: absolute;
+  height: 100%;
+}
+.slider-container .back-bar .pointer {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  cursor: col-resize;
+  opacity: 1;
+  z-index: 2;
+}
+.slider-container .back-bar .pointer.last-active {
+  z-index: 3;
+}
+.slider-container .back-bar .pointer-label {
+  position: absolute;
+  top: -25px;
+  font-size: 8px;
+  background: white;
+  white-space: nowrap;
+  line-height: 1;
+}
+.slider-container .back-bar .focused {
+  z-index: 10;
+}
+.slider-container .clickable-dummy {
+  cursor: pointer;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.slider-container .scale {
+  top: 8px;
+  position: relative;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+.slider-container .scale span {
+  position: absolute;
+  height: 5px;
+  border-left: 1px solid #999;
+  font-size: 0;
+}
+.slider-container .scale ins {
+  font-size: 9px;
+  text-decoration: none;
+  position: absolute;
+  left: 0;
+  top: 5px;
+  color: #999;
+  line-height: 1;
+}
+.slider-container.slider-readonly .clickable-dummy,
+.slider-container.slider-readonly .pointer {
+  cursor: auto;
+}
+.theme-green .back-bar {
+  height: 5px;
+  border-radius: 2px;
+  background-color: #eeeeee;
+  background-color: #e7e7e7;
+  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.theme-green .back-bar .selected-bar {
+  border-radius: 2px;
+  background-color: #a1fad0;
+  background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
+  background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
+  background-image: -o-linear-gradient(top, #bdfade, #76fabc);
+  background-image: linear-gradient(to bottom, #bdfade, #76fabc);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
+}
+.theme-green .back-bar .pointer {
+  width: 14px;
+  height: 14px;
+  top: -5px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 10px;
+  border: 1px solid #AAA;
+  background-color: #e7e7e7;
+  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.theme-green .back-bar .pointer-label {
+  color: #999;
+}
+.theme-green .back-bar .focused {
+  color: #333;
+}
+.theme-green .scale span {
+  border-left: 1px solid #e5e5e5;
+}
+.theme-green .scale ins {
+  color: #999;
+}
+.theme-blue .back-bar {
+  height: 5px;
+  border-radius: 2px;
+  background-color: #eeeeee;
+  background-color: #e7e7e7;
+  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.theme-blue .back-bar .selected-bar {
+  border-radius: 2px;
+  background-color: #3385ff;
+  /*background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
+  background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
+  background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
+  background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);*/
+}
+.theme-blue .back-bar .pointer {
+  width: 20px;
+  height: 20px;
+  top: -8px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border-radius: 10px;
+  border: 1px solid #AAA;
+  background-color: #e7e7e7;
+  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
+}
+.theme-blue .back-bar .pointer-label {
+  color: #999;
+}
+.theme-blue .back-bar .focused {
+  color: #333;
+}
+.theme-blue .scale span {
+  border-left: 1px solid #e5e5e5;
+}
+.theme-blue .scale ins {
+  color: #999;
+}
--- a/static/app/css/wallet.css
+++ b/static/app/css/wallet.css
@ -0,0 +1,22 @@
+.wallet .wallet-list {
+	display: flex;
+	flex-direction: row;
+}
+.wallet .wallet-list .list-item {
+	flex: 1;
+	text-align: center;
+}
+.wallet .wallet-list .item-logo {
+	width: 60px;
+	height: 60px;
+}
+.wallet .wallet-list .item-name {
+	font-size: 14px;
+}
+.wallet .wallet-service {
+    margin: 15px 0;
+    font-size: 16px;
+}
+.wallet .wallet-service span {
+    color: red;
+}
--- a/static/app/css/zui.min.css
+++ b/static/app/css/zui.min.css
--- a/static/app/fonts/sf-pro-text_medium.woff2
+++ b/static/app/fonts/sf-pro-text_medium.woff2
--- a/static/app/fonts/sf-pro-text_regular.woff2
+++ b/static/app/fonts/sf-pro-text_regular.woff2
--- a/static/app/fonts/sf-pro-text_semibold.woff2
+++ b/static/app/fonts/sf-pro-text_semibold.woff2
--- a/static/app/fonts/zenicon.ttf
+++ b/static/app/fonts/zenicon.ttf
--- a/static/app/fonts/zenicon.woff
+++ b/static/app/fonts/zenicon.woff
--- a/static/app/images/bar/ios-battery-charge-dark.png
+++ b/static/app/images/bar/ios-battery-charge-dark.png
--- a/static/app/images/bar/ios-battery-dark.png
+++ b/static/app/images/bar/ios-battery-dark.png
--- a/static/app/images/bar/ios-single-1-dark.png
+++ b/static/app/images/bar/ios-single-1-dark.png
--- a/static/app/images/bar/ios-single-2-dark.png
+++ b/static/app/images/bar/ios-single-2-dark.png
--- a/static/app/images/bar/ios-single-3-dark.png
+++ b/static/app/images/bar/ios-single-3-dark.png
--- a/static/app/images/bar/ios-single-4-dark.png
+++ b/static/app/images/bar/ios-single-4-dark.png
--- a/static/app/images/bar/ios-wifi-1-dark.png
+++ b/static/app/images/bar/ios-wifi-1-dark.png
--- a/static/app/images/bar/ios-wifi-2-dark.png
+++ b/static/app/images/bar/ios-wifi-2-dark.png
--- a/static/app/images/bar/ios-wifi-3-dark.png
+++ b/static/app/images/bar/ios-wifi-3-dark.png
--- a/static/app/images/dialog-demo1.jpeg
+++ b/static/app/images/dialog-demo1.jpeg
--- a/static/app/images/icon-alipay-chat.png
+++ b/static/app/images/icon-alipay-chat.png
--- a/static/app/images/icon-wechat.png
+++ b/static/app/images/icon-wechat.png
--- a/static/app/images/logo.png
+++ b/static/app/images/logo.png
--- a/static/app/images/phone-bottom-bar.png
+++ b/static/app/images/phone-bottom-bar.png
--- a/static/app/images/user-checked.png
+++ b/static/app/images/user-checked.png
--- a/static/app/images/user-face.png
+++ b/static/app/images/user-face.png
--- a/static/app/images/wechat-bottom-icon1.png
+++ b/static/app/images/wechat-bottom-icon1.png
--- a/static/app/images/wechat-bottom-icon2.png
+++ b/static/app/images/wechat-bottom-icon2.png
--- a/static/app/images/wechat-bottom-icon3.png
+++ b/static/app/images/wechat-bottom-icon3.png
--- a/static/app/images/wechat-bottom-icon4.png
+++ b/static/app/images/wechat-bottom-icon4.png
--- a/static/app/images/wechat-nav-back.png
+++ b/static/app/images/wechat-nav-back.png
--- a/static/app/images/wechat-nav-right.png
+++ b/static/app/images/wechat-nav-right.png
--- a/static/app/images/wechat-redp-icon1.png
+++ b/static/app/images/wechat-redp-icon1.png
--- a/static/app/images/wechat-trans-earphone.png
+++ b/static/app/images/wechat-trans-earphone.png
--- a/static/app/images/wechat-trans-icon1.png
+++ b/static/app/images/wechat-trans-icon1.png
--- a/static/app/images/wechat-trans-icon2.png
+++ b/static/app/images/wechat-trans-icon2.png
--- a/static/app/images/wechat-trans-icon3.png
+++ b/static/app/images/wechat-trans-icon3.png
--- a/static/app/images/wechat-trans-icon4.png
+++ b/static/app/images/wechat-trans-icon4.png
--- a/static/app/images/wechat-voice-icon1.png
+++ b/static/app/images/wechat-voice-icon1.png
--- a/static/app/images/wechat-voice-icon2.png
+++ b/static/app/images/wechat-voice-icon2.png
--- a/static/app/js/chat.bundle.js
+++ b/static/app/js/chat.bundle.js
--- a/static/app/js/common.bundle.js
+++ b/static/app/js/common.bundle.js