-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
305 lines (282 loc) · 15.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE HTML>
<html lang="zh-CN" xml:lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title> X夏小天 的家庭群</title>
<meta name="description" content="">
<script>!function(n){var e=n.document,t=e.documentElement,i=720,o=i/32,a="orientationchange"in n?"orientationchange":"resize",d=function(){var n=t.clientWidth||320,n=n>720?720:320>n?320:n;t.style.fontSize=n/o+"px"};e.addEventListener&&n.addEventListener(a,d,!1),d()}(window);</script>
<link rel="stylesheet" type="text/css" href="assets/css/im-group.css"/>
</head>
<body>
<div class="chat">
<div class="box_bd scroll-wrapper">
<canvas id="emoji" class="emoji-canvas" width="720" height="1500"></canvas>
<div class="scroll-content J_scrollContent">
<div class="chatContent" id="chatContent">
</div>
</div>
<div class="train J_train">
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/train.gif" alt="火车">
</div>
</div>
<div class="box_ft close">
<div class="input-wrapper">
<div>电话</div>
<div>键盘</div>
<div>按住说话</div>
<div class="J_noticeInput">+</div>
<!--<p class="J_noticeInput">点击提问</p>-->
<!--<img src="http://c1.mifile.cn/f/i/hd/2016051101/input-down.png" alt="">-->
</div>
<div class="choice-wrapper J_choiceWrapper">
<ul class="main-choice J_choice J_mainChoice" data-choice="0">
<li class="J_liNext li-3" data-target-dialog="1" data-target-choice="1_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','尺寸多大']);">尺寸多大</a>
</li>
<li class="J_liNext li-3" data-target-dialog="2" data-target-choice="2_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','存储多大']);">存储多大</a>
</li>
<li class="J_liNext li-3" data-target-dialog="3">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','电量多大']);">电量多大</a>
</li>
<br>
<li class="J_liNext li-3" data-target-dialog="4" data-target-choice="4">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','配置价格']);">配置价格</a>
</li>
<li class="J_liNext li-3" data-target-dialog="5">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','问颜值']);">问颜值</a>
</li>
<li class="J_liNext li-3" data-target-dialog="6" data-target-choice="4">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','怎么买']);">怎么买</a>
</li>
<br>
<li class="J_liNext li-3" data-target-dialog="7" data-target-choice="7_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','我是彩蛋']);">我是彩蛋</a>
</li>
<li class="J_liNext li-3" data-target-dialog="8">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','求红包']);">求红包</a>
</li>
<li class="J_liNext J_finishDialog li-3" data-target-dialog="9" data-continue="false">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','不聊了']);">不聊了</a>
</li>
</ul>
<ul class="J_choice" data-choice="1_1">
<li class="J_liNext li-2 li-h" data-target-dialog="1_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','屏幕多大']);">屏幕多大</a>
</li>
<li class="J_liNext li-2 li-h" data-target-dialog="1_2" data-target-choice="1_1_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','手机大小']);">手机大小</a>
</li>
</ul>
<ul class="J_choice" data-choice="1_1_1">
<li class="J_liNext li-2 li-h" data-target-dialog="1_2_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','看对比']);">看对比</a>
</li>
<li class="J_liNext li-2 li-h" data-target-dialog="1_2_2">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','看试用']);">看试用</a>
</li>
</ul>
<ul class="J_choice" data-choice="2_1">
<li class="J_liNext li-3 no-border bg-trsp" data-target-dialog="2_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','奥斯卡']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-2-oscars.jpg" alt="30部奥斯卡最佳影片">
<p>30部奥斯卡最佳影片</p>
</a>
</li>
<li class="J_liNext li-3 no-border bg-trsp" data-target-dialog="2_2">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','美剧']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-2-drama.jpg" alt="80集美剧">
<p>80集美剧</p>
</a>
</li>
<li class="J_liNext li-3 no-border bg-trsp" data-target-dialog="2_3">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','海贼王']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-2-onepiece.jpg" alt="700番海贼王">
<p>700番海贼王</p>
</a>
</li>
</ul>
<ul class="sup-choice J_choice" data-choice="7_1">
<li class="li-3 no-border bg-trsp J_fpVideo" data-src="http://v.qq.com/iframe/player.html?vid=a0197hj5a1m&tiny=0&auto=0">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','麻花第一集']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-7-1.jpg" alt="第一集">
<p>第一集</p>
</a>
</li>
<li class="li-3 no-border bg-trsp J_fpVideo" data-src="http://v.qq.com/iframe/player.html?vid=p019889oxs0&tiny=0&auto=0">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','麻花第二集']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-7-2.jpg" alt="第二集">
<p>第二集</p>
</a>
</li>
<li class="li-3 no-border bg-trsp J_fpVideo" data-src="http://v.qq.com/iframe/player.html?vid=c01985i2nk0&tiny=0&auto=0">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','麻花第三集']);">
<img src="http://c1.mifile.cn/f/i/hd/2016051101/c-7-3.jpg" alt="第三集">
<p>第三集</p>
</a>
</li>
<ul class="ul-sub">
<li class="J_liNext li-f-2 no-br" data-target-dialog="7_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','看完了']);">看完了</a>
</li>
<li class="J_liNext li-f-2 no-br" data-target-dialog="7_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','不看了']);">不看了</a>
</li>
</ul>
</ul>
<ul class="main-choice reg-choice J_choice J_mainChoice" data-choice="4">
<li class="J_liNext li-3" data-target-dialog="1" data-target-choice="1_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','尺寸多大']);">尺寸多大</a>
</li>
<li class="J_liNext li-3" data-target-dialog="2" data-target-choice="2_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','存储多大']);">存储多大</a>
</li>
<li class="J_liNext li-3" data-target-dialog="3">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','电量多大']);">电量多大</a>
</li>
<br>
<li class="J_liNext li-3" data-target-dialog="4" data-target-choice="4">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','配置价格']);">配置价格</a>
</li>
<li class="J_liNext li-3" data-target-dialog="5">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','问颜值']);">问颜值</a>
</li>
<li class="J_liNext li-3" data-target-dialog="6" data-target-choice="4">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','怎么买']);">怎么买</a>
</li>
<br>
<li class="J_liNext li-3" data-target-dialog="7" data-target-choice="7_1">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','我是彩蛋']);">我是彩蛋</a>
</li>
<li class="J_liNext li-3" data-target-dialog="8">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','求红包']);">求红包</a>
</li>
<li class="J_liNext J_finishDialog li-3" data-target-dialog="9" data-continue="false">
<a href="javascript:void(0);" onclick="_hmt.push(['_trackEvent','mimaxH5','不聊了']);">不聊了</a>
</li>
<br>
<!-- 如果用户还没预约，显示立即预约 -->
<li class="li-f-1 no-br highlight-btn" registered="false">
<a href="http://s1.mi.com/m/ghd/2016/0503maxyy/index.html" target="_blank" onclick="_hmt.push(['_trackEvent','mimaxH5','立即预约']);">立即预约</a>
</li>
</ul>
</div>
</div>
</div>
<div class="full-pics" id="J_fullPics">
<div class="pic"></div>
</div>
<audio id="message-push-music" preload="preload">
<source src="http://c1.mifile.cn/f/i/hd/2016051101/message-push.mp3" type="audio/mp3">
</audio>
<audio id="train-run-music" preload="none">
<source src="http://c1.mifile.cn/f/i/hd/2016051101/train-run.mp3" type="audio/mp3">
</audio>
<div style="display: none;" class="J_map">
<div class="map-wrapper J_mapWrapper">
<div class="map">
<div class="map-pointer"></div>
</div>
<p>驾驶总时长：<span class="J_tourtime">0</span> 小时</p>
</div>
</div>
<div class="fullpage-overlay video-overlay J_videoOverlay" width="1" height="1">
<div class="J_videoWrapper"></div>
<span class="tips-close J_videoClose"></span>
</div>
<div class="fullpage-overlay gallery-overlay J_galleryOverlay" data-gallery="1">
<div class="xm-slide J_gallerySlide">
<div class="xm-slide-scroll">
<figure>
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/gallery-02.jpg">
</figure>
<figure>
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/gallery-01.jpg">
</figure>
<figure>
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/gallery-03.jpg">
</figure>
<figure>
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/gallery-04.jpg">
</figure>
<figure>
<img data-origin="http://c1.mifile.cn/f/i/hd/2016051101/gallery-07.jpg">
</figure>
</div>
</div>
<span class="tips-close J_galleryClose"></span>
</div>
<script type="text/javascript">
var me = {
id: 'me',
name: '' || '小米的朋友',
avatar: '' || 'http://c1.mifile.cn/f/i/hd/2016051101/a-default.png',
userId: '',
registered: true
};
</script>
<script id="messageTpl" type="text/x-dot-template">
{{~it :message:index}}
<div class="clearfix">
{{? message.type == 'system'}}
<div class="message">
<p class="message_system">
<span class="content">{{=message.content}}</span>
</p>
</div>
{{??}}
<div class="message {{? message.author.id == 'me'}}me{{??}}others{{?}}">
<div class="avatar" data-author-id="{{=message.author.id}}">
<img src="{{=message.author.avatar}}" alt="{{=message.author.name}}">
</div>
<div class="content">
<p class="author_name">{{=message.author.name}}</p>
{{? message.type == 'plain'}}
<div class="bubble {{? message.author.id == 'me'}} bubble_primary right{{??}} bubble_default left{{?}}">
<div class="bubble_cont">
<div class="{{=message.type}}">
<pre>{{=message.content}}</pre>
</div>
</div>
</div>
{{?? message.type == 'picture'}}
<div class="bubble {{? message.author.id == 'me'}} right{{??}} left{{?}} bubble_image">
<div class="bubble_cont">
<div class="{{=message.type}}">
{{? message.extra == 'gallery'}}
<img class="J_galleryShow" data-gallery="1" src="{{=message.content}}" />
{{??}}
<img class="J_img" src="{{=message.content}}" />
{{?}}
</div>
</div>
</div>
{{?? message.type == 'video'}}
<div class="bubble {{? message.author.id == 'me'}} right{{??}} left{{?}} bubble_image">
<div class="bubble_cont">
<div class="{{=message.type}}">
<img class="J_fpVideo" src="{{=message.content.poster}}" data-src="{{=message.content.video}}" alt="">
</div>
</div>
</div>
{{?? message.type == 'animation'}}
<div class="bubble {{? message.author.id == 'me'}} right{{??}} left{{?}} bubble_image">
<div class="bubble_cont">
<div class="{{=message.type}}">
{{=message.content}}
</div>
</div>
</div>
{{?}}
</div>
</div>
{{?}}
</div>
{{~}}
</script>
<script src="assets/js/lib.js"></script>
<script src="assets/js/slide.js"></script>
<script src="assets/js/im-group.js"></script>
</body>
</html>