正在显示
17 个修改的文件
包含
2406 行增加
和
0 行删除
.idea/vcs.xml
0 → 100644
css/index.css
0 → 100644
| 1 | + | ||
| 2 | + | ||
| 3 | +.container { | ||
| 4 | + width: 100%; | ||
| 5 | + display: flex; | ||
| 6 | + flex-flow: column; | ||
| 7 | + align-items: center; | ||
| 8 | + justify-content: center; | ||
| 9 | + | ||
| 10 | +} | ||
| 11 | +.top{ | ||
| 12 | + width: 7.5rem; | ||
| 13 | + /*height: 1.5rem;*/ | ||
| 14 | + background-color: #F7F7F7; | ||
| 15 | + display: flex; | ||
| 16 | + flex-flow: column; | ||
| 17 | + align-items: center; | ||
| 18 | + justify-content: center; | ||
| 19 | +} | ||
| 20 | +.top_t{ | ||
| 21 | + width: 6.86rem; | ||
| 22 | + height: 0.8rem; | ||
| 23 | + display: flex; | ||
| 24 | + align-items: center; | ||
| 25 | + justify-content: space-between; | ||
| 26 | +} | ||
| 27 | +.top_t_left{ | ||
| 28 | + width: 1.2rem; | ||
| 29 | + display: flex; | ||
| 30 | + justify-content: space-between; | ||
| 31 | + align-items: center; | ||
| 32 | +} | ||
| 33 | +.top_t_left_text{ | ||
| 34 | + font-size:0.3rem; | ||
| 35 | + font-family:PingFang-SC-Medium; | ||
| 36 | + font-weight:500; | ||
| 37 | + color:rgba(166,16,16,1); | ||
| 38 | +} | ||
| 39 | +.icon-caidan{ | ||
| 40 | + | ||
| 41 | +} | ||
| 42 | +/*中部*/ | ||
| 43 | +.top_t_middle{ | ||
| 44 | + width: 1.2rem; | ||
| 45 | + height: 0.5rem; | ||
| 46 | + display: flex; | ||
| 47 | +} | ||
| 48 | +.top_t_middle img{ | ||
| 49 | + width: 100%; | ||
| 50 | + height: 100%; | ||
| 51 | +} | ||
| 52 | +/*右边*/ | ||
| 53 | +.top_t_right{ | ||
| 54 | + width: 1.2rem; | ||
| 55 | + display: flex; | ||
| 56 | + justify-content: space-between; | ||
| 57 | + align-items: center; | ||
| 58 | +} | ||
| 59 | +.icon-10{ | ||
| 60 | + | ||
| 61 | +} | ||
| 62 | +.top_t_right_pic{ | ||
| 63 | + width: 0.4rem; | ||
| 64 | + height: 0.4rem; | ||
| 65 | + display: flex; | ||
| 66 | + -webkit-border-radius: 50%; | ||
| 67 | + -moz-border-radius: 50%; | ||
| 68 | + border-radius: 50%; | ||
| 69 | +} | ||
| 70 | +.top_t_right_pic img{ | ||
| 71 | + width: 100%; | ||
| 72 | + height: 100%; | ||
| 73 | + -webkit-border-radius: 50%; | ||
| 74 | + -moz-border-radius: 50%; | ||
| 75 | + border-radius: 50%; | ||
| 76 | +} | ||
| 77 | +/*-----底部------*/ | ||
| 78 | +.top_d{ | ||
| 79 | + width: 5.56rem; | ||
| 80 | + display: flex; | ||
| 81 | + padding-bottom: 0.03rem; | ||
| 82 | + border-bottom: 1px solid #999999; | ||
| 83 | + margin: 0.3rem 0 0.2rem 0; | ||
| 84 | +} | ||
| 85 | +.top_d_input{ | ||
| 86 | + width: 5rem; | ||
| 87 | + text-align: center; | ||
| 88 | + border: none; | ||
| 89 | + outline: none; | ||
| 90 | + background-color: #F7F7F7; | ||
| 91 | + font-size: 0.3rem; | ||
| 92 | + box-sizing: border-box; | ||
| 93 | + padding: 0 0.2rem; | ||
| 94 | +} | ||
| 95 | +.top_d_input::placeholder{ | ||
| 96 | + color: #999999; | ||
| 97 | +} | ||
| 98 | + | ||
| 99 | +/*----------------------------- 轮播图 -----------------------------------*/ | ||
| 100 | +.banner{ | ||
| 101 | + width: 6.86rem; | ||
| 102 | + height: 3rem; | ||
| 103 | + background-color: red; | ||
| 104 | + -webkit-border-radius: 0.1rem; | ||
| 105 | + -moz-border-radius: 0.1rem; | ||
| 106 | + border-radius: 0.1rem; | ||
| 107 | + margin-top: 0.23rem; | ||
| 108 | +} | ||
| 109 | +/*----------------------------- 最新 -----------------------------------*/ | ||
| 110 | +.new{ | ||
| 111 | + margin-top: 0.54rem; | ||
| 112 | + display: flex; | ||
| 113 | + flex-flow: column; | ||
| 114 | + align-items: center; | ||
| 115 | + justify-content: center; | ||
| 116 | +} | ||
| 117 | +.new_e{ | ||
| 118 | + font-size: 0.14rem; | ||
| 119 | + color: #A61010; | ||
| 120 | +} | ||
| 121 | +.new_c{ | ||
| 122 | + margin-bottom: 0.2rem; | ||
| 123 | + margin-top: 0.08rem; | ||
| 124 | + font-size: 0.3rem; | ||
| 125 | + color: #333333; | ||
| 126 | +} | ||
| 127 | +.new_video_item{ | ||
| 128 | + width: 6.86rem; | ||
| 129 | + display: flex; | ||
| 130 | + | ||
| 131 | + justify-content: space-between; | ||
| 132 | +} | ||
| 133 | +.new_video{ | ||
| 134 | + width: 3.2rem; | ||
| 135 | + /*height: 2.1rem;*/ | ||
| 136 | + background:rgba(255,255,255,1); | ||
| 137 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 138 | + border-radius: 0.1rem; | ||
| 139 | + display: flex; | ||
| 140 | + flex-flow: column; | ||
| 141 | + justify-content: center; | ||
| 142 | + align-items: center; | ||
| 143 | +} | ||
| 144 | +.new_video_top{ | ||
| 145 | + width: 3.2rem; | ||
| 146 | + height: 1.7rem; | ||
| 147 | + display: flex; | ||
| 148 | + border-top-left-radius: 0.1rem; | ||
| 149 | + border-top-right-radius: 0.1rem; | ||
| 150 | +} | ||
| 151 | +.new_video_top img{ | ||
| 152 | + border-top-left-radius: 0.1rem; | ||
| 153 | + border-top-right-radius: 0.1rem; | ||
| 154 | + width: 100%; | ||
| 155 | + height: 100%; | ||
| 156 | +} | ||
| 157 | +.new_video_bottom{ | ||
| 158 | + width: 2.8rem; | ||
| 159 | + height: 0.4rem; | ||
| 160 | + display: flex; | ||
| 161 | + align-items: center; | ||
| 162 | + justify-content: space-between; | ||
| 163 | + position: relative; | ||
| 164 | +} | ||
| 165 | +.new_video_bottom_name{ | ||
| 166 | + width: 2rem; | ||
| 167 | + | ||
| 168 | + position: absolute; | ||
| 169 | + left: 0.4rem; | ||
| 170 | + font-size:0.2rem; | ||
| 171 | + font-family:PingFang-SC-Medium; | ||
| 172 | + font-weight:500; | ||
| 173 | + color:rgba(51,51,51,1); | ||
| 174 | + text-align: center; | ||
| 175 | + | ||
| 176 | + -webkit-box-orient: vertical; | ||
| 177 | + -webkit-line-clamp: 1; | ||
| 178 | + overflow: hidden; | ||
| 179 | + text-overflow: ellipsis; | ||
| 180 | + white-space: nowrap; | ||
| 181 | +} | ||
| 182 | +.new_video_bottom_right{ | ||
| 183 | + font-size: 0.3rem; | ||
| 184 | + font-family:FZHCJW--GB1-0; | ||
| 185 | + font-weight:400; | ||
| 186 | + color:rgba(166,16,16,1); | ||
| 187 | +} | ||
| 188 | +/*大视频*/ | ||
| 189 | +.new_video_big{ | ||
| 190 | + margin-top: 0.25rem; | ||
| 191 | + width: 6.86rem; | ||
| 192 | + height: 3.6rem; | ||
| 193 | + background:rgba(255,255,255,1); | ||
| 194 | + box-shadow:0 0.01rem 0.06rem 0 rgba(116,116,116,0.14); | ||
| 195 | + border-radius: 0.1rem; | ||
| 196 | + | ||
| 197 | + display: flex; | ||
| 198 | + flex-flow: column; | ||
| 199 | + align-items: center; | ||
| 200 | + justify-content: space-between; | ||
| 201 | + | ||
| 202 | +} | ||
| 203 | +.new_video_big_pic{ | ||
| 204 | + width: 6.86rem; | ||
| 205 | + height: 3.2rem; | ||
| 206 | + display: flex; | ||
| 207 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 208 | +} | ||
| 209 | +.new_video_big_pic img{ | ||
| 210 | + width: 100%; | ||
| 211 | + height: 100%; | ||
| 212 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 213 | +} | ||
| 214 | +.new_video_big_bottom{ | ||
| 215 | + width: 6rem; | ||
| 216 | + /*height: 0.4rem;*/ | ||
| 217 | + display: flex; | ||
| 218 | + align-items: center; | ||
| 219 | + justify-content: space-between; | ||
| 220 | + position: relative; | ||
| 221 | +} | ||
| 222 | +.new_video_big_name_text{ | ||
| 223 | + width: 5.2rem; | ||
| 224 | + position: absolute; | ||
| 225 | + left: 0.4rem; | ||
| 226 | + font-size:0.2rem; | ||
| 227 | + font-family:PingFang-SC-Medium; | ||
| 228 | + font-weight:500; | ||
| 229 | + color:rgba(51,51,51,1); | ||
| 230 | + text-align: center; | ||
| 231 | + | ||
| 232 | + -webkit-box-orient: vertical; | ||
| 233 | + -webkit-line-clamp: 1; | ||
| 234 | + overflow: hidden; | ||
| 235 | + text-overflow: ellipsis; | ||
| 236 | + white-space: nowrap; | ||
| 237 | +} | ||
| 238 | +.video{ | ||
| 239 | + margin-top: 0.24rem; | ||
| 240 | + display: flex; | ||
| 241 | + flex-flow: column; | ||
| 242 | + align-items: center; | ||
| 243 | + justify-content: center; | ||
| 244 | +} | ||
| 245 | +.item_pic{ | ||
| 246 | + width: 6.86rem; | ||
| 247 | + display: flex; | ||
| 248 | + justify-content: space-between; | ||
| 249 | +} | ||
| 250 | +.pic_box{ | ||
| 251 | + width: 3.2rem; | ||
| 252 | + /*height: 2.2rem;*/ | ||
| 253 | + background:rgba(255,255,255,1); | ||
| 254 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 255 | + border-radius: 0.1rem; | ||
| 256 | + display: flex; | ||
| 257 | + flex-flow: column; | ||
| 258 | + align-items: center; | ||
| 259 | + justify-content: center; | ||
| 260 | +} | ||
| 261 | +.pic_box_top{ | ||
| 262 | + width: 3.2rem; | ||
| 263 | + height: 1.7rem; | ||
| 264 | + display: flex; | ||
| 265 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 266 | +} | ||
| 267 | +.pic_box_top img{ | ||
| 268 | + width: 100%; | ||
| 269 | + height: 100%; | ||
| 270 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 271 | +} | ||
| 272 | +.pic_box_bottom{ | ||
| 273 | + height: 0.4rem; | ||
| 274 | + font-size: 0.24rem; | ||
| 275 | + font-family:PingFang-SC-Medium; | ||
| 276 | + font-weight:500; | ||
| 277 | + color:rgba(51,51,51,1); | ||
| 278 | + display: flex; | ||
| 279 | + align-items: center; | ||
| 280 | + justify-content: center; | ||
| 281 | +} | ||
| 282 | +.video_more{ | ||
| 283 | + margin-top: 0.33rem; | ||
| 284 | + font-size: 0.14rem; | ||
| 285 | + font-family:Moon20-Regular; | ||
| 286 | + font-weight:400; | ||
| 287 | + color:rgba(166,16,16,1); | ||
| 288 | + position: relative; | ||
| 289 | + display: flex; | ||
| 290 | + align-items: center; | ||
| 291 | + flex-flow: column; | ||
| 292 | + justify-content: center; | ||
| 293 | +} | ||
| 294 | +.video_more:last-child{ | ||
| 295 | + margin-bottom: 0.6rem; | ||
| 296 | +} | ||
| 297 | +.video_more:before{ | ||
| 298 | + content: ""; | ||
| 299 | + width: 0.8rem; | ||
| 300 | + height:0.02rem; | ||
| 301 | + | ||
| 302 | + background-color: #E8E8E8; | ||
| 303 | + position: absolute; | ||
| 304 | + top: 0.32rem; | ||
| 305 | + | ||
| 306 | +} | ||
| 307 | +/*title*/ | ||
| 308 | +.title{ | ||
| 309 | + display: flex; | ||
| 310 | + flex-flow: column; | ||
| 311 | + align-items: center; | ||
| 312 | + justify-content: space-between; | ||
| 313 | +} | ||
| 314 | +.marin_top{ | ||
| 315 | + margin-top: 0.31rem ; | ||
| 316 | +} | ||
| 317 | +.between{ | ||
| 318 | + width: 2.6rem; | ||
| 319 | + justify-content: space-between; | ||
| 320 | +} | ||
| 321 | +.show{ | ||
| 322 | + display: flex; | ||
| 323 | + flex-flow: column; | ||
| 324 | + align-items: center; | ||
| 325 | + justify-content: center; | ||
| 326 | +} | ||
| 327 | +.show_time{ | ||
| 328 | + width: 6.86rem; | ||
| 329 | + display: flex; | ||
| 330 | +} | ||
| 331 | +.show_time_year{ | ||
| 332 | + display: flex; | ||
| 333 | +} | ||
| 334 | +.show_time_month{ | ||
| 335 | + display: flex; | ||
| 336 | +} |
css/index_2.css
0 → 100644
| 1 | + | ||
| 2 | +.container{ | ||
| 3 | + position: relative; | ||
| 4 | +} | ||
| 5 | +.mid{ | ||
| 6 | + display: flex; | ||
| 7 | + flex-flow: column; | ||
| 8 | + align-items: center; | ||
| 9 | + justify-content: center; | ||
| 10 | +} | ||
| 11 | +.mask{ | ||
| 12 | + width: 7.5rem; | ||
| 13 | + height: 100%; | ||
| 14 | + background-color: #ffffff; | ||
| 15 | + opacity: 0.9; | ||
| 16 | + position: fixed; | ||
| 17 | + top: 1.69rem; | ||
| 18 | + z-index: 999; | ||
| 19 | + display: flex; | ||
| 20 | + align-items: center; | ||
| 21 | +} | ||
| 22 | +.pop{ | ||
| 23 | + position: absolute; | ||
| 24 | + left:0; | ||
| 25 | + right: 0; | ||
| 26 | + z-index: 999; | ||
| 27 | + display: flex; | ||
| 28 | + flex-flow: column; | ||
| 29 | + align-items: center; | ||
| 30 | + justify-content: center; | ||
| 31 | + | ||
| 32 | + | ||
| 33 | + font-size: 0.48rem; | ||
| 34 | + font-family:PingFang-SC-Bold; | ||
| 35 | + font-weight:bold; | ||
| 36 | + | ||
| 37 | +} | ||
| 38 | +.pop_color{ | ||
| 39 | + color:rgba(166,16,16,1); | ||
| 40 | +} | ||
| 41 | +.pop_text{ | ||
| 42 | + padding: 0.42rem; | ||
| 43 | +} | ||
| 44 | + |
css/rwxq.css
0 → 100644
| 1 | + | ||
| 2 | + | ||
| 3 | +.container { | ||
| 4 | + width: 100%; | ||
| 5 | + display: flex; | ||
| 6 | + flex-flow: column; | ||
| 7 | + align-items: center; | ||
| 8 | + justify-content: center; | ||
| 9 | + | ||
| 10 | +} | ||
| 11 | +.top{ | ||
| 12 | + width: 7.5rem; | ||
| 13 | + /*height: 1.5rem;*/ | ||
| 14 | + background-color: #F7F7F7; | ||
| 15 | + display: flex; | ||
| 16 | + flex-flow: column; | ||
| 17 | + align-items: center; | ||
| 18 | + justify-content: center; | ||
| 19 | +} | ||
| 20 | +.top_t{ | ||
| 21 | + width: 6.86rem; | ||
| 22 | + height: 0.8rem; | ||
| 23 | + display: flex; | ||
| 24 | + align-items: center; | ||
| 25 | + justify-content: space-between; | ||
| 26 | +} | ||
| 27 | +.top_t_left{ | ||
| 28 | + width: 1.2rem; | ||
| 29 | + display: flex; | ||
| 30 | + justify-content: space-between; | ||
| 31 | + align-items: center; | ||
| 32 | +} | ||
| 33 | +.top_t_left_text{ | ||
| 34 | + font-size:0.3rem; | ||
| 35 | + font-family:PingFang-SC-Medium; | ||
| 36 | + font-weight:500; | ||
| 37 | + color:rgba(166,16,16,1); | ||
| 38 | +} | ||
| 39 | +.icon-caidan{ | ||
| 40 | + | ||
| 41 | +} | ||
| 42 | +/*中部*/ | ||
| 43 | +.top_t_middle{ | ||
| 44 | + width: 1.2rem; | ||
| 45 | + height: 0.5rem; | ||
| 46 | + display: flex; | ||
| 47 | +} | ||
| 48 | +.top_t_middle img{ | ||
| 49 | + width: 100%; | ||
| 50 | + height: 100%; | ||
| 51 | +} | ||
| 52 | +/*右边*/ | ||
| 53 | +.top_t_right{ | ||
| 54 | + width: 1.2rem; | ||
| 55 | + display: flex; | ||
| 56 | + justify-content: space-between; | ||
| 57 | + align-items: center; | ||
| 58 | +} | ||
| 59 | +.icon-10{ | ||
| 60 | + | ||
| 61 | +} | ||
| 62 | +.top_t_right_pic{ | ||
| 63 | + width: 0.4rem; | ||
| 64 | + height: 0.4rem; | ||
| 65 | + display: flex; | ||
| 66 | + -webkit-border-radius: 50%; | ||
| 67 | + -moz-border-radius: 50%; | ||
| 68 | + border-radius: 50%; | ||
| 69 | +} | ||
| 70 | +.top_t_right_pic img{ | ||
| 71 | + width: 100%; | ||
| 72 | + height: 100%; | ||
| 73 | + -webkit-border-radius: 50%; | ||
| 74 | + -moz-border-radius: 50%; | ||
| 75 | + border-radius: 50%; | ||
| 76 | +} | ||
| 77 | +/*-----底部------*/ | ||
| 78 | +.top_d{ | ||
| 79 | + width: 5.56rem; | ||
| 80 | + display: flex; | ||
| 81 | + padding-bottom: 0.03rem; | ||
| 82 | + border-bottom: 1px solid #999999; | ||
| 83 | + margin: 0.3rem 0 0.2rem 0; | ||
| 84 | +} | ||
| 85 | +.top_d_input{ | ||
| 86 | + width: 5rem; | ||
| 87 | + text-align: center; | ||
| 88 | + border: none; | ||
| 89 | + outline: none; | ||
| 90 | + background-color: #F7F7F7; | ||
| 91 | + font-size: 0.3rem; | ||
| 92 | + box-sizing: border-box; | ||
| 93 | + padding: 0 0.2rem; | ||
| 94 | +} | ||
| 95 | +.top_d_input::placeholder{ | ||
| 96 | + color: #999999; | ||
| 97 | +} | ||
| 98 | + | ||
| 99 | +/*轮播图*/ | ||
| 100 | +.banner{ | ||
| 101 | + width: 7.5rem; | ||
| 102 | + height: 3rem; | ||
| 103 | + display: flex; | ||
| 104 | +} | ||
| 105 | +/*简介*/ | ||
| 106 | +.intro{ | ||
| 107 | + width: 6.86rem; | ||
| 108 | + display: flex; | ||
| 109 | + flex-flow: column; | ||
| 110 | + position: relative; | ||
| 111 | +} | ||
| 112 | +.intro_title{ | ||
| 113 | + margin-top: 1.26rem; | ||
| 114 | + font-size: 0.36rem; | ||
| 115 | + font-family:PingFang-SC-Bold; | ||
| 116 | + font-weight:bold; | ||
| 117 | + color:rgba(51,51,51,1); | ||
| 118 | + /*line-height:36px;*/ | ||
| 119 | +} | ||
| 120 | +.intro_box{ | ||
| 121 | + width: 6.86rem; | ||
| 122 | + height: 1.2rem; | ||
| 123 | + background:rgba(255,255,255,1); | ||
| 124 | + box-shadow:0 0.05rem 0.16rem 0 rgba(79,79,79,0.1); | ||
| 125 | + border-radius: 0.1rem; | ||
| 126 | + position: absolute; | ||
| 127 | + top: -0.32rem; | ||
| 128 | + z-index: 999; | ||
| 129 | + display: flex; | ||
| 130 | + align-items: center; | ||
| 131 | + box-sizing: border-box; | ||
| 132 | + padding: 0 0.4rem; | ||
| 133 | + justify-content: space-between; | ||
| 134 | +} | ||
| 135 | +.intro_box_name{ | ||
| 136 | + | ||
| 137 | + font-size: 0.3rem; | ||
| 138 | + font-family:PingFang-SC-Bold; | ||
| 139 | + font-weight:bold; | ||
| 140 | + color:rgba(51,51,51,1); | ||
| 141 | + /*line-height:24px;*/ | ||
| 142 | +} | ||
| 143 | +.intro_box_name_pinyin{ | ||
| 144 | + margin-top: 0.2rem; | ||
| 145 | +} | ||
| 146 | +.intro_attention{ | ||
| 147 | + | ||
| 148 | + font-size: 0.24rem; | ||
| 149 | + font-family:PingFang-SC-Medium; | ||
| 150 | + font-weight:500; | ||
| 151 | + color:rgba(51,51,51,1); | ||
| 152 | + /*line-height:36px;*/ | ||
| 153 | +} | ||
| 154 | +.intro_attention_title{ | ||
| 155 | + width: 1.42rem; | ||
| 156 | + height: 0.34rem; | ||
| 157 | + line-height: 0.34rem; | ||
| 158 | + text-align: center; | ||
| 159 | + background:rgba(166,16,16,0); | ||
| 160 | + border: 0.02rem solid rgba(166, 16, 16, 1); | ||
| 161 | + border-radius: 0.01rem; | ||
| 162 | +} | ||
| 163 | +.number{ | ||
| 164 | + margin-top: 0.2rem; | ||
| 165 | + display: flex; | ||
| 166 | + justify-content: space-between; | ||
| 167 | +} | ||
| 168 | +.intro_small{ | ||
| 169 | + margin-top: 0.28rem; | ||
| 170 | + font-size: 0.18rem; | ||
| 171 | + font-family:MicrosoftYaHei; | ||
| 172 | + font-weight:400; | ||
| 173 | + color:rgba(51,51,51,1); | ||
| 174 | + line-height: 0.3rem; | ||
| 175 | +} | ||
| 176 | +.correlation{ | ||
| 177 | + margin-top: 0.52rem; | ||
| 178 | + width: 6.86rem; | ||
| 179 | + display: flex; | ||
| 180 | + flex-flow: column; | ||
| 181 | + | ||
| 182 | + | ||
| 183 | + font-size: 0.24rem; | ||
| 184 | + font-family:PingFang-SC-Medium; | ||
| 185 | + font-weight:500; | ||
| 186 | + color:rgba(51,51,51,1); | ||
| 187 | + line-height: 0.3rem; | ||
| 188 | +} | ||
| 189 | +.correlation_top{ | ||
| 190 | + display: flex; | ||
| 191 | + justify-content: space-between; | ||
| 192 | +} | ||
| 193 | +.correlation_box{ | ||
| 194 | + margin-top: 0.2rem; | ||
| 195 | + display: flex; | ||
| 196 | + justify-content: space-between; | ||
| 197 | +} | ||
| 198 | +.correlation_top_right{ | ||
| 199 | + | ||
| 200 | + font-size: 0.2rem; | ||
| 201 | + font-family:PingFang-SC-Medium; | ||
| 202 | + font-weight:500; | ||
| 203 | + color:rgba(153,153,153,1); | ||
| 204 | + line-height: 0.3rem; | ||
| 205 | +} | ||
| 206 | +.correlation_bottom{ | ||
| 207 | + width: 3.2rem; | ||
| 208 | + height: 2.1rem; | ||
| 209 | + background:rgba(255,255,255,1); | ||
| 210 | + box-shadow:0 0.01rem 0 0 rgba(102,102,102,0.14); | ||
| 211 | + border-radius:0.1rem; | ||
| 212 | +} | ||
| 213 | +.correlation_bottom_img{ | ||
| 214 | + width: 3.2rem; | ||
| 215 | + height: 1.7rem; | ||
| 216 | + display: flex; | ||
| 217 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 218 | +} | ||
| 219 | +.correlation_bottom_img img{ | ||
| 220 | + width: 100%; | ||
| 221 | + height: 100%; | ||
| 222 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 223 | +} | ||
| 224 | +.correlation_bottom_title{ | ||
| 225 | + height: 0.4rem; | ||
| 226 | + display: flex; | ||
| 227 | + align-items: center; | ||
| 228 | + justify-content: center; | ||
| 229 | + /*text-align: center;*/ | ||
| 230 | +} | ||
| 231 | +.big{ | ||
| 232 | + margin-top: 0.2rem; | ||
| 233 | + width: 6.86rem; | ||
| 234 | + font-size: 0.24rem; | ||
| 235 | + font-family:PingFang-SC-Medium; | ||
| 236 | + font-weight:500; | ||
| 237 | + color:rgba(51,51,51,1); | ||
| 238 | + line-height: 0.3rem; | ||
| 239 | +} | ||
| 240 | +.small{ | ||
| 241 | + margin-top: 0.1rem; | ||
| 242 | + width: 6.86rem; | ||
| 243 | + font-size: 0.18rem; | ||
| 244 | + font-family:PingFang-SC-Medium; | ||
| 245 | + font-weight:500; | ||
| 246 | + color:rgba(51,51,51,1); | ||
| 247 | + line-height: 0.3rem; | ||
| 248 | +} | ||
| 249 | +/*动态*/ | ||
| 250 | +.dynamic{ | ||
| 251 | + width: 6.86rem; | ||
| 252 | +} | ||
| 253 | +.dynamic_title{ | ||
| 254 | + margin-top: 0.4rem; | ||
| 255 | + font-size: 0.36rem; | ||
| 256 | + font-family:PingFang-SC-Bold; | ||
| 257 | + font-weight:bold; | ||
| 258 | + color:rgba(51,51,51,1); | ||
| 259 | + line-height: 0.36rem; | ||
| 260 | +} | ||
| 261 | +.dynamic_item{ | ||
| 262 | + margin-top: 0.2rem; | ||
| 263 | + display: flex; | ||
| 264 | + justify-content: space-between; | ||
| 265 | +} | ||
| 266 | +.dynamic_item_title{ | ||
| 267 | + | ||
| 268 | + font-size: 0.24rem; | ||
| 269 | + font-family:PingFang-SC-Medium; | ||
| 270 | + font-weight:500; | ||
| 271 | + color:rgba(51,51,51,1); | ||
| 272 | + line-height: 0.3rem; | ||
| 273 | +} | ||
| 274 | +.dynamic_item_time{ | ||
| 275 | + | ||
| 276 | + font-size: 0.24rem; | ||
| 277 | + font-family:PingFang-SC-Medium; | ||
| 278 | + font-weight:500; | ||
| 279 | + color:rgba(153,153,153,1); | ||
| 280 | + line-height: 0.3rem; | ||
| 281 | +} | ||
| 282 | +.dynamic_name{ | ||
| 283 | + width: 5rem; | ||
| 284 | + display: flex; | ||
| 285 | + justify-content: space-between; | ||
| 286 | + margin-top: 0.2rem; | ||
| 287 | + margin-left: 0.8rem; | ||
| 288 | + | ||
| 289 | + font-size: 0.18rem; | ||
| 290 | + font-family:PingFang-SC-Medium; | ||
| 291 | + font-weight:500; | ||
| 292 | + color:rgba(51,51,51,1); | ||
| 293 | + line-height: 0.3rem; | ||
| 294 | +} | ||
| 295 | +.production{ | ||
| 296 | + width: 6.86rem; | ||
| 297 | +} | ||
| 298 | +.production_title{ | ||
| 299 | + margin-top: 0.4rem; | ||
| 300 | + font-size: 0.36rem; | ||
| 301 | + font-family:PingFang-SC-Bold; | ||
| 302 | + font-weight:bold; | ||
| 303 | + color:rgba(51,51,51,1); | ||
| 304 | + line-height: 0.36rem; | ||
| 305 | +} | ||
| 306 | +.production_category{ | ||
| 307 | + margin-top: 0.27rem; | ||
| 308 | + display: flex; | ||
| 309 | + justify-content: space-around; | ||
| 310 | + | ||
| 311 | + | ||
| 312 | + font-size: 0.24rem; | ||
| 313 | + font-family:PingFang-SC-Bold; | ||
| 314 | + font-weight:bold; | ||
| 315 | + color:rgba(51,51,51,1); | ||
| 316 | + line-height: 0.36rem; | ||
| 317 | +} | ||
| 318 | +.production_box{ | ||
| 319 | + display: flex; | ||
| 320 | + justify-content: space-between; | ||
| 321 | + margin-top: 0.27rem; | ||
| 322 | + margin-bottom: 1rem; | ||
| 323 | +} | ||
| 324 | +.production_box_big{ | ||
| 325 | + width: 3.2rem; | ||
| 326 | + height: 2.5rem; | ||
| 327 | + | ||
| 328 | + background:rgba(255,255,255,1); | ||
| 329 | + box-shadow:0 0.02rem 0 0 rgba(102,102,102,0.14); | ||
| 330 | + border-radius:0.1rem; | ||
| 331 | +} | ||
| 332 | +.production_box_big_pic{ | ||
| 333 | + width: 3.2rem; | ||
| 334 | + height: 1.7rem; | ||
| 335 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 336 | + display: flex; | ||
| 337 | +} | ||
| 338 | +.production_box_big_pic img{ | ||
| 339 | + width: 100%; | ||
| 340 | + height: 100%; | ||
| 341 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 342 | +} | ||
| 343 | +.production_box_big_title{ | ||
| 344 | + display: flex; | ||
| 345 | + flex-flow: column; | ||
| 346 | + align-items: center; | ||
| 347 | + justify-content: center; | ||
| 348 | +} | ||
| 349 | +.title_big{ | ||
| 350 | + | ||
| 351 | + font-size: 0.2rem; | ||
| 352 | + font-family:MicrosoftYaHei; | ||
| 353 | + font-weight:400; | ||
| 354 | + color:rgba(51,51,51,1); | ||
| 355 | + line-height: 0.3rem; | ||
| 356 | +} | ||
| 357 | +.title_small{ | ||
| 358 | + width: 3rem; | ||
| 359 | + font-size: 0.14rem; | ||
| 360 | + font-family:MicrosoftYaHei; | ||
| 361 | + font-weight:400; | ||
| 362 | + color:rgba(153,153,153,1); | ||
| 363 | + line-height: 0.24rem; | ||
| 364 | + | ||
| 365 | + -webkit-box-orient: vertical; | ||
| 366 | + -webkit-line-clamp: 1; | ||
| 367 | + overflow: hidden; | ||
| 368 | + text-overflow: ellipsis; | ||
| 369 | + white-space: nowrap; | ||
| 370 | +} |
css/swiper.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 { | ||
| 13 | + margin: 0 auto; | ||
| 14 | + position: relative; | ||
| 15 | + overflow: hidden; | ||
| 16 | + list-style: none; | ||
| 17 | + padding: 0; | ||
| 18 | + /* Fix of Webkit flickering */ | ||
| 19 | + z-index: 1; | ||
| 20 | +} | ||
| 21 | +.swiper-container-no-flexbox .swiper-slide { | ||
| 22 | + float: left; | ||
| 23 | +} | ||
| 24 | +.swiper-container-vertical > .swiper-wrapper { | ||
| 25 | + -webkit-box-orient: vertical; | ||
| 26 | + -webkit-box-direction: normal; | ||
| 27 | + -webkit-flex-direction: column; | ||
| 28 | + -ms-flex-direction: column; | ||
| 29 | + flex-direction: column; | ||
| 30 | +} | ||
| 31 | +.swiper-wrapper { | ||
| 32 | + position: relative; | ||
| 33 | + width: 100%; | ||
| 34 | + height: 100%; | ||
| 35 | + z-index: 1; | ||
| 36 | + display: -webkit-box; | ||
| 37 | + display: -webkit-flex; | ||
| 38 | + display: -ms-flexbox; | ||
| 39 | + display: flex; | ||
| 40 | + -webkit-transition-property: -webkit-transform; | ||
| 41 | + transition-property: -webkit-transform; | ||
| 42 | + -o-transition-property: transform; | ||
| 43 | + transition-property: transform; | ||
| 44 | + transition-property: transform, -webkit-transform; | ||
| 45 | + -webkit-box-sizing: content-box; | ||
| 46 | + box-sizing: content-box; | ||
| 47 | +} | ||
| 48 | +.swiper-container-android .swiper-slide, | ||
| 49 | +.swiper-wrapper { | ||
| 50 | + -webkit-transform: translate3d(0px, 0, 0); | ||
| 51 | + transform: translate3d(0px, 0, 0); | ||
| 52 | +} | ||
| 53 | +.swiper-container-multirow > .swiper-wrapper { | ||
| 54 | + -webkit-flex-wrap: wrap; | ||
| 55 | + -ms-flex-wrap: wrap; | ||
| 56 | + flex-wrap: wrap; | ||
| 57 | +} | ||
| 58 | +.swiper-container-free-mode > .swiper-wrapper { | ||
| 59 | + -webkit-transition-timing-function: ease-out; | ||
| 60 | + -o-transition-timing-function: ease-out; | ||
| 61 | + transition-timing-function: ease-out; | ||
| 62 | + margin: 0 auto; | ||
| 63 | +} | ||
| 64 | +.swiper-slide { | ||
| 65 | + -webkit-flex-shrink: 0; | ||
| 66 | + -ms-flex-negative: 0; | ||
| 67 | + flex-shrink: 0; | ||
| 68 | + width: 100%; | ||
| 69 | + height: 100%; | ||
| 70 | + position: relative; | ||
| 71 | + -webkit-transition-property: -webkit-transform; | ||
| 72 | + transition-property: -webkit-transform; | ||
| 73 | + -o-transition-property: transform; | ||
| 74 | + transition-property: transform; | ||
| 75 | + transition-property: transform, -webkit-transform; | ||
| 76 | +} | ||
| 77 | +.swiper-slide-invisible-blank { | ||
| 78 | + visibility: hidden; | ||
| 79 | +} | ||
| 80 | +/* Auto Height */ | ||
| 81 | +.swiper-container-autoheight, | ||
| 82 | +.swiper-container-autoheight .swiper-slide { | ||
| 83 | + height: auto; | ||
| 84 | +} | ||
| 85 | +.swiper-container-autoheight .swiper-wrapper { | ||
| 86 | + -webkit-box-align: start; | ||
| 87 | + -webkit-align-items: flex-start; | ||
| 88 | + -ms-flex-align: start; | ||
| 89 | + align-items: flex-start; | ||
| 90 | + -webkit-transition-property: height, -webkit-transform; | ||
| 91 | + transition-property: height, -webkit-transform; | ||
| 92 | + -o-transition-property: transform, height; | ||
| 93 | + transition-property: transform, height; | ||
| 94 | + transition-property: transform, height, -webkit-transform; | ||
| 95 | +} | ||
| 96 | +/* 3D Effects */ | ||
| 97 | +.swiper-container-3d { | ||
| 98 | + -webkit-perspective: 1200px; | ||
| 99 | + perspective: 1200px; | ||
| 100 | +} | ||
| 101 | +.swiper-container-3d .swiper-wrapper, | ||
| 102 | +.swiper-container-3d .swiper-slide, | ||
| 103 | +.swiper-container-3d .swiper-slide-shadow-left, | ||
| 104 | +.swiper-container-3d .swiper-slide-shadow-right, | ||
| 105 | +.swiper-container-3d .swiper-slide-shadow-top, | ||
| 106 | +.swiper-container-3d .swiper-slide-shadow-bottom, | ||
| 107 | +.swiper-container-3d .swiper-cube-shadow { | ||
| 108 | + -webkit-transform-style: preserve-3d; | ||
| 109 | + transform-style: preserve-3d; | ||
| 110 | +} | ||
| 111 | +.swiper-container-3d .swiper-slide-shadow-left, | ||
| 112 | +.swiper-container-3d .swiper-slide-shadow-right, | ||
| 113 | +.swiper-container-3d .swiper-slide-shadow-top, | ||
| 114 | +.swiper-container-3d .swiper-slide-shadow-bottom { | ||
| 115 | + position: absolute; | ||
| 116 | + left: 0; | ||
| 117 | + top: 0; | ||
| 118 | + width: 100%; | ||
| 119 | + height: 100%; | ||
| 120 | + pointer-events: none; | ||
| 121 | + z-index: 10; | ||
| 122 | +} | ||
| 123 | +.swiper-container-3d .swiper-slide-shadow-left { | ||
| 124 | + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); | ||
| 125 | + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 126 | + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 127 | + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 128 | +} | ||
| 129 | +.swiper-container-3d .swiper-slide-shadow-right { | ||
| 130 | + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); | ||
| 131 | + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 132 | + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 133 | + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 134 | +} | ||
| 135 | +.swiper-container-3d .swiper-slide-shadow-top { | ||
| 136 | + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); | ||
| 137 | + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 138 | + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 139 | + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 140 | +} | ||
| 141 | +.swiper-container-3d .swiper-slide-shadow-bottom { | ||
| 142 | + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); | ||
| 143 | + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 144 | + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 145 | + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); | ||
| 146 | +} | ||
| 147 | +/* IE10 Windows Phone 8 Fixes */ | ||
| 148 | +.swiper-container-wp8-horizontal, | ||
| 149 | +.swiper-container-wp8-horizontal > .swiper-wrapper { | ||
| 150 | + -ms-touch-action: pan-y; | ||
| 151 | + touch-action: pan-y; | ||
| 152 | +} | ||
| 153 | +.swiper-container-wp8-vertical, | ||
| 154 | +.swiper-container-wp8-vertical > .swiper-wrapper { | ||
| 155 | + -ms-touch-action: pan-x; | ||
| 156 | + touch-action: pan-x; | ||
| 157 | +} | ||
| 158 | +.swiper-button-prev, | ||
| 159 | +.swiper-button-next { | ||
| 160 | + position: absolute; | ||
| 161 | + top: 50%; | ||
| 162 | + width: 27px; | ||
| 163 | + height: 44px; | ||
| 164 | + margin-top: -22px; | ||
| 165 | + z-index: 10; | ||
| 166 | + cursor: pointer; | ||
| 167 | + background-size: 27px 44px; | ||
| 168 | + background-position: center; | ||
| 169 | + background-repeat: no-repeat; | ||
| 170 | +} | ||
| 171 | +.swiper-button-prev.swiper-button-disabled, | ||
| 172 | +.swiper-button-next.swiper-button-disabled { | ||
| 173 | + opacity: 0.35; | ||
| 174 | + cursor: auto; | ||
| 175 | + pointer-events: none; | ||
| 176 | +} | ||
| 177 | +.swiper-button-prev, | ||
| 178 | +.swiper-container-rtl .swiper-button-next { | ||
| 179 | + 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"); | ||
| 180 | + left: 10px; | ||
| 181 | + right: auto; | ||
| 182 | +} | ||
| 183 | +.swiper-button-next, | ||
| 184 | +.swiper-container-rtl .swiper-button-prev { | ||
| 185 | + 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"); | ||
| 186 | + right: 10px; | ||
| 187 | + left: auto; | ||
| 188 | +} | ||
| 189 | +.swiper-button-prev.swiper-button-white, | ||
| 190 | +.swiper-container-rtl .swiper-button-next.swiper-button-white { | ||
| 191 | + 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"); | ||
| 192 | +} | ||
| 193 | +.swiper-button-next.swiper-button-white, | ||
| 194 | +.swiper-container-rtl .swiper-button-prev.swiper-button-white { | ||
| 195 | + 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"); | ||
| 196 | +} | ||
| 197 | +.swiper-button-prev.swiper-button-black, | ||
| 198 | +.swiper-container-rtl .swiper-button-next.swiper-button-black { | ||
| 199 | + 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"); | ||
| 200 | +} | ||
| 201 | +.swiper-button-next.swiper-button-black, | ||
| 202 | +.swiper-container-rtl .swiper-button-prev.swiper-button-black { | ||
| 203 | + 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"); | ||
| 204 | +} | ||
| 205 | +.swiper-button-lock { | ||
| 206 | + display: none; | ||
| 207 | +} | ||
| 208 | +.swiper-pagination { | ||
| 209 | + position: absolute; | ||
| 210 | + text-align: center; | ||
| 211 | + -webkit-transition: 300ms opacity; | ||
| 212 | + -o-transition: 300ms opacity; | ||
| 213 | + transition: 300ms opacity; | ||
| 214 | + -webkit-transform: translate3d(0, 0, 0); | ||
| 215 | + transform: translate3d(0, 0, 0); | ||
| 216 | + z-index: 10; | ||
| 217 | +} | ||
| 218 | +.swiper-pagination.swiper-pagination-hidden { | ||
| 219 | + opacity: 0; | ||
| 220 | +} | ||
| 221 | +/* Common Styles */ | ||
| 222 | +.swiper-pagination-fraction, | ||
| 223 | +.swiper-pagination-custom, | ||
| 224 | +.swiper-container-horizontal > .swiper-pagination-bullets { | ||
| 225 | + bottom: 10px; | ||
| 226 | + left: 0; | ||
| 227 | + width: 100%; | ||
| 228 | +} | ||
| 229 | +/* Bullets */ | ||
| 230 | +.swiper-pagination-bullets-dynamic { | ||
| 231 | + overflow: hidden; | ||
| 232 | + font-size: 0; | ||
| 233 | +} | ||
| 234 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | ||
| 235 | + -webkit-transform: scale(0.33); | ||
| 236 | + -ms-transform: scale(0.33); | ||
| 237 | + transform: scale(0.33); | ||
| 238 | + position: relative; | ||
| 239 | +} | ||
| 240 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { | ||
| 241 | + -webkit-transform: scale(1); | ||
| 242 | + -ms-transform: scale(1); | ||
| 243 | + transform: scale(1); | ||
| 244 | +} | ||
| 245 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { | ||
| 246 | + -webkit-transform: scale(1); | ||
| 247 | + -ms-transform: scale(1); | ||
| 248 | + transform: scale(1); | ||
| 249 | +} | ||
| 250 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { | ||
| 251 | + -webkit-transform: scale(0.66); | ||
| 252 | + -ms-transform: scale(0.66); | ||
| 253 | + transform: scale(0.66); | ||
| 254 | +} | ||
| 255 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { | ||
| 256 | + -webkit-transform: scale(0.33); | ||
| 257 | + -ms-transform: scale(0.33); | ||
| 258 | + transform: scale(0.33); | ||
| 259 | +} | ||
| 260 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { | ||
| 261 | + -webkit-transform: scale(0.66); | ||
| 262 | + -ms-transform: scale(0.66); | ||
| 263 | + transform: scale(0.66); | ||
| 264 | +} | ||
| 265 | +.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { | ||
| 266 | + -webkit-transform: scale(0.33); | ||
| 267 | + -ms-transform: scale(0.33); | ||
| 268 | + transform: scale(0.33); | ||
| 269 | +} | ||
| 270 | +.swiper-pagination-bullet { | ||
| 271 | + width: 8px; | ||
| 272 | + height: 8px; | ||
| 273 | + display: inline-block; | ||
| 274 | + border-radius: 100%; | ||
| 275 | + background: #000; | ||
| 276 | + opacity: 0.2; | ||
| 277 | +} | ||
| 278 | +button.swiper-pagination-bullet { | ||
| 279 | + border: none; | ||
| 280 | + margin: 0; | ||
| 281 | + padding: 0; | ||
| 282 | + -webkit-box-shadow: none; | ||
| 283 | + box-shadow: none; | ||
| 284 | + -webkit-appearance: none; | ||
| 285 | + -moz-appearance: none; | ||
| 286 | + appearance: none; | ||
| 287 | +} | ||
| 288 | +.swiper-pagination-clickable .swiper-pagination-bullet { | ||
| 289 | + cursor: pointer; | ||
| 290 | +} | ||
| 291 | +.swiper-pagination-bullet-active { | ||
| 292 | + opacity: 1; | ||
| 293 | + background: #007aff; | ||
| 294 | +} | ||
| 295 | +.swiper-container-vertical > .swiper-pagination-bullets { | ||
| 296 | + right: 10px; | ||
| 297 | + top: 50%; | ||
| 298 | + -webkit-transform: translate3d(0px, -50%, 0); | ||
| 299 | + transform: translate3d(0px, -50%, 0); | ||
| 300 | +} | ||
| 301 | +.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { | ||
| 302 | + margin: 6px 0; | ||
| 303 | + display: block; | ||
| 304 | +} | ||
| 305 | +.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { | ||
| 306 | + top: 50%; | ||
| 307 | + -webkit-transform: translateY(-50%); | ||
| 308 | + -ms-transform: translateY(-50%); | ||
| 309 | + transform: translateY(-50%); | ||
| 310 | + width: 8px; | ||
| 311 | +} | ||
| 312 | +.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | ||
| 313 | + display: inline-block; | ||
| 314 | + -webkit-transition: 200ms top, 200ms -webkit-transform; | ||
| 315 | + transition: 200ms top, 200ms -webkit-transform; | ||
| 316 | + -o-transition: 200ms transform, 200ms top; | ||
| 317 | + transition: 200ms transform, 200ms top; | ||
| 318 | + transition: 200ms transform, 200ms top, 200ms -webkit-transform; | ||
| 319 | +} | ||
| 320 | +.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { | ||
| 321 | + margin: 0 4px; | ||
| 322 | +} | ||
| 323 | +.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { | ||
| 324 | + left: 50%; | ||
| 325 | + -webkit-transform: translateX(-50%); | ||
| 326 | + -ms-transform: translateX(-50%); | ||
| 327 | + transform: translateX(-50%); | ||
| 328 | + white-space: nowrap; | ||
| 329 | +} | ||
| 330 | +.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | ||
| 331 | + -webkit-transition: 200ms left, 200ms -webkit-transform; | ||
| 332 | + transition: 200ms left, 200ms -webkit-transform; | ||
| 333 | + -o-transition: 200ms transform, 200ms left; | ||
| 334 | + transition: 200ms transform, 200ms left; | ||
| 335 | + transition: 200ms transform, 200ms left, 200ms -webkit-transform; | ||
| 336 | +} | ||
| 337 | +.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { | ||
| 338 | + -webkit-transition: 200ms right, 200ms -webkit-transform; | ||
| 339 | + transition: 200ms right, 200ms -webkit-transform; | ||
| 340 | + -o-transition: 200ms transform, 200ms right; | ||
| 341 | + transition: 200ms transform, 200ms right; | ||
| 342 | + transition: 200ms transform, 200ms right, 200ms -webkit-transform; | ||
| 343 | +} | ||
| 344 | +/* Progress */ | ||
| 345 | +.swiper-pagination-progressbar { | ||
| 346 | + background: rgba(0, 0, 0, 0.25); | ||
| 347 | + position: absolute; | ||
| 348 | +} | ||
| 349 | +.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { | ||
| 350 | + background: #007aff; | ||
| 351 | + position: absolute; | ||
| 352 | + left: 0; | ||
| 353 | + top: 0; | ||
| 354 | + width: 100%; | ||
| 355 | + height: 100%; | ||
| 356 | + -webkit-transform: scale(0); | ||
| 357 | + -ms-transform: scale(0); | ||
| 358 | + transform: scale(0); | ||
| 359 | + -webkit-transform-origin: left top; | ||
| 360 | + -ms-transform-origin: left top; | ||
| 361 | + transform-origin: left top; | ||
| 362 | +} | ||
| 363 | +.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { | ||
| 364 | + -webkit-transform-origin: right top; | ||
| 365 | + -ms-transform-origin: right top; | ||
| 366 | + transform-origin: right top; | ||
| 367 | +} | ||
| 368 | +.swiper-container-horizontal > .swiper-pagination-progressbar, | ||
| 369 | +.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { | ||
| 370 | + width: 100%; | ||
| 371 | + height: 4px; | ||
| 372 | + left: 0; | ||
| 373 | + top: 0; | ||
| 374 | +} | ||
| 375 | +.swiper-container-vertical > .swiper-pagination-progressbar, | ||
| 376 | +.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { | ||
| 377 | + width: 4px; | ||
| 378 | + height: 100%; | ||
| 379 | + left: 0; | ||
| 380 | + top: 0; | ||
| 381 | +} | ||
| 382 | +.swiper-pagination-white .swiper-pagination-bullet-active { | ||
| 383 | + background: #ffffff; | ||
| 384 | +} | ||
| 385 | +.swiper-pagination-progressbar.swiper-pagination-white { | ||
| 386 | + background: rgba(255, 255, 255, 0.25); | ||
| 387 | +} | ||
| 388 | +.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { | ||
| 389 | + background: #ffffff; | ||
| 390 | +} | ||
| 391 | +.swiper-pagination-black .swiper-pagination-bullet-active { | ||
| 392 | + background: #000000; | ||
| 393 | +} | ||
| 394 | +.swiper-pagination-progressbar.swiper-pagination-black { | ||
| 395 | + background: rgba(0, 0, 0, 0.25); | ||
| 396 | +} | ||
| 397 | +.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { | ||
| 398 | + background: #000000; | ||
| 399 | +} | ||
| 400 | +.swiper-pagination-lock { | ||
| 401 | + display: none; | ||
| 402 | +} | ||
| 403 | +/* Scrollbar */ | ||
| 404 | +.swiper-scrollbar { | ||
| 405 | + border-radius: 10px; | ||
| 406 | + position: relative; | ||
| 407 | + -ms-touch-action: none; | ||
| 408 | + background: rgba(0, 0, 0, 0.1); | ||
| 409 | +} | ||
| 410 | +.swiper-container-horizontal > .swiper-scrollbar { | ||
| 411 | + position: absolute; | ||
| 412 | + left: 1%; | ||
| 413 | + bottom: 3px; | ||
| 414 | + z-index: 50; | ||
| 415 | + height: 5px; | ||
| 416 | + width: 98%; | ||
| 417 | +} | ||
| 418 | +.swiper-container-vertical > .swiper-scrollbar { | ||
| 419 | + position: absolute; | ||
| 420 | + right: 3px; | ||
| 421 | + top: 1%; | ||
| 422 | + z-index: 50; | ||
| 423 | + width: 5px; | ||
| 424 | + height: 98%; | ||
| 425 | +} | ||
| 426 | +.swiper-scrollbar-drag { | ||
| 427 | + height: 100%; | ||
| 428 | + width: 100%; | ||
| 429 | + position: relative; | ||
| 430 | + background: rgba(0, 0, 0, 0.5); | ||
| 431 | + border-radius: 10px; | ||
| 432 | + left: 0; | ||
| 433 | + top: 0; | ||
| 434 | +} | ||
| 435 | +.swiper-scrollbar-cursor-drag { | ||
| 436 | + cursor: move; | ||
| 437 | +} | ||
| 438 | +.swiper-scrollbar-lock { | ||
| 439 | + display: none; | ||
| 440 | +} | ||
| 441 | +.swiper-zoom-container { | ||
| 442 | + width: 100%; | ||
| 443 | + height: 100%; | ||
| 444 | + display: -webkit-box; | ||
| 445 | + display: -webkit-flex; | ||
| 446 | + display: -ms-flexbox; | ||
| 447 | + display: flex; | ||
| 448 | + -webkit-box-pack: center; | ||
| 449 | + -webkit-justify-content: center; | ||
| 450 | + -ms-flex-pack: center; | ||
| 451 | + justify-content: center; | ||
| 452 | + -webkit-box-align: center; | ||
| 453 | + -webkit-align-items: center; | ||
| 454 | + -ms-flex-align: center; | ||
| 455 | + align-items: center; | ||
| 456 | + text-align: center; | ||
| 457 | +} | ||
| 458 | +.swiper-zoom-container > img, | ||
| 459 | +.swiper-zoom-container > svg, | ||
| 460 | +.swiper-zoom-container > canvas { | ||
| 461 | + max-width: 100%; | ||
| 462 | + max-height: 100%; | ||
| 463 | + -o-object-fit: contain; | ||
| 464 | + object-fit: contain; | ||
| 465 | +} | ||
| 466 | +.swiper-slide-zoomed { | ||
| 467 | + cursor: move; | ||
| 468 | +} | ||
| 469 | +/* Preloader */ | ||
| 470 | +.swiper-lazy-preloader { | ||
| 471 | + width: 42px; | ||
| 472 | + height: 42px; | ||
| 473 | + position: absolute; | ||
| 474 | + left: 50%; | ||
| 475 | + top: 50%; | ||
| 476 | + margin-left: -21px; | ||
| 477 | + margin-top: -21px; | ||
| 478 | + z-index: 10; | ||
| 479 | + -webkit-transform-origin: 50%; | ||
| 480 | + -ms-transform-origin: 50%; | ||
| 481 | + transform-origin: 50%; | ||
| 482 | + -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; | ||
| 483 | + animation: swiper-preloader-spin 1s steps(12, end) infinite; | ||
| 484 | +} | ||
| 485 | +.swiper-lazy-preloader:after { | ||
| 486 | + display: block; | ||
| 487 | + content: ''; | ||
| 488 | + width: 100%; | ||
| 489 | + height: 100%; | ||
| 490 | + 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"); | ||
| 491 | + background-position: 50%; | ||
| 492 | + background-size: 100%; | ||
| 493 | + background-repeat: no-repeat; | ||
| 494 | +} | ||
| 495 | +.swiper-lazy-preloader-white:after { | ||
| 496 | + 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"); | ||
| 497 | +} | ||
| 498 | +@-webkit-keyframes swiper-preloader-spin { | ||
| 499 | + 100% { | ||
| 500 | + -webkit-transform: rotate(360deg); | ||
| 501 | + transform: rotate(360deg); | ||
| 502 | + } | ||
| 503 | +} | ||
| 504 | +@keyframes swiper-preloader-spin { | ||
| 505 | + 100% { | ||
| 506 | + -webkit-transform: rotate(360deg); | ||
| 507 | + transform: rotate(360deg); | ||
| 508 | + } | ||
| 509 | +} | ||
| 510 | +/* a11y */ | ||
| 511 | +.swiper-container .swiper-notification { | ||
| 512 | + position: absolute; | ||
| 513 | + left: 0; | ||
| 514 | + top: 0; | ||
| 515 | + pointer-events: none; | ||
| 516 | + opacity: 0; | ||
| 517 | + z-index: -1000; | ||
| 518 | +} | ||
| 519 | +.swiper-container-fade.swiper-container-free-mode .swiper-slide { | ||
| 520 | + -webkit-transition-timing-function: ease-out; | ||
| 521 | + -o-transition-timing-function: ease-out; | ||
| 522 | + transition-timing-function: ease-out; | ||
| 523 | +} | ||
| 524 | +.swiper-container-fade .swiper-slide { | ||
| 525 | + pointer-events: none; | ||
| 526 | + -webkit-transition-property: opacity; | ||
| 527 | + -o-transition-property: opacity; | ||
| 528 | + transition-property: opacity; | ||
| 529 | +} | ||
| 530 | +.swiper-container-fade .swiper-slide .swiper-slide { | ||
| 531 | + pointer-events: none; | ||
| 532 | +} | ||
| 533 | +.swiper-container-fade .swiper-slide-active, | ||
| 534 | +.swiper-container-fade .swiper-slide-active .swiper-slide-active { | ||
| 535 | + pointer-events: auto; | ||
| 536 | +} | ||
| 537 | +.swiper-container-cube { | ||
| 538 | + overflow: visible; | ||
| 539 | +} | ||
| 540 | +.swiper-container-cube .swiper-slide { | ||
| 541 | + pointer-events: none; | ||
| 542 | + -webkit-backface-visibility: hidden; | ||
| 543 | + backface-visibility: hidden; | ||
| 544 | + z-index: 1; | ||
| 545 | + visibility: hidden; | ||
| 546 | + -webkit-transform-origin: 0 0; | ||
| 547 | + -ms-transform-origin: 0 0; | ||
| 548 | + transform-origin: 0 0; | ||
| 549 | + width: 100%; | ||
| 550 | + height: 100%; | ||
| 551 | +} | ||
| 552 | +.swiper-container-cube .swiper-slide .swiper-slide { | ||
| 553 | + pointer-events: none; | ||
| 554 | +} | ||
| 555 | +.swiper-container-cube.swiper-container-rtl .swiper-slide { | ||
| 556 | + -webkit-transform-origin: 100% 0; | ||
| 557 | + -ms-transform-origin: 100% 0; | ||
| 558 | + transform-origin: 100% 0; | ||
| 559 | +} | ||
| 560 | +.swiper-container-cube .swiper-slide-active, | ||
| 561 | +.swiper-container-cube .swiper-slide-active .swiper-slide-active { | ||
| 562 | + pointer-events: auto; | ||
| 563 | +} | ||
| 564 | +.swiper-container-cube .swiper-slide-active, | ||
| 565 | +.swiper-container-cube .swiper-slide-next, | ||
| 566 | +.swiper-container-cube .swiper-slide-prev, | ||
| 567 | +.swiper-container-cube .swiper-slide-next + .swiper-slide { | ||
| 568 | + pointer-events: auto; | ||
| 569 | + visibility: visible; | ||
| 570 | +} | ||
| 571 | +.swiper-container-cube .swiper-slide-shadow-top, | ||
| 572 | +.swiper-container-cube .swiper-slide-shadow-bottom, | ||
| 573 | +.swiper-container-cube .swiper-slide-shadow-left, | ||
| 574 | +.swiper-container-cube .swiper-slide-shadow-right { | ||
| 575 | + z-index: 0; | ||
| 576 | + -webkit-backface-visibility: hidden; | ||
| 577 | + backface-visibility: hidden; | ||
| 578 | +} | ||
| 579 | +.swiper-container-cube .swiper-cube-shadow { | ||
| 580 | + position: absolute; | ||
| 581 | + left: 0; | ||
| 582 | + bottom: 0px; | ||
| 583 | + width: 100%; | ||
| 584 | + height: 100%; | ||
| 585 | + background: #000; | ||
| 586 | + opacity: 0.6; | ||
| 587 | + -webkit-filter: blur(50px); | ||
| 588 | + filter: blur(50px); | ||
| 589 | + z-index: 0; | ||
| 590 | +} | ||
| 591 | +.swiper-container-flip { | ||
| 592 | + overflow: visible; | ||
| 593 | +} | ||
| 594 | +.swiper-container-flip .swiper-slide { | ||
| 595 | + pointer-events: none; | ||
| 596 | + -webkit-backface-visibility: hidden; | ||
| 597 | + backface-visibility: hidden; | ||
| 598 | + z-index: 1; | ||
| 599 | +} | ||
| 600 | +.swiper-container-flip .swiper-slide .swiper-slide { | ||
| 601 | + pointer-events: none; | ||
| 602 | +} | ||
| 603 | +.swiper-container-flip .swiper-slide-active, | ||
| 604 | +.swiper-container-flip .swiper-slide-active .swiper-slide-active { | ||
| 605 | + pointer-events: auto; | ||
| 606 | +} | ||
| 607 | +.swiper-container-flip .swiper-slide-shadow-top, | ||
| 608 | +.swiper-container-flip .swiper-slide-shadow-bottom, | ||
| 609 | +.swiper-container-flip .swiper-slide-shadow-left, | ||
| 610 | +.swiper-container-flip .swiper-slide-shadow-right { | ||
| 611 | + z-index: 0; | ||
| 612 | + -webkit-backface-visibility: hidden; | ||
| 613 | + backface-visibility: hidden; | ||
| 614 | +} | ||
| 615 | +.swiper-container-coverflow .swiper-wrapper { | ||
| 616 | + /* Windows 8 IE 10 fix */ | ||
| 617 | + -ms-perspective: 1200px; | ||
| 618 | +} |
images/1.png
0 → 100644
52.8 KB
images/banner_1.png
0 → 100644
206.2 KB
images/banner_2.png
0 → 100644
202.5 KB
images/banner_3.png
0 → 100644
304.9 KB
images/peke.png
0 → 100644
249.7 KB
index.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 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
| 9 | + <link rel="stylesheet" type="text/css" href="css/index.css"> | ||
| 10 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css"> | ||
| 11 | + <script src="js/base.js"></script> | ||
| 12 | + <script src="js/jquery.min.js"></script> | ||
| 13 | + <link rel="stylesheet" href="css/swiper.css"> | ||
| 14 | + <style> | ||
| 15 | + .icon-caidan{ | ||
| 16 | + font-size: 0.5rem; | ||
| 17 | + } | ||
| 18 | + .icon-magnifier{ | ||
| 19 | + color: #999999; | ||
| 20 | + } | ||
| 21 | + .icon-bofangshipin{ | ||
| 22 | + font-size: 0.38rem; | ||
| 23 | + | ||
| 24 | + } | ||
| 25 | + .swiper-container { | ||
| 26 | + width: 100%; | ||
| 27 | + height: 100%; | ||
| 28 | + } | ||
| 29 | + .swiper-slide { | ||
| 30 | + text-align: center; | ||
| 31 | + font-size: 18px; | ||
| 32 | + background: #fff; | ||
| 33 | + /* Center slide text vertically */ | ||
| 34 | + display: -webkit-box; | ||
| 35 | + display: -ms-flexbox; | ||
| 36 | + display: -webkit-flex; | ||
| 37 | + display: flex; | ||
| 38 | + -webkit-box-pack: center; | ||
| 39 | + -ms-flex-pack: center; | ||
| 40 | + -webkit-justify-content: center; | ||
| 41 | + justify-content: center; | ||
| 42 | + -webkit-box-align: center; | ||
| 43 | + -ms-flex-align: center; | ||
| 44 | + -webkit-align-items: center; | ||
| 45 | + align-items: center; | ||
| 46 | + | ||
| 47 | + border-right: 0.1rem; | ||
| 48 | + } | ||
| 49 | + .swiper-slide img{ | ||
| 50 | + width: 100%; | ||
| 51 | + height: 100%; | ||
| 52 | + border-radius: 0.1rem; | ||
| 53 | + } | ||
| 54 | + </style> | ||
| 55 | +</head> | ||
| 56 | +<script src="js/swiper.js"></script> | ||
| 57 | +<body> | ||
| 58 | + <div class="container"> | ||
| 59 | + <div class="top"> | ||
| 60 | + <!--顶部菜单--> | ||
| 61 | + <div class="top_t"> | ||
| 62 | + <!--左--> | ||
| 63 | + <div class="top_t_left"> | ||
| 64 | + <!--中文字--> | ||
| 65 | + <div class="top_t_left_text"> | ||
| 66 | + 中 | ||
| 67 | + </div> | ||
| 68 | + <!--菜单图标--> | ||
| 69 | + <div class="iconfont icon-caidan"></div> | ||
| 70 | + </div> | ||
| 71 | + <!--中--> | ||
| 72 | + <div class="top_t_middle"> | ||
| 73 | + <img src="images/peke.png"> | ||
| 74 | + </div> | ||
| 75 | + <!--右--> | ||
| 76 | + <div class="top_t_right"> | ||
| 77 | + <!--铃声--> | ||
| 78 | + <div class="iconfont icon-10"></div> | ||
| 79 | + <!--头像--> | ||
| 80 | + <div class="top_t_right_pic"> | ||
| 81 | + <img src="images/1.png"> | ||
| 82 | + </div> | ||
| 83 | + </div> | ||
| 84 | + </div> | ||
| 85 | + <!--底部搜索--> | ||
| 86 | + <div class="top_d"> | ||
| 87 | + <div class="iconfont icon-magnifier"></div> | ||
| 88 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
| 89 | + </div> | ||
| 90 | + </div> | ||
| 91 | + <!--轮播图--> | ||
| 92 | + <div class="banner"> | ||
| 93 | + <!-- Swiper --> | ||
| 94 | + <div class="swiper-container"> | ||
| 95 | + <div class="swiper-wrapper"> | ||
| 96 | + <div class="swiper-slide"> | ||
| 97 | + <img src="images/banner_1.png"> | ||
| 98 | + </div> | ||
| 99 | + <div class="swiper-slide"> | ||
| 100 | + <img src="images/banner_2.png"> | ||
| 101 | + </div> | ||
| 102 | + <div class="swiper-slide"> | ||
| 103 | + <img src="images/banner_3.png"> | ||
| 104 | + </div> | ||
| 105 | + | ||
| 106 | + </div> | ||
| 107 | + <!-- Add Pagination --> | ||
| 108 | + <div class="swiper-pagination"></div> | ||
| 109 | + </div> | ||
| 110 | + </div> | ||
| 111 | + <!--最新--> | ||
| 112 | + <div class="new"> | ||
| 113 | + <div class="new_e"> | ||
| 114 | + The latest | ||
| 115 | + </div> | ||
| 116 | + <div class="new_c"> | ||
| 117 | + 最新 | ||
| 118 | + </div> | ||
| 119 | + <!--最新小视频窗口--> | ||
| 120 | + <div class="new_video_item"> | ||
| 121 | + <div class="new_video"> | ||
| 122 | + <div class="new_video_top"> | ||
| 123 | + <img src="images/peke.png"> | ||
| 124 | + </div> | ||
| 125 | + <div class="new_video_bottom"> | ||
| 126 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 127 | + <div class="new_video_bottom_right"> | ||
| 128 | + 壹 | ||
| 129 | + </div> | ||
| 130 | + | ||
| 131 | + <div class="new_video_bottom_name"> | ||
| 132 | + 小猪佩奇 | ||
| 133 | + 小猪佩奇 | ||
| 134 | + 小猪佩奇 | ||
| 135 | + </div> | ||
| 136 | + </div> | ||
| 137 | + </div> | ||
| 138 | + <div class="new_video"> | ||
| 139 | + <div class="new_video_top"> | ||
| 140 | + <img src="images/peke.png"> | ||
| 141 | + </div> | ||
| 142 | + <div class="new_video_bottom"> | ||
| 143 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 144 | + <div class="new_video_bottom_right"> | ||
| 145 | + 壹 | ||
| 146 | + </div> | ||
| 147 | + | ||
| 148 | + <div class="new_video_bottom_name"> | ||
| 149 | + 小猪佩奇 | ||
| 150 | + 小猪佩奇 | ||
| 151 | + 小猪佩奇 | ||
| 152 | + </div> | ||
| 153 | + </div> | ||
| 154 | + </div> | ||
| 155 | + </div> | ||
| 156 | + <!--最新打视频窗口--> | ||
| 157 | + <div class="new_video_big"> | ||
| 158 | + <div class="new_video_big_pic"> | ||
| 159 | + <img src="images/peke.png"> | ||
| 160 | + </div> | ||
| 161 | + <div class="new_video_big_bottom"> | ||
| 162 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 163 | + <div class="new_video_bottom_right"> | ||
| 164 | + 壹 | ||
| 165 | + </div> | ||
| 166 | + <div class="new_video_big_name_text"> | ||
| 167 | + 小猪佩奇 | ||
| 168 | + 小猪佩奇 | ||
| 169 | + 小猪佩奇 | ||
| 170 | + 小猪佩奇 | ||
| 171 | + 小猪佩奇 | ||
| 172 | + 小猪佩奇 | ||
| 173 | + 小猪佩奇 | ||
| 174 | + 小猪佩奇 | ||
| 175 | + 小猪佩奇 | ||
| 176 | + 小猪佩奇 | ||
| 177 | + 小猪佩奇 | ||
| 178 | + 小猪佩奇 | ||
| 179 | + </div> | ||
| 180 | + </div> | ||
| 181 | + </div> | ||
| 182 | + | ||
| 183 | + </div> | ||
| 184 | + <!--视频--> | ||
| 185 | + <div class="video"> | ||
| 186 | + <div class="new_e"> | ||
| 187 | + Video | ||
| 188 | + </div> | ||
| 189 | + <div class="new_c"> | ||
| 190 | + 视频 | ||
| 191 | + </div> | ||
| 192 | + <div class="item_pic"> | ||
| 193 | + <!--图片盒子--> | ||
| 194 | + <div class="pic_box"> | ||
| 195 | + <!--图片--> | ||
| 196 | + <div class="pic_box_top"> | ||
| 197 | + <img src="images/peke.png"> | ||
| 198 | + </div> | ||
| 199 | + <!--文字--> | ||
| 200 | + <div class="pic_box_bottom"> | ||
| 201 | + 某某主题 | ||
| 202 | + </div> | ||
| 203 | + </div> | ||
| 204 | + <div class="pic_box"> | ||
| 205 | + <!--图片--> | ||
| 206 | + <div class="pic_box_top"> | ||
| 207 | + <img src="images/peke.png"> | ||
| 208 | + </div> | ||
| 209 | + <!--文字--> | ||
| 210 | + <div class="pic_box_bottom"> | ||
| 211 | + 某某主题 | ||
| 212 | + </div> | ||
| 213 | + </div> | ||
| 214 | + </div> | ||
| 215 | + <!--更多--> | ||
| 216 | + <div class="video_more"> | ||
| 217 | + MORE | ||
| 218 | + </div> | ||
| 219 | + </div> | ||
| 220 | + <!--文章--> | ||
| 221 | + <div class="title"> | ||
| 222 | + <div class="new_e marin_top"> | ||
| 223 | + Article | ||
| 224 | + </div> | ||
| 225 | + <div class="new_c"> | ||
| 226 | + 文章 | ||
| 227 | + </div> | ||
| 228 | + <div class="item_pic"> | ||
| 229 | + <!--图片盒子--> | ||
| 230 | + <div class="pic_box"> | ||
| 231 | + <!--图片--> | ||
| 232 | + <div class="pic_box_top"> | ||
| 233 | + <img src="images/peke.png"> | ||
| 234 | + </div> | ||
| 235 | + <!--文字--> | ||
| 236 | + <div class="pic_box_bottom between"> | ||
| 237 | + <p>某某主题</p> | ||
| 238 | + <p>2019.1.12</p> | ||
| 239 | + </div> | ||
| 240 | + </div> | ||
| 241 | + <div class="pic_box"> | ||
| 242 | + <!--图片--> | ||
| 243 | + <div class="pic_box_top"> | ||
| 244 | + <img src="images/peke.png"> | ||
| 245 | + </div> | ||
| 246 | + <!--文字--> | ||
| 247 | + <div class="pic_box_bottom between"> | ||
| 248 | + <p>某某主题</p> | ||
| 249 | + <p>2019.1.12</p> | ||
| 250 | + </div> | ||
| 251 | + </div> | ||
| 252 | + </div> | ||
| 253 | + <!--更多--> | ||
| 254 | + <div class="video_more"> | ||
| 255 | + MORE | ||
| 256 | + </div> | ||
| 257 | + </div> | ||
| 258 | + <!--演出--> | ||
| 259 | + <div class="show"> | ||
| 260 | + <div class="new_e marin_top"> | ||
| 261 | + Performance | ||
| 262 | + </div> | ||
| 263 | + <div class="new_c"> | ||
| 264 | + 演出 | ||
| 265 | + </div> | ||
| 266 | + <!--演出时间筛选--> | ||
| 267 | + <div class="show_time"> | ||
| 268 | + <!--年--> | ||
| 269 | + <div class="show_time_year"> | ||
| 270 | + | ||
| 271 | + </div> | ||
| 272 | + <!--月--> | ||
| 273 | + <div class="show_time_month"> | ||
| 274 | + | ||
| 275 | + </div> | ||
| 276 | + </div> | ||
| 277 | + <div class="item_pic"> | ||
| 278 | + <!--图片盒子--> | ||
| 279 | + <div class="pic_box"> | ||
| 280 | + <!--图片--> | ||
| 281 | + <div class="pic_box_top"> | ||
| 282 | + <img src="images/peke.png"> | ||
| 283 | + </div> | ||
| 284 | + <!--文字--> | ||
| 285 | + <div class="pic_box_bottom between"> | ||
| 286 | + <p>某某主题</p> | ||
| 287 | + <p>2019.1.12</p> | ||
| 288 | + </div> | ||
| 289 | + </div> | ||
| 290 | + <div class="pic_box"> | ||
| 291 | + <!--图片--> | ||
| 292 | + <div class="pic_box_top"> | ||
| 293 | + <img src="images/peke.png"> | ||
| 294 | + </div> | ||
| 295 | + <!--文字--> | ||
| 296 | + <div class="pic_box_bottom between"> | ||
| 297 | + <p>某某主题</p> | ||
| 298 | + <p>2019.1.12</p> | ||
| 299 | + </div> | ||
| 300 | + </div> | ||
| 301 | + </div> | ||
| 302 | + <!--更多--> | ||
| 303 | + <div class="video_more"> | ||
| 304 | + MORE | ||
| 305 | + </div> | ||
| 306 | + </div> | ||
| 307 | + </div> | ||
| 308 | +</body> | ||
| 309 | +<script> | ||
| 310 | + var swiper = new Swiper('.swiper-container',{ | ||
| 311 | + | ||
| 312 | + loop: true, // 循环模式选项 | ||
| 313 | + // autoplay: { | ||
| 314 | + // delay: 1000, | ||
| 315 | + // disableOnInteraction: false, | ||
| 316 | + // }, | ||
| 317 | + | ||
| 318 | + pagination: { | ||
| 319 | + el: '.swiper-pagination', | ||
| 320 | + }, | ||
| 321 | + }); | ||
| 322 | +</script> | ||
| 323 | +</html> |
index_2.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 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
| 9 | + <link rel="stylesheet" type="text/css" href="css/index.css"> | ||
| 10 | + <link rel="stylesheet" type="text/css" href="css/index_2.css"> | ||
| 11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css"> | ||
| 12 | + <script src="js/base.js"></script> | ||
| 13 | + <script src="js/jquery.min.js"></script> | ||
| 14 | + <link rel="stylesheet" href="css/swiper.css"> | ||
| 15 | + <style> | ||
| 16 | + .icon-caidan{ | ||
| 17 | + font-size: 0.5rem; | ||
| 18 | + } | ||
| 19 | + .icon-magnifier{ | ||
| 20 | + color: #999999; | ||
| 21 | + } | ||
| 22 | + .icon-bofangshipin{ | ||
| 23 | + font-size: 0.38rem; | ||
| 24 | + | ||
| 25 | + } | ||
| 26 | + .swiper-container { | ||
| 27 | + width: 100%; | ||
| 28 | + height: 100%; | ||
| 29 | + } | ||
| 30 | + .swiper-slide { | ||
| 31 | + text-align: center; | ||
| 32 | + font-size: 18px; | ||
| 33 | + background: #fff; | ||
| 34 | + /* Center slide text vertically */ | ||
| 35 | + display: -webkit-box; | ||
| 36 | + display: -ms-flexbox; | ||
| 37 | + display: -webkit-flex; | ||
| 38 | + display: flex; | ||
| 39 | + -webkit-box-pack: center; | ||
| 40 | + -ms-flex-pack: center; | ||
| 41 | + -webkit-justify-content: center; | ||
| 42 | + justify-content: center; | ||
| 43 | + -webkit-box-align: center; | ||
| 44 | + -ms-flex-align: center; | ||
| 45 | + -webkit-align-items: center; | ||
| 46 | + align-items: center; | ||
| 47 | + | ||
| 48 | + border-right: 0.1rem; | ||
| 49 | + } | ||
| 50 | + .swiper-slide img{ | ||
| 51 | + width: 100%; | ||
| 52 | + height: 100%; | ||
| 53 | + border-radius: 0.1rem; | ||
| 54 | + } | ||
| 55 | + </style> | ||
| 56 | +</head> | ||
| 57 | +<script src="js/swiper.js"></script> | ||
| 58 | +<body> | ||
| 59 | +<div class="container"> | ||
| 60 | + <div class="top"> | ||
| 61 | + <!--顶部菜单--> | ||
| 62 | + <div class="top_t"> | ||
| 63 | + <!--左--> | ||
| 64 | + <div class="top_t_left"> | ||
| 65 | + <!--中文字--> | ||
| 66 | + <div class="top_t_left_text"> | ||
| 67 | + 中 | ||
| 68 | + </div> | ||
| 69 | + <!--菜单图标--> | ||
| 70 | + <div class="iconfont icon-caidan"></div> | ||
| 71 | + </div> | ||
| 72 | + <!--中--> | ||
| 73 | + <div class="top_t_middle"> | ||
| 74 | + <img src="images/peke.png"> | ||
| 75 | + </div> | ||
| 76 | + <!--右--> | ||
| 77 | + <div class="top_t_right"> | ||
| 78 | + <!--铃声--> | ||
| 79 | + <div class="iconfont icon-10"></div> | ||
| 80 | + <!--头像--> | ||
| 81 | + <div class="top_t_right_pic"> | ||
| 82 | + <img src="images/1.png"> | ||
| 83 | + </div> | ||
| 84 | + </div> | ||
| 85 | + </div> | ||
| 86 | + <!--底部搜索--> | ||
| 87 | + <div class="top_d"> | ||
| 88 | + <div class="iconfont icon-magnifier"></div> | ||
| 89 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
| 90 | + </div> | ||
| 91 | + </div> | ||
| 92 | + <!--轮播图--> | ||
| 93 | + <div class="banner"> | ||
| 94 | + <!-- Swiper --> | ||
| 95 | + <div class="swiper-container"> | ||
| 96 | + <div class="swiper-wrapper"> | ||
| 97 | + <div class="swiper-slide"> | ||
| 98 | + <img src="images/banner_1.png"> | ||
| 99 | + </div> | ||
| 100 | + <div class="swiper-slide"> | ||
| 101 | + <img src="images/banner_2.png"> | ||
| 102 | + </div> | ||
| 103 | + <div class="swiper-slide"> | ||
| 104 | + <img src="images/banner_3.png"> | ||
| 105 | + </div> | ||
| 106 | + | ||
| 107 | + </div> | ||
| 108 | + <!-- Add Pagination --> | ||
| 109 | + <div class="swiper-pagination"></div> | ||
| 110 | + </div> | ||
| 111 | + </div> | ||
| 112 | + <!--最新--> | ||
| 113 | + <div class="new"> | ||
| 114 | + <div class="new_e"> | ||
| 115 | + The latest | ||
| 116 | + </div> | ||
| 117 | + <div class="new_c"> | ||
| 118 | + 最新 | ||
| 119 | + </div> | ||
| 120 | + <!--最新小视频窗口--> | ||
| 121 | + <div class="new_video_item"> | ||
| 122 | + <div class="new_video"> | ||
| 123 | + <div class="new_video_top"> | ||
| 124 | + <img src="images/peke.png"> | ||
| 125 | + </div> | ||
| 126 | + <div class="new_video_bottom"> | ||
| 127 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 128 | + <div class="new_video_bottom_right"> | ||
| 129 | + 壹 | ||
| 130 | + </div> | ||
| 131 | + | ||
| 132 | + <div class="new_video_bottom_name"> | ||
| 133 | + 小猪佩奇 | ||
| 134 | + 小猪佩奇 | ||
| 135 | + 小猪佩奇 | ||
| 136 | + </div> | ||
| 137 | + </div> | ||
| 138 | + </div> | ||
| 139 | + <div class="new_video"> | ||
| 140 | + <div class="new_video_top"> | ||
| 141 | + <img src="images/peke.png"> | ||
| 142 | + </div> | ||
| 143 | + <div class="new_video_bottom"> | ||
| 144 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 145 | + <div class="new_video_bottom_right"> | ||
| 146 | + 壹 | ||
| 147 | + </div> | ||
| 148 | + | ||
| 149 | + <div class="new_video_bottom_name"> | ||
| 150 | + 小猪佩奇 | ||
| 151 | + 小猪佩奇 | ||
| 152 | + 小猪佩奇 | ||
| 153 | + </div> | ||
| 154 | + </div> | ||
| 155 | + </div> | ||
| 156 | + </div> | ||
| 157 | + <!--最新打视频窗口--> | ||
| 158 | + <div class="new_video_big"> | ||
| 159 | + <div class="new_video_big_pic"> | ||
| 160 | + <img src="images/peke.png"> | ||
| 161 | + </div> | ||
| 162 | + <div class="new_video_big_bottom"> | ||
| 163 | + <div class="iconfont icon-bofangshipin"></div> | ||
| 164 | + <div class="new_video_bottom_right"> | ||
| 165 | + 壹 | ||
| 166 | + </div> | ||
| 167 | + <div class="new_video_big_name_text"> | ||
| 168 | + 小猪佩奇 | ||
| 169 | + 小猪佩奇 | ||
| 170 | + 小猪佩奇 | ||
| 171 | + 小猪佩奇 | ||
| 172 | + 小猪佩奇 | ||
| 173 | + 小猪佩奇 | ||
| 174 | + 小猪佩奇 | ||
| 175 | + 小猪佩奇 | ||
| 176 | + 小猪佩奇 | ||
| 177 | + 小猪佩奇 | ||
| 178 | + 小猪佩奇 | ||
| 179 | + 小猪佩奇 | ||
| 180 | + </div> | ||
| 181 | + </div> | ||
| 182 | + </div> | ||
| 183 | + | ||
| 184 | + </div> | ||
| 185 | + <!--视频--> | ||
| 186 | + <div class="video"> | ||
| 187 | + <div class="new_e"> | ||
| 188 | + Video | ||
| 189 | + </div> | ||
| 190 | + <div class="new_c"> | ||
| 191 | + 视频 | ||
| 192 | + </div> | ||
| 193 | + <div class="item_pic"> | ||
| 194 | + <!--图片盒子--> | ||
| 195 | + <div class="pic_box"> | ||
| 196 | + <!--图片--> | ||
| 197 | + <div class="pic_box_top"> | ||
| 198 | + <img src="images/peke.png"> | ||
| 199 | + </div> | ||
| 200 | + <!--文字--> | ||
| 201 | + <div class="pic_box_bottom"> | ||
| 202 | + 某某主题 | ||
| 203 | + </div> | ||
| 204 | + </div> | ||
| 205 | + <div class="pic_box"> | ||
| 206 | + <!--图片--> | ||
| 207 | + <div class="pic_box_top"> | ||
| 208 | + <img src="images/peke.png"> | ||
| 209 | + </div> | ||
| 210 | + <!--文字--> | ||
| 211 | + <div class="pic_box_bottom"> | ||
| 212 | + 某某主题 | ||
| 213 | + </div> | ||
| 214 | + </div> | ||
| 215 | + </div> | ||
| 216 | + <!--更多--> | ||
| 217 | + <div class="video_more"> | ||
| 218 | + MORE | ||
| 219 | + </div> | ||
| 220 | + </div> | ||
| 221 | + <!--文章--> | ||
| 222 | + <div class="title"> | ||
| 223 | + <div class="new_e marin_top"> | ||
| 224 | + Article | ||
| 225 | + </div> | ||
| 226 | + <div class="new_c"> | ||
| 227 | + 文章 | ||
| 228 | + </div> | ||
| 229 | + <div class="item_pic"> | ||
| 230 | + <!--图片盒子--> | ||
| 231 | + <div class="pic_box"> | ||
| 232 | + <!--图片--> | ||
| 233 | + <div class="pic_box_top"> | ||
| 234 | + <img src="images/peke.png"> | ||
| 235 | + </div> | ||
| 236 | + <!--文字--> | ||
| 237 | + <div class="pic_box_bottom between"> | ||
| 238 | + <p>某某主题</p> | ||
| 239 | + <p>2019.1.12</p> | ||
| 240 | + </div> | ||
| 241 | + </div> | ||
| 242 | + <div class="pic_box"> | ||
| 243 | + <!--图片--> | ||
| 244 | + <div class="pic_box_top"> | ||
| 245 | + <img src="images/peke.png"> | ||
| 246 | + </div> | ||
| 247 | + <!--文字--> | ||
| 248 | + <div class="pic_box_bottom between"> | ||
| 249 | + <p>某某主题</p> | ||
| 250 | + <p>2019.1.12</p> | ||
| 251 | + </div> | ||
| 252 | + </div> | ||
| 253 | + </div> | ||
| 254 | + <!--更多--> | ||
| 255 | + <div class="video_more"> | ||
| 256 | + MORE | ||
| 257 | + </div> | ||
| 258 | + </div> | ||
| 259 | + <!--演出--> | ||
| 260 | + <div class="show"> | ||
| 261 | + <div class="new_e marin_top"> | ||
| 262 | + Performance | ||
| 263 | + </div> | ||
| 264 | + <div class="new_c"> | ||
| 265 | + 演出 | ||
| 266 | + </div> | ||
| 267 | + <!--演出时间筛选--> | ||
| 268 | + <div class="show_time"> | ||
| 269 | + <!--年--> | ||
| 270 | + <div class="show_time_year"> | ||
| 271 | + | ||
| 272 | + </div> | ||
| 273 | + <!--月--> | ||
| 274 | + <div class="show_time_month"> | ||
| 275 | + | ||
| 276 | + </div> | ||
| 277 | + </div> | ||
| 278 | + <div class="item_pic"> | ||
| 279 | + <!--图片盒子--> | ||
| 280 | + <div class="pic_box"> | ||
| 281 | + <!--图片--> | ||
| 282 | + <div class="pic_box_top"> | ||
| 283 | + <img src="images/peke.png"> | ||
| 284 | + </div> | ||
| 285 | + <!--文字--> | ||
| 286 | + <div class="pic_box_bottom between"> | ||
| 287 | + <p>某某主题</p> | ||
| 288 | + <p>2019.1.12</p> | ||
| 289 | + </div> | ||
| 290 | + </div> | ||
| 291 | + <div class="pic_box"> | ||
| 292 | + <!--图片--> | ||
| 293 | + <div class="pic_box_top"> | ||
| 294 | + <img src="images/peke.png"> | ||
| 295 | + </div> | ||
| 296 | + <!--文字--> | ||
| 297 | + <div class="pic_box_bottom between"> | ||
| 298 | + <p>某某主题</p> | ||
| 299 | + <p>2019.1.12</p> | ||
| 300 | + </div> | ||
| 301 | + </div> | ||
| 302 | + </div> | ||
| 303 | + <!--更多--> | ||
| 304 | + <div class="video_more"> | ||
| 305 | + MORE | ||
| 306 | + </div> | ||
| 307 | + </div> | ||
| 308 | + | ||
| 309 | + <!--动态层--> | ||
| 310 | + <div class="mask"> | ||
| 311 | + <div class="pop"> | ||
| 312 | + <div class="pop_text pop_color"> | ||
| 313 | + 精选 | ||
| 314 | + </div> | ||
| 315 | + <div class="pop_text"> | ||
| 316 | + 动态 | ||
| 317 | + </div> | ||
| 318 | + <div class="pop_text"> | ||
| 319 | + 百科 | ||
| 320 | + </div> | ||
| 321 | + </div> | ||
| 322 | + <!--1111--> | ||
| 323 | + </div> | ||
| 324 | +</div> | ||
| 325 | +</body> | ||
| 326 | +<script> | ||
| 327 | + var swiper = new Swiper('.swiper-container',{ | ||
| 328 | + | ||
| 329 | + loop: true, // 循环模式选项 | ||
| 330 | + // autoplay: { | ||
| 331 | + // delay: 1000, | ||
| 332 | + // disableOnInteraction: false, | ||
| 333 | + // }, | ||
| 334 | + | ||
| 335 | + pagination: { | ||
| 336 | + el: '.swiper-pagination', | ||
| 337 | + }, | ||
| 338 | + }); | ||
| 339 | +</script> | ||
| 340 | +</html> |
js/base.js
0 → 100644
| 1 | +/** | ||
| 2 | + * | ||
| 3 | + * @authors Your Name (you@example.org) | ||
| 4 | + * @date 2018-11-09 13:59:47 | ||
| 5 | + * @version $Id$ | ||
| 6 | + */ | ||
| 7 | + | ||
| 8 | + | ||
| 9 | + | ||
| 10 | +! function (a) { | ||
| 11 | + function b() { | ||
| 12 | + var Length = document.documentElement.clientWidth; | ||
| 13 | + var baseWidth = Length <= 1024 ? Length : 1024 < Length ? 750 : ''; | ||
| 14 | + document.documentElement.style.fontSize = baseWidth / 750 * 100 + 'px'; | ||
| 15 | + } | ||
| 16 | + window.addEventListener("DOMContentLoaded", function () { | ||
| 17 | + b() | ||
| 18 | + }, !1), window.addEventListener("resize", function () { | ||
| 19 | + b() | ||
| 20 | + }), b() | ||
| 21 | +}(window); | ||
| 22 | + | ||
| 23 | +//回退 | ||
| 24 | +window.onload = function(){ | ||
| 25 | + var $back = document.getElementsByClassName('back')[0]; | ||
| 26 | + if($back){ | ||
| 27 | + $back.onclick=function(){ | ||
| 28 | + window.history.back() | ||
| 29 | + } | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | +} |
js/jquery.min.js
0 → 100644
此 diff 太大无法显示。
js/swiper.js
0 → 100644
此 diff 太大无法显示。
rwxq.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 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
| 9 | + <link rel="stylesheet" type="text/css" href="css/rwxq.css"> | ||
| 10 | + | ||
| 11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_tuxoqivait.css"> | ||
| 12 | + <link rel="stylesheet" href="css/swiper.css"> | ||
| 13 | + <script src="js/base.js"></script> | ||
| 14 | + <script src="js/jquery.min.js"></script> | ||
| 15 | + | ||
| 16 | + <style> | ||
| 17 | + .icon-caidan{ | ||
| 18 | + font-size: 0.5rem; | ||
| 19 | + } | ||
| 20 | + .icon-magnifier{ | ||
| 21 | + color: #999999; | ||
| 22 | + } | ||
| 23 | + .swiper-container { | ||
| 24 | + width: 100%; | ||
| 25 | + height: 100%; | ||
| 26 | + } | ||
| 27 | + .swiper-slide { | ||
| 28 | + text-align: center; | ||
| 29 | + font-size: 18px; | ||
| 30 | + background: #fff; | ||
| 31 | + /* Center slide text vertically */ | ||
| 32 | + display: -webkit-box; | ||
| 33 | + display: -ms-flexbox; | ||
| 34 | + display: -webkit-flex; | ||
| 35 | + display: flex; | ||
| 36 | + -webkit-box-pack: center; | ||
| 37 | + -ms-flex-pack: center; | ||
| 38 | + -webkit-justify-content: center; | ||
| 39 | + justify-content: center; | ||
| 40 | + -webkit-box-align: center; | ||
| 41 | + -ms-flex-align: center; | ||
| 42 | + -webkit-align-items: center; | ||
| 43 | + align-items: center; | ||
| 44 | + | ||
| 45 | + border-right: 0.1rem; | ||
| 46 | + } | ||
| 47 | + .swiper-slide img{ | ||
| 48 | + width: 100%; | ||
| 49 | + height: 100%; | ||
| 50 | + | ||
| 51 | + } | ||
| 52 | + .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { | ||
| 53 | + bottom: 20px; | ||
| 54 | + left: 0; | ||
| 55 | + width: 100%; | ||
| 56 | + } | ||
| 57 | + .swiper-pagination-bullet-active { | ||
| 58 | + opacity: 1; | ||
| 59 | + background: #ffffff; | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + </style> | ||
| 63 | +</head> | ||
| 64 | +<body> | ||
| 65 | + <div class="container"> | ||
| 66 | + <!--顶部菜单--> | ||
| 67 | + <div class="top"> | ||
| 68 | + <!--顶部菜单--> | ||
| 69 | + <div class="top_t"> | ||
| 70 | + <!--左--> | ||
| 71 | + <div class="top_t_left"> | ||
| 72 | + <!--中文字--> | ||
| 73 | + <div class="top_t_left_text"> | ||
| 74 | + 中 | ||
| 75 | + </div> | ||
| 76 | + <!--菜单图标--> | ||
| 77 | + <div class="iconfont icon-caidan"></div> | ||
| 78 | + </div> | ||
| 79 | + <!--中--> | ||
| 80 | + <div class="top_t_middle"> | ||
| 81 | + <img src="images/peke.png"> | ||
| 82 | + </div> | ||
| 83 | + <!--右--> | ||
| 84 | + <div class="top_t_right"> | ||
| 85 | + <!--铃声--> | ||
| 86 | + <div class="iconfont icon-10"></div> | ||
| 87 | + <!--头像--> | ||
| 88 | + <div class="top_t_right_pic"> | ||
| 89 | + <img src="images/1.png"> | ||
| 90 | + </div> | ||
| 91 | + </div> | ||
| 92 | + </div> | ||
| 93 | + <!--底部搜索--> | ||
| 94 | + <div class="top_d"> | ||
| 95 | + <div class="iconfont icon-magnifier"></div> | ||
| 96 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
| 97 | + </div> | ||
| 98 | + </div> | ||
| 99 | + <!--轮播图--> | ||
| 100 | + <div class="banner"> | ||
| 101 | + <!-- Swiper --> | ||
| 102 | + <div class="swiper-container"> | ||
| 103 | + <div class="swiper-wrapper"> | ||
| 104 | + <div class="swiper-slide"> | ||
| 105 | + <img src="images/banner_1.png"> | ||
| 106 | + </div> | ||
| 107 | + <div class="swiper-slide"> | ||
| 108 | + <img src="images/banner_2.png"> | ||
| 109 | + </div> | ||
| 110 | + <div class="swiper-slide"> | ||
| 111 | + <img src="images/banner_3.png"> | ||
| 112 | + </div> | ||
| 113 | + | ||
| 114 | + </div> | ||
| 115 | + <!-- Add Pagination --> | ||
| 116 | + <div class="swiper-pagination"></div> | ||
| 117 | + </div> | ||
| 118 | + </div> | ||
| 119 | + <!--简介--> | ||
| 120 | + <div class="intro"> | ||
| 121 | + <!--姓名框--> | ||
| 122 | + <div class="intro_box"> | ||
| 123 | + <!--姓名--> | ||
| 124 | + <div class="intro_box_name"> | ||
| 125 | + <p>王备</p> | ||
| 126 | + <p class="intro_box_name_pinyin">WANG BEI</p> | ||
| 127 | + </div> | ||
| 128 | + <div class="intro_attention"> | ||
| 129 | + <p class="intro_attention_title">关注</p> | ||
| 130 | + <p class="iconfont icon-dianzan number">11</p> | ||
| 131 | + </div> | ||
| 132 | + </div> | ||
| 133 | + <!--简介标题--> | ||
| 134 | + <div class="intro_title"> | ||
| 135 | + 简介 | ||
| 136 | + </div> | ||
| 137 | + <!--简介正文--> | ||
| 138 | + <div class="intro_small"> | ||
| 139 | + 王备，中国著名音乐制作人，【华语音乐家协会】理事，低调的音乐和艺术大师，曾为多部热门影视大片创作原声音乐。代表音乐作品有：《大旗英雄传》、《倚天屠龙记》、《香粉传奇》等。 | ||
| 140 | + </div> | ||
| 141 | + </div> | ||
| 142 | + <!--相关视频--> | ||
| 143 | + <div class="correlation"> | ||
| 144 | + <div class="correlation_top"> | ||
| 145 | + <div class="correlation_top_left"> | ||
| 146 | + 相关视频 | ||
| 147 | + </div> | ||
| 148 | + <div class="correlation_top_right"> | ||
| 149 | + 更多 | ||
| 150 | + </div> | ||
| 151 | + </div> | ||
| 152 | + <!--视频--> | ||
| 153 | + <div class="correlation_box"> | ||
| 154 | + <div class="correlation_bottom"> | ||
| 155 | + <!--视频--> | ||
| 156 | + <div class="correlation_bottom_img"> | ||
| 157 | + <img src="images/peke.png"> | ||
| 158 | + </div> | ||
| 159 | + <!--文字--> | ||
| 160 | + <div class="correlation_bottom_title"> | ||
| 161 | + 第一个视频 | ||
| 162 | + </div> | ||
| 163 | + </div> | ||
| 164 | + <div class="correlation_bottom"> | ||
| 165 | + <!--视频--> | ||
| 166 | + <div class="correlation_bottom_img"> | ||
| 167 | + <img src="images/peke.png"> | ||
| 168 | + </div> | ||
| 169 | + <!--文字--> | ||
| 170 | + <div class="correlation_bottom_title"> | ||
| 171 | + 第一个视频 | ||
| 172 | + </div> | ||
| 173 | + </div> | ||
| 174 | + </div> | ||
| 175 | + </div> | ||
| 176 | + | ||
| 177 | + <!------------教育经历------------> | ||
| 178 | + <div class="big"> | ||
| 179 | + 教育经历 | ||
| 180 | + </div> | ||
| 181 | + <!--内容--> | ||
| 182 | + <div class="small"> | ||
| 183 | + 华语音乐家协会理事 | ||
| 184 | + </div> | ||
| 185 | + <!--职称--> | ||
| 186 | + <div class="big"> | ||
| 187 | + 职称 | ||
| 188 | + </div> | ||
| 189 | + <!--职称内容--> | ||
| 190 | + <div class="small"> | ||
| 191 | + 华语音乐家协会理事 | ||
| 192 | + </div> | ||
| 193 | + <!--称号--> | ||
| 194 | + <div class="big"> | ||
| 195 | + 称号 | ||
| 196 | + </div> | ||
| 197 | + <!--称号内容--> | ||
| 198 | + <div class="small"> | ||
| 199 | + 低调的音乐和艺术大师 | ||
| 200 | + </div> | ||
| 201 | + <!--主要成就--> | ||
| 202 | + <div class="big"> | ||
| 203 | + 主要成就 | ||
| 204 | + </div> | ||
| 205 | + <!--成就内容--> | ||
| 206 | + <div class="small"> | ||
| 207 | + | ||
| 208 | + 《大旗英雄传》系列 <br> | ||
| 209 | + 《倚天屠龙记》系列 <br> | ||
| 210 | + 《大明帝国之夜来风雨》系列 <br> | ||
| 211 | + 《烟花三月》系列 <br> | ||
| 212 | + 《香粉传奇》系列 <br> | ||
| 213 | + 《天和局》系列 <br> | ||
| 214 | + | ||
| 215 | + </div> | ||
| 216 | + <!------------ 动态 ------------> | ||
| 217 | + <div class="dynamic"> | ||
| 218 | + <div class="dynamic_title"> | ||
| 219 | + 动态 | ||
| 220 | + </div> | ||
| 221 | + <!--演出--> | ||
| 222 | + <div class="dynamic_item"> | ||
| 223 | + <div class="dynamic_item_title"> | ||
| 224 | + 演出 | ||
| 225 | + </div> | ||
| 226 | + <div class="dynamic_item_time"> | ||
| 227 | + 时间 | ||
| 228 | + <div class="dynamic_item_date"></div> | ||
| 229 | + </div> | ||
| 230 | + </div> | ||
| 231 | + <!--演出名称--> | ||
| 232 | + <div class="dynamic_name"> | ||
| 233 | + <div class="dynamic_name_left"> | ||
| 234 | + 演出名称 | ||
| 235 | + </div> | ||
| 236 | + <div class="dynamic_name_right"> | ||
| 237 | + 7月12日 | ||
| 238 | + </div> | ||
| 239 | + </div> | ||
| 240 | + <div class="dynamic_name"> | ||
| 241 | + <div class="dynamic_name_left"> | ||
| 242 | + 演出名称 | ||
| 243 | + </div> | ||
| 244 | + <div class="dynamic_name_right"> | ||
| 245 | + 7月12日 | ||
| 246 | + </div> | ||
| 247 | + </div> | ||
| 248 | + <!--事件--> | ||
| 249 | + <div class="dynamic_item"> | ||
| 250 | + <div class="dynamic_item_title"> | ||
| 251 | + 时间 | ||
| 252 | + </div> | ||
| 253 | + <div class="dynamic_item_time"> | ||
| 254 | + 时间 | ||
| 255 | + <div class="dynamic_item_date"></div> | ||
| 256 | + </div> | ||
| 257 | + </div> | ||
| 258 | + <!--演出名称--> | ||
| 259 | + <div class="dynamic_name"> | ||
| 260 | + <div class="dynamic_name_left"> | ||
| 261 | + 演出名称 | ||
| 262 | + </div> | ||
| 263 | + <div class="dynamic_name_right"> | ||
| 264 | + 7月12日 | ||
| 265 | + </div> | ||
| 266 | + </div> | ||
| 267 | + <div class="dynamic_name"> | ||
| 268 | + <div class="dynamic_name_left"> | ||
| 269 | + 演出名称 | ||
| 270 | + </div> | ||
| 271 | + <div class="dynamic_name_right"> | ||
| 272 | + 7月12日 | ||
| 273 | + </div> | ||
| 274 | + </div> | ||
| 275 | + </div> | ||
| 276 | + <!------------ 作品 ------------> | ||
| 277 | + <div class="production"> | ||
| 278 | + <div class="production_title"> | ||
| 279 | + 作品 | ||
| 280 | + </div> | ||
| 281 | + <!--类别--> | ||
| 282 | + <div class="production_category"> | ||
| 283 | + <p>曲目</p> | ||
| 284 | + <p>书籍</p> | ||
| 285 | + <p>CD</p> | ||
| 286 | + <p>DVD</p> | ||
| 287 | + </div> | ||
| 288 | + <!--视频盒子--> | ||
| 289 | + <div class="production_box"> | ||
| 290 | + <div class="production_box_big"> | ||
| 291 | + <!--图片--> | ||
| 292 | + <div class="production_box_big_pic"> | ||
| 293 | + <img src="images/peke.png"> | ||
| 294 | + </div> | ||
| 295 | + <!--文字--> | ||
| 296 | + <div class="production_box_big_title"> | ||
| 297 | + <p class="title_big">第一个视频</p> | ||
| 298 | + <p class="title_small">似水柔情歌词施天怡 制词爱无常 人相恋 无可...</p> | ||
| 299 | + </div> | ||
| 300 | + </div> | ||
| 301 | + <div class="production_box_big"> | ||
| 302 | + <!--图片--> | ||
| 303 | + <div class="production_box_big_pic"> | ||
| 304 | + <img src="images/peke.png"> | ||
| 305 | + </div> | ||
| 306 | + <!--文字--> | ||
| 307 | + <div class="production_box_big_title"> | ||
| 308 | + <p class="title_big">第一个视频</p> | ||
| 309 | + <p class="title_small">似水柔情歌词施天怡 制词爱无常 人相恋 无可...</p> | ||
| 310 | + </div> | ||
| 311 | + </div> | ||
| 312 | + </div> | ||
| 313 | + </div> | ||
| 314 | + | ||
| 315 | + </div> | ||
| 316 | +</body> | ||
| 317 | + <script src="js/swiper.js"> </script> | ||
| 318 | +<script> | ||
| 319 | + var swiper = new Swiper('.swiper-container',{ | ||
| 320 | + | ||
| 321 | + loop: true, // 循环模式选项 | ||
| 322 | + // autoplay: { | ||
| 323 | + // delay: 1000, | ||
| 324 | + // disableOnInteraction: false, | ||
| 325 | + // }, | ||
| 326 | + | ||
| 327 | + pagination: { | ||
| 328 | + el: '.swiper-pagination', | ||
| 329 | + }, | ||
| 330 | + }); | ||
| 331 | +</script> | ||
| 332 | +</html> |
-
请 注册 或 登录 后发表评论