正在显示
27 个修改的文件
包含
1524 行增加
和
161 行删除
banner.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset="UTF-8"> | ||
5 | + <title>首页</title> | ||
6 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
7 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
8 | + | ||
9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> | ||
10 | + <link rel="stylesheet" type="text/css" href="css/banner.css"> | ||
11 | + <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"> | ||
12 | + | ||
13 | + <script src="js/base.js"></script> | ||
14 | + <style> | ||
15 | + .banner{ | ||
16 | + width: 7.5rem; | ||
17 | + height: 100%; | ||
18 | + position: relative; | ||
19 | + } | ||
20 | + .banner_pic{ | ||
21 | + width: 7.5rem; | ||
22 | + height:100%; | ||
23 | + display: flex; | ||
24 | + } | ||
25 | + .banner_pic img{ | ||
26 | + width: 100%; | ||
27 | + height: 100% | ||
28 | + } | ||
29 | + .swiper-pagination-bullet{ | ||
30 | + background-color: #7ECEF4; | ||
31 | + } | ||
32 | + .swiper-pagination-bullet-active{ | ||
33 | + background-color: #ffffff; | ||
34 | + } | ||
35 | + /*按钮之间的间隔*/ | ||
36 | + .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ | ||
37 | + margin: 0 0.6rem; | ||
38 | + } | ||
39 | + </style> | ||
40 | +</head> | ||
41 | +<body> | ||
42 | +<div class="banner"> | ||
43 | + | ||
44 | + <!-- Swiper --> | ||
45 | + <div class="swiper-container"> | ||
46 | + <div class="swiper-wrapper"> | ||
47 | + <div class="swiper-slide banner_pic"> | ||
48 | + <img src="images/banner.png"> | ||
49 | + <div class="btn_button">点击进入 天津汽车零部件展网站>></div> | ||
50 | + </div> | ||
51 | + <div class="swiper-slide banner_pic"> | ||
52 | + <img src="images/banner.png"> | ||
53 | + <div class="btn_button">点击进入 工业装配及自动化展网站>></div> | ||
54 | + </div> | ||
55 | + <div class="swiper-slide banner_pic"> | ||
56 | + <img src="images/banner.png"> | ||
57 | + <div class="btn_button">点击进入 天津汽车零部件展网站>></div> | ||
58 | + </div> | ||
59 | + | ||
60 | + </div> | ||
61 | + <!-- Add Pagination --> | ||
62 | + <div class="swiper-pagination"></div> | ||
63 | + </div> | ||
64 | + | ||
65 | +</div> | ||
66 | +</body> | ||
67 | +<script src="js/jquery.min.js"></script> | ||
68 | +<script src="js/swiper-3.4.2.jquery.min.js"></script> | ||
69 | +<script> | ||
70 | + $('.btn_button').click(function () { | ||
71 | + console.log(111) | ||
72 | + window.location.href = "index.html"; | ||
73 | + }) | ||
74 | + var swiper = new Swiper('.swiper-container',{ | ||
75 | + // autoplay: { | ||
76 | + // delay: 3000, | ||
77 | + // disableOnInteraction: false, | ||
78 | + // }, | ||
79 | + loop: true, // 循环模式选项 | ||
80 | + | ||
81 | + pagination: { | ||
82 | + el: '.swiper-pagination', | ||
83 | + }, | ||
84 | + }); | ||
85 | +</script> | ||
86 | +</html> |
css/banner.css
0 → 100644
1 | +body,html{ | ||
2 | + width:100%; | ||
3 | + height:100%; | ||
4 | +} | ||
5 | +.banner{ | ||
6 | + height:100%; | ||
7 | +} | ||
8 | +body{ | ||
9 | + background-color: #F4F5F9; | ||
10 | +} | ||
11 | +*{ | ||
12 | + margin: 0; | ||
13 | + padding: 0; | ||
14 | +} | ||
15 | + | ||
16 | +.btn_button{ | ||
17 | + width: 100%; | ||
18 | + font-size: 0.26rem; | ||
19 | + font-family:MicrosoftYaHei; | ||
20 | + font-weight:400; | ||
21 | + color:rgba(255,255,255,1); | ||
22 | + line-height:79px; | ||
23 | + text-align: center; | ||
24 | + position: absolute; | ||
25 | + bottom: 0.8rem; | ||
26 | +} | ||
27 | + |
@@ -15,10 +15,31 @@ body{ | @@ -15,10 +15,31 @@ body{ | ||
15 | } | 15 | } |
16 | .head{ | 16 | .head{ |
17 | width: 7.5rem; | 17 | width: 7.5rem; |
18 | + height: 0.88rem; | ||
19 | + background:rgba(201,201,201,1); | ||
20 | + position: fixed; | ||
21 | + top: 0; | ||
22 | + left: 0; | ||
23 | + z-index: 999; | ||
24 | + display: flex; | ||
25 | + align-items: center; | ||
26 | + justify-content: space-between; | ||
27 | + box-sizing: border-box; | ||
28 | + padding: 0 0.2rem; | ||
29 | +} | ||
30 | +.head_new{ | ||
31 | + font-size: 0.3rem; | ||
32 | + color: rgba(68,68,68,1); | ||
33 | + font-weight: bold; | ||
34 | + | ||
35 | +} | ||
36 | +.head_pic{ | ||
37 | + width: 7.5rem; | ||
18 | height: 2.18rem; | 38 | height: 2.18rem; |
19 | display: flex; | 39 | display: flex; |
40 | + margin-top: 0.88rem; | ||
20 | } | 41 | } |
21 | -.head img{ | 42 | +.head_pic img{ |
22 | width: 100%; | 43 | width: 100%; |
23 | height: 100%; | 44 | height: 100%; |
24 | } | 45 | } |
@@ -15,10 +15,31 @@ body{ | @@ -15,10 +15,31 @@ body{ | ||
15 | } | 15 | } |
16 | .head{ | 16 | .head{ |
17 | width: 7.5rem; | 17 | width: 7.5rem; |
18 | + height: 0.88rem; | ||
19 | + background:rgba(201,201,201,1); | ||
20 | + position: fixed; | ||
21 | + top: 0; | ||
22 | + left: 0; | ||
23 | + z-index: 999; | ||
24 | + display: flex; | ||
25 | + align-items: center; | ||
26 | + justify-content: space-between; | ||
27 | + box-sizing: border-box; | ||
28 | + padding: 0 0.2rem; | ||
29 | +} | ||
30 | +.head_new{ | ||
31 | + font-size: 0.3rem; | ||
32 | + color: rgba(68,68,68,1); | ||
33 | + font-weight: bold; | ||
34 | + | ||
35 | +} | ||
36 | +.head_pic{ | ||
37 | + width: 7.5rem; | ||
18 | height: 2.9rem; | 38 | height: 2.9rem; |
19 | display: flex; | 39 | display: flex; |
40 | + margin-top: 0.88rem; | ||
20 | } | 41 | } |
21 | -.head img{ | 42 | +.head_pic img{ |
22 | width: 100%; | 43 | width: 100%; |
23 | height: 100%; | 44 | height: 100%; |
24 | } | 45 | } |
@@ -18,6 +18,10 @@ body{ | @@ -18,6 +18,10 @@ body{ | ||
18 | background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8)); | 18 | background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8)); |
19 | display: flex; | 19 | display: flex; |
20 | } | 20 | } |
21 | +.head img{ | ||
22 | + width: 100%; | ||
23 | + height: 100%; | ||
24 | +} | ||
21 | .menu{ | 25 | .menu{ |
22 | width: 6.86rem; | 26 | width: 6.86rem; |
23 | display: flex; | 27 | display: flex; |
@@ -45,6 +49,11 @@ body{ | @@ -45,6 +49,11 @@ body{ | ||
45 | height: 0.7rem; | 49 | height: 0.7rem; |
46 | background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); | 50 | background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); |
47 | border-radius:50%; | 51 | border-radius:50%; |
52 | + display: flex; | ||
53 | +} | ||
54 | +.menu_item_top img{ | ||
55 | + width: 100%; | ||
56 | + height: 100%; | ||
48 | } | 57 | } |
49 | .menu_item_bottom{ | 58 | .menu_item_bottom{ |
50 | margin-top: 0.1rem; | 59 | margin-top: 0.1rem; |
@@ -56,17 +65,28 @@ body{ | @@ -56,17 +65,28 @@ body{ | ||
56 | .middle{ | 65 | .middle{ |
57 | width: 7.5rem; | 66 | width: 7.5rem; |
58 | height: 1.96rem; | 67 | height: 1.96rem; |
59 | - opacity: 0.35; | ||
60 | - background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9)); | ||
61 | margin-top: 0.23rem; | 68 | margin-top: 0.23rem; |
62 | display: flex; | 69 | display: flex; |
70 | + position: relative; | ||
71 | + align-items: center; | ||
63 | } | 72 | } |
64 | .middle img{ | 73 | .middle img{ |
65 | width: 100%; | 74 | width: 100%; |
66 | height: 100%; | 75 | height: 100%; |
67 | } | 76 | } |
77 | +.middle_text{ | ||
78 | + width: 100%; | ||
79 | + font-size: 0.32rem; | ||
80 | + font-family:MicrosoftYaHei; | ||
81 | + font-weight:400; | ||
82 | + color:rgba(255,255,255,1); | ||
83 | + line-height: 0.29rem; | ||
84 | + position: absolute; | ||
85 | + text-align: center; | ||
86 | +} | ||
68 | .new{ | 87 | .new{ |
69 | width: 1.56rem; | 88 | width: 1.56rem; |
89 | + height: 0.5rem; | ||
70 | font-size: 0.27rem; | 90 | font-size: 0.27rem; |
71 | display: flex; | 91 | display: flex; |
72 | align-items: center; | 92 | align-items: center; |
@@ -75,13 +95,13 @@ body{ | @@ -75,13 +95,13 @@ body{ | ||
75 | 95 | ||
76 | } | 96 | } |
77 | .new_text{ | 97 | .new_text{ |
78 | - | 98 | + margin-left: 0.1rem; |
79 | } | 99 | } |
80 | .new_underline{ | 100 | .new_underline{ |
81 | width: 1.56rem; | 101 | width: 1.56rem; |
82 | height:2px; | 102 | height:2px; |
83 | background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1)); | 103 | background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1)); |
84 | - margin-top: 0.2rem; | 104 | + margin-top: 0.1rem; |
85 | } | 105 | } |
86 | .bottom{ | 106 | .bottom{ |
87 | display: flex; | 107 | display: flex; |
@@ -60,17 +60,104 @@ body{ | @@ -60,17 +60,104 @@ body{ | ||
60 | /*-webkit-text-fill-color:transparent;*/ | 60 | /*-webkit-text-fill-color:transparent;*/ |
61 | } | 61 | } |
62 | .item_color:before{ | 62 | .item_color:before{ |
63 | - | ||
64 | content: ""; | 63 | content: ""; |
65 | width: 1.52rem; | 64 | width: 1.52rem; |
66 | height: 0.02rem; | 65 | height: 0.02rem; |
67 | background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1)); | 66 | background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1)); |
68 | - -webkit-background-clip:text; | 67 | + /*-webkit-background-clip:text;*/ |
69 | -webkit-text-fill-color:transparent; | 68 | -webkit-text-fill-color:transparent; |
70 | position: absolute; | 69 | position: absolute; |
71 | bottom: 0; | 70 | bottom: 0; |
71 | +} | ||
72 | +.bottom_sub{ | ||
73 | + margin-top: 0.51rem; | ||
74 | + width: 6.16rem; | ||
75 | + height: 0.91rem; | ||
76 | + background:linear-gradient(-85deg,rgba(110,15,119,0.9),rgba(3,24,165,0.9)); | ||
77 | + border:1px solid rgba(112,112,112,1); | ||
78 | + border-radius: 0.08rem; | ||
79 | + font-size: 0.33rem; | ||
80 | + font-family:MicrosoftYaHei; | ||
81 | + font-weight:400; | ||
82 | + color:rgba(255,255,255,1); | ||
83 | + line-height: 0.91rem; | ||
84 | + text-align: center; | ||
85 | +} | ||
86 | +.bottom_t{ | ||
87 | + font-size: 0.26rem; | ||
88 | + font-family:MicrosoftYaHei; | ||
89 | + font-weight:400; | ||
90 | + color:rgba(128,128,128,1); | ||
91 | + line-height: 0.32rem; | ||
92 | + display: flex; | ||
93 | + justify-content: space-between; | ||
94 | + box-sizing: border-box; | ||
95 | + padding: 0 0.2rem; | ||
96 | +} | ||
97 | +.bottom_t_item{ | ||
98 | + display: flex; | ||
99 | + align-items: center; | ||
100 | + margin-top: 0.51rem; | ||
101 | +} | ||
102 | +.bottom_t_item span{ | ||
103 | + margin-left: 0.2rem; | ||
104 | +} | ||
105 | + | ||
106 | +/*注册输入框*/ | ||
107 | +.bottom_small{ | ||
108 | + width: 100%; | ||
109 | + display: flex; | ||
110 | + justify-content: space-between; | ||
111 | + margin-top: 0.4rem; | ||
112 | +} | ||
113 | +.bottom_small_left{ | ||
114 | + width: 3.34rem; | ||
115 | + height: 0.9rem; | ||
116 | + border:1px solid rgba(112,112,112,1); | ||
117 | + border-radius: 0.08rem; | ||
118 | + display: flex; | ||
119 | + align-items: center; | ||
120 | + box-sizing: border-box; | ||
121 | + padding: 0 0.2rem; | ||
122 | + | ||
123 | +} | ||
124 | +.bottom_small_left input{ | ||
125 | + width: 2.2rem; | ||
126 | + height: 0.6rem; | ||
127 | + box-sizing: border-box; | ||
128 | + padding: 0 0.2rem; | ||
129 | + outline: none; | ||
130 | + border: none; | ||
131 | + background: transparent; | ||
132 | +} | ||
133 | +.bottom_small_left input::placeholder{ | ||
134 | + color: #B3B3B3; | ||
135 | +} | ||
136 | +.bottom_small_right{ | ||
137 | + width: 2.64rem; | ||
138 | + height: 0.9rem; | ||
139 | + background:linear-gradient(-85deg,rgba(91,51,16,0.9),rgba(243,192,96,0.9)); | ||
140 | + border-radius: 0.08rem; | ||
141 | + | ||
72 | 142 | ||
143 | + font-size: 0.28rem; | ||
144 | + font-family:MicrosoftYaHei; | ||
145 | + font-weight:400; | ||
146 | + color:rgba(255,255,255,1); | ||
147 | + line-height: 0.9rem; | ||
148 | + text-align: center; | ||
149 | +} | ||
150 | +.bottom_text{ | ||
151 | + margin-top: 0.32rem; | ||
152 | + font-size: 0.26rem; | ||
153 | + font-family:MicrosoftYaHei; | ||
154 | + font-weight:400; | ||
155 | + color:rgba(128,128,128,1); | ||
156 | + line-height: 0.26rem; | ||
157 | + text-align: center; | ||
73 | } | 158 | } |
159 | + | ||
160 | + | ||
74 | .bottom{ | 161 | .bottom{ |
75 | display: flex; | 162 | display: flex; |
76 | flex-flow: column; | 163 | flex-flow: column; |
css/lthd.css
0 → 100644
1 | + | ||
2 | +body{ | ||
3 | + background-color: #F4F5F9; | ||
4 | +} | ||
5 | +*{ | ||
6 | + margin: 0; | ||
7 | + padding: 0; | ||
8 | +} | ||
9 | +.container{ | ||
10 | + width: 7.5rem; | ||
11 | + line-height: 1; | ||
12 | + display: flex; | ||
13 | + flex-flow: column; | ||
14 | + align-items: center; | ||
15 | +} | ||
16 | +/*头部*/ | ||
17 | +.head{ | ||
18 | + width: 7.5rem; | ||
19 | + height: 0.88rem; | ||
20 | + background:rgba(201,201,201,1); | ||
21 | + position: fixed; | ||
22 | + top: 0; | ||
23 | + left: 0; | ||
24 | + z-index: 999; | ||
25 | + display: flex; | ||
26 | + align-items: center; | ||
27 | + justify-content: space-between; | ||
28 | + box-sizing: border-box; | ||
29 | + padding: 0 0.2rem; | ||
30 | +} | ||
31 | +.head_new{ | ||
32 | + font-size: 0.3rem; | ||
33 | + color: rgba(68,68,68,1); | ||
34 | + font-weight: bold; | ||
35 | + | ||
36 | +} | ||
37 | +.items{ | ||
38 | + margin-top: 0.88rem; | ||
39 | + margin-bottom: 1rem; | ||
40 | + | ||
41 | +} | ||
42 | +.item{ | ||
43 | + width: 7.3rem; | ||
44 | + height: 2rem; | ||
45 | + display: flex; | ||
46 | + background:rgba(255,255,255,1); | ||
47 | + box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22); | ||
48 | + margin-top: 0.1rem; | ||
49 | + position: relative; | ||
50 | +} | ||
51 | +.item:first-child{ | ||
52 | + margin-top: 0.21rem; | ||
53 | +} | ||
54 | + | ||
55 | +.item_left{ | ||
56 | + width: 1.8rem; | ||
57 | + height: 1.75rem; | ||
58 | + display: flex; | ||
59 | + border-radius: 0.1rem; | ||
60 | + margin: 0.13rem 0 0.13rem 0.1rem; | ||
61 | +} | ||
62 | +.item_left img{ | ||
63 | + width: 100%; | ||
64 | + height: 100%; | ||
65 | + border-radius: 0.1rem; | ||
66 | +} | ||
67 | +.item_mid{ | ||
68 | + width: 4rem; | ||
69 | + height: 1.6rem; | ||
70 | + display: flex; | ||
71 | + flex-flow: column; | ||
72 | + margin: 0.2rem; | ||
73 | +} | ||
74 | +.item_mid_big{ | ||
75 | + height: 1rem; | ||
76 | + font-size: 0.3rem; | ||
77 | + font-weight: bold; | ||
78 | + line-height: 0.42rem; | ||
79 | + box-sizing: border-box; | ||
80 | + text-overflow: ellipsis; | ||
81 | + display: -webkit-box; | ||
82 | + -webkit-box-orient: vertical; | ||
83 | + -webkit-line-clamp: 2; | ||
84 | + overflow: hidden; | ||
85 | +} | ||
86 | +.item_mid_small{ | ||
87 | + height: 0.9rem; | ||
88 | + font-size: 0.22rem; | ||
89 | + color: #333333; | ||
90 | + line-height: 0.38rem; | ||
91 | + | ||
92 | + box-sizing: border-box; | ||
93 | + text-overflow: ellipsis; | ||
94 | + display: -webkit-box; | ||
95 | + -webkit-box-orient: vertical; | ||
96 | + -webkit-line-clamp: 2; | ||
97 | + overflow: hidden; | ||
98 | + margin-top: 0.1rem; | ||
99 | +} | ||
100 | +.item_right{ | ||
101 | + width: 0.9rem; | ||
102 | + height: 2rem; | ||
103 | + background: #EA474B; | ||
104 | + border-radius: 0.02rem; | ||
105 | + position: absolute; | ||
106 | + right: 0; | ||
107 | + | ||
108 | + | ||
109 | + font-size: 0.22rem; | ||
110 | + font-family:MicrosoftYaHei; | ||
111 | + font-weight:400; | ||
112 | + color:rgba(255,255,255,1); | ||
113 | + line-height: 0.38rem; | ||
114 | + display: flex; | ||
115 | + flex-flow: column; | ||
116 | + align-items: center; | ||
117 | + justify-content: center; | ||
118 | +} | ||
119 | +.color_gray{ | ||
120 | + background-color: #e5e5e5; | ||
121 | +} | ||
122 | + | ||
123 | +/*底部菜单栏*/ | ||
124 | +.bottom_menu{ | ||
125 | + width: 7.5rem; | ||
126 | + height: 0.88rem; | ||
127 | + display: flex; | ||
128 | + align-items: center; | ||
129 | + justify-content: space-around; | ||
130 | + background-color: #ffffff; | ||
131 | + position: fixed; | ||
132 | + bottom: 0; | ||
133 | +} | ||
134 | +.bottom_menu_index{ | ||
135 | + display: flex; | ||
136 | + flex-flow: column; | ||
137 | + align-items: center; | ||
138 | + color: #666666; | ||
139 | +} | ||
140 | +.bottom_menu_index_text{ | ||
141 | + font-size: 0.22rem; | ||
142 | + color: #666666; | ||
143 | +} |
css/page.css
0 → 100644
1 | +.pagingUl{ | ||
2 | + float:right; | ||
3 | + padding:0; | ||
4 | + margin:0; | ||
5 | + list-style: none; | ||
6 | +} | ||
7 | +.pagingUl li{ | ||
8 | + float: left; | ||
9 | + width: 30px; | ||
10 | + height: 30px; | ||
11 | + list-style: 30px; | ||
12 | + text-align: center; | ||
13 | +} | ||
14 | +.pagingUl li a{ | ||
15 | + text-decoration: none; | ||
16 | + display: inline-block; | ||
17 | + width: 30px; | ||
18 | + height: 30px; | ||
19 | + text-align: center; | ||
20 | + line-height: 28px; | ||
21 | + padding: 0; | ||
22 | + background: #fafafa; | ||
23 | + color: #666; | ||
24 | + font-size: 12px; | ||
25 | + border: 1px solid #ddd; | ||
26 | +} | ||
27 | + | ||
28 | +.prv, .next { | ||
29 | + width: 30px; | ||
30 | + height: 30px; | ||
31 | + float: left; | ||
32 | + text-align: center; | ||
33 | + line-height: 30px; | ||
34 | + border: 1px solid #ddd; | ||
35 | + cursor: pointer; | ||
36 | +} | ||
37 | +.first, .last { | ||
38 | + width: 30px; | ||
39 | + height: 30px; | ||
40 | + font-size: 12px; | ||
41 | + text-align: center; | ||
42 | + line-height: 30px; | ||
43 | + border: 1px solid #ddd; | ||
44 | + cursor: pointer; | ||
45 | +} |
@@ -148,6 +148,11 @@ body{ | @@ -148,6 +148,11 @@ body{ | ||
148 | height: 0.7rem; | 148 | height: 0.7rem; |
149 | background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); | 149 | background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1)); |
150 | border-radius:50%; | 150 | border-radius:50%; |
151 | + display: flex; | ||
152 | +} | ||
153 | +.menu_item_top img{ | ||
154 | + width: 100%; | ||
155 | + height: 100%; | ||
151 | } | 156 | } |
152 | .menu_item_bottom{ | 157 | .menu_item_bottom{ |
153 | margin-top: 0.1rem; | 158 | margin-top: 0.1rem; |
@@ -159,15 +164,25 @@ body{ | @@ -159,15 +164,25 @@ body{ | ||
159 | .middle{ | 164 | .middle{ |
160 | width: 7.5rem; | 165 | width: 7.5rem; |
161 | height: 1.96rem; | 166 | height: 1.96rem; |
162 | - opacity: 0.35; | ||
163 | - background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9)); | ||
164 | margin-top: 0.23rem; | 167 | margin-top: 0.23rem; |
165 | display: flex; | 168 | display: flex; |
169 | + position: relative; | ||
170 | + align-items: center; | ||
166 | } | 171 | } |
167 | .middle img{ | 172 | .middle img{ |
168 | width: 100%; | 173 | width: 100%; |
169 | height: 100%; | 174 | height: 100%; |
170 | } | 175 | } |
176 | +.middle_text{ | ||
177 | + width: 100%; | ||
178 | + font-size: 0.32rem; | ||
179 | + font-family:MicrosoftYaHei; | ||
180 | + font-weight:400; | ||
181 | + color:rgba(255,255,255,1); | ||
182 | + line-height: 0.29rem; | ||
183 | + position: absolute; | ||
184 | + text-align: center; | ||
185 | +} | ||
171 | .new{ | 186 | .new{ |
172 | width: 1.56rem; | 187 | width: 1.56rem; |
173 | font-size: 0.27rem; | 188 | font-size: 0.27rem; |
css/swiper-3.4.2.min.css
0 → 100644
1 | +/** | ||
2 | + * Swiper 4.4.6 | ||
3 | + * Most modern mobile touch slider and framework with hardware accelerated transitions | ||
4 | + * http://www.idangero.us/swiper/ | ||
5 | + * | ||
6 | + * Copyright 2014-2018 Vladimir Kharlampidi | ||
7 | + * | ||
8 | + * Released under the MIT License | ||
9 | + * | ||
10 | + * Released on: December 19, 2018 | ||
11 | + */ | ||
12 | +.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} |
@@ -15,10 +15,31 @@ body{ | @@ -15,10 +15,31 @@ body{ | ||
15 | } | 15 | } |
16 | .head{ | 16 | .head{ |
17 | width: 7.5rem; | 17 | width: 7.5rem; |
18 | + height: 0.88rem; | ||
19 | + background:rgba(201,201,201,1); | ||
20 | + position: fixed; | ||
21 | + top: 0; | ||
22 | + left: 0; | ||
23 | + z-index: 999; | ||
24 | + display: flex; | ||
25 | + align-items: center; | ||
26 | + justify-content: space-between; | ||
27 | + box-sizing: border-box; | ||
28 | + padding: 0 0.2rem; | ||
29 | +} | ||
30 | +.head_new{ | ||
31 | + font-size: 0.3rem; | ||
32 | + color: rgba(68,68,68,1); | ||
33 | + font-weight: bold; | ||
34 | + | ||
35 | +} | ||
36 | +.head_pic{ | ||
37 | + margin-top: 0.88rem; | ||
38 | + width: 7.5rem; | ||
18 | height: 2.18rem; | 39 | height: 2.18rem; |
19 | display: flex; | 40 | display: flex; |
20 | } | 41 | } |
21 | -.head img{ | 42 | +.head_pic img{ |
22 | width: 100%; | 43 | width: 100%; |
23 | height: 100%; | 44 | height: 100%; |
24 | } | 45 | } |
@@ -6,16 +6,42 @@ | @@ -6,16 +6,42 @@ | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
8 | 8 | ||
9 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> | 9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css"> |
10 | <link rel="stylesheet" type="text/css" href="css/dlhd.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/dlhd.css"> |
11 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> | 11 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> |
12 | <script src="js/base.js"></script> | 12 | <script src="js/base.js"></script> |
13 | <script src="js/jquery.min.js"></script> | 13 | <script src="js/jquery.min.js"></script> |
14 | + <style> | ||
15 | + .icon-zuo{ | ||
16 | + color: #959595; | ||
17 | + font-size: 0.38rem; | ||
18 | + } | ||
19 | + .icon-iconfont-edu12{ | ||
20 | + color: #959595; | ||
21 | + font-size: 0.5rem; | ||
22 | + } | ||
23 | + </style> | ||
14 | </head> | 24 | </head> |
15 | <body> | 25 | <body> |
16 | <div class="container"> | 26 | <div class="container"> |
17 | - <!--头部图片--> | 27 | + <!--头部信息--> |
18 | <div class="head"> | 28 | <div class="head"> |
29 | + <!--左图标--> | ||
30 | + <div class="iconfont icon-zuo"> | ||
31 | + | ||
32 | + </div> | ||
33 | + <!--导览活动--> | ||
34 | + <div class="head_new"> | ||
35 | + 导览活动 | ||
36 | + </div> | ||
37 | + <!--右菜单--> | ||
38 | + <div> | ||
39 | + | ||
40 | + </div> | ||
41 | + | ||
42 | + </div> | ||
43 | + <!--头部图片--> | ||
44 | + <div class="head_pic"> | ||
19 | <img src="images/666.png"> | 45 | <img src="images/666.png"> |
20 | </div> | 46 | </div> |
21 | <!--顶部内容--> | 47 | <!--顶部内容--> |
@@ -6,14 +6,40 @@ | @@ -6,14 +6,40 @@ | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
8 | 8 | ||
9 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> | 9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css"> |
10 | <link rel="stylesheet" type="text/css" href="css/gyzh.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/gyzh.css"> |
11 | <script src="js/base.js"></script> | 11 | <script src="js/base.js"></script> |
12 | + <style> | ||
13 | + .icon-zuo{ | ||
14 | + color: #959595; | ||
15 | + font-size: 0.38rem; | ||
16 | + } | ||
17 | + .icon-iconfont-edu12{ | ||
18 | + color: #959595; | ||
19 | + font-size: 0.5rem; | ||
20 | + } | ||
21 | + </style> | ||
12 | </head> | 22 | </head> |
13 | <body> | 23 | <body> |
14 | <div class="container"> | 24 | <div class="container"> |
15 | - <!--头部图片--> | 25 | + <!--头部信息--> |
16 | <div class="head"> | 26 | <div class="head"> |
27 | + <!--左图标--> | ||
28 | + <div class="iconfont icon-zuo"> | ||
29 | + | ||
30 | + </div> | ||
31 | + <!--关于展位--> | ||
32 | + <div class="head_new"> | ||
33 | + 关于展位 | ||
34 | + </div> | ||
35 | + <!--右菜单--> | ||
36 | + <div> | ||
37 | + | ||
38 | + </div> | ||
39 | + | ||
40 | + </div> | ||
41 | + <!--头部图片--> | ||
42 | + <div class="head_pic"> | ||
17 | <img src="images/333.png"> | 43 | <img src="images/333.png"> |
18 | </div> | 44 | </div> |
19 | <!--顶部信息--> | 45 | <!--顶部信息--> |
images/banner.png
0 → 100644
189.7 KB
images/index.png
0 → 100644
539.6 KB
images/index_2.png
0 → 100644
202.5 KB
@@ -9,18 +9,23 @@ | @@ -9,18 +9,23 @@ | ||
9 | <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> | 9 | <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> |
10 | <link rel="stylesheet" type="text/css" href="css/index.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/index.css"> |
11 | <script src="js/base.js"></script> | 11 | <script src="js/base.js"></script> |
12 | + <style> | ||
13 | + .icon-diqiu{ | ||
14 | + font-size: 0.35rem; | ||
15 | + } | ||
16 | + </style> | ||
12 | </head> | 17 | </head> |
13 | <body> | 18 | <body> |
14 | <div class="container"> | 19 | <div class="container"> |
15 | <!--头部--> | 20 | <!--头部--> |
16 | <div class="head"> | 21 | <div class="head"> |
17 | - <img src=""> | 22 | + <img src="images/index.png"> |
18 | </div> | 23 | </div> |
19 | <!--菜单--> | 24 | <!--菜单--> |
20 | <div class="menu"> | 25 | <div class="menu"> |
21 | <div class="menu_top"> | 26 | <div class="menu_top"> |
22 | <!--关于展会--> | 27 | <!--关于展会--> |
23 | - <div class="menu_item"> | 28 | + <div class="menu_item item_1"> |
24 | <div class="menu_item_top"> | 29 | <div class="menu_item_top"> |
25 | <img src=""> | 30 | <img src=""> |
26 | </div> | 31 | </div> |
@@ -28,81 +33,82 @@ | @@ -28,81 +33,82 @@ | ||
28 | 关于展会 | 33 | 关于展会 |
29 | </div> | 34 | </div> |
30 | </div> | 35 | </div> |
31 | - <!--关于展会--> | ||
32 | - <div class="menu_item"> | 36 | + <!--展品范围--> |
37 | + <div class="menu_item item_2"> | ||
33 | <div class="menu_item_top"> | 38 | <div class="menu_item_top"> |
34 | - <img src=""> | 39 | + <img src="#"> |
35 | </div> | 40 | </div> |
36 | <div class="menu_item_bottom"> | 41 | <div class="menu_item_bottom"> |
37 | - 关于展会 | 42 | + 展品范围 |
38 | </div> | 43 | </div> |
39 | </div> | 44 | </div> |
40 | - <!--关于展会--> | ||
41 | - <div class="menu_item"> | 45 | + <!--展览活动--> |
46 | + <div class="menu_item item_3"> | ||
42 | <div class="menu_item_top"> | 47 | <div class="menu_item_top"> |
43 | <img src=""> | 48 | <img src=""> |
44 | </div> | 49 | </div> |
45 | <div class="menu_item_bottom"> | 50 | <div class="menu_item_bottom"> |
46 | - 关于展会 | 51 | + 展览活动 |
47 | </div> | 52 | </div> |
48 | </div> | 53 | </div> |
49 | <!--关于展会--> | 54 | <!--关于展会--> |
50 | - <div class="menu_item"> | 55 | + <div class="menu_item item_4"> |
51 | <div class="menu_item_top"> | 56 | <div class="menu_item_top"> |
52 | <img src=""> | 57 | <img src=""> |
53 | </div> | 58 | </div> |
54 | <div class="menu_item_bottom"> | 59 | <div class="menu_item_bottom"> |
55 | - 关于展会 | 60 | + 参展申请 |
56 | </div> | 61 | </div> |
57 | </div> | 62 | </div> |
58 | </div> | 63 | </div> |
59 | <div class="menu_bottom"> | 64 | <div class="menu_bottom"> |
60 | - <!--关于展会--> | ||
61 | - <div class="menu_item"> | 65 | + <!--新闻报道--> |
66 | + <div class="menu_item item_5"> | ||
62 | <div class="menu_item_top"> | 67 | <div class="menu_item_top"> |
63 | <img src=""> | 68 | <img src=""> |
64 | </div> | 69 | </div> |
65 | <div class="menu_item_bottom"> | 70 | <div class="menu_item_bottom"> |
66 | - 关于展会 | 71 | + 新闻报道 |
67 | </div> | 72 | </div> |
68 | </div> | 73 | </div> |
69 | - <!--关于展会--> | ||
70 | - <div class="menu_item"> | 74 | + <!--论坛活动--> |
75 | + <div class="menu_item item_6"> | ||
71 | <div class="menu_item_top"> | 76 | <div class="menu_item_top"> |
72 | <img src=""> | 77 | <img src=""> |
73 | </div> | 78 | </div> |
74 | <div class="menu_item_bottom"> | 79 | <div class="menu_item_bottom"> |
75 | - 关于展会 | 80 | + 论坛活动 |
76 | </div> | 81 | </div> |
77 | </div> | 82 | </div> |
78 | - <!--关于展会--> | ||
79 | - <div class="menu_item"> | 83 | + <!--商旅服务--> |
84 | + <div class="menu_item item_7"> | ||
80 | <div class="menu_item_top"> | 85 | <div class="menu_item_top"> |
81 | <img src=""> | 86 | <img src=""> |
82 | </div> | 87 | </div> |
83 | <div class="menu_item_bottom"> | 88 | <div class="menu_item_bottom"> |
84 | - 关于展会 | 89 | + 商旅服务 |
85 | </div> | 90 | </div> |
86 | </div> | 91 | </div> |
87 | - <!--关于展会--> | ||
88 | - <div class="menu_item"> | 92 | + <!--参观登记--> |
93 | + <div class="menu_item item_8"> | ||
89 | <div class="menu_item_top"> | 94 | <div class="menu_item_top"> |
90 | <img src=""> | 95 | <img src=""> |
91 | </div> | 96 | </div> |
92 | <div class="menu_item_bottom"> | 97 | <div class="menu_item_bottom"> |
93 | - 关于展会 | 98 | + 参观登记 |
94 | </div> | 99 | </div> |
95 | </div> | 100 | </div> |
96 | </div> | 101 | </div> |
97 | </div> | 102 | </div> |
98 | <!--中部图片--> | 103 | <!--中部图片--> |
99 | <div class="middle"> | 104 | <div class="middle"> |
100 | - <img src=""> | 105 | + <img src="images/index_2.png"> |
106 | + <div class="middle_text">2019汽车产业装备与智能制造峰会>></div> | ||
101 | </div> | 107 | </div> |
102 | - <!--最新咨询--> | 108 | + <!--最新资讯--> |
103 | <div class="new"> | 109 | <div class="new"> |
104 | <div class="iconfont icon-diqiu"></div> | 110 | <div class="iconfont icon-diqiu"></div> |
105 | - <div class="new_text">最新咨询</div> | 111 | + <div class="new_text">最新资讯</div> |
106 | </div> | 112 | </div> |
107 | <!--下划线--> | 113 | <!--下划线--> |
108 | <div class="new_underline"></div> | 114 | <div class="new_underline"></div> |
@@ -133,7 +139,7 @@ | @@ -133,7 +139,7 @@ | ||
133 | 139 | ||
134 | <!--底部菜单--> | 140 | <!--底部菜单--> |
135 | <div class="bottom_menu"> | 141 | <div class="bottom_menu"> |
136 | - <div class="bottom_menu_index"> | 142 | + <div class="bottom_menu_index index"> |
137 | <!--上图标--> | 143 | <!--上图标--> |
138 | <div class="iconfont icon-zhuye2"></div> | 144 | <div class="iconfont icon-zhuye2"></div> |
139 | <!--下文字--> | 145 | <!--下文字--> |
@@ -141,7 +147,7 @@ | @@ -141,7 +147,7 @@ | ||
141 | 首页 | 147 | 首页 |
142 | </div> | 148 | </div> |
143 | </div> | 149 | </div> |
144 | - <div class="bottom_menu_index"> | 150 | + <div class="bottom_menu_index tel"> |
145 | <!--上图标--> | 151 | <!--上图标--> |
146 | <div class="iconfont icon-dianhua-copy"></div> | 152 | <div class="iconfont icon-dianhua-copy"></div> |
147 | <!--下文字--> | 153 | <!--下文字--> |
@@ -149,7 +155,7 @@ | @@ -149,7 +155,7 @@ | ||
149 | 电话咨询 | 155 | 电话咨询 |
150 | </div> | 156 | </div> |
151 | </div> | 157 | </div> |
152 | - <div class="bottom_menu_index"> | 158 | + <div class="bottom_menu_index exhibition"> |
153 | <!--上图标--> | 159 | <!--上图标--> |
154 | <div class="iconfont icon-user-address"></div> | 160 | <div class="iconfont icon-user-address"></div> |
155 | <!--下文字--> | 161 | <!--下文字--> |
@@ -157,7 +163,7 @@ | @@ -157,7 +163,7 @@ | ||
157 | 网上展厅 | 163 | 网上展厅 |
158 | </div> | 164 | </div> |
159 | </div> | 165 | </div> |
160 | - <div class="bottom_menu_index"> | 166 | + <div class="bottom_menu_index personal"> |
161 | <!--上图标--> | 167 | <!--上图标--> |
162 | <div class="iconfont icon-gerenzhongxin"></div> | 168 | <div class="iconfont icon-gerenzhongxin"></div> |
163 | <!--下文字--> | 169 | <!--下文字--> |
@@ -170,4 +176,45 @@ | @@ -170,4 +176,45 @@ | ||
170 | 176 | ||
171 | 177 | ||
172 | </body> | 178 | </body> |
179 | +<script src="js/jquery.min.js"></script> | ||
180 | +<script> | ||
181 | + //底部四个按钮 | ||
182 | + $('.index').click(function () { | ||
183 | + window.location.href = "index.html" | ||
184 | + }) | ||
185 | + $('.tel').click(function () { | ||
186 | + window.location.href = "index.html" | ||
187 | + }) | ||
188 | + $('.exhibition').click(function () { | ||
189 | + window.location.href = "wszt.html" | ||
190 | + }) | ||
191 | + $('.personal').click(function () { | ||
192 | + window.location.href = "index.html" | ||
193 | + }) | ||
194 | + //中部八个按钮 | ||
195 | + $('.item_1').click(function () { | ||
196 | + window.location.href = "gyzh.html" | ||
197 | + }) | ||
198 | + $('.item_2').click(function () { | ||
199 | + window.location.href = "zpfw.html" | ||
200 | + }) | ||
201 | + $('.item_3').click(function () { | ||
202 | + window.location.href = "dlhd.html" | ||
203 | + }) | ||
204 | + $('.item_4').click(function () { | ||
205 | + window.location.href = "czsq.html" | ||
206 | + }) | ||
207 | + $('.item_5').click(function () { | ||
208 | + window.location.href = "xwbd.html" | ||
209 | + }) | ||
210 | + $('.item_6').click(function () { | ||
211 | + window.location.href = "lthd.html" | ||
212 | + }) | ||
213 | + $('.item_7').click(function () { | ||
214 | + window.location.href = "slfw_2.html" | ||
215 | + }) | ||
216 | + $('.item_8').click(function () { | ||
217 | + window.location.href = "cgdj.html" | ||
218 | + }) | ||
219 | +</script> | ||
173 | </html> | 220 | </html> |
js/page.js
0 → 100644
1 | +/* 一个简单的分页,每次点击重渲染 | ||
2 | +******by wuati***** | ||
3 | +*/ | ||
4 | +(function ($) { | ||
5 | + //默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存) | ||
6 | + var defaults = { | ||
7 | + //id : '#paging',//id | ||
8 | + leng: 3,//总页数 | ||
9 | + activeClass: 'page-active' ,//active类 | ||
10 | + firstPage: '首页',// | ||
11 | + lastPage: '末页', | ||
12 | + prv: '«', | ||
13 | + next: '»', | ||
14 | + clickBack:function(){ | ||
15 | + } | ||
16 | + }; | ||
17 | + var opts,myOptions; | ||
18 | + //扩展 | ||
19 | + $.fn.extend({ | ||
20 | + //插件名称 | ||
21 | + page: function (options) { | ||
22 | + //覆盖默认参数 | ||
23 | + myOptions = options | ||
24 | + opts = $.extend(defaults, options); | ||
25 | + console.log(opts,998,this) | ||
26 | + //主函数 | ||
27 | + return this.each(function () { | ||
28 | + //激活事件 | ||
29 | + var obj = $(this); | ||
30 | + var str1 = ''; | ||
31 | + var str = ''; | ||
32 | + var l = opts.leng; | ||
33 | + if (l > 1&&l < 10) { | ||
34 | + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>'; | ||
35 | + for (i = 2; i < l + 1; i++) { | ||
36 | + str += '<li><a href="javascript:">' + i + '</a></li>'; | ||
37 | + } | ||
38 | + }else if(l > 9){ | ||
39 | + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>'; | ||
40 | + for (i = 2; i < 10; i++) { | ||
41 | + str += '<li><a href="javascript:">' + i + '</a></li>'; | ||
42 | + } | ||
43 | + //str += '<li><a href="javascript:">...</a></li>' | ||
44 | + } else { | ||
45 | + str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>'; | ||
46 | + } | ||
47 | + // obj.html('<div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div>'); | ||
48 | + | ||
49 | + obj.html('<div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div>'); | ||
50 | + | ||
51 | + obj.on('click', '.next', function () { | ||
52 | + var pageshow = parseInt($('.' + opts.activeClass).html()); | ||
53 | + if(pageshow==l){ | ||
54 | + return false; | ||
55 | + } | ||
56 | + if(pageshow == l) { | ||
57 | + }else if(pageshow > l-5&&pageshow < l){ | ||
58 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass); | ||
59 | + }else if(pageshow > 0&&pageshow < 6){ | ||
60 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass); | ||
61 | + }else { | ||
62 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass); | ||
63 | + fpageShow(); | ||
64 | + } | ||
65 | + opts.clickBack(pageshow+1) | ||
66 | + }); | ||
67 | + obj.on('click', '.prv', function () { | ||
68 | + var pageshow = parseInt($('.' + opts.activeClass).html()); | ||
69 | + | ||
70 | + if (pageshow == 1) { | ||
71 | + return false; | ||
72 | + }else if(pageshow > l-5&&pageshow < l+1){ | ||
73 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
74 | + //this.fpageBranch(pageshow-1); | ||
75 | + }else if(pageshow > 1&&pageshow < 6){ | ||
76 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
77 | + //this.fpageBranch(pageshow-1); | ||
78 | + }else { | ||
79 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
80 | + //this.fpageBranch(pageshow-1); | ||
81 | + fpageShow(); | ||
82 | + } | ||
83 | + opts.clickBack(pageshow-1) | ||
84 | + }); | ||
85 | + | ||
86 | + obj.on('click', '.first', function(){ | ||
87 | + var pageshow = 1; | ||
88 | + var nowshow = parseInt($('.' + opts.activeClass).html()); | ||
89 | + if(nowshow==1){ | ||
90 | + return false; | ||
91 | + } | ||
92 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
93 | + fpagePrv(0); | ||
94 | + opts.clickBack(pageshow) | ||
95 | + }) | ||
96 | + obj.on('click', '.last', function(){ | ||
97 | + var pageshow = l; | ||
98 | + var nowshow = parseInt($('.' + opts.activeClass).html()); | ||
99 | + if(nowshow==l){ | ||
100 | + return false; | ||
101 | + } | ||
102 | + if(l>9){ | ||
103 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
104 | + fpageNext(8); | ||
105 | + }else{ | ||
106 | + $('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass); | ||
107 | + fpageNext(l-1); | ||
108 | + } | ||
109 | + opts.clickBack(pageshow) | ||
110 | + }) | ||
111 | + | ||
112 | + obj.on('click', 'li', function(){ | ||
113 | + var $this = $(this); | ||
114 | + var pageshow = parseInt($this.find('a').html()); | ||
115 | + var nowshow = parseInt($('.' + opts.activeClass).html()); | ||
116 | + console.log(l,256) | ||
117 | + if(pageshow==nowshow){ | ||
118 | + return false; | ||
119 | + } | ||
120 | + if(l>9){ | ||
121 | + console.log(1234567,pageshow,l) | ||
122 | + if(pageshow > l-5&&pageshow < l+1){ | ||
123 | + $('.' + opts.activeClass).removeClass(opts.activeClass); | ||
124 | + $this.find('a').addClass(opts.activeClass); | ||
125 | + fpageNext(8-(l-pageshow)); | ||
126 | + }else if(pageshow > 0&&pageshow < 5){ | ||
127 | + $('.' + opts.activeClass).removeClass(opts.activeClass); | ||
128 | + $this.find('a').addClass(opts.activeClass); | ||
129 | + fpagePrv(pageshow-1); | ||
130 | + }else{ | ||
131 | + $('.' + opts.activeClass).removeClass(opts.activeClass); | ||
132 | + $this.find('a').addClass(opts.activeClass); | ||
133 | + fpageShow(); | ||
134 | + } | ||
135 | + }else{ | ||
136 | + console.log(123456) | ||
137 | + $('.' + opts.activeClass).removeClass(opts.activeClass); | ||
138 | + $this.find('a').addClass(opts.activeClass); | ||
139 | + } | ||
140 | + opts.clickBack(pageshow) | ||
141 | + }) | ||
142 | + | ||
143 | + function fpageShow(){ | ||
144 | + var pageshow = parseInt($('.' + opts.activeClass).html()); | ||
145 | + var pageStart = pageshow - 4; | ||
146 | + var pageEnd = pageshow + 5; | ||
147 | + var str1 = ''; | ||
148 | + for(i=0;i<9;i++){ | ||
149 | + str1 += '<li><a href="javascript:" class="">' + (pageStart+i) + '</a></li>' | ||
150 | + } | ||
151 | + obj.find('ul').html(str1); | ||
152 | + obj.find('ul li').eq(4).find('a').addClass(opts.activeClass); | ||
153 | + | ||
154 | + } | ||
155 | + | ||
156 | + function fpagePrv(prv){ | ||
157 | + var str1 = ''; | ||
158 | + if(l>8){ | ||
159 | + for(i=0;i<9;i++){ | ||
160 | + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>' | ||
161 | + } | ||
162 | + }else{ | ||
163 | + for(i=0;i<l;i++){ | ||
164 | + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>' | ||
165 | + } | ||
166 | + } | ||
167 | + obj.find('ul').html(str1); | ||
168 | + obj.find('ul li').eq(prv).find('a').addClass(opts.activeClass); | ||
169 | + } | ||
170 | + | ||
171 | + function fpageNext(next){ | ||
172 | + var str1 = ''; | ||
173 | + if(l>8){ | ||
174 | + for(i=l-8;i<l+1;i++){ | ||
175 | + str1 += '<li><a href="javascript:" class="">' + i + '</a></li>' | ||
176 | + } | ||
177 | + obj.find('ul').html(str1); | ||
178 | + obj.find('ul li').eq(next).find('a').addClass(opts.activeClass); | ||
179 | + }else{ | ||
180 | + for(i=0;i<l;i++){ | ||
181 | + str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>' | ||
182 | + } | ||
183 | + obj.find('ul').html(str1); | ||
184 | + obj.find('ul li').eq(next).find('a').addClass(opts.activeClass); | ||
185 | + } | ||
186 | + } | ||
187 | + }); | ||
188 | + }, | ||
189 | + setLength: function(newLength){ | ||
190 | + myOptions.leng = newLength | ||
191 | + $(this).html('') | ||
192 | + $(this).unbind() | ||
193 | + $(this).page(myOptions) | ||
194 | + } | ||
195 | + }) | ||
196 | +})(jQuery); |
js/swiper-3.4.2.jquery.min.js
0 → 100644
此 diff 太大无法显示。
@@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
8 | 8 | ||
9 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_hkazqqzd2pg.css"> | 9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_ucda0dtgz1.css"> |
10 | <link rel="stylesheet" type="text/css" href="css/login.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/login.css"> |
11 | <script src="js/base.js"></script> | 11 | <script src="js/base.js"></script> |
12 | 12 | ||
@@ -20,6 +20,13 @@ | @@ -20,6 +20,13 @@ | ||
20 | font-size: 0.5rem; | 20 | font-size: 0.5rem; |
21 | color: #B3B3B3; | 21 | color: #B3B3B3; |
22 | } | 22 | } |
23 | + .icon-yanzhengma{ | ||
24 | + font-size: 0.5rem; | ||
25 | + color: #B3B3B3; | ||
26 | + } | ||
27 | + .margin_item{ | ||
28 | + margin-top: 0.35rem; | ||
29 | + } | ||
23 | </style> | 30 | </style> |
24 | 31 | ||
25 | </head> | 32 | </head> |
@@ -43,8 +50,9 @@ | @@ -43,8 +50,9 @@ | ||
43 | </div> | 50 | </div> |
44 | 51 | ||
45 | </div> | 52 | </div> |
46 | - <!--输入框--> | ||
47 | - <div class="bottom"> | 53 | + |
54 | + <!--登录输入框--> | ||
55 | + <div class="bottom" style="display: none"> | ||
48 | <div class="bottom_item"> | 56 | <div class="bottom_item"> |
49 | <div class="iconfont icon-Fill"></div> | 57 | <div class="iconfont icon-Fill"></div> |
50 | <input type="text" placeholder="请输入手机号"> | 58 | <input type="text" placeholder="请输入手机号"> |
@@ -53,8 +61,62 @@ | @@ -53,8 +61,62 @@ | ||
53 | <div class="iconfont icon-mima"></div> | 61 | <div class="iconfont icon-mima"></div> |
54 | <input type="text" placeholder="请输入密码"> | 62 | <input type="text" placeholder="请输入密码"> |
55 | </div> | 63 | </div> |
64 | + | ||
65 | + <!--登录框--> | ||
66 | + <div class="bottom_sub"> | ||
67 | + 立即登录 | ||
68 | + </div> | ||
69 | + | ||
70 | + <!--记住密码 立即注册--> | ||
71 | + <div class="bottom_t"> | ||
72 | + <div class="bottom_t_item"> | ||
73 | + <input type="checkbox"> <span>记住密码</span> | ||
74 | + </div> | ||
75 | + <div class="bottom_t_item"> | ||
76 | + <div>忘记密码?立即注册</div> | ||
77 | + </div> | ||
78 | + </div> | ||
79 | + </div> | ||
80 | + | ||
81 | + <!--注册输入框--> | ||
82 | + <div class="bottom" style="display: flex"> | ||
83 | + <div class="bottom_item "> | ||
84 | + <div class="iconfont icon-Fill"></div> | ||
85 | + <input type="text" placeholder="请输入手机号"> | ||
86 | + </div> | ||
87 | + <!--输入验证码--> | ||
88 | + <div class="bottom_small margin_item"> | ||
89 | + <!--验证码输入框--> | ||
90 | + <div class="bottom_small_left"> | ||
91 | + <div class="iconfont icon-yanzhengma"></div> | ||
92 | + <input type="text" placeholder="输入验证码"> | ||
93 | + </div> | ||
94 | + <!--获取验证码框--> | ||
95 | + <div class="bottom_small_right"> | ||
96 | + 获取验证码 | ||
97 | + </div> | ||
98 | + </div> | ||
99 | + | ||
100 | + <div class="bottom_item margin_item"> | ||
101 | + <div class="iconfont icon-mima"></div> | ||
102 | + <input type="text" placeholder="请输入密码"> | ||
103 | + </div> | ||
104 | + | ||
105 | + <!--登录框--> | ||
106 | + <div class="bottom_sub margin_item"> | ||
107 | + 立即注册 | ||
108 | + </div> | ||
109 | + | ||
110 | + <!--记住密码 立即注册--> | ||
111 | + <div class="bottom_text"> | ||
112 | + 已有账号,立即登录 | ||
113 | + </div> | ||
56 | </div> | 114 | </div> |
57 | 115 | ||
116 | + | ||
117 | + | ||
118 | + | ||
119 | + | ||
58 | </div> | 120 | </div> |
59 | 121 | ||
60 | 122 |
lthd.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html lang="en"> | ||
3 | +<head> | ||
4 | + <meta charset="UTF-8"> | ||
5 | + <title>论坛活动</title> | ||
6 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
7 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
8 | + | ||
9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css"> | ||
10 | + <link rel="stylesheet" type="text/css" href="css/xwbd.css"> | ||
11 | + <link rel="stylesheet" type="text/css" href="css/dropload.css"> | ||
12 | + <script src="js/base.js"></script> | ||
13 | + | ||
14 | + <style> | ||
15 | + .icon-zuo{ | ||
16 | + color: #959595; | ||
17 | + font-size: 0.38rem; | ||
18 | + } | ||
19 | + .icon-iconfont-edu12{ | ||
20 | + color: #959595; | ||
21 | + font-size: 0.5rem; | ||
22 | + } | ||
23 | + </style> | ||
24 | +</head> | ||
25 | +<body> | ||
26 | +<div class="container"> | ||
27 | + <!--头部信息--> | ||
28 | + <div class="head"> | ||
29 | + <!--左图标--> | ||
30 | + <div class="iconfont icon-zuo"> | ||
31 | + | ||
32 | + </div> | ||
33 | + <!--论坛活动--> | ||
34 | + <div class="head_new"> | ||
35 | + 论坛活动 | ||
36 | + </div> | ||
37 | + <!--右菜单--> | ||
38 | + <div class="iconfont icon-iconfont-edu12"> | ||
39 | + | ||
40 | + </div> | ||
41 | + | ||
42 | + </div> | ||
43 | + | ||
44 | + <!--条目信息--> | ||
45 | + <div class="items"> | ||
46 | + <div class="items_box"> | ||
47 | + <div class="item"> | ||
48 | + <!--左边--> | ||
49 | + <div class="item_left"> | ||
50 | + <img src="images/10.png"> | ||
51 | + </div> | ||
52 | + <!--中部--> | ||
53 | + <div class="item_mid"> | ||
54 | + <p class="item_mid_big"> | ||
55 | + | ||
56 | + 智能时代"云"发展"新模式"驻 | ||
57 | + 占天津 | ||
58 | + | ||
59 | + </p> | ||
60 | + <p class="item_mid_small"> | ||
61 | + 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ...... | ||
62 | + </p> | ||
63 | + </div> | ||
64 | + <!--右边--> | ||
65 | + <div class="item_right "> | ||
66 | + | ||
67 | + <p>12月</p> | ||
68 | + <p>25日</p> | ||
69 | + <p>星期二</p> | ||
70 | + </div> | ||
71 | + </div> | ||
72 | + <div class="item"> | ||
73 | + <!--左边--> | ||
74 | + <div class="item_left"> | ||
75 | + <img src="images/10.png"> | ||
76 | + </div> | ||
77 | + <!--中部--> | ||
78 | + <div class="item_mid"> | ||
79 | + <p class="item_mid_big"> | ||
80 | + | ||
81 | + 智能时代"云"发展"新模式"驻 | ||
82 | + 占天津 | ||
83 | + | ||
84 | + </p> | ||
85 | + <p class="item_mid_small"> | ||
86 | + 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ...... | ||
87 | + </p> | ||
88 | + </div> | ||
89 | + <!--右边--> | ||
90 | + <div class="item_right color_gray"> | ||
91 | + | ||
92 | + <p>12月</p> | ||
93 | + <p>25日</p> | ||
94 | + <p>星期二</p> | ||
95 | + </div> | ||
96 | + </div> | ||
97 | + </div> | ||
98 | + </div> | ||
99 | + | ||
100 | + | ||
101 | + <!--底部菜单--> | ||
102 | + <div class="bottom_menu"> | ||
103 | + <div class="bottom_menu_index"> | ||
104 | + <!--上图标--> | ||
105 | + <div class="iconfont icon-zhuye2"></div> | ||
106 | + <!--下文字--> | ||
107 | + <div class="bottom_menu_index_text"> | ||
108 | + 首页 | ||
109 | + </div> | ||
110 | + </div> | ||
111 | + <div class="bottom_menu_index"> | ||
112 | + <!--上图标--> | ||
113 | + <div class="iconfont icon-dianhua-copy"></div> | ||
114 | + <!--下文字--> | ||
115 | + <div class="bottom_menu_index_text"> | ||
116 | + 电话咨询 | ||
117 | + </div> | ||
118 | + </div> | ||
119 | + <div class="bottom_menu_index"> | ||
120 | + <!--上图标--> | ||
121 | + <div class="iconfont icon-user-address"></div> | ||
122 | + <!--下文字--> | ||
123 | + <div class="bottom_menu_index_text"> | ||
124 | + 网上展厅 | ||
125 | + </div> | ||
126 | + </div> | ||
127 | + <div class="bottom_menu_index"> | ||
128 | + <!--上图标--> | ||
129 | + <div class="iconfont icon-gerenzhongxin"></div> | ||
130 | + <!--下文字--> | ||
131 | + <div class="bottom_menu_index_text"> | ||
132 | + 个人中心 | ||
133 | + </div> | ||
134 | + </div> | ||
135 | + </div> | ||
136 | + | ||
137 | +</div> | ||
138 | + | ||
139 | +</body> | ||
140 | +<script src="js/jquery.min.js"></script> | ||
141 | +<script src="js/dropload.min.js"></script> | ||
142 | + | ||
143 | +<script> | ||
144 | + $('.item').click(function () { | ||
145 | + window.location.href = "nrxq.html"; | ||
146 | + }) | ||
147 | + //菜单功能 | ||
148 | + $(document).ready(function () { | ||
149 | + | ||
150 | + | ||
151 | + // 页数 | ||
152 | + var page = 1; | ||
153 | + // 每次循环展示10个 | ||
154 | + var size = 10; | ||
155 | + $('.items').dropload({ | ||
156 | + scrollArea : window, | ||
157 | + domUp : { | ||
158 | + domClass : 'dropload-up', | ||
159 | + domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', | ||
160 | + domUpdate : '<div class="dropload-update">↑释放更新</div>', | ||
161 | + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' | ||
162 | + }, | ||
163 | + domDown : { | ||
164 | + domClass : 'dropload-down', | ||
165 | + domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', | ||
166 | + domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', | ||
167 | + domNoData : '<div class="dropload-noData">暂无数据</div>' | ||
168 | + }, | ||
169 | + loadDownFn : function(me){ | ||
170 | + page++; | ||
171 | + // 拼接HTML | ||
172 | + var result = ''; | ||
173 | + var s = ""; | ||
174 | + var show=""; | ||
175 | + var list_compressor=""; | ||
176 | + var list_answer=""; | ||
177 | + $.ajax({ | ||
178 | + type: 'GET', | ||
179 | + url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size, | ||
180 | + dataType: 'json', | ||
181 | + success: function(data){ | ||
182 | + console.log(data); | ||
183 | + var arrLen = data.length; | ||
184 | + if(arrLen > 0){ | ||
185 | + for(var i=0; i<arrLen; i++){ | ||
186 | + result +='<div class="item">\n' + | ||
187 | + ' <!--左边-->\n' + | ||
188 | + ' <div class="item_left">\n' + | ||
189 | + ' <img src="images/10.png">\n' + | ||
190 | + ' </div>\n' + | ||
191 | + ' <!--中部-->\n' + | ||
192 | + ' <div class="item_mid">\n' + | ||
193 | + ' <p class="item_mid_big">\n' + | ||
194 | + '\n' + | ||
195 | + ' 智能时代"云"发展"新模式"驻\n' + | ||
196 | + ' 占天津\n' + | ||
197 | + '\n' + | ||
198 | + ' </p>\n' + | ||
199 | + ' <p class="item_mid_small">\n' + | ||
200 | + ' 前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' + | ||
201 | + ' </p>\n' + | ||
202 | + ' </div>\n' + | ||
203 | + ' <!--右边-->\n' + | ||
204 | + ' <div class="item_right color_gray">\n' + | ||
205 | + '\n' + | ||
206 | + ' <p>12月</p>\n' + | ||
207 | + ' <p>25日</p>\n' + | ||
208 | + ' <p>星期二</p>\n' + | ||
209 | + ' </div>\n' + | ||
210 | + ' </div>' | ||
211 | + | ||
212 | + | ||
213 | + | ||
214 | + | ||
215 | + } | ||
216 | + | ||
217 | + // 如果没有数据 | ||
218 | + }else{ | ||
219 | + // 锁定 | ||
220 | + me.lock(); | ||
221 | + // 无数据 | ||
222 | + me.noData(); | ||
223 | + } | ||
224 | + // 为了测试,延迟1秒加载 | ||
225 | + setTimeout(function(){ | ||
226 | + // 插入数据到页面,放到最后面 | ||
227 | + $('.items_box').append(result); | ||
228 | + // 每次数据插入,必须重置 | ||
229 | + me.resetload(); | ||
230 | + },500); | ||
231 | + }, | ||
232 | + error: function(xhr, type){ | ||
233 | + alert('Ajax error!'); | ||
234 | + // 即使加载出错,也得重置 | ||
235 | + me.resetload(); | ||
236 | + } | ||
237 | + }); | ||
238 | + }, | ||
239 | + threshold : 50 | ||
240 | + }); | ||
241 | + | ||
242 | + }) | ||
243 | +</script> | ||
244 | + | ||
245 | +</html> |
@@ -64,7 +64,7 @@ | @@ -64,7 +64,7 @@ | ||
64 | <div class="menu"> | 64 | <div class="menu"> |
65 | <div class="menu_top"> | 65 | <div class="menu_top"> |
66 | <!--关于展会--> | 66 | <!--关于展会--> |
67 | - <div class="menu_item"> | 67 | + <div class="menu_item item_1"> |
68 | <div class="menu_item_top"> | 68 | <div class="menu_item_top"> |
69 | <img src=""> | 69 | <img src=""> |
70 | </div> | 70 | </div> |
@@ -72,76 +72,78 @@ | @@ -72,76 +72,78 @@ | ||
72 | 关于展会 | 72 | 关于展会 |
73 | </div> | 73 | </div> |
74 | </div> | 74 | </div> |
75 | - <!--关于展会--> | ||
76 | - <div class="menu_item"> | 75 | + <!--展品范围--> |
76 | + <div class="menu_item item_2"> | ||
77 | <div class="menu_item_top"> | 77 | <div class="menu_item_top"> |
78 | - <img src=""> | 78 | + <img src="#"> |
79 | </div> | 79 | </div> |
80 | <div class="menu_item_bottom"> | 80 | <div class="menu_item_bottom"> |
81 | - 关于展会 | 81 | + 展品范围 |
82 | </div> | 82 | </div> |
83 | </div> | 83 | </div> |
84 | - <!--关于展会--> | ||
85 | - <div class="menu_item"> | 84 | + <!--展览活动--> |
85 | + <div class="menu_item item_3"> | ||
86 | <div class="menu_item_top"> | 86 | <div class="menu_item_top"> |
87 | <img src=""> | 87 | <img src=""> |
88 | </div> | 88 | </div> |
89 | <div class="menu_item_bottom"> | 89 | <div class="menu_item_bottom"> |
90 | - 关于展会 | 90 | + 展览活动 |
91 | </div> | 91 | </div> |
92 | </div> | 92 | </div> |
93 | <!--关于展会--> | 93 | <!--关于展会--> |
94 | - <div class="menu_item"> | 94 | + <div class="menu_item item_4"> |
95 | <div class="menu_item_top"> | 95 | <div class="menu_item_top"> |
96 | <img src=""> | 96 | <img src=""> |
97 | </div> | 97 | </div> |
98 | <div class="menu_item_bottom"> | 98 | <div class="menu_item_bottom"> |
99 | - 关于展会 | 99 | + 参展申请 |
100 | </div> | 100 | </div> |
101 | </div> | 101 | </div> |
102 | </div> | 102 | </div> |
103 | <div class="menu_bottom"> | 103 | <div class="menu_bottom"> |
104 | - <!--关于展会--> | ||
105 | - <div class="menu_item"> | 104 | + <!--新闻报道--> |
105 | + <div class="menu_item item_5"> | ||
106 | <div class="menu_item_top"> | 106 | <div class="menu_item_top"> |
107 | <img src=""> | 107 | <img src=""> |
108 | </div> | 108 | </div> |
109 | <div class="menu_item_bottom"> | 109 | <div class="menu_item_bottom"> |
110 | - 关于展会 | 110 | + 新闻报道 |
111 | </div> | 111 | </div> |
112 | </div> | 112 | </div> |
113 | - <!--关于展会--> | ||
114 | - <div class="menu_item"> | 113 | + <!--论坛活动--> |
114 | + <div class="menu_item item_6"> | ||
115 | <div class="menu_item_top"> | 115 | <div class="menu_item_top"> |
116 | <img src=""> | 116 | <img src=""> |
117 | </div> | 117 | </div> |
118 | <div class="menu_item_bottom"> | 118 | <div class="menu_item_bottom"> |
119 | - 关于展会 | 119 | + 论坛活动 |
120 | </div> | 120 | </div> |
121 | </div> | 121 | </div> |
122 | - <!--关于展会--> | ||
123 | - <div class="menu_item"> | 122 | + <!--商旅服务--> |
123 | + <div class="menu_item item_7"> | ||
124 | <div class="menu_item_top"> | 124 | <div class="menu_item_top"> |
125 | <img src=""> | 125 | <img src=""> |
126 | </div> | 126 | </div> |
127 | <div class="menu_item_bottom"> | 127 | <div class="menu_item_bottom"> |
128 | - 关于展会 | 128 | + 商旅服务 |
129 | </div> | 129 | </div> |
130 | </div> | 130 | </div> |
131 | - <!--关于展会--> | ||
132 | - <div class="menu_item"> | 131 | + <!--参观登记--> |
132 | + <div class="menu_item item_8"> | ||
133 | <div class="menu_item_top"> | 133 | <div class="menu_item_top"> |
134 | <img src=""> | 134 | <img src=""> |
135 | </div> | 135 | </div> |
136 | <div class="menu_item_bottom"> | 136 | <div class="menu_item_bottom"> |
137 | - 关于展会 | 137 | + 参观登记 |
138 | </div> | 138 | </div> |
139 | </div> | 139 | </div> |
140 | </div> | 140 | </div> |
141 | </div> | 141 | </div> |
142 | <!--中部图片--> | 142 | <!--中部图片--> |
143 | + | ||
143 | <div class="middle"> | 144 | <div class="middle"> |
144 | - <img src=""> | 145 | + <img src="images/index_2.png"> |
146 | + <div class="middle_text">2019汽车产业装备与智能制造峰会>></div> | ||
145 | </div> | 147 | </div> |
146 | <!--最新咨询--> | 148 | <!--最新咨询--> |
147 | <div class="new"> | 149 | <div class="new"> |
@@ -211,7 +213,46 @@ | @@ -211,7 +213,46 @@ | ||
211 | </div> | 213 | </div> |
212 | </div> | 214 | </div> |
213 | </div> | 215 | </div> |
214 | - | ||
215 | - | 216 | +<script src="js/jquery.min.js"></script> |
217 | +<script> | ||
218 | + //底部四个按钮 | ||
219 | + $('.index').click(function () { | ||
220 | + window.location.href = "index.html" | ||
221 | + }) | ||
222 | + $('.tel').click(function () { | ||
223 | + window.location.href = "index.html" | ||
224 | + }) | ||
225 | + $('.exhibition').click(function () { | ||
226 | + window.location.href = "wszt.html" | ||
227 | + }) | ||
228 | + $('.personal').click(function () { | ||
229 | + window.location.href = "index.html" | ||
230 | + }) | ||
231 | + //中部八个按钮 | ||
232 | + $('.item_1').click(function () { | ||
233 | + window.location.href = "gyzh.html" | ||
234 | + }) | ||
235 | + $('.item_2').click(function () { | ||
236 | + window.location.href = "zpfw.html" | ||
237 | + }) | ||
238 | + $('.item_3').click(function () { | ||
239 | + window.location.href = "dlhd.html" | ||
240 | + }) | ||
241 | + $('.item_4').click(function () { | ||
242 | + window.location.href = "czsq.html" | ||
243 | + }) | ||
244 | + $('.item_5').click(function () { | ||
245 | + window.location.href = "xwbd.html" | ||
246 | + }) | ||
247 | + $('.item_6').click(function () { | ||
248 | + window.location.href = "lthd.html" | ||
249 | + }) | ||
250 | + $('.item_7').click(function () { | ||
251 | + window.location.href = "slfw_2.html" | ||
252 | + }) | ||
253 | + $('.item_8').click(function () { | ||
254 | + window.location.href = "cgdj.html" | ||
255 | + }) | ||
256 | +</script> | ||
216 | </body> | 257 | </body> |
217 | </html> | 258 | </html> |
@@ -10,7 +10,7 @@ | @@ -10,7 +10,7 @@ | ||
10 | <link rel="stylesheet" type="text/css" href="css/xwbd.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/xwbd.css"> |
11 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> | 11 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> |
12 | <script src="js/base.js"></script> | 12 | <script src="js/base.js"></script> |
13 | - <script src="js/jquery.min.js"></script> | 13 | + |
14 | <style> | 14 | <style> |
15 | .icon-zuo{ | 15 | .icon-zuo{ |
16 | color: #959595; | 16 | color: #959595; |
@@ -137,9 +137,13 @@ | @@ -137,9 +137,13 @@ | ||
137 | </div> | 137 | </div> |
138 | 138 | ||
139 | </body> | 139 | </body> |
140 | +<script src="js/jquery.min.js"></script> | ||
140 | <script src="js/dropload.min.js"></script> | 141 | <script src="js/dropload.min.js"></script> |
141 | 142 | ||
142 | <script> | 143 | <script> |
144 | + $('.item').click(function () { | ||
145 | + window.location.href = "nrxq.html"; | ||
146 | + }) | ||
143 | //菜单功能 | 147 | //菜单功能 |
144 | $(document).ready(function () { | 148 | $(document).ready(function () { |
145 | 149 |
@@ -6,14 +6,40 @@ | @@ -6,14 +6,40 @@ | ||
6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
8 | 8 | ||
9 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css"> | 9 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css"> |
10 | <link rel="stylesheet" type="text/css" href="css/zpfw.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/zpfw.css"> |
11 | <script src="js/base.js"></script> | 11 | <script src="js/base.js"></script> |
12 | + <style> | ||
13 | + .icon-zuo{ | ||
14 | + color: #959595; | ||
15 | + font-size: 0.38rem; | ||
16 | + } | ||
17 | + .icon-iconfont-edu12{ | ||
18 | + color: #959595; | ||
19 | + font-size: 0.5rem; | ||
20 | + } | ||
21 | + </style> | ||
12 | </head> | 22 | </head> |
13 | <body> | 23 | <body> |
14 | <div class="container"> | 24 | <div class="container"> |
15 | - <!--头部图片--> | 25 | + <!--头部信息--> |
16 | <div class="head"> | 26 | <div class="head"> |
27 | + <!--左图标--> | ||
28 | + <div class="iconfont icon-zuo"> | ||
29 | + | ||
30 | + </div> | ||
31 | + <!--展品范围--> | ||
32 | + <div class="head_new"> | ||
33 | + 展品范围 | ||
34 | + </div> | ||
35 | + <!--右菜单--> | ||
36 | + <div> | ||
37 | + | ||
38 | + </div> | ||
39 | + | ||
40 | + </div> | ||
41 | + <!--头部图片--> | ||
42 | + <div class="head_pic"> | ||
17 | <img src="images/555.png"> | 43 | <img src="images/555.png"> |
18 | </div> | 44 | </div> |
19 | <!--中部内容--> | 45 | <!--中部内容--> |
@@ -10,6 +10,7 @@ | @@ -10,6 +10,7 @@ | ||
10 | <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css"> | 10 | <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css"> |
11 | <link rel="stylesheet" type="text/css" href="css/zsml.css"> | 11 | <link rel="stylesheet" type="text/css" href="css/zsml.css"> |
12 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> | 12 | <link rel="stylesheet" type="text/css" href="css/dropload.css"> |
13 | + <link rel="stylesheet" type="text/css" href="css/page.css"> | ||
13 | <script src="js/base.js"></script> | 14 | <script src="js/base.js"></script> |
14 | <script src="js/jquery.min.js"></script> | 15 | <script src="js/jquery.min.js"></script> |
15 | <style> | 16 | <style> |
@@ -25,7 +26,41 @@ | @@ -25,7 +26,41 @@ | ||
25 | color: #ffffff; | 26 | color: #ffffff; |
26 | } | 27 | } |
27 | .items_box{ | 28 | .items_box{ |
28 | - margin-bottom: 1rem; | 29 | + margin-bottom: 0.4rem; |
30 | + } | ||
31 | + .pageTest{ | ||
32 | + width: 4.5rem; | ||
33 | + height: 0.5rem; | ||
34 | + display: flex; | ||
35 | + } | ||
36 | + .activP{ | ||
37 | + background-color: #367fa9!important; | ||
38 | + color: #fff!important; | ||
39 | + } | ||
40 | + | ||
41 | + .prv,.next{ | ||
42 | + width: 0.8rem; | ||
43 | + font-size: 0.16rem; | ||
44 | + border: none; | ||
45 | + } | ||
46 | + .last,.first{ | ||
47 | + width: 0.5rem; | ||
48 | + border: none; | ||
49 | + } | ||
50 | + .pagingUl li{ | ||
51 | + width: 0.5rem; | ||
52 | + height: 0.5rem; | ||
53 | + display: flex; | ||
54 | + } | ||
55 | + .pagingUl li a{ | ||
56 | + border: none; | ||
57 | + background-color: transparent; | ||
58 | + } | ||
59 | + .prv{ | ||
60 | + margin-left: 0.2rem; | ||
61 | + } | ||
62 | + .last{ | ||
63 | + margin-left: 0.2rem; | ||
29 | } | 64 | } |
30 | </style> | 65 | </style> |
31 | </head> | 66 | </head> |
@@ -74,7 +109,146 @@ | @@ -74,7 +109,146 @@ | ||
74 | 北京惟鑫航达科技有限公司 | 109 | 北京惟鑫航达科技有限公司 |
75 | </div> | 110 | </div> |
76 | </div> | 111 | </div> |
112 | + <div class="item"> | ||
113 | + <!--头部图片--> | ||
114 | + <div class="item_top"> | ||
115 | + <img src="images/12.png"> | ||
116 | + </div> | ||
117 | + <!--下划线--> | ||
118 | + <div class="item_underline"></div> | ||
119 | + <!--底部公司--> | ||
120 | + <div class="item_bottom"> | ||
121 | + 北京惟鑫航达科技有限公司 | ||
122 | + </div> | ||
123 | + </div> | ||
124 | + <div class="item"> | ||
125 | + <!--头部图片--> | ||
126 | + <div class="item_top"> | ||
127 | + <img src="images/12.png"> | ||
128 | + </div> | ||
129 | + <!--下划线--> | ||
130 | + <div class="item_underline"></div> | ||
131 | + <!--底部公司--> | ||
132 | + <div class="item_bottom"> | ||
133 | + 北京惟鑫航达科技有限公司 | ||
134 | + </div> | ||
135 | + </div> | ||
136 | + <div class="item"> | ||
137 | + <!--头部图片--> | ||
138 | + <div class="item_top"> | ||
139 | + <img src="images/12.png"> | ||
140 | + </div> | ||
141 | + <!--下划线--> | ||
142 | + <div class="item_underline"></div> | ||
143 | + <!--底部公司--> | ||
144 | + <div class="item_bottom"> | ||
145 | + 北京惟鑫航达科技有限公司 | ||
146 | + </div> | ||
147 | + </div> | ||
148 | + <div class="item"> | ||
149 | + <!--头部图片--> | ||
150 | + <div class="item_top"> | ||
151 | + <img src="images/12.png"> | ||
152 | + </div> | ||
153 | + <!--下划线--> | ||
154 | + <div class="item_underline"></div> | ||
155 | + <!--底部公司--> | ||
156 | + <div class="item_bottom"> | ||
157 | + 北京惟鑫航达科技有限公司 | ||
158 | + </div> | ||
159 | + </div> | ||
160 | + <div class="item"> | ||
161 | + <!--头部图片--> | ||
162 | + <div class="item_top"> | ||
163 | + <img src="images/12.png"> | ||
164 | + </div> | ||
165 | + <!--下划线--> | ||
166 | + <div class="item_underline"></div> | ||
167 | + <!--底部公司--> | ||
168 | + <div class="item_bottom"> | ||
169 | + 北京惟鑫航达科技有限公司 | ||
170 | + </div> | ||
171 | + </div> | ||
172 | + <div class="item"> | ||
173 | + <!--头部图片--> | ||
174 | + <div class="item_top"> | ||
175 | + <img src="images/12.png"> | ||
176 | + </div> | ||
177 | + <!--下划线--> | ||
178 | + <div class="item_underline"></div> | ||
179 | + <!--底部公司--> | ||
180 | + <div class="item_bottom"> | ||
181 | + 北京惟鑫航达科技有限公司 | ||
182 | + </div> | ||
183 | + </div> | ||
184 | + <div class="item"> | ||
185 | + <!--头部图片--> | ||
186 | + <div class="item_top"> | ||
187 | + <img src="images/12.png"> | ||
188 | + </div> | ||
189 | + <!--下划线--> | ||
190 | + <div class="item_underline"></div> | ||
191 | + <!--底部公司--> | ||
192 | + <div class="item_bottom"> | ||
193 | + 北京惟鑫航达科技有限公司 | ||
194 | + </div> | ||
195 | + </div> | ||
196 | + <div class="item"> | ||
197 | + <!--头部图片--> | ||
198 | + <div class="item_top"> | ||
199 | + <img src="images/12.png"> | ||
200 | + </div> | ||
201 | + <!--下划线--> | ||
202 | + <div class="item_underline"></div> | ||
203 | + <!--底部公司--> | ||
204 | + <div class="item_bottom"> | ||
205 | + 北京惟鑫航达科技有限公司 | ||
206 | + </div> | ||
207 | + </div> | ||
208 | + <div class="item"> | ||
209 | + <!--头部图片--> | ||
210 | + <div class="item_top"> | ||
211 | + <img src="images/12.png"> | ||
212 | + </div> | ||
213 | + <!--下划线--> | ||
214 | + <div class="item_underline"></div> | ||
215 | + <!--底部公司--> | ||
216 | + <div class="item_bottom"> | ||
217 | + 北京惟鑫航达科技有限公司 | ||
218 | + </div> | ||
219 | + </div> | ||
220 | + <div class="item"> | ||
221 | + <!--头部图片--> | ||
222 | + <div class="item_top"> | ||
223 | + <img src="images/12.png"> | ||
224 | + </div> | ||
225 | + <!--下划线--> | ||
226 | + <div class="item_underline"></div> | ||
227 | + <!--底部公司--> | ||
228 | + <div class="item_bottom"> | ||
229 | + 北京惟鑫航达科技有限公司 | ||
230 | + </div> | ||
231 | + </div> | ||
232 | + <div class="item"> | ||
233 | + <!--头部图片--> | ||
234 | + <div class="item_top"> | ||
235 | + <img src="images/12.png"> | ||
236 | + </div> | ||
237 | + <!--下划线--> | ||
238 | + <div class="item_underline"></div> | ||
239 | + <!--底部公司--> | ||
240 | + <div class="item_bottom"> | ||
241 | + 北京惟鑫航达科技有限公司 | ||
242 | + </div> | ||
243 | + </div> | ||
244 | + </div> | ||
77 | 245 | ||
246 | + </div> | ||
247 | + | ||
248 | + <!--分页功能--> | ||
249 | + <div class="func_page"> | ||
250 | + <div class="pageTest"> | ||
251 | + <!--<div class="first"></div>--> | ||
78 | </div> | 252 | </div> |
79 | </div> | 253 | </div> |
80 | 254 | ||
@@ -121,95 +295,108 @@ | @@ -121,95 +295,108 @@ | ||
121 | 295 | ||
122 | </body> | 296 | </body> |
123 | <script src="js/dropload.min.js"></script> | 297 | <script src="js/dropload.min.js"></script> |
124 | - | 298 | +<script src="js/page.js"></script> |
125 | <script> | 299 | <script> |
126 | 300 | ||
127 | - | 301 | + //分页功能 |
302 | + $('.pageTest').page({ | ||
303 | + leng: 3,//分页总数 | ||
304 | + activeClass: 'activP' , //active 类样式定义 | ||
128 | 305 | ||
129 | - //下拉加载功能 | ||
130 | - $(document).ready(function () { | ||
131 | - | ||
132 | - | ||
133 | - // 页数 | ||
134 | - var page = 2; | ||
135 | - // 每次循环展示10个 | ||
136 | - var size = 1; | ||
137 | - $('.items_box').dropload({ | ||
138 | - scrollArea : window, | ||
139 | - domUp : { | ||
140 | - domClass : 'dropload-up', | ||
141 | - domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', | ||
142 | - domUpdate : '<div class="dropload-update">↑释放更新</div>', | ||
143 | - domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' | ||
144 | - }, | ||
145 | - domDown : { | ||
146 | - domClass : 'dropload-down', | ||
147 | - domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', | ||
148 | - domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', | ||
149 | - domNoData : '<div class="dropload-noData">暂无数据</div>' | ||
150 | - }, | ||
151 | - loadDownFn : function(me){ | ||
152 | - page++; | ||
153 | - // 拼接HTML | ||
154 | - var result = ''; | ||
155 | - var s = ""; | ||
156 | - var show=""; | ||
157 | - var list_compressor=""; | ||
158 | - var list_answer=""; | ||
159 | - $.ajax({ | ||
160 | - type: 'GET', | ||
161 | - url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size, | ||
162 | - dataType: 'json', | ||
163 | - success: function(data){ | ||
164 | - console.log(data); | ||
165 | - var arrLen = data.length; | ||
166 | - if(arrLen > 0){ | ||
167 | - for(var i=0; i<arrLen; i++){ | ||
168 | - result +='<div class="item">\n' + | ||
169 | - ' <!--头部图片-->\n' + | ||
170 | - ' <div class="item_top">\n' + | ||
171 | - ' <img src="images/12.png">\n' + | ||
172 | - ' </div>\n' + | ||
173 | - ' <!--下划线-->\n' + | ||
174 | - ' <div class="item_underline"></div>\n' + | ||
175 | - ' <!--底部公司-->\n' + | ||
176 | - ' <div class="item_bottom">\n' + | ||
177 | - ' 北京惟鑫航达科技有限公司\n' + | ||
178 | - ' </div>\n' + | ||
179 | - ' </div>' | ||
180 | - | ||
181 | - | ||
182 | - | ||
183 | - | ||
184 | - } | ||
185 | - | ||
186 | - // 如果没有数据 | ||
187 | - }else{ | ||
188 | - // 锁定 | ||
189 | - me.lock(); | ||
190 | - // 无数据 | ||
191 | - me.noData(); | ||
192 | - } | ||
193 | - // 为了测试,延迟1秒加载 | ||
194 | - setTimeout(function(){ | ||
195 | - // 插入数据到页面,放到最后面 | ||
196 | - $('.items').append(result); | ||
197 | - // 每次数据插入,必须重置 | ||
198 | - me.resetload(); | ||
199 | - },500); | ||
200 | - }, | ||
201 | - error: function(xhr, type){ | ||
202 | - alert('Ajax error!'); | ||
203 | - // 即使加载出错,也得重置 | ||
204 | - me.resetload(); | ||
205 | - } | ||
206 | - }); | ||
207 | - }, | ||
208 | - threshold : 50 | ||
209 | - }); | 306 | + firstPage: '首页',// |
307 | + lastPage: '末页', | ||
308 | + prv: '上一页', | ||
309 | + next: '下一页', | ||
210 | 310 | ||
311 | + clickBack:function(page){ | ||
312 | + console.log(page) | ||
313 | + } | ||
211 | }) | 314 | }) |
212 | 315 | ||
316 | + //下拉加载功能 | ||
317 | + // $(document).ready(function () { | ||
318 | + // | ||
319 | + // | ||
320 | + // // 页数 | ||
321 | + // var page = 2; | ||
322 | + // // 每次循环展示10个 | ||
323 | + // var size = 1; | ||
324 | + // $('.items_box').dropload({ | ||
325 | + // scrollArea : window, | ||
326 | + // domUp : { | ||
327 | + // domClass : 'dropload-up', | ||
328 | + // domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', | ||
329 | + // domUpdate : '<div class="dropload-update">↑释放更新</div>', | ||
330 | + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' | ||
331 | + // }, | ||
332 | + // domDown : { | ||
333 | + // domClass : 'dropload-down', | ||
334 | + // domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', | ||
335 | + // domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', | ||
336 | + // domNoData : '<div class="dropload-noData">暂无数据</div>' | ||
337 | + // }, | ||
338 | + // loadDownFn : function(me){ | ||
339 | + // page++; | ||
340 | + // // 拼接HTML | ||
341 | + // var result = ''; | ||
342 | + // var s = ""; | ||
343 | + // var show=""; | ||
344 | + // var list_compressor=""; | ||
345 | + // var list_answer=""; | ||
346 | + // $.ajax({ | ||
347 | + // type: 'GET', | ||
348 | + // url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size, | ||
349 | + // dataType: 'json', | ||
350 | + // success: function(data){ | ||
351 | + // console.log(data); | ||
352 | + // var arrLen = data.length; | ||
353 | + // if(arrLen > 0){ | ||
354 | + // for(var i=0; i<arrLen; i++){ | ||
355 | + // result +='<div class="item">\n' + | ||
356 | + // ' <!--头部图片-->\n' + | ||
357 | + // ' <div class="item_top">\n' + | ||
358 | + // ' <img src="images/12.png">\n' + | ||
359 | + // ' </div>\n' + | ||
360 | + // ' <!--下划线-->\n' + | ||
361 | + // ' <div class="item_underline"></div>\n' + | ||
362 | + // ' <!--底部公司-->\n' + | ||
363 | + // ' <div class="item_bottom">\n' + | ||
364 | + // ' 北京惟鑫航达科技有限公司\n' + | ||
365 | + // ' </div>\n' + | ||
366 | + // ' </div>' | ||
367 | + // | ||
368 | + // | ||
369 | + // | ||
370 | + // | ||
371 | + // } | ||
372 | + // | ||
373 | + // // 如果没有数据 | ||
374 | + // }else{ | ||
375 | + // // 锁定 | ||
376 | + // me.lock(); | ||
377 | + // // 无数据 | ||
378 | + // me.noData(); | ||
379 | + // } | ||
380 | + // // 为了测试,延迟1秒加载 | ||
381 | + // setTimeout(function(){ | ||
382 | + // // 插入数据到页面,放到最后面 | ||
383 | + // $('.items').append(result); | ||
384 | + // // 每次数据插入,必须重置 | ||
385 | + // me.resetload(); | ||
386 | + // },500); | ||
387 | + // }, | ||
388 | + // error: function(xhr, type){ | ||
389 | + // alert('Ajax error!'); | ||
390 | + // // 即使加载出错,也得重置 | ||
391 | + // me.resetload(); | ||
392 | + // } | ||
393 | + // }); | ||
394 | + // }, | ||
395 | + // threshold : 50 | ||
396 | + // }); | ||
397 | + // | ||
398 | + // }) | ||
399 | + | ||
213 | </script> | 400 | </script> |
214 | 401 | ||
215 | </html> | 402 | </html> |
-
请 注册 或 登录 后发表评论