追风少年
2 years ago
commit
952cf24d32
@ -0,0 +1,14 @@ |
|||||||
|
# 微信对话生成器 |
||||||
|
|
||||||
|
## 功能介绍 |
||||||
|
``` |
||||||
|
微信对话生成器，是一款在线微信聊天对话制作的工具，它可以设置苹果或安卓状态栏，包括手机电量、手机时间等，还可以设置不同用户的角色，然后发送文字、语音、红包、转账等多种好玩的功能，可谓是一款娱乐制作神器 |
||||||
|
``` |
||||||
|
|
||||||
|
## 演示图例 |
||||||
|
|
||||||
|
|
||||||
|
## 特别声明 |
||||||
|
``` |
||||||
|
此软件只用于娱乐使用，切勿用于非法途径，由此产生任何纠纷由使用者本人自己承担，禁止用于各种违法犯罪行为！！ |
||||||
|
``` |
||||||
|
After Width: | Height: | Size: 8.4 KiB |
@ -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" /> |
||||||
|
{{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"> |
||||||
|
|
||||||
|
<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> |
||||||
File diff suppressed because it is too large
Load Diff
@ -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; |
||||||
|
} |
||||||
@ -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; |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
|
After Width: | Height: | Size: 656 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 350 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 796 B |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue