-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathanli.html
executable file
·419 lines (412 loc) · 28 KB
/
anli.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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/jygw02.css">
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="al_top">
<div class="al_top_con">
<div class="al_top_left" onClick="location.href='index.html'"><img src="img/logo_blue.png"></div>
<p class="al_top_right">案例</p>
</div>
</div>
<div class="al_detail">
<div class="al_detail_con">
<ul class="piece03_case_list list_group01">
<li>
<div class="piece03_case_list_top">
<img src="img/img1_1.jpg">
</div>
<p class="piece03_case_list_title">易充无线官网设计</p>
<div class="piece03_case_list_detail"><p>定位对产品成败意义重大。然而位于产品另一端的用户，对自己的定位却常常被忽略。很多用户并没有考虑过“我是什么样的人？我有什么样的需求”，这时候便需要设计师引导用户认识自己。</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img1_1.jpg</p>
<p class="alxq_sj01_title">易充无线官网设计</p>
<p class="alxq_sj01_detail">无线充电正蓄势待发，你准备好了吗？</p>
<p class="alxq_sj02_title">用户在选择产品，产品也在选择用户</p>
<p class="alxq_sj02_detail">定位对产品成败意义重大。然而位于产品另一端的用户，对自己的定位却常常被忽略。很多用户并没有考虑过“我是什么样的人？我有什么样的需求”，这时候便需要设计师引导用户认识自己。我们希望用户在使用好奇心日报的过程中，在消费内容的同时，能够帮助他们定位自己，从而爱上这个为他设计的产品。</p>
<p class="alxq_sj02_img">img1_2.jpg</p>
<p class="alxq_sj03_img">img1_3.jpg</p>
<p class="alxq_sj03_title">简洁并带有节奏感的排版和样式</p>
<p class="alxq_sj03_detail">除了版式，我们认为效率同样是内容传递有效性的一个必要因素。图片流的形式便于读者快速发现内容。首页的简化同时带来后台内容管理系统的精简，帮助编辑更高效地组织和运营内容。同时，简单的首页结构也提升了页面开发和维护的效率</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img2_1.jpg">
</div>
<p class="piece03_case_list_title">Vivian—分期美容App</p>
<div class="piece03_case_list_detail"><p>Vivian 是一个专注于大学生及年轻女性整形美容咨询特卖的分期平台。
根据客户需求，Vivian除了具备常规的美容整形产品的展示之外,还设置了论坛发帖功能以供 Vivian </p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img2_1.jpg</p>
<p class="alxq_sj01_title">Vivian—分期美容App</p>
<p class="alxq_sj01_detail">更贴心，更专业</p>
<p class="alxq_sj02_title">iOS+Android双平台覆盖</p>
<p class="alxq_sj02_detail">Vivian 是一个专注于大学生及年轻女性整形美容咨询特卖的分期平台。
根据客户需求，Vivian除了具备常规的美容整形产品的展示之外,还设置了论坛发帖功能以供 Vivian 用户进行互动交流经验,将各个地区的医生资源放置于平台之上,让用 户就近选择自己需要的项目来进行预约,同时系统设置三级代理模式,更大的增 加订单的成单率。 </p>
<p class="alxq_sj02_img">img2_2.jpg</p>
<p class="alxq_sj03_img">img2_3.jpg</p>
<p class="alxq_sj03_title">清晰直观，从理性到感性</p>
<p class="alxq_sj03_detail">我们将Vivian独特的品牌气质带入到Vivian的app中。除了整个风格更加年轻化和偏女性化以外，品牌红色也进一步传达出来。
同时整个界面交互，最大程度优化用户使用体验，达到清晰直观、简洁易用。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img3_1.jpg">
</div>
<p class="piece03_case_list_title">去哪耍—大学生旅行微信平台</p>
<div class="piece03_case_list_detail"><p>去哪耍原平台是以微盟平台为技术框架每年会员维 护费的方式进行搭建的，不能够进行个性化功能的定制,特别是去哪耍自带的旅 游属性需要填入身份</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img3_1.jpg</p>
<p class="alxq_sj01_title">去哪耍—大学生旅行微信平台</p>
<p class="alxq_sj01_detail">旅行特价，梦想无价</p>
<p class="alxq_sj02_title">个性化的功能定制</p>
<p class="alxq_sj02_detail">去哪耍原平台是以微盟平台为技术框架每年会员维 护费的方式进行搭建的，不能够进行个性化功能的定制,特别是去哪耍自带的旅 游属性需要填入身份证号码等信息,微盟是商城属性不能完成身份证登记这一步 骤,因此我们为客户重新定制了符合去哪耍业务的商城。</p>
<p class="alxq_sj02_img">img3_2.jpg</p>
<p class="alxq_sj03_img">img3_3.jpg</p>
<p class="alxq_sj03_title">年轻化的设计，搭配官网，强化去哪耍品牌</p>
<p class="alxq_sj03_detail">为大学生、青年白领等青年群体提供纯粹、经济、有意义的旅行体验。这里，拒绝被坑，放心自由；
这里，青年专属，放荡不羁；这里，旅行特价，梦想无价。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img4_1.jpg">
</div>
<p class="piece03_case_list_title">青掌柜UI重设计</p>
<div class="piece03_case_list_detail"><p>这次UI迭代，我们提炼了青掌柜品牌标志性的商务蓝，让我们在为青掌柜移动客户端做全新视觉设计的同时，更加强调在其品</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img4_1.jpg</p>
<p class="alxq_sj01_title">青掌柜UI重设计</p>
<p class="alxq_sj01_detail">更贴心，更专业</p>
<p class="alxq_sj02_title">提炼品牌最有价值和特征的视觉元素</p>
<p class="alxq_sj02_detail">这次UI迭代，我们提炼了青掌柜品牌标志性的商务蓝，让我们在为青掌柜移动客户端做全新视觉设计的同时，更加强调在其品牌形象系统的基础上进一步突出界面中统一的品牌元素，提高品牌信赖感。</p>
<p class="alxq_sj02_img">img4_2.jpg</p>
<p class="alxq_sj03_img">img4_3.jpg</p>
<p class="alxq_sj03_title">图表化数据，更加直观</p>
<p class="alxq_sj03_detail">由于青掌柜的业务是为企业提供财务技术支持的特殊性，需要大量数据的展示。
可视化的展示有了很大必要。我们结合了material Design的设计语言，为青掌柜定制了数据展示，让用户更加快捷简便的管理和查看公司的财务数据。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img5_1.jpg">
</div>
<p class="piece03_case_list_title">小工蜂——社区维修助手</p>
<div class="piece03_case_list_detail"><p>小工蜂是一个让你足不出户就可以完成家庭设备维修的社区维修平台。
包含了网站，手机客户端和微信平台。用户或企业通过这三端进行维修下单</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img5_1.jpg</p>
<p class="alxq_sj01_title">小工蜂——社区维修助手</p>
<p class="alxq_sj01_detail">更贴心，更专业</p>
<p class="alxq_sj02_title">从维修师傅到用户，从企业到个人</p>
<p class="alxq_sj02_detail">小工蜂是一个让你足不出户就可以完成家庭设备维修的社区维修平台。
包含了网站，手机客户端和微信平台。用户或企业通过这三端进行维修下单，后台可自动向师傅推送订单，维修师傅从手机客户端接收订单，开始服务。整个流程通过线上完成，将传统服务转变为更高效率的互联网服务。</p>
<p class="alxq_sj02_img">img5_2.jpg</p>
<p class="alxq_sj03_img">img5_3.jpg</p>
<p class="alxq_sj03_title">以用户为中心</p>
<p class="alxq_sj03_detail">我们遵循简介高效的原则，打造一个全新以用户为中心的社区维修平台。
用户渴望拥有对预期的控制，用户能够在平台上完整的查看到维修状态和维修进度。
整个流程完全透明化，同时设计团队也最大化控制页面的数量和页面元素的干扰。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img6_1.jpg">
</div>
<p class="piece03_case_list_title">酱游—青年旅游社交平台App</p>
<div class="piece03_case_list_detail"><p>不知道这里有什么好玩的，好吃的？找找附近的当地达人。马上组个局，开始high。
这就是酱游的所营造的社交旅游圈子。</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img6_1.jpg</p>
<p class="alxq_sj01_title">酱游—青年旅游社交平台App</p>
<p class="alxq_sj01_detail">走出去，与世界为伍</p>
<p class="alxq_sj02_title">不止是旅游+社交</p>
<p class="alxq_sj02_detail">不知道这里有什么好玩的，好吃的？找找附近的当地达人。马上组个局，开始high。
这就是酱游的所营造的社交旅游圈子。
完善的社交系统更好的服务于旅行，特色的标签系统，更能发现你的灵魂旅友。</p>
<p class="alxq_sj02_img">img6_2.jpg</p>
<p class="alxq_sj03_img">img6_3.jpg</p>
<p class="alxq_sj03_title">感受自然，感受世界</p>
<p class="alxq_sj03_detail">配色沿用大自然的色彩绿，整个设计风格贴近户外贴近自然，酱游的宗旨就是让年轻人走出去，感受世界。
同时我们设计了大量个性化的标签，强化了每一个用户的独特性。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img7_1.jpg">
</div>
<p class="piece03_case_list_title">空了——个人技能出租平台</p>
<div class="piece03_case_list_detail"><p>根据客户产品的定位，选用粉红为基础主色，达到吸引更多女性用户的目的。用较细的线条勾勒主要图标，展现时尚和柔美。</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img7_1.jpg</p>
<p class="alxq_sj01_title">空了——个人技能出租平台</p>
<p class="alxq_sj01_detail">空了上空了，精彩的不得了</p>
<p class="alxq_sj02_title">一种生活方式</p>
<p class="alxq_sj02_detail">根据客户产品的定位，选用粉红为基础主色，达到吸引更多女性用户的目的。用较细的线条勾勒主要图标，展现时尚和柔美。
Android客户端和微信平台齐头并进，独特视角的交友模式，开启全新的社交体验</p>
<p class="alxq_sj02_img">img7_2.jpg</p>
<p class="alxq_sj03_img">img7_3.jpg</p>
<p class="alxq_sj03_title">大学生时间的出租平台</p>
<p class="alxq_sj03_detail">利用自身技能，进行时间售卖。在收获金钱的同时，结交友谊。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img8_1.jpg">
</div>
<p class="piece03_case_list_title">怪蜀黍</p>
<div class="piece03_case_list_detail"><p>客户希望推广他们的外卖平台，想要策划一次活动。
我们为客户设计了网红头条的活动H5，用户通过添加照片的方式，系统会自动生成一条类似新闻的恶搞头条，通过分享的方式提高怪蜀黍的曝光。</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img8_1.jpg</p>
<p class="alxq_sj01_title">怪蜀黍</p>
<p class="alxq_sj01_detail">川味特色零食微信平台</p>
<p class="alxq_sj02_title">头条新闻</p>
<p class="alxq_sj02_detail">客户希望推广他们的外卖平台，想要策划一次活动。
我们为客户设计了网红头条的活动H5，用户通过添加照片的方式，系统会自动生成一条类似新闻的恶搞头条，通过分享的方式提高怪蜀黍的曝光。</p>
<p class="alxq_sj02_img">img8_2.jpg</p>
<p class="alxq_sj03_img">img8_3.jpg</p>
<p class="alxq_sj03_title">开启零食鲜时代</p>
<p class="alxq_sj03_detail">怪蜀黍沿用传统工艺，结合现代外卖，带你吃遍川味特色美食。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img9_1.jpg">
</div>
<p class="piece03_case_list_title">聚材商城——在线建材交易平台</p>
<div class="piece03_case_list_detail"><p>聚材商城建设于2015年4月，聚材寓意为三层，各类建材资源的整合聚集、人才团队的聚集、财富的聚集，口号为“免费帮客户找最便宜的建材”</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img9_1.jpg</p>
<p class="alxq_sj01_title">聚材商城——在线建材交易平台</p>
<p class="alxq_sj01_detail">带你找到最便宜的建材</p>
<p class="alxq_sj02_title">聚材简介</p>
<p class="alxq_sj02_detail">聚材商城建设于2015年4月，聚材寓意为三层，各类建材资源的整合聚集、人才团队的聚集、财富的聚集，口号为“免费帮客户找最便宜的建材”，企业发展战略为一体化（区域属性，一定距离范围内产品价格较为划算）、在线化（即在线商城，交易无需人工干预，网上下单、网上结算）、全国化（立足海南、辐射全国），目标打造中国最大的综合性建材互联网电商平台。</p>
<p class="alxq_sj02_img">img9_2.jpg</p>
<p class="alxq_sj03_img">img9_3.jpg</p>
<p class="alxq_sj03_title">聚材理念</p>
<p class="alxq_sj03_detail">高效先进取代低效落后是必然规律，电商通过降低成本和提高效率来提供价值，“免费帮客户找最便宜的建材”是我们的口号亦是我们的经营理念，我们与海南最大的各种建材供应商合作，从采销、仓储、物流配送、客服等环节将运营成本降至最低，竭诚为客户服务，让客户享受到最大的优惠，消费者满意是我们存在的价值。</p>
</div>
</li>
</ul>
<ul class="piece03_case_list list_group02">
<li>
<div class="piece03_case_list_top">
<img src="img/img10_1.jpg">
</div>
<p class="piece03_case_list_title">宿达——校园快递最后一公里</p>
<div class="piece03_case_list_detail"><p>各大快递公司在各大高校因为公司建设的种种原因，只将快递配送至指定地点，无法将快递送至学生和老师宿舍，并且取件有时间的限制，超过时间快</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img10_1.jpg</p>
<p class="alxq_sj01_title">宿达——校园快递最后一公里</p>
<p class="alxq_sj01_detail">您身边的快递代取管家</p>
<p class="alxq_sj02_title">校园物流最后一公里解决方案</p>
<p class="alxq_sj02_detail">各大快递公司在各大高校因为公司建设的种种原因，只将快递配送至指定地点，无法将快递送至学生和老师宿舍，并且取件有时间的限制，超过时间快件就会被退回。本项目正是瞄准快递公司的服务欠缺，对现有的快递服务进行一个补充，使快递更加快捷、方便地送达师生手中。</p>
<p class="alxq_sj02_img">img10_2.jpg</p>
<p class="alxq_sj03_img">img10_3.jpg</p>
<p class="alxq_sj03_title">流程简洁、服务贴心</p>
<p class="alxq_sj03_detail">老师或学生只需要在收到快递公司发的收发快递的短信之后将短信内容复制，在我平台在线下单，即可在家静静等待快递送货上门。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img11_1.jpg">
</div>
<p class="piece03_case_list_title">百花鲜</p>
<div class="piece03_case_list_detail"><p>标志设计以「百花鲜」文字为基础，圆形图形为辅，加入了流体，气泡等元素，进行了艺术融合。不仅与企业的产品相契合，而且体现了企业内涵和定位</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img11_1.jpg</p>
<p class="alxq_sj01_title">百花鲜</p>
<p class="alxq_sj01_detail">鲜榨时尚饮品</p>
<p class="alxq_sj02_title">品牌气质</p>
<p class="alxq_sj02_detail">标志设计以「百花鲜」文字为基础，圆形图形为辅，加入了流体，气泡等元素，进行了艺术融合。不仅与企业的产品相契合，而且体现了企业内涵和定位</p>
<p class="alxq_sj02_img">img11_2.jpg</p>
<p class="alxq_sj03_img">img11_3.jpg</p>
<p class="alxq_sj03_title">商品折页</p>
<p class="alxq_sj03_detail">结合实物照片加以抽象化的设计，升华了商品的质感，赋予了商品更多的文艺气息，让客户流连忘返。</p>
</div>
</li>
<li>
<div class="piece03_case_list_top">
<img src="img/img12_1.jpg">
</div>
<p class="piece03_case_list_title">智联万居</p>
<div class="piece03_case_list_detail"><p>智联万居是一家具有软硬件研发能力的只能家居整体方案集成定制商，通过（AI-sohps）系统提供全宅整体的智能化解决方案，</p></div>
<div class="alxq_sj" style="display:none;">
<p class="alxq_sj01_img">img12_1.jpg</p>
<p class="alxq_sj01_title">智联万居</p>
<p class="alxq_sj01_detail">住宅整体智能化解决方案</p>
<p class="alxq_sj02_title">智联万居简介</p>
<p class="alxq_sj02_detail">智联万居是一家具有软硬件研发能力的只能家居整体方案集成定制商，通过（AI-sohps）系统提供全宅整体的智能化解决方案，智联万居正在通过科技创新重新塑造人类的生活和工作方式。</p>
<p class="alxq_sj02_img">img12_2.jpg</p>
<p class="alxq_sj03_img">img12_3.jpg</p>
<p class="alxq_sj03_title">活动介绍</p>
<p class="alxq_sj03_detail">为了更好的服务客户，结合线下活动推出智联万居线上预约抽奖H5活动，页面采用了和智联万居logo相贴合的红色为主色调，彰显喜庆同时更能吸引用户的目光，内容的获取通过单选或多选的方式提升了用户体验，同时采用转盘形式的抽奖页面用户交互更加流畅。</p>
</div>
</li>
</ul>
<ul class="al_detail_con_page">
<li data-num="01" class="al_detail_page_active">01</li>
<li data-num="02">02</li>
</ul>
</div>
</div>
<!----弹出---->
<div class="piece03_tc_bg">
<ul class="piece03_tc_con">
<li class="piece03_tc_xq01">
<div class="piece03_tc_imgBox">
<img src="img/ycwx_tcxq01.png">
</div>
<div class="piece03_tc_xq01_txt">
<h2>易充无线官网设计</h2>
<p>无线充电正蓄势待发，你准备好了吗？</p>
</div>
</li>
<li class="piece03_tc_xq02">
<div class="piece03_tc_xq02_txt">
<h4>用户在选择产品，产品也在选择用户</h4>
<p>定位对产品成败意义重大。然而位于产品另一端的用户，对自己的定位却常常被忽略。很多用户并没有考虑过“我是什么样的人？我有什么样的需求”，这时候便需要设计师引导用户认识自己。我们希望用户在使用好奇心日报的过程中，在消费内容的同时，能够帮助他们定位自己，从而爱上这个为他设计的产品。</p>
</div>
<div class="piece03_tc_imgBox">
<img src="img/ycwx_tcxq02.png">
</div>
</li>
<li class="piece03_tc_xq03">
<div class="piece03_tc_imgBox">
<img src="img/ycwx_tcxq03.png">
</div>
<div class="piece03_tc_xq03_txt">
<h4>简洁并带有节奏感的排版和样式</h4>
<p>除了版式，我们认为效率同样是内容传递有效性的一个必要因素。图片流的形式便于读者快速发现内容。首页的简化同时带来后台内容管理系统的精简，帮助编辑更高效地组织和运营内容。同时，简单的首页结构也提升了页面开发和维护的效率</p>
</div>
</li>
</ul>
</div>
<div class="zw"></div>
<div class="piece05">
<div class="piece05_con">
<div class="piece03_con_top">
<p class="piece03_con_top_title">CONTACT / 联系我们<span></span></p>
</div>
<div class="piece05_con_detail">
<div class="piece05_detail_left">
<div class="piece05_detail_left_code">
<p>WECHAT</p>
<img src="img/img_code.png">
</div>
</div>
<div class="piece05_detail_right">
<ul>
<li>
<p class="ourinfor_title">LOCATION</p>
<p class="ourinfor_detail">成都市锦江区锦华路二段36号康郡29栋2单元202</p>
</li>
<li>
<p class="ourinfor_title">E-MAIL</p>
<p class="ourinfor_detail">[email protected]</p>
</li>
<li>
<p class="ourinfor_title">PHONE</p>
<p class="ourinfor_detail">(+86) 136-8817-8114</p>
</li>
<li>
<p class="ourinfor_title">QQ</p>
<p class="ourinfor_detail">707016499</p>
</li>
</ul>
</div>
</div>
<p class="foot_record">成都酱游网络科技有限公司版权所有©2016 酱游科技 蜀ICP 备 15020111 号</p>
</div>
</div>
<script>
//浏览器可视区域
var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight;
//多行文本溢出省略
$(".piece03_case_list_detail").each(function(i){
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
/**一般是2分法截断，但是考虑到文本里分为三种：中文字、英文字、字符；一般来说，中文字=2英文字=2字符。因此最坏情况可能前面一半字符全部是英文，
后面一半文本全部是中文，这样二分法就会截取到25%的高度，因此考虑到最坏情况，需要3倍才截断**/
while($p.outerHeight()>=divH*3){
$p.text($p.text().substring(0,$p.text().length/2));
}
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
//页面所有li宽度
var li_num = $(".al_detail_con_page li").length;
$(".al_detail_con_page").css("width",40*li_num+"px");
$(".al_detail_con_page li").click(function(){
var num=$(this).data("num");
$(".al_detail_con_page li").removeClass("al_detail_page_active");
$(this).addClass("al_detail_page_active");
$("body").scrollTop(0);
$(".piece03_case_list li").find(".piece03_case_list_top img").removeClass("img_chsmall");
if(num==01){
$(".piece03_case_list").css("display","none");
$(".list_group01").css("display","block");
}
else if(num==02){
$(".piece03_case_list").css("display","none");
$(".list_group02").css("display","block");
}
})
//点击弹窗
$(".piece03_tc_con").css("margin-top",0.5*windowHeight-246+"px");
$(".piece03_case_list li").click(function(){
$(".piece03_tc_bg").css("display","block");
$("html").css("overflow","hidden");
$(document.body).css("border-right","20px solid transparent");
var alxq_sj01_img = $(this).find(".alxq_sj01_img").text();
var alxq_sj01_title = $(this).find(".alxq_sj01_title").text();
var alxq_sj01_detail = $(this).find(".alxq_sj01_detail").text();
var alxq_sj02_title = $(this).find(".alxq_sj02_title").text();
var alxq_sj02_detail = $(this).find(".alxq_sj02_detail").text();
var alxq_sj02_img = $(this).find(".alxq_sj02_img").text();
var alxq_sj03_img = $(this).find(".alxq_sj03_img").text();
var alxq_sj03_title = $(this).find(".alxq_sj03_title").text();
var alxq_sj03_detail = $(this).find(".alxq_sj03_detail").text();
$(".piece03_tc_xq01 .piece03_tc_imgBox img").attr("src","img/"+alxq_sj01_img);
$(".piece03_tc_xq01_txt h2").text(alxq_sj01_title);
$(".piece03_tc_xq01_txt p").text(alxq_sj01_detail);
$(".piece03_tc_xq02_txt h4").text(alxq_sj02_title);
$(".piece03_tc_xq02_txt p").text(alxq_sj02_detail);
$(".piece03_tc_xq02 .piece03_tc_imgBox img").attr("src","img/"+alxq_sj02_img);
$(".piece03_tc_xq03 .piece03_tc_imgBox img").attr("src","img/"+alxq_sj03_img);
$(".piece03_tc_xq03_txt h4").text(alxq_sj03_title);
$(".piece03_tc_xq03_txt p").text(alxq_sj03_detail);
})
$(".piece03_tc_bg").click(function(){
$(".piece03_tc_bg").css("display","none");
$("html").css("overflow","auto");
$(document.body).css("border-right","0px solid transparent");
})
$(".piece03_tc_con").click(function(){
return false;
})
//弹窗的部分文字内容上下居中
var piece03_tc_xq01_h2Height=$(".piece03_tc_xq01_txt h2").outerHeight();
var piece03_tc_xq01_pHeight=$(".piece03_tc_xq01_txt p").outerHeight();
var piece03_tc_xq01_txtHeight=piece03_tc_xq01_h2Height+piece03_tc_xq01_pHeight;
$(".piece03_tc_xq01_txt h2").css("margin-top",0.5*(130-piece03_tc_xq01_txtHeight)+"px");
//鼠标经过list
$(".piece03_case_list li").hover(function(){
/*$(this).find(".piece03_case_list_top img").removeClass("img_chsmall");*/
$(this).find(".piece03_case_list_top img").removeClass("img_chsmall").addClass("img_chbig");
},function(){
$(this).find(".piece03_case_list_top img").removeClass("img_chbig").addClass("img_chsmall");
})
</script>
</body>
</html>