-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·432 lines (423 loc) · 23.6 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
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
420
421
422
423
424
425
426
427
428
429
430
431
432
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="软件开发、营销策划、互联网、互联网解决方案、品牌塑造、酱游、酱游科技、传统行业" name="keywords">
<meta content="成都酱游网络科技有限公司是一家新型的互联网解决方案提供商，致力于为传统行业提供包括品牌塑造、营销策划、技术方案等一站式互联网解决方案。" name="description">
<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>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="piece01">
<div class="piece01_con">
<div class="piece01_con_top">
<div class="piece01_con_top_left"><img src="img/logo_name_white.png"></div>
<p class="piece01_con_top_right">(+86) 136-8817-8114</p>
</div>
</div>
<div class="piece01_logo">
<img src="img/logo_white.png">
</div>
<div class="piece01_title">
<img src="img/title.png">
</div>
<div class="piece01_zxbtn" onclick="javascript:scroller('piece05', 800);">咨询</div>
</div>
<div class="piece02">
<div class="piece02_con">
<p class="piece02_con_entitle">WE CAN HELP YOU</p>
<p class="piece02_con_chtitle">我们的服务</p>
<ul class="piece02_con_list">
<li data-num="01">
<div class="piece02_con_list_top listicon01"></div>
<p class="piece02_con_list_title">移动APP开发</p>
<p class="piece02_con_list_detail">iOS+Android，移动互联网时代最流行趋势</p>
</li>
<li data-num="02">
<div class="piece02_con_list_top listicon02"></div>
<p class="piece02_con_list_title">微信二次开发</p>
<p class="piece02_con_list_detail">依托微信庞大用户群，方便用户获取和维系用户</p>
</li>
<li data-num="03">
<div class="piece02_con_list_top listicon03"></div>
<p class="piece02_con_list_title">UI/UE设计</p>
<p class="piece02_con_list_detail">情感化设计，良好的视觉引导，提高品牌辨识</p>
</li>
<li data-num="04">
<div class="piece02_con_list_top listicon04"></div>
<p class="piece02_con_list_title">网站开发</p>
<p class="piece02_con_list_detail">基于电脑端开发的网站系统，可用于官网建设或商城研发</p>
</li>
<li data-num="05">
<div class="piece02_con_list_top listicon05"></div>
<p class="piece02_con_list_title">H5活动策划</p>
<p class="piece02_con_list_detail">强大的交互、动画效果，用于轻应用开发，宣传推广内容开发</p>
</li>
<li data-num="06">
<div class="piece02_con_list_top listicon06"></div>
<p class="piece02_con_list_title">系统开发</p>
<p class="piece02_con_list_detail">Web后台系统开发，更好的管理业务</p>
</li>
<li data-num="07">
<div class="piece02_con_list_top listicon07"></div>
<p class="piece02_con_list_title">营销策划</p>
<p class="piece02_con_list_detail">分析研究创新设计并制定营销方案</p>
</li>
<li data-num="08">
<div class="piece02_con_list_top listicon08"></div>
<p class="piece02_con_list_title">品牌打造</p>
<p class="piece02_con_list_detail">提高品牌知名度、注意度、认知度、美誉度</p>
</li>
</ul>
</div>
</div>
<div class="piece03">
<div class="piece03_con">
<div class="piece03_con_top">
<p class="piece03_con_top_title">CASE / 案例<span></span></p>
<p class="piece03_con_top_btn" onClick="location.href='anli.html'">更多案例</p>
</div>
<ul class="piece03_case_list">
<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>
</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/img1_1.jpg">
</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/img1_2.jpg">
</div>
</li>
<li class="piece03_tc_xq03">
<div class="piece03_tc_imgBox">
<img src="img/img1_2.jpg">
</div>
<div class="piece03_tc_xq03_txt">
<h4>简洁并带有节奏感的排版和样式</h4>
<p></p>
</div>
</li>
</ul>
</div>
<div class="piece04" id="piece04">
<div class="piece04_con">
<div class="piece03_con_top">
<p class="piece03_con_top_title">DEMAND / 需求<span></span></p>
</div>
<form method="post" name="" onsubmit="return check()" action="index.html" id="contact_form">
<ul class="form_inforBox">
<li>
<p>您的姓名</p>
<div><input id="txxm" type="text" name="" value="" placeholder="罗大锤"/></div>
</li>
<li>
<p>您的邮箱</p>
<div><input id="txyx" type="text" name="" value="" placeholder="[email protected]"/></div>
</li>
<li>
<p>您的电话</p>
<div><input id="txdh" type="tel" name="" value="" placeholder="13652109366"/></div>
</li>
</ul>
<div class="form_demandBox">
<p>您的需求描述</p>
<div><textarea rows="5" placeholder="写下想要我们为你做的"></textarea></div>
</div>
<div class="form_sub">
<input type="submit" name="" value="提交"/>
</div>
</form>
</div>
</div>
<div class="piece05" id="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 src="js/positioning.js"></script>
<script>
//浏览器可视区域
var windowHeight=document.all ? document.getElementsByTagName("html")[0].offsetHeight : window.innerHeight;
//服务内容鼠标经过
var listicon=$(".piece02_con_list li div");
listicon.hover(function() {
var num=$(this).parent().data("num");
$(this).parent().find("p").addClass("piece02_con_list_color");
$(this).parent().find("div").removeClass("listicon"+num).addClass("listicon"+num+"_active");
$(this).parent().find(".piece02_con_list_title").addClass("title_active");
$(this).parent().find(".piece02_con_list_detail").addClass("detail_active");
},function(){
var num=$(this).parent().data("num");
$(this).parent().find("p").removeClass("piece02_con_list_color");
$(this).parent().find("div").removeClass("listicon"+num+"_active").addClass("listicon"+num);
$(this).parent().find(".piece02_con_list_title").removeClass("title_active");
$(this).parent().find(".piece02_con_list_detail").removeClass("detail_active");
})
//多行文本溢出省略
$(".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)(\.\.\.)?$/, "..."));
};
});
//点击弹窗
$(".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");
//form左边li加右边距
var inforlist = $(".form_inforBox li");
var inleng = inforlist.length;
for(var i=0;i<inleng;i++){
if(i%2==0){
$(inforlist[i]).css("margin-right",30+"px");
}
}
//表单验证
function check(){
var txxm = $("#txxm").val();
var txyx = $("#txyx").val();
var txdh = $("#txdh").val();
if(txxm == "") {
$("#txxm").attr('placeholder','请输入您的姓名').parent(this).addClass("redpla");
return false;
};
if((txyx == "")&&(txdh == "")) {
$("#txyx").attr('placeholder','请填写您的邮箱或电话').parent(this).addClass("redpla");
return false;
};
if((!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(txyx))&&!(txyx == "")){
$("#txyx").attr('placeholder','您输入的邮箱不合法').parent(this).addClass("redpla");
$("#txyx").val("");
return false;
}
if(!/^[0-9]*$/.test(txdh)){
$("#txdh").attr('placeholder','您输入的电话不合法').parent(this).addClass("redpla");
$("#txdh").val("");
return false;
}
return true;
}
//鼠标经过list
$(".piece03_case_list li").hover(function(){
$(this).find(".piece03_case_list_top img").addClass("img_chbig");
$(this).find(".piece03_case_list_top img").removeClass("img_chsmall");
},function(){
$(this).find(".piece03_case_list_top img").addClass("img_chsmall");
$(this).find(".piece03_case_list_top img").removeClass("img_chbig");
})
</script>
</body>
</html>