-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (173 loc) · 7.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>锵锵锵锵工作室</title>
</head>
<link rel="stylesheet" href="./css/main.css">
<body>
<section class='top header'>
<p>锵锵锵锵工作室</p>
<div class='menu'><img src="./images/menu-min.png" alt=""></div>
</section>
<div class='top_bg'></div>
<div class='left_item_bg'></div>
<div class='load_bg'></div>
<!-- <img class='load_img' src="./images/load.gif" alt=""> -->
<div class='left_item'>
<p class='left_item_do'>能力</p>
<p class='left_item_select'>选择</p>
<p class='left_item_serve'>服务</p>
<p class='left_item_case'>案例</p>
<p class='left_item_contact'>联系</p>
</div>
<section class='banner'><img src="./images/[email protected]" alt="">
<div class='txt'>
<p>一个有态度的工作室，专注于网站开发</p>
<p>您贴心的网站专家</p>
</div>
</section>
<section class='tab tb_one'>
<div class='tit'><p>我们能做什么？</p><hr></div>
<div class='container'>
<div class='item'><img src="./images/[email protected]" alt=""><p>微信小程序</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>APP开发</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>响应式开发</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>前端开发</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>后台开发</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>Web移动端开发</p></div>
</div>
</section>
<section class='tab tb_two'>
<div class='tit'><p class='c_white'>为什么选择我们</p><hr></div>
<div class='container'>
<div class='left'>
<ul>
<li>零风险合作模式</li>
<div>承诺成果验收不满意全额退款，客户零风险模式降低客户的风险</div>
<li>坚持客户至上的理念</li>
<div>始终坚持以客户所想为核心的创作理念，承诺为客户提供满意的作品</div>
<li>强调转化率</li>
<div>通过将客户所需的设计进行细致的分析，根据不同平台创建最合适的呈现效果</div>
<li>为客户创造价值</li>
<div>拒绝敷衍，高效编程，根据需求特点出发，量体裁衣</div>
</ul>
</div>
<div class='right'><img class='tb_two_right' src="./images/[email protected]" alt=""></div>
</div>
</section>
<section class='tab tb_three'>
<div class='tit'><p>我们的服务流程</p><hr></div>
<div class='container'>
<div class='item'><img src="./images/[email protected]" alt=""><p>提供需求</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>项目评估</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>技术分析</p></div>
<div class='item'><img src="./images/Document_edit_117.59349593496px_1198227_easyicon.net-min.png" alt=""><p>签订合同</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>开发验收</p></div>
</div>
</section>
<section class='tb_four'>
<img src="./images/[email protected]" alt="">
<div class='container'>
<p class='tit'>我们最终目的，是为您创造更多价值</p>
<p class='con'>为客户提供，售前咨询，售中引导，售后服务等！为保证客户的服务质量，我们对所有客户均为一对一的进行售后服务，及时处理客户在操作中遇到的问题。</p>
<p class='d_con content_btn'>有意向进行合作 ></p>
</div>
</section>
<section class='tab tb_fives'>
<div class='tit'><p>案例展示</p><hr></div>
<div class='introd'>我们期待，下一个您的网站出现在这里</div>
<div class='container add_item'>
<div class='item'><img src="./images/[email protected]" alt=""><p>中国健康产业发展委员会</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>天旭东材料科技</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>新智力教育</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>金永信</p></div>
</div>
<div class='btn add_more'>查看更多</div>
</section>
<section class='tab footer'>
<div class='tit'><p class='c_white'>联系我们</p><hr></div>
<div class='container'>
<div class='item'><img src="./images/[email protected]" alt=""><p>联系电话</p><p>15914067771</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>微信</p><p>NM_-zz</p></div>
<div class='item'><img src="./images/[email protected]" alt=""><p>QQ</p><p>798099534</p></div>
<!--<div class='ipt'>姓名<input type="text"><hr></div>
<div class='ipt'>电话<input type="text"><hr></div>
<div class='ipt long'>留言 <textarea ></textarea><hr></div> -->
</div>
</section>
</body>
<script src='./js/jquery-1.11.3.min.js'></script>
<script>
var img_list =[
{'uname':'MANGO','uurl':'./images/[email protected]'},
{'uname':'智慧坂田','uurl':'./images/[email protected]'},
{'uname':'友福汽车装饰','uurl':'./images/[email protected]'},
{'uname':'资源置换平台','uurl':'./images/[email protected]'},
];
var show_left_item = function(show){
if(show){
$('.left_item').css('right',0);
$('.left_item_bg').css('display','block');
}else{
$('.left_item').css('right','-50%');
$('.left_item_bg').css('display','none');
}
}
var show_load = function(show){
if(show){
$('.load_bg').css('display','block');
// $('.load_img').css('display','block');
}else{
$('.load_bg').css('display','none');
// $('.load_img').css('display','none');
}
}
var show_section_top = function(top){
$('html, body').animate({
scrollTop: top
}, 500);
}
$('.left_item_do').click(function(){
show_left_item(false);
show_section_top($('.tb_one').offset().top-70);
});
$('.left_item_select').click(function(){
show_left_item(false);
show_section_top($('.tb_two').offset().top-70);
});
$('.left_item_serve').click(function(){
show_left_item(false);
show_section_top($('.tb_three').offset().top-70);
});
$('.left_item_case').click(function(){
show_left_item(false);
show_section_top($('.tb_fives').offset().top-70);
});
$('.left_item_contact,.content_btn').click(function(){
show_left_item(false);
show_section_top($('.footer').offset().top);
});
$('.add_more').click(function(){
if(img_list.length == 0){
alert('没有更多了')
return;
}
show_load(true);
setTimeout(function(){
for(let i in img_list){
$('.add_item').append("<div class='item'><img src='"+img_list[i].uurl+"'><p>"+img_list[i].uname+"</p></div>");
}
img_list = [];
show_load(false);
},1000)
});
$('.menu').click(function(){show_left_item(true);});
$('.left_item_bg').click(function(){show_left_item(false)});
</script>
</html>