正在显示
9 个修改的文件
包含
1765 行增加
和
7 行删除
css/rw.css
0 → 100644
| 1 | + | ||
| 2 | + | ||
| 3 | + | ||
| 4 | + | ||
| 5 | +.container { | ||
| 6 | + width: 100%; | ||
| 7 | + display: flex; | ||
| 8 | + flex-flow: column; | ||
| 9 | + align-items: center; | ||
| 10 | + justify-content: center; | ||
| 11 | + | ||
| 12 | +} | ||
| 13 | +.top{ | ||
| 14 | + width: 7.5rem; | ||
| 15 | + /*height: 1.5rem;*/ | ||
| 16 | + background-color: #F7F7F7; | ||
| 17 | + display: flex; | ||
| 18 | + flex-flow: column; | ||
| 19 | + align-items: center; | ||
| 20 | + justify-content: center; | ||
| 21 | +} | ||
| 22 | +.top_t{ | ||
| 23 | + width: 6.86rem; | ||
| 24 | + height: 0.8rem; | ||
| 25 | + display: flex; | ||
| 26 | + align-items: center; | ||
| 27 | + justify-content: space-between; | ||
| 28 | +} | ||
| 29 | +.top_t_left{ | ||
| 30 | + width: 1.2rem; | ||
| 31 | + display: flex; | ||
| 32 | + justify-content: space-between; | ||
| 33 | + align-items: center; | ||
| 34 | +} | ||
| 35 | +.top_t_left_text{ | ||
| 36 | + font-size:0.3rem; | ||
| 37 | + font-family:PingFang-SC-Medium; | ||
| 38 | + font-weight:500; | ||
| 39 | + color:rgba(166,16,16,1); | ||
| 40 | +} | ||
| 41 | +.icon-caidan{ | ||
| 42 | + | ||
| 43 | +} | ||
| 44 | +/*中部*/ | ||
| 45 | +.top_t_middle{ | ||
| 46 | + width: 1.2rem; | ||
| 47 | + height: 0.5rem; | ||
| 48 | + display: flex; | ||
| 49 | +} | ||
| 50 | +.top_t_middle img{ | ||
| 51 | + width: 100%; | ||
| 52 | + height: 100%; | ||
| 53 | +} | ||
| 54 | +/*右边*/ | ||
| 55 | +.top_t_right{ | ||
| 56 | + width: 1.2rem; | ||
| 57 | + display: flex; | ||
| 58 | + justify-content: space-between; | ||
| 59 | + align-items: center; | ||
| 60 | +} | ||
| 61 | +.icon-10{ | ||
| 62 | + position: relative; | ||
| 63 | +} | ||
| 64 | +.top_t_right_pic{ | ||
| 65 | + width: 0.4rem; | ||
| 66 | + height: 0.4rem; | ||
| 67 | + display: flex; | ||
| 68 | + -webkit-border-radius: 50%; | ||
| 69 | + -moz-border-radius: 50%; | ||
| 70 | + border-radius: 50%; | ||
| 71 | +} | ||
| 72 | +.top_t_right_pic img{ | ||
| 73 | + width: 100%; | ||
| 74 | + height: 100%; | ||
| 75 | + -webkit-border-radius: 50%; | ||
| 76 | + -moz-border-radius: 50%; | ||
| 77 | + border-radius: 50%; | ||
| 78 | +} | ||
| 79 | +/*-----底部------*/ | ||
| 80 | +.top_d{ | ||
| 81 | + width: 5.56rem; | ||
| 82 | + display: flex; | ||
| 83 | + padding-bottom: 0.03rem; | ||
| 84 | + border-bottom: 1px solid #999999; | ||
| 85 | + margin: 0.3rem 0 0.2rem 0; | ||
| 86 | +} | ||
| 87 | +.top_d_input{ | ||
| 88 | + width: 5rem; | ||
| 89 | + text-align: center; | ||
| 90 | + border: none; | ||
| 91 | + outline: none; | ||
| 92 | + background-color: #F7F7F7; | ||
| 93 | + font-size: 0.3rem; | ||
| 94 | + box-sizing: border-box; | ||
| 95 | + padding: 0 0.2rem; | ||
| 96 | +} | ||
| 97 | +.top_d_input::placeholder{ | ||
| 98 | + color: #999999; | ||
| 99 | +} | ||
| 100 | + | ||
| 101 | +/*----------------------------- 轮播图 -----------------------------------*/ | ||
| 102 | +.banner{ | ||
| 103 | + width: 6.86rem; | ||
| 104 | + height: 3rem; | ||
| 105 | + background-color: red; | ||
| 106 | + -webkit-border-radius: 0.1rem; | ||
| 107 | + -moz-border-radius: 0.1rem; | ||
| 108 | + border-radius: 0.1rem; | ||
| 109 | + margin-top: 0.23rem; | ||
| 110 | +} | ||
| 111 | +/*----------------------------- 最新 -----------------------------------*/ | ||
| 112 | +.new{ | ||
| 113 | + /*margin-top: 0.54rem;*/ | ||
| 114 | + display: flex; | ||
| 115 | + flex-flow: column; | ||
| 116 | + align-items: center; | ||
| 117 | + justify-content: center; | ||
| 118 | +} | ||
| 119 | +.new_e{ | ||
| 120 | + font-size: 0.14rem; | ||
| 121 | + color: #A61010; | ||
| 122 | +} | ||
| 123 | +.new_c{ | ||
| 124 | + margin-bottom: 0.2rem; | ||
| 125 | + margin-top: 0.08rem; | ||
| 126 | + font-size: 0.3rem; | ||
| 127 | + color: #333333; | ||
| 128 | + position: relative; | ||
| 129 | + font-weight: bold; | ||
| 130 | +} | ||
| 131 | +.new_video_item{ | ||
| 132 | + width: 6.86rem; | ||
| 133 | + display: flex; | ||
| 134 | + justify-content: space-around; | ||
| 135 | +} | ||
| 136 | +.new_video{ | ||
| 137 | + width: 3rem; | ||
| 138 | + height: 3.5rem; | ||
| 139 | + /*height: 2.1rem;*/ | ||
| 140 | + background:rgba(255,255,255,1); | ||
| 141 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 142 | + border-radius: 0.1rem; | ||
| 143 | + display: flex; | ||
| 144 | + flex-flow: column; | ||
| 145 | + justify-content: center; | ||
| 146 | + align-items: center; | ||
| 147 | +} | ||
| 148 | +.new_video_top{ | ||
| 149 | + width: 2.6rem; | ||
| 150 | + height: 2.7rem; | ||
| 151 | + display: flex; | ||
| 152 | + margin-top: 0.2rem; | ||
| 153 | +} | ||
| 154 | +.new_video_top img{ | ||
| 155 | + | ||
| 156 | + width: 100%; | ||
| 157 | + height: 100%; | ||
| 158 | +} | ||
| 159 | +.new_video_bottom{ | ||
| 160 | + width: 2.8rem; | ||
| 161 | + /*height: 0.4rem;*/ | ||
| 162 | + flex: 1; | ||
| 163 | + display: flex; | ||
| 164 | + align-items: center; | ||
| 165 | + justify-content: space-between; | ||
| 166 | + position: relative; | ||
| 167 | +} | ||
| 168 | +.new_video_bottom_name{ | ||
| 169 | + width: 2.8rem; | ||
| 170 | + position: absolute; | ||
| 171 | + font-size:0.2rem; | ||
| 172 | + font-family:PingFang-SC-Medium; | ||
| 173 | + font-weight:500; | ||
| 174 | + color:rgba(51,51,51,1); | ||
| 175 | + text-align: center; | ||
| 176 | + | ||
| 177 | + -webkit-box-orient: vertical; | ||
| 178 | + -webkit-line-clamp: 1; | ||
| 179 | + overflow: hidden; | ||
| 180 | + text-overflow: ellipsis; | ||
| 181 | + white-space: nowrap; | ||
| 182 | +} | ||
| 183 | +.new_video_bottom_right{ | ||
| 184 | + font-size: 0.3rem; | ||
| 185 | + font-family:FZHCJW--GB1-0; | ||
| 186 | + font-weight:400; | ||
| 187 | + color:rgba(166,16,16,1); | ||
| 188 | +} | ||
| 189 | + | ||
| 190 | +.item_pic{ | ||
| 191 | + width: 6.86rem; | ||
| 192 | + display: flex; | ||
| 193 | + justify-content: space-around; | ||
| 194 | +} | ||
| 195 | +.pic_box{ | ||
| 196 | + width: 3rem; | ||
| 197 | + /*height: 2.2rem;*/ | ||
| 198 | + background:rgba(255,255,255,1); | ||
| 199 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 200 | + border-radius: 0.1rem; | ||
| 201 | + display: flex; | ||
| 202 | + flex-flow: column; | ||
| 203 | + align-items: center; | ||
| 204 | + justify-content: center; | ||
| 205 | +} | ||
| 206 | +.pic_box_top{ | ||
| 207 | + width: 3rem; | ||
| 208 | + height: 1.7rem; | ||
| 209 | + display: flex; | ||
| 210 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 211 | +} | ||
| 212 | +.pic_box_top img{ | ||
| 213 | + width: 100%; | ||
| 214 | + height: 100%; | ||
| 215 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 216 | +} | ||
| 217 | +.pic_box_bottom{ | ||
| 218 | + height: 0.4rem; | ||
| 219 | + font-size: 0.24rem; | ||
| 220 | + font-family:PingFang-SC-Medium; | ||
| 221 | + font-weight:500; | ||
| 222 | + color:rgba(51,51,51,1); | ||
| 223 | + display: flex; | ||
| 224 | + align-items: center; | ||
| 225 | + justify-content: center; | ||
| 226 | +} | ||
| 227 | +.video_more{ | ||
| 228 | + margin-top: 0.33rem; | ||
| 229 | + font-size: 0.14rem; | ||
| 230 | + font-family:Moon20-Regular; | ||
| 231 | + font-weight:400; | ||
| 232 | + color:rgba(166,16,16,1); | ||
| 233 | + position: relative; | ||
| 234 | + display: flex; | ||
| 235 | + align-items: center; | ||
| 236 | + flex-flow: column; | ||
| 237 | + justify-content: center; | ||
| 238 | +} | ||
| 239 | +.video_more:last-child{ | ||
| 240 | + margin-bottom: 0.6rem; | ||
| 241 | +} | ||
| 242 | +.video_more:before{ | ||
| 243 | + content: ""; | ||
| 244 | + width: 0.8rem; | ||
| 245 | + height:0.02rem; | ||
| 246 | + | ||
| 247 | + background-color: #E8E8E8; | ||
| 248 | + position: absolute; | ||
| 249 | + top: 0.32rem; | ||
| 250 | + | ||
| 251 | +} | ||
| 252 | +/*title*/ | ||
| 253 | +.title{ | ||
| 254 | + display: flex; | ||
| 255 | + flex-flow: column; | ||
| 256 | + align-items: center; | ||
| 257 | + justify-content: space-between; | ||
| 258 | +} | ||
| 259 | +.marin_top{ | ||
| 260 | + margin-top: 0.31rem ; | ||
| 261 | +} | ||
| 262 | +.between{ | ||
| 263 | + width: 2.6rem; | ||
| 264 | + justify-content: space-between; | ||
| 265 | +} | ||
| 266 | +.show{ | ||
| 267 | + display: flex; | ||
| 268 | + flex-flow: column; | ||
| 269 | + align-items: center; | ||
| 270 | + justify-content: center; | ||
| 271 | +} | ||
| 272 | +.show_time{ | ||
| 273 | + width: 6.86rem; | ||
| 274 | + display: flex; | ||
| 275 | +} | ||
| 276 | +.show_time_year{ | ||
| 277 | + display: flex; | ||
| 278 | +} | ||
| 279 | +.show_time_month{ | ||
| 280 | + display: flex; | ||
| 281 | +} | ||
| 282 | + | ||
| 283 | +.container{ | ||
| 284 | + position: relative; | ||
| 285 | +} | ||
| 286 | +.mid{ | ||
| 287 | + display: flex; | ||
| 288 | + flex-flow: column; | ||
| 289 | + align-items: center; | ||
| 290 | + justify-content: center; | ||
| 291 | +} | ||
| 292 | + | ||
| 293 | +.add_number{ | ||
| 294 | + | ||
| 295 | + font-size: 0.24rem; | ||
| 296 | + font-family:PingFang-SC-Bold; | ||
| 297 | + font-weight:bold; | ||
| 298 | + color:rgba(166,16,16,1); | ||
| 299 | + line-height: 0.24rem; | ||
| 300 | + position: absolute; | ||
| 301 | + top: -0.2rem; | ||
| 302 | + right: -0.5rem; | ||
| 303 | +} | ||
| 304 | +.item_box{ | ||
| 305 | + | ||
| 306 | +} | ||
| 307 | +.margin-t{ | ||
| 308 | + margin-top: 0.46rem; | ||
| 309 | +} | ||
| 310 | + | ||
| 311 | + | ||
| 312 | + | ||
| 313 | + |
| @@ -101,7 +101,7 @@ | @@ -101,7 +101,7 @@ | ||
| 101 | width: 7.5rem; | 101 | width: 7.5rem; |
| 102 | display: flex; | 102 | display: flex; |
| 103 | margin-top: 0.6rem; | 103 | margin-top: 0.6rem; |
| 104 | - justify-content: center; | 104 | + /*justify-content: center;*/ |
| 105 | overflow-x: scroll; | 105 | overflow-x: scroll; |
| 106 | } | 106 | } |
| 107 | .mid_item{ | 107 | .mid_item{ |
| @@ -219,7 +219,7 @@ | @@ -219,7 +219,7 @@ | ||
| 219 | padding: 0.2rem 0; | 219 | padding: 0.2rem 0; |
| 220 | } | 220 | } |
| 221 | .mid_pic{ | 221 | .mid_pic{ |
| 222 | - width: 6.86rem; | 222 | + width: 6.26rem; |
| 223 | height: 2.6rem; | 223 | height: 2.6rem; |
| 224 | display: flex; | 224 | display: flex; |
| 225 | } | 225 | } |
| @@ -275,4 +275,169 @@ | @@ -275,4 +275,169 @@ | ||
| 275 | text-align: center; | 275 | text-align: center; |
| 276 | padding: 0 0.3rem; | 276 | padding: 0 0.3rem; |
| 277 | } | 277 | } |
| 278 | +.share_size{ | ||
| 279 | + | ||
| 280 | + font-size: 0.2rem; | ||
| 281 | + font-family:MicrosoftYaHei; | ||
| 282 | + font-weight:400; | ||
| 283 | + color:rgba(153,153,153,1); | ||
| 284 | + line-height: 0.3rem; | ||
| 285 | +} | ||
| 286 | +.message_text{ | ||
| 287 | + margin-top: 1.4rem; | ||
| 288 | + width: 6.86rem; | ||
| 289 | + height: 1.5rem; | ||
| 290 | + background:rgba(192,44,44,0); | ||
| 291 | + border:1px solid rgba(232, 232, 232, 1); | ||
| 292 | + border-radius: 0.06rem; | ||
| 293 | +} | ||
| 294 | +.message_text textarea{ | ||
| 295 | + width: 100%; | ||
| 296 | + height: 100%; | ||
| 297 | + border: none; | ||
| 298 | + outline: none; | ||
| 299 | + box-sizing: border-box; | ||
| 300 | + padding: 0.2rem 0.2rem; | ||
| 301 | +} | ||
| 302 | +.sub_box{ | ||
| 303 | + margin-top: 0.22rem; | ||
| 304 | + width: 6.86rem; | ||
| 305 | + display: flex; | ||
| 306 | + justify-content: space-between; | ||
| 307 | +} | ||
| 278 | 308 | ||
| 309 | +.message_sub{ | ||
| 310 | + width: 1.2rem; | ||
| 311 | + height: 0.3rem; | ||
| 312 | + background:rgba(166,16,16,1); | ||
| 313 | + border-radius: 0.04rem; | ||
| 314 | + | ||
| 315 | + font-size: 0.2rem; | ||
| 316 | + line-height: 0.3rem; | ||
| 317 | + font-family:PingFang-SC-Medium; | ||
| 318 | + font-weight:500; | ||
| 319 | + color:rgba(255,254,254,1); | ||
| 320 | + | ||
| 321 | + text-align: center; | ||
| 322 | +} | ||
| 323 | +/*分享*/ | ||
| 324 | +.share_function{ | ||
| 325 | + width: 3.2rem; | ||
| 326 | + height: 0.8rem; | ||
| 327 | + display: flex; | ||
| 328 | + justify-content: space-around; | ||
| 329 | + background-color: #e5e5e5; | ||
| 330 | + border-radius: 0.04rem; | ||
| 331 | + position: absolute; | ||
| 332 | + right: 0; | ||
| 333 | + top: 0.6rem; | ||
| 334 | +} | ||
| 335 | +.share_function_item{ | ||
| 336 | + display: flex; | ||
| 337 | + flex-flow: column; | ||
| 338 | + align-items: center; | ||
| 339 | + justify-content: space-around; | ||
| 340 | + font-size: 0.16rem; | ||
| 341 | +} | ||
| 342 | + | ||
| 343 | +/*评论*/ | ||
| 344 | +.comment{ | ||
| 345 | + margin-top: 0.38rem; | ||
| 346 | + width: 6.86rem; | ||
| 347 | + display: flex; | ||
| 348 | + flex-flow: column; | ||
| 349 | + margin-bottom: 1rem; | ||
| 350 | +} | ||
| 351 | +.comment_title{ | ||
| 352 | + | ||
| 353 | + font-size: 0.3rem; | ||
| 354 | + font-family:PingFang-SC-Medium; | ||
| 355 | + font-weight:500; | ||
| 356 | + color:rgba(51,51,51,1); | ||
| 357 | + line-height: 0.3rem; | ||
| 358 | +} | ||
| 359 | +.comment_item{ | ||
| 360 | + margin-top: 0.22rem; | ||
| 361 | + display: flex; | ||
| 362 | +} | ||
| 363 | +.comment_item_left{ | ||
| 364 | + width: 0.5rem; | ||
| 365 | + height: 0.5rem; | ||
| 366 | + border-radius:50%; | ||
| 367 | + display: flex; | ||
| 368 | +} | ||
| 369 | +.comment_item_left img{ | ||
| 370 | + width: 100%; | ||
| 371 | + height: 100%; | ||
| 372 | + border-radius:50%; | ||
| 373 | +} | ||
| 374 | +.comment_item_right{ | ||
| 375 | + display: flex; | ||
| 376 | + flex-flow: column; | ||
| 377 | + flex: 1; | ||
| 378 | + margin-left: 0.24rem; | ||
| 379 | +} | ||
| 380 | +.comment_item_right_name{ | ||
| 381 | + | ||
| 382 | + font-size: 0.2rem; | ||
| 383 | + font-family:MicrosoftYaHei; | ||
| 384 | + font-weight:400; | ||
| 385 | + color:rgba(51,51,51,1); | ||
| 386 | + /*line-height:30px;*/ | ||
| 387 | + line-height: 0.5rem; | ||
| 388 | +} | ||
| 389 | +.comment_item_right_text{ | ||
| 390 | + font-size: 0.16rem; | ||
| 391 | + margin-top: 0.1rem; | ||
| 392 | + line-height: 0.3rem; | ||
| 393 | +} | ||
| 394 | +.comment_item_right_text p{ | ||
| 395 | + line-height: 0.3rem; | ||
| 396 | +} | ||
| 397 | +/*底部内容*/ | ||
| 398 | +.comment_item_bottom{ | ||
| 399 | + display: flex; | ||
| 400 | + | ||
| 401 | + | ||
| 402 | + font-size: 0.16rem; | ||
| 403 | + font-family:PingFang-SC-Medium; | ||
| 404 | + font-weight:500; | ||
| 405 | + color:rgba(153,153,153,1); | ||
| 406 | + /*line-height:30px;*/ | ||
| 407 | + justify-content: space-between; | ||
| 408 | + margin-top: 0.3rem; | ||
| 409 | +} | ||
| 410 | +.comment_item_bottom_left{ | ||
| 411 | + | ||
| 412 | +} | ||
| 413 | +.comment_item_bottom_right{ | ||
| 414 | + display: flex; | ||
| 415 | + justify-content: space-between; | ||
| 416 | + width: 3rem; | ||
| 417 | +} | ||
| 418 | +.comment_item_bottom_right_item{ | ||
| 419 | + | ||
| 420 | +} | ||
| 421 | +.comment_reply{ | ||
| 422 | + margin-top: 0.2rem; | ||
| 423 | + border-left: 0.04rem solid #E8E8E8; | ||
| 424 | + display: flex; | ||
| 425 | +} | ||
| 426 | +.comment_reply_left{ | ||
| 427 | + margin-left: 0.07rem; | ||
| 428 | + width: 0.5rem; | ||
| 429 | + height: 0.5rem; | ||
| 430 | + border-radius: 50%; | ||
| 431 | + display: flex; | ||
| 432 | +} | ||
| 433 | +.comment_reply_left img{ | ||
| 434 | + width: 100%; | ||
| 435 | + height: 100%; | ||
| 436 | + border-radius: 50%; | ||
| 437 | +} | ||
| 438 | +.margin_to{ | ||
| 439 | + margin-top: 0.2rem; | ||
| 440 | +} | ||
| 441 | +.pic_small{ | ||
| 442 | + margin-left: 0.07rem; | ||
| 443 | +} |
css/yq.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 | + position: relative; | ||
| 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 | +.mid{ | ||
| 101 | + width: 7.5rem; | ||
| 102 | + display: flex; | ||
| 103 | + margin-top: 0.6rem; | ||
| 104 | + justify-content: center; | ||
| 105 | + overflow-x: scroll; | ||
| 106 | +} | ||
| 107 | +.mid_item{ | ||
| 108 | + display: flex; | ||
| 109 | + flex-flow: column; | ||
| 110 | + align-items: center; | ||
| 111 | + border-bottom: 1px solid #e8e8e8; | ||
| 112 | + margin-left: 0.38rem; | ||
| 113 | +} | ||
| 114 | +.mid_item_pic{ | ||
| 115 | + width: 1.6rem; | ||
| 116 | + height: 1.8rem; | ||
| 117 | + display: flex; | ||
| 118 | +} | ||
| 119 | + | ||
| 120 | +.mid_item_pic img{ | ||
| 121 | + width: 100%; | ||
| 122 | + height: 100%; | ||
| 123 | +} | ||
| 124 | +.mid_item_text{ | ||
| 125 | + | ||
| 126 | + font-size: 0.16rem; | ||
| 127 | + font-family:MicrosoftYaHei; | ||
| 128 | + font-weight:400; | ||
| 129 | + color:rgba(51,51,51,1); | ||
| 130 | + /*line-height:30px;*/ | ||
| 131 | + margin-top: 0.1rem; | ||
| 132 | + margin-bottom: 0.1rem; | ||
| 133 | +} | ||
| 134 | +.bottom{ | ||
| 135 | + display: flex; | ||
| 136 | + margin-top: 0.3rem; | ||
| 137 | +} | ||
| 138 | +.bottom_top{ | ||
| 139 | + display: flex; | ||
| 140 | + border-bottom: 1px solid #e8e8e8; | ||
| 141 | + height: 1.8rem; | ||
| 142 | + align-items: center; | ||
| 143 | +} | ||
| 144 | +.bottom_top_pic{ | ||
| 145 | + width: 0.9rem; | ||
| 146 | + height: 0.9rem; | ||
| 147 | + display: flex; | ||
| 148 | +} | ||
| 149 | +.bottom_top_pic img{ | ||
| 150 | + width: 100%; | ||
| 151 | + height: 100%; | ||
| 152 | +} | ||
| 153 | +.bottom_top_text{ | ||
| 154 | + display: flex; | ||
| 155 | + flex-flow: column; | ||
| 156 | + margin-left: 0.33rem; | ||
| 157 | +} | ||
| 158 | +.bottom_top_text_big{ | ||
| 159 | + | ||
| 160 | + font-size: 0.36rem; | ||
| 161 | + font-family:PingFang-SC-Bold; | ||
| 162 | + font-weight:bold; | ||
| 163 | + color:rgba(51,51,51,1); | ||
| 164 | + /*line-height:24px;*/ | ||
| 165 | + line-height: 0.45rem; | ||
| 166 | +} | ||
| 167 | +.bottom_top_text_small{ | ||
| 168 | + | ||
| 169 | + font-size: 0.24rem; | ||
| 170 | + font-family:PingFang-SC-Medium; | ||
| 171 | + font-weight:500; | ||
| 172 | + color:rgba(51,51,51,1); | ||
| 173 | + line-height: 0.45rem; | ||
| 174 | +} | ||
| 175 | +.bottom_top_b{ | ||
| 176 | + margin-top: 0.13rem; | ||
| 177 | + display: flex; | ||
| 178 | + width: 4.3rem; | ||
| 179 | + justify-content: space-between; | ||
| 180 | +} | ||
| 181 | +.bottom_top_b_left{ | ||
| 182 | + | ||
| 183 | + font-size: 0.2rem; | ||
| 184 | + font-family:PingFang-SC-Medium; | ||
| 185 | + font-weight:500; | ||
| 186 | + color:rgba(51,51,51,1); | ||
| 187 | + /*line-height:24px;*/ | ||
| 188 | +} | ||
| 189 | +.bottom_top_b_att{ | ||
| 190 | + width: 1rem; | ||
| 191 | + height: 0.28rem; | ||
| 192 | + background: #C02C2C; | ||
| 193 | + border-radius: 0.04rem; | ||
| 194 | + | ||
| 195 | + font-size: 0.2rem; | ||
| 196 | + line-height: 0.28rem; | ||
| 197 | + text-align: center; | ||
| 198 | + color: #ffffff; | ||
| 199 | +} | ||
| 200 | + | ||
| 201 | + | ||
| 202 | +/*底部菜单栏*/ | ||
| 203 | +.menu{ | ||
| 204 | + width: 7.5rem; | ||
| 205 | + height: 1.58rem; | ||
| 206 | + position: fixed; | ||
| 207 | + bottom: 0; | ||
| 208 | + background: #ffffff; | ||
| 209 | + display: flex; | ||
| 210 | + flex-flow: column; | ||
| 211 | + justify-content: center; | ||
| 212 | +} | ||
| 213 | +.menu_top{ | ||
| 214 | + display: flex; | ||
| 215 | + justify-content: space-around; | ||
| 216 | +} | ||
| 217 | +.menu_top_item{ | ||
| 218 | + display: flex; | ||
| 219 | + align-items: center; | ||
| 220 | +} | ||
| 221 | +.menu_bottom{ | ||
| 222 | + display: flex; | ||
| 223 | + justify-content: space-between; | ||
| 224 | + box-sizing: border-box; | ||
| 225 | + padding: 0 0.3rem; | ||
| 226 | +} | ||
| 227 | +.menu_bottom_item{ | ||
| 228 | + font-size: 0.24rem; | ||
| 229 | + line-height: 2; | ||
| 230 | +} | ||
| 231 | + | ||
| 232 | + | ||
| 233 | + | ||
| 234 | + | ||
| 235 | + | ||
| 236 | + | ||
| 237 | +.container { | ||
| 238 | + width: 100%; | ||
| 239 | + display: flex; | ||
| 240 | + flex-flow: column; | ||
| 241 | + align-items: center; | ||
| 242 | + justify-content: center; | ||
| 243 | + | ||
| 244 | +} | ||
| 245 | +.top{ | ||
| 246 | + width: 7.5rem; | ||
| 247 | + /*height: 1.5rem;*/ | ||
| 248 | + background-color: #F7F7F7; | ||
| 249 | + display: flex; | ||
| 250 | + flex-flow: column; | ||
| 251 | + align-items: center; | ||
| 252 | + justify-content: center; | ||
| 253 | +} | ||
| 254 | +.top_t{ | ||
| 255 | + width: 6.86rem; | ||
| 256 | + height: 0.8rem; | ||
| 257 | + display: flex; | ||
| 258 | + align-items: center; | ||
| 259 | + justify-content: space-between; | ||
| 260 | +} | ||
| 261 | +.top_t_left{ | ||
| 262 | + width: 1.2rem; | ||
| 263 | + display: flex; | ||
| 264 | + justify-content: space-between; | ||
| 265 | + align-items: center; | ||
| 266 | +} | ||
| 267 | +.top_t_left_text{ | ||
| 268 | + font-size:0.3rem; | ||
| 269 | + font-family:PingFang-SC-Medium; | ||
| 270 | + font-weight:500; | ||
| 271 | + color:rgba(166,16,16,1); | ||
| 272 | +} | ||
| 273 | +.icon-caidan{ | ||
| 274 | + | ||
| 275 | +} | ||
| 276 | +/*中部*/ | ||
| 277 | +.top_t_middle{ | ||
| 278 | + width: 1.2rem; | ||
| 279 | + height: 0.5rem; | ||
| 280 | + display: flex; | ||
| 281 | +} | ||
| 282 | +.top_t_middle img{ | ||
| 283 | + width: 100%; | ||
| 284 | + height: 100%; | ||
| 285 | +} | ||
| 286 | +/*右边*/ | ||
| 287 | +.top_t_right{ | ||
| 288 | + width: 1.2rem; | ||
| 289 | + display: flex; | ||
| 290 | + justify-content: space-between; | ||
| 291 | + align-items: center; | ||
| 292 | +} | ||
| 293 | +.icon-10{ | ||
| 294 | + position: relative; | ||
| 295 | +} | ||
| 296 | +.top_t_right_pic{ | ||
| 297 | + width: 0.4rem; | ||
| 298 | + height: 0.4rem; | ||
| 299 | + display: flex; | ||
| 300 | + -webkit-border-radius: 50%; | ||
| 301 | + -moz-border-radius: 50%; | ||
| 302 | + border-radius: 50%; | ||
| 303 | +} | ||
| 304 | +.top_t_right_pic img{ | ||
| 305 | + width: 100%; | ||
| 306 | + height: 100%; | ||
| 307 | + -webkit-border-radius: 50%; | ||
| 308 | + -moz-border-radius: 50%; | ||
| 309 | + border-radius: 50%; | ||
| 310 | +} | ||
| 311 | +/*-----底部------*/ | ||
| 312 | +.top_d{ | ||
| 313 | + width: 5.56rem; | ||
| 314 | + display: flex; | ||
| 315 | + padding-bottom: 0.03rem; | ||
| 316 | + border-bottom: 1px solid #999999; | ||
| 317 | + margin: 0.3rem 0 0.2rem 0; | ||
| 318 | +} | ||
| 319 | +.top_d_input{ | ||
| 320 | + width: 5rem; | ||
| 321 | + text-align: center; | ||
| 322 | + border: none; | ||
| 323 | + outline: none; | ||
| 324 | + background-color: #F7F7F7; | ||
| 325 | + font-size: 0.3rem; | ||
| 326 | + box-sizing: border-box; | ||
| 327 | + padding: 0 0.2rem; | ||
| 328 | +} | ||
| 329 | +.top_d_input::placeholder{ | ||
| 330 | + color: #999999; | ||
| 331 | +} | ||
| 332 | + | ||
| 333 | +/*----------------------------- 轮播图 -----------------------------------*/ | ||
| 334 | +.banner{ | ||
| 335 | + width: 6.86rem; | ||
| 336 | + height: 3rem; | ||
| 337 | + background-color: red; | ||
| 338 | + -webkit-border-radius: 0.1rem; | ||
| 339 | + -moz-border-radius: 0.1rem; | ||
| 340 | + border-radius: 0.1rem; | ||
| 341 | + margin-top: 0.23rem; | ||
| 342 | +} | ||
| 343 | +/*----------------------------- 最新 -----------------------------------*/ | ||
| 344 | +.new{ | ||
| 345 | + /*margin-top: 0.54rem;*/ | ||
| 346 | + display: flex; | ||
| 347 | + flex-flow: column; | ||
| 348 | + align-items: center; | ||
| 349 | + justify-content: center; | ||
| 350 | +} | ||
| 351 | +.new_e{ | ||
| 352 | + font-size: 0.14rem; | ||
| 353 | + color: #A61010; | ||
| 354 | +} | ||
| 355 | +.new_c{ | ||
| 356 | + margin-bottom: 0.2rem; | ||
| 357 | + margin-top: 0.08rem; | ||
| 358 | + font-size: 0.3rem; | ||
| 359 | + color: #333333; | ||
| 360 | + position: relative; | ||
| 361 | + font-weight: bold; | ||
| 362 | +} | ||
| 363 | +.new_video_item{ | ||
| 364 | + width: 6.86rem; | ||
| 365 | + display: flex; | ||
| 366 | + | ||
| 367 | + justify-content: space-around; | ||
| 368 | +} | ||
| 369 | +.new_video{ | ||
| 370 | + width: 3rem; | ||
| 371 | + height: 3.5rem; | ||
| 372 | + /*height: 2.1rem;*/ | ||
| 373 | + background:rgba(255,255,255,1); | ||
| 374 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 375 | + border-radius: 0.1rem; | ||
| 376 | + display: flex; | ||
| 377 | + flex-flow: column; | ||
| 378 | + justify-content: center; | ||
| 379 | + align-items: center; | ||
| 380 | +} | ||
| 381 | +.new_video_top{ | ||
| 382 | + width: 2.6rem; | ||
| 383 | + height: 2.7rem; | ||
| 384 | + display: flex; | ||
| 385 | + margin-top: 0.2rem; | ||
| 386 | +} | ||
| 387 | +.new_video_top img{ | ||
| 388 | + | ||
| 389 | + width: 100%; | ||
| 390 | + height: 100%; | ||
| 391 | +} | ||
| 392 | +.new_video_bottom{ | ||
| 393 | + width: 2.8rem; | ||
| 394 | + /*height: 0.4rem;*/ | ||
| 395 | + flex: 1; | ||
| 396 | + display: flex; | ||
| 397 | + align-items: center; | ||
| 398 | + justify-content: space-between; | ||
| 399 | + position: relative; | ||
| 400 | +} | ||
| 401 | +.new_video_bottom_name{ | ||
| 402 | + width: 2.8rem; | ||
| 403 | + position: absolute; | ||
| 404 | + font-size:0.2rem; | ||
| 405 | + font-family:PingFang-SC-Medium; | ||
| 406 | + font-weight:500; | ||
| 407 | + color:rgba(51,51,51,1); | ||
| 408 | + text-align: center; | ||
| 409 | + | ||
| 410 | + -webkit-box-orient: vertical; | ||
| 411 | + -webkit-line-clamp: 1; | ||
| 412 | + overflow: hidden; | ||
| 413 | + text-overflow: ellipsis; | ||
| 414 | + white-space: nowrap; | ||
| 415 | +} | ||
| 416 | +.new_video_bottom_right{ | ||
| 417 | + font-size: 0.3rem; | ||
| 418 | + font-family:FZHCJW--GB1-0; | ||
| 419 | + font-weight:400; | ||
| 420 | + color:rgba(166,16,16,1); | ||
| 421 | +} | ||
| 422 | + | ||
| 423 | +.item_pic{ | ||
| 424 | + width: 6.86rem; | ||
| 425 | + display: flex; | ||
| 426 | + justify-content: space-around; | ||
| 427 | +} | ||
| 428 | +.pic_box{ | ||
| 429 | + width: 3rem; | ||
| 430 | + /*height: 2.2rem;*/ | ||
| 431 | + background:rgba(255,255,255,1); | ||
| 432 | + box-shadow:0 0.01rem 0.06rem 0 rgba(102,102,102,0.14); | ||
| 433 | + border-radius: 0.1rem; | ||
| 434 | + display: flex; | ||
| 435 | + flex-flow: column; | ||
| 436 | + align-items: center; | ||
| 437 | + justify-content: center; | ||
| 438 | +} | ||
| 439 | +.pic_box_top{ | ||
| 440 | + width: 3rem; | ||
| 441 | + height: 1.7rem; | ||
| 442 | + display: flex; | ||
| 443 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 444 | +} | ||
| 445 | +.pic_box_top img{ | ||
| 446 | + width: 100%; | ||
| 447 | + height: 100%; | ||
| 448 | + border-radius: 0.1rem 0.1rem 0 0; | ||
| 449 | +} | ||
| 450 | +.pic_box_bottom{ | ||
| 451 | + height: 0.4rem; | ||
| 452 | + font-size: 0.24rem; | ||
| 453 | + font-family:PingFang-SC-Medium; | ||
| 454 | + font-weight:500; | ||
| 455 | + color:rgba(51,51,51,1); | ||
| 456 | + display: flex; | ||
| 457 | + align-items: center; | ||
| 458 | + justify-content: center; | ||
| 459 | +} | ||
| 460 | +.video_more{ | ||
| 461 | + margin-top: 0.33rem; | ||
| 462 | + font-size: 0.14rem; | ||
| 463 | + font-family:Moon20-Regular; | ||
| 464 | + font-weight:400; | ||
| 465 | + color:rgba(166,16,16,1); | ||
| 466 | + position: relative; | ||
| 467 | + display: flex; | ||
| 468 | + align-items: center; | ||
| 469 | + flex-flow: column; | ||
| 470 | + justify-content: center; | ||
| 471 | +} | ||
| 472 | +.video_more:last-child{ | ||
| 473 | + margin-bottom: 0.6rem; | ||
| 474 | +} | ||
| 475 | +.video_more:before{ | ||
| 476 | + content: ""; | ||
| 477 | + width: 0.8rem; | ||
| 478 | + height:0.02rem; | ||
| 479 | + | ||
| 480 | + background-color: #E8E8E8; | ||
| 481 | + position: absolute; | ||
| 482 | + top: 0.32rem; | ||
| 483 | + | ||
| 484 | +} | ||
| 485 | +/*title*/ | ||
| 486 | +.title{ | ||
| 487 | + display: flex; | ||
| 488 | + flex-flow: column; | ||
| 489 | + align-items: center; | ||
| 490 | + justify-content: space-between; | ||
| 491 | +} | ||
| 492 | +.marin_top{ | ||
| 493 | + margin-top: 0.31rem ; | ||
| 494 | +} | ||
| 495 | +.between{ | ||
| 496 | + width: 2.6rem; | ||
| 497 | + justify-content: space-between; | ||
| 498 | +} | ||
| 499 | +.show{ | ||
| 500 | + display: flex; | ||
| 501 | + flex-flow: column; | ||
| 502 | + align-items: center; | ||
| 503 | + justify-content: center; | ||
| 504 | +} | ||
| 505 | +.show_time{ | ||
| 506 | + width: 6.86rem; | ||
| 507 | + display: flex; | ||
| 508 | +} | ||
| 509 | +.show_time_year{ | ||
| 510 | + display: flex; | ||
| 511 | +} | ||
| 512 | +.show_time_month{ | ||
| 513 | + display: flex; | ||
| 514 | +} | ||
| 515 | + | ||
| 516 | +.container{ | ||
| 517 | + position: relative; | ||
| 518 | +} | ||
| 519 | +.mid{ | ||
| 520 | + display: flex; | ||
| 521 | + flex-flow: column; | ||
| 522 | + align-items: center; | ||
| 523 | + justify-content: center; | ||
| 524 | +} | ||
| 525 | + | ||
| 526 | +.add_number{ | ||
| 527 | + | ||
| 528 | + font-size: 0.24rem; | ||
| 529 | + font-family:PingFang-SC-Bold; | ||
| 530 | + font-weight:bold; | ||
| 531 | + color:rgba(166,16,16,1); | ||
| 532 | + line-height: 0.24rem; | ||
| 533 | + position: absolute; | ||
| 534 | + top: -0.2rem; | ||
| 535 | + right: -0.5rem; | ||
| 536 | +} | ||
| 537 | +.item_box{ | ||
| 538 | + | ||
| 539 | +} | ||
| 540 | +.item_box:last-child{ | ||
| 541 | + margin-bottom: 1rem; | ||
| 542 | +} | ||
| 543 | +.margin-t{ | ||
| 544 | + margin-top: 0.46rem; | ||
| 545 | +} | ||
| 546 | + | ||
| 547 | +.menu_box{ | ||
| 548 | + | ||
| 549 | +} | ||
| 550 | +.items{ | ||
| 551 | + margin-bottom: 1rem; | ||
| 552 | +} | ||
| 553 | + | ||
| 554 | + |
rw.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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | ||
| 7 | + <!--<meta name="viewport" content="width=device-width, initial-scale=1" />--> | ||
| 8 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| 9 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
| 10 | + <link rel="stylesheet" type="text/css" href="css/rw.css"> | ||
| 11 | + | ||
| 12 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_u8m5zjdi1u.css"> | ||
| 13 | + <script src="js/base.js"></script> | ||
| 14 | + <script src="js/jquery.min.js"></script> | ||
| 15 | + <link rel="stylesheet" href="css/swiper.css"> | ||
| 16 | + <style> | ||
| 17 | + .icon-caidan{ | ||
| 18 | + font-size: 0.5rem; | ||
| 19 | + } | ||
| 20 | + .icon-magnifier{ | ||
| 21 | + color: #999999; | ||
| 22 | + } | ||
| 23 | + .icon-bofangshipin{ | ||
| 24 | + font-size: 0.38rem; | ||
| 25 | + | ||
| 26 | + } | ||
| 27 | + .swiper-container { | ||
| 28 | + width: 100%; | ||
| 29 | + height: 100%; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + .top_dot{ | ||
| 33 | + width: 0.08rem; | ||
| 34 | + height: 0.08rem; | ||
| 35 | + background:rgba(166,16,16,1); | ||
| 36 | + border:1px solid rgba(255, 255, 255, 1); | ||
| 37 | + border-radius: 50%; | ||
| 38 | + position: absolute; | ||
| 39 | + top: 0; | ||
| 40 | + right: 0; | ||
| 41 | + } | ||
| 42 | + </style> | ||
| 43 | +</head> | ||
| 44 | +<script src="js/swiper.js"></script> | ||
| 45 | +<body> | ||
| 46 | +<div class="container"> | ||
| 47 | + <div class="top"> | ||
| 48 | + <!--顶部菜单--> | ||
| 49 | + <div class="top_t"> | ||
| 50 | + <!--左--> | ||
| 51 | + <div class="top_t_left"> | ||
| 52 | + <!--中文字--> | ||
| 53 | + <div class="top_t_left_text"> | ||
| 54 | + 中 | ||
| 55 | + </div> | ||
| 56 | + <!--菜单图标--> | ||
| 57 | + <div class="iconfont icon-caidan"></div> | ||
| 58 | + </div> | ||
| 59 | + <!--中--> | ||
| 60 | + <div class="top_t_middle"> | ||
| 61 | + <img src="images/peke.png"> | ||
| 62 | + </div> | ||
| 63 | + <!--右--> | ||
| 64 | + <div class="top_t_right"> | ||
| 65 | + <!--铃声--> | ||
| 66 | + <div class="iconfont icon-10"> | ||
| 67 | + <div class="top_dot"></div> | ||
| 68 | + </div> | ||
| 69 | + <!--头像--> | ||
| 70 | + <div class="top_t_right_pic"> | ||
| 71 | + <img src="images/1.png"> | ||
| 72 | + </div> | ||
| 73 | + </div> | ||
| 74 | + </div> | ||
| 75 | + <!--底部搜索--> | ||
| 76 | + <div class="top_d"> | ||
| 77 | + <div class="iconfont icon-magnifier"></div> | ||
| 78 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
| 79 | + </div> | ||
| 80 | + </div> | ||
| 81 | + | ||
| 82 | + <div class="item_box margin-t"> | ||
| 83 | + <!--名称--> | ||
| 84 | + <div class="new"> | ||
| 85 | + <div class="new_e"> | ||
| 86 | + Musicians | ||
| 87 | + </div> | ||
| 88 | + <div class="new_c"> | ||
| 89 | + 音乐家 | ||
| 90 | + <div class="add_number">+4</div> | ||
| 91 | + </div> | ||
| 92 | + <!--最新小视频窗口--> | ||
| 93 | + <div class="new_video_item"> | ||
| 94 | + <div class="new_video"> | ||
| 95 | + <div class="new_video_top"> | ||
| 96 | + <img src="images/peke.png"> | ||
| 97 | + </div> | ||
| 98 | + <div class="new_video_bottom"> | ||
| 99 | + | ||
| 100 | + | ||
| 101 | + | ||
| 102 | + <div class="new_video_bottom_name"> | ||
| 103 | + 小猪佩奇 | ||
| 104 | + 小猪佩奇 | ||
| 105 | + 小猪佩奇 | ||
| 106 | + 小猪佩奇 | ||
| 107 | + 小猪佩奇 | ||
| 108 | + 小猪佩奇 | ||
| 109 | + </div> | ||
| 110 | + </div> | ||
| 111 | + </div> | ||
| 112 | + <div class="new_video"> | ||
| 113 | + <div class="new_video_top"> | ||
| 114 | + <img src="images/peke.png"> | ||
| 115 | + </div> | ||
| 116 | + <div class="new_video_bottom"> | ||
| 117 | + <div class="new_video_bottom_name"> | ||
| 118 | + 小猪佩奇 | ||
| 119 | + | ||
| 120 | + </div> | ||
| 121 | + </div> | ||
| 122 | + </div> | ||
| 123 | + | ||
| 124 | + | ||
| 125 | + </div> | ||
| 126 | + | ||
| 127 | + | ||
| 128 | + </div> | ||
| 129 | + <!--更多--> | ||
| 130 | + <div class="video_more"> | ||
| 131 | + MORE | ||
| 132 | + </div> | ||
| 133 | + </div> | ||
| 134 | + | ||
| 135 | + <div class="item_box "> | ||
| 136 | + <!--名称--> | ||
| 137 | + <div class="new"> | ||
| 138 | + <div class="new_e"> | ||
| 139 | + Orchestra | ||
| 140 | + </div> | ||
| 141 | + <div class="new_c"> | ||
| 142 | + 乐团 | ||
| 143 | + | ||
| 144 | + </div> | ||
| 145 | + <!--最新小视频窗口--> | ||
| 146 | + <div class="item_pic"> | ||
| 147 | + <!--图片盒子--> | ||
| 148 | + <div class="pic_box"> | ||
| 149 | + <!--图片--> | ||
| 150 | + <div class="pic_box_top"> | ||
| 151 | + <img src="images/peke.png"> | ||
| 152 | + </div> | ||
| 153 | + <!--文字--> | ||
| 154 | + <div class="pic_box_bottom"> | ||
| 155 | + 某某主题 | ||
| 156 | + </div> | ||
| 157 | + </div> | ||
| 158 | + <div class="pic_box"> | ||
| 159 | + <!--图片--> | ||
| 160 | + <div class="pic_box_top"> | ||
| 161 | + <img src="images/peke.png"> | ||
| 162 | + </div> | ||
| 163 | + <!--文字--> | ||
| 164 | + <div class="pic_box_bottom"> | ||
| 165 | + 某某主题 | ||
| 166 | + </div> | ||
| 167 | + </div> | ||
| 168 | + </div> | ||
| 169 | + </div> | ||
| 170 | + <!--更多--> | ||
| 171 | + <div class="video_more"> | ||
| 172 | + MORE | ||
| 173 | + </div> | ||
| 174 | +</div> | ||
| 175 | + | ||
| 176 | + <div class="item_box "> | ||
| 177 | + <!--名称--> | ||
| 178 | + <div class="new"> | ||
| 179 | + <div class="new_e"> | ||
| 180 | + Other | ||
| 181 | + </div> | ||
| 182 | + <div class="new_c"> | ||
| 183 | + 其他 | ||
| 184 | + | ||
| 185 | + </div> | ||
| 186 | + <!--最新小视频窗口--> | ||
| 187 | + <div class="item_pic"> | ||
| 188 | + <!--图片盒子--> | ||
| 189 | + <div class="pic_box"> | ||
| 190 | + <!--图片--> | ||
| 191 | + <div class="pic_box_top"> | ||
| 192 | + <img src="images/peke.png"> | ||
| 193 | + </div> | ||
| 194 | + <!--文字--> | ||
| 195 | + <div class="pic_box_bottom"> | ||
| 196 | + 某某主题 | ||
| 197 | + </div> | ||
| 198 | + </div> | ||
| 199 | + <div class="pic_box"> | ||
| 200 | + <!--图片--> | ||
| 201 | + <div class="pic_box_top"> | ||
| 202 | + <img src="images/peke.png"> | ||
| 203 | + </div> | ||
| 204 | + <!--文字--> | ||
| 205 | + <div class="pic_box_bottom"> | ||
| 206 | + 某某主题 | ||
| 207 | + </div> | ||
| 208 | + </div> | ||
| 209 | + </div> | ||
| 210 | + </div> | ||
| 211 | + <!--更多--> | ||
| 212 | + <div class="video_more"> | ||
| 213 | + MORE | ||
| 214 | + </div> | ||
| 215 | + </div> | ||
| 216 | + | ||
| 217 | + | ||
| 218 | + | ||
| 219 | + | ||
| 220 | + | ||
| 221 | + | ||
| 222 | + | ||
| 223 | +</div> | ||
| 224 | +</body> | ||
| 225 | +<script> | ||
| 226 | + var swiper = new Swiper('.swiper-container',{ | ||
| 227 | + | ||
| 228 | + loop: true, // 循环模式选项 | ||
| 229 | + // autoplay: { | ||
| 230 | + // delay: 1000, | ||
| 231 | + // disableOnInteraction: false, | ||
| 232 | + // }, | ||
| 233 | + | ||
| 234 | + pagination: { | ||
| 235 | + el: '.swiper-pagination', | ||
| 236 | + }, | ||
| 237 | + }); | ||
| 238 | +</script> | ||
| 239 | +</html> |
| @@ -2,13 +2,13 @@ | @@ -2,13 +2,13 @@ | ||
| 2 | <html lang="en"> | 2 | <html lang="en"> |
| 3 | <head> | 3 | <head> |
| 4 | <meta charset="UTF-8"> | 4 | <meta charset="UTF-8"> |
| 5 | - <title>搜索无结果</title> | 5 | + <title>视频详情</title> |
| 6 | <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | 6 | <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> |
| 7 | 7 | ||
| 8 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 8 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 9 | <link rel="stylesheet" type="text/css" href="css/common.css"> | 9 | <link rel="stylesheet" type="text/css" href="css/common.css"> |
| 10 | <link rel="stylesheet" type="text/css" href="css/spxq.css"> | 10 | <link rel="stylesheet" type="text/css" href="css/spxq.css"> |
| 11 | - <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_i66rltl2rzp.css"> | 11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_bamhpf0xfl8.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 | 14 | ||
| @@ -59,6 +59,22 @@ | @@ -59,6 +59,22 @@ | ||
| 59 | } | 59 | } |
| 60 | .share_color{ | 60 | .share_color{ |
| 61 | color: #999999; | 61 | color: #999999; |
| 62 | + position: relative; | ||
| 63 | + } | ||
| 64 | + .icon-weibo-copy{ | ||
| 65 | + display: flex; | ||
| 66 | + } | ||
| 67 | + .size_icon{ | ||
| 68 | + font-size: 0.34rem; | ||
| 69 | + } | ||
| 70 | + .icon-shangsanjiao{ | ||
| 71 | + position: absolute; | ||
| 72 | + color: #e5e5e5; | ||
| 73 | + right: 0; | ||
| 74 | + top: 0.42rem; | ||
| 75 | + } | ||
| 76 | + .bottom_icon{ | ||
| 77 | + font-size: 0.16rem; | ||
| 62 | } | 78 | } |
| 63 | </style> | 79 | </style> |
| 64 | </head> | 80 | </head> |
| @@ -227,16 +243,121 @@ | @@ -227,16 +243,121 @@ | ||
| 227 | <div class="share_item">长笛</div> | 243 | <div class="share_item">长笛</div> |
| 228 | <div class="share_item">音乐风格</div> | 244 | <div class="share_item">音乐风格</div> |
| 229 | <div class="iconfont icon-xinaixin share_color"> | 245 | <div class="iconfont icon-xinaixin share_color"> |
| 230 | - <span></span> | 246 | + <span class="share_size">1235</span> |
| 247 | + </div> | ||
| 248 | + <div class="iconfont icon-fenxiang share_color"> | ||
| 249 | + <div class="share_box"> | ||
| 250 | + <!--上三角--> | ||
| 251 | + <div class="iconfont icon-shangsanjiao"></div> | ||
| 252 | + <!--分享内容--> | ||
| 253 | + <div class="share_function"> | ||
| 254 | + <div class="share_function_item"> | ||
| 255 | + <div class="iconfont icon-weibo-copy size_icon"></div> | ||
| 256 | + <p>微博</p> | ||
| 257 | + </div> | ||
| 258 | + <div class="share_function_item"> | ||
| 259 | + <div class="iconfont icon-weixin size_icon"></div> | ||
| 260 | + <p>微信</p> | ||
| 261 | + </div> | ||
| 262 | + <div class="share_function_item"> | ||
| 263 | + <div class="iconfont icon-tuite size_icon"></div> | ||
| 264 | + <p>推特</p> | ||
| 265 | + </div> | ||
| 266 | + <div class="share_function_item"> | ||
| 267 | + <div class="iconfont icon-NGlianshu size_icon"></div> | ||
| 268 | + <p>脸书</p> | ||
| 269 | + </div> | ||
| 270 | + | ||
| 271 | + </div> | ||
| 272 | + </div> | ||
| 231 | </div> | 273 | </div> |
| 232 | - <div class="iconfont icon-fenxiang share_color"></div> | ||
| 233 | </div> | 274 | </div> |
| 234 | </div> | 275 | </div> |
| 235 | 276 | ||
| 277 | + <!--信息栏目--> | ||
| 278 | + <div class="message_text"> | ||
| 279 | + <textarea type="text"></textarea> | ||
| 280 | + </div> | ||
| 236 | 281 | ||
| 282 | + <div class="sub_box"> | ||
| 283 | + <div ></div> | ||
| 284 | + <div class="message_sub"> | ||
| 285 | + 发送 | ||
| 286 | + </div> | ||
| 287 | + </div> | ||
| 237 | 288 | ||
| 289 | + <!--评论--> | ||
| 290 | + <div class="comment"> | ||
| 291 | + <div class="comment_title"> | ||
| 292 | + 评论(1256) | ||
| 293 | + </div> | ||
| 294 | + <div class="comment_item"> | ||
| 295 | + <div class="comment_item_left"> | ||
| 296 | + <img src="images/1.png"> | ||
| 297 | + </div> | ||
| 298 | + <div class="comment_item_right"> | ||
| 299 | + <div class="comment_item_right_name"> | ||
| 300 | + 魔力怪 | ||
| 301 | + </div> | ||
| 302 | + <div class="comment_item_right_text"> | ||
| 238 | 303 | ||
| 304 | + <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。 | ||
| 305 | + <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p> | ||
| 239 | 306 | ||
| 307 | + </div> | ||
| 308 | + <!--时间日期--> | ||
| 309 | + <div class="comment_item_bottom"> | ||
| 310 | + <div class="comment_item_bottom_left"> | ||
| 311 | + 2018年12月31日 | ||
| 312 | + </div> | ||
| 313 | + <div class="comment_item_bottom_right"> | ||
| 314 | + <div class="comment_item_bottom_right_item">举报</div> | ||
| 315 | + <div class="comment_item_bottom_right_item">删除</div> | ||
| 316 | + <div class="iconfont icon-dianzan bottom_icon">222</div> | ||
| 317 | + <div class="iconfont icon-xiaoxi bottom_icon"></div> | ||
| 318 | + </div> | ||
| 319 | + | ||
| 320 | + </div> | ||
| 321 | + | ||
| 322 | + <div class="reply_box"> | ||
| 323 | + <!--回复内容--> | ||
| 324 | + <div class="comment_reply"> | ||
| 325 | + | ||
| 326 | + <div class="comment_item_left pic_small"> | ||
| 327 | + <img src="images/1.png"> | ||
| 328 | + </div> | ||
| 329 | + <div class="comment_item_right"> | ||
| 330 | + <div class="comment_item_right_name"> | ||
| 331 | + 魔力怪 | ||
| 332 | + </div> | ||
| 333 | + <div class="comment_item_right_text"> | ||
| 334 | + | ||
| 335 | + <p>生活如同时间一样，对每个人都是一样的。但是往往不同的人的不同的思维、眼光、心态，造就了不一样的生活方式，生活局面。有的人生活光彩夺目，有的人生活布满荆棘。 | ||
| 336 | + <p>面对生活的落差，难免会有满腔的埋怨和满腹的牢骚;但是我们是否有经过深层次的分析和思考，为什么生活差异如此之大呢</p> | ||
| 337 | + | ||
| 338 | + </div> | ||
| 339 | + | ||
| 340 | + </div> | ||
| 341 | + </div> | ||
| 342 | + <!--时间日期--> | ||
| 343 | + <div class="comment_item_bottom margin_to"> | ||
| 344 | + <div class="comment_item_bottom_left"> | ||
| 345 | + 2018年12月31日 | ||
| 346 | + </div> | ||
| 347 | + <div class="comment_item_bottom_right"> | ||
| 348 | + <div class="comment_item_bottom_right_item">举报</div> | ||
| 349 | + <div class="comment_item_bottom_right_item">删除</div> | ||
| 350 | + <div class="iconfont icon-dianzan bottom_icon">222</div> | ||
| 351 | + <div class="iconfont icon-xiaoxi bottom_icon"></div> | ||
| 352 | + </div> | ||
| 353 | + | ||
| 354 | + </div> | ||
| 355 | + </div> | ||
| 356 | + </div> | ||
| 357 | + | ||
| 358 | + | ||
| 359 | +</div> | ||
| 360 | + </div> | ||
| 240 | </div> | 361 | </div> |
| 241 | </body> | 362 | </body> |
| 242 | <script> | 363 | <script> |
yq.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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> | ||
| 7 | + | ||
| 8 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| 9 | + <link rel="stylesheet" type="text/css" href="css/common.css"> | ||
| 10 | + <link rel="stylesheet" type="text/css" href="css/yq.css"> | ||
| 11 | + <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1037215_7sk198wo5xx.css"> | ||
| 12 | + <script src="js/base.js"></script> | ||
| 13 | + <script src="js/jquery.min.js"></script> | ||
| 14 | + | ||
| 15 | + <style> | ||
| 16 | + .icon-caidan{ | ||
| 17 | + font-size: 0.5rem; | ||
| 18 | + } | ||
| 19 | + .icon-magnifier{ | ||
| 20 | + color: #999999; | ||
| 21 | + } | ||
| 22 | + | ||
| 23 | + .f_size{ | ||
| 24 | + font-weight: normal; | ||
| 25 | + font-size: 0.18rem; | ||
| 26 | + } | ||
| 27 | + .icon-xiugai{ | ||
| 28 | + margin-left: 0.15rem; | ||
| 29 | + font-size: 0.3rem; | ||
| 30 | + color: #999999; | ||
| 31 | + display: flex; | ||
| 32 | + font-weight: bold; | ||
| 33 | + align-items: center; | ||
| 34 | + } | ||
| 35 | + .top_dot{ | ||
| 36 | + width: 0.08rem; | ||
| 37 | + height: 0.08rem; | ||
| 38 | + background:rgba(166,16,16,1); | ||
| 39 | + border:1px solid rgba(255, 255, 255, 1); | ||
| 40 | + border-radius: 50%; | ||
| 41 | + position: absolute; | ||
| 42 | + top: 0; | ||
| 43 | + right: 0; | ||
| 44 | + } | ||
| 45 | + .color_black{ | ||
| 46 | + color: black; | ||
| 47 | + } | ||
| 48 | + .margin_t{ | ||
| 49 | + margin-top: 0.1rem; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + /*底部菜单*/ | ||
| 53 | + .font_s{ | ||
| 54 | + font-size: 0.4rem; | ||
| 55 | + color: #A61010; | ||
| 56 | + } | ||
| 57 | + .icon-bilibilidonghua{ | ||
| 58 | + font-size: 0.8rem; | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + </style> | ||
| 62 | +</head> | ||
| 63 | + | ||
| 64 | +<body> | ||
| 65 | +<div class="container"> | ||
| 66 | + <div class="top"> | ||
| 67 | + <!--顶部菜单--> | ||
| 68 | + <div class="top_t"> | ||
| 69 | + <!--左--> | ||
| 70 | + <div class="top_t_left"> | ||
| 71 | + <!--中文字--> | ||
| 72 | + <div class="top_t_left_text"> | ||
| 73 | + 中 | ||
| 74 | + </div> | ||
| 75 | + <!--菜单图标--> | ||
| 76 | + <div class="iconfont icon-caidan"></div> | ||
| 77 | + </div> | ||
| 78 | + <!--中--> | ||
| 79 | + <div class="top_t_middle"> | ||
| 80 | + <img src="images/peke.png"> | ||
| 81 | + </div> | ||
| 82 | + <!--右--> | ||
| 83 | + <div class="top_t_right"> | ||
| 84 | + <!--铃声--> | ||
| 85 | + <div class="iconfont icon-10"> | ||
| 86 | + <!--小红点--> | ||
| 87 | + <div class="top_dot"></div> | ||
| 88 | + </div> | ||
| 89 | + <!--头像--> | ||
| 90 | + <div class="top_t_right_pic"> | ||
| 91 | + <img src="images/1.png"> | ||
| 92 | + </div> | ||
| 93 | + </div> | ||
| 94 | + </div> | ||
| 95 | + <!--底部搜索--> | ||
| 96 | + <div class="top_d"> | ||
| 97 | + <div class="iconfont icon-magnifier"></div> | ||
| 98 | + <input class="top_d_input" placeholder="搜索音乐/作品/风格"> | ||
| 99 | + </div> | ||
| 100 | + </div> | ||
| 101 | + | ||
| 102 | + <div class="items"> | ||
| 103 | + <div class="item_box margin-t"> | ||
| 104 | + <!--名称--> | ||
| 105 | + <div class="new"> | ||
| 106 | + <div class="new_e"> | ||
| 107 | + String Instrument | ||
| 108 | + </div> | ||
| 109 | + <div class="new_c"> | ||
| 110 | + 拉弦乐 | ||
| 111 | + </div> | ||
| 112 | + <!--最新小视频窗口--> | ||
| 113 | + <div class="new_video_item"> | ||
| 114 | + <div class="new_video"> | ||
| 115 | + <div class="new_video_top"> | ||
| 116 | + <img src="images/peke.png"> | ||
| 117 | + </div> | ||
| 118 | + <div class="new_video_bottom"> | ||
| 119 | + | ||
| 120 | + | ||
| 121 | + | ||
| 122 | + <div class="new_video_bottom_name"> | ||
| 123 | + 小猪佩奇 | ||
| 124 | + 小猪佩奇 | ||
| 125 | + 小猪佩奇 | ||
| 126 | + 小猪佩奇 | ||
| 127 | + 小猪佩奇 | ||
| 128 | + 小猪佩奇 | ||
| 129 | + </div> | ||
| 130 | + </div> | ||
| 131 | + </div> | ||
| 132 | + <div class="new_video"> | ||
| 133 | + <div class="new_video_top"> | ||
| 134 | + <img src="images/peke.png"> | ||
| 135 | + </div> | ||
| 136 | + <div class="new_video_bottom"> | ||
| 137 | + <div class="new_video_bottom_name"> | ||
| 138 | + 小猪佩奇 | ||
| 139 | + | ||
| 140 | + </div> | ||
| 141 | + </div> | ||
| 142 | + </div> | ||
| 143 | + | ||
| 144 | + | ||
| 145 | + </div> | ||
| 146 | + | ||
| 147 | + | ||
| 148 | + </div> | ||
| 149 | + <!--更多--> | ||
| 150 | + <div class="video_more"> | ||
| 151 | + MORE | ||
| 152 | + </div> | ||
| 153 | + </div> | ||
| 154 | + | ||
| 155 | + <div class="item_box "> | ||
| 156 | + <!--名称--> | ||
| 157 | + <div class="new"> | ||
| 158 | + <div class="new_e"> | ||
| 159 | + Pluck Music | ||
| 160 | + </div> | ||
| 161 | + <div class="new_c"> | ||
| 162 | + 弹拨 | ||
| 163 | + | ||
| 164 | + </div> | ||
| 165 | + <!--最新小视频窗口--> | ||
| 166 | + <div class="new_video_item"> | ||
| 167 | + <div class="new_video"> | ||
| 168 | + <div class="new_video_top"> | ||
| 169 | + <img src="images/peke.png"> | ||
| 170 | + </div> | ||
| 171 | + <div class="new_video_bottom"> | ||
| 172 | + | ||
| 173 | + | ||
| 174 | + | ||
| 175 | + <div class="new_video_bottom_name"> | ||
| 176 | + 小猪佩奇 | ||
| 177 | + 小猪佩奇 | ||
| 178 | + 小猪佩奇 | ||
| 179 | + 小猪佩奇 | ||
| 180 | + 小猪佩奇 | ||
| 181 | + 小猪佩奇 | ||
| 182 | + </div> | ||
| 183 | + </div> | ||
| 184 | + </div> | ||
| 185 | + <div class="new_video"> | ||
| 186 | + <div class="new_video_top"> | ||
| 187 | + <img src="images/peke.png"> | ||
| 188 | + </div> | ||
| 189 | + <div class="new_video_bottom"> | ||
| 190 | + <div class="new_video_bottom_name"> | ||
| 191 | + 小猪佩奇 | ||
| 192 | + | ||
| 193 | + </div> | ||
| 194 | + </div> | ||
| 195 | + </div> | ||
| 196 | + | ||
| 197 | + | ||
| 198 | + </div> | ||
| 199 | + | ||
| 200 | + | ||
| 201 | + </div> | ||
| 202 | + <!--更多--> | ||
| 203 | + <div class="video_more"> | ||
| 204 | + MORE | ||
| 205 | + </div> | ||
| 206 | + | ||
| 207 | + | ||
| 208 | + </div> | ||
| 209 | + | ||
| 210 | + <div class="item_box "> | ||
| 211 | + <!--名称--> | ||
| 212 | + <div class="new"> | ||
| 213 | + <div class="new_e"> | ||
| 214 | + Wind instrumen | ||
| 215 | + </div> | ||
| 216 | + <div class="new_c"> | ||
| 217 | + 吹管乐 | ||
| 218 | + | ||
| 219 | + </div> | ||
| 220 | + <!--最新小视频窗口--> | ||
| 221 | + <div class="item_pic"> | ||
| 222 | + <!--图片盒子--> | ||
| 223 | + <div class="pic_box"> | ||
| 224 | + <!--图片--> | ||
| 225 | + <div class="pic_box_top"> | ||
| 226 | + <img src="images/peke.png"> | ||
| 227 | + </div> | ||
| 228 | + <!--文字--> | ||
| 229 | + <div class="pic_box_bottom"> | ||
| 230 | + 某某主题 | ||
| 231 | + </div> | ||
| 232 | + </div> | ||
| 233 | + <div class="pic_box"> | ||
| 234 | + <!--图片--> | ||
| 235 | + <div class="pic_box_top"> | ||
| 236 | + <img src="images/peke.png"> | ||
| 237 | + </div> | ||
| 238 | + <!--文字--> | ||
| 239 | + <div class="pic_box_bottom"> | ||
| 240 | + 某某主题 | ||
| 241 | + </div> | ||
| 242 | + </div> | ||
| 243 | + </div> | ||
| 244 | + </div> | ||
| 245 | + <!--更多--> | ||
| 246 | + <div class="video_more"> | ||
| 247 | + MORE | ||
| 248 | + </div> | ||
| 249 | + </div> | ||
| 250 | + | ||
| 251 | + <div class="item_box "> | ||
| 252 | + <!--名称--> | ||
| 253 | + <div class="new"> | ||
| 254 | + <div class="new_e"> | ||
| 255 | + Percussion | ||
| 256 | + </div> | ||
| 257 | + <div class="new_c"> | ||
| 258 | + 打击乐 | ||
| 259 | + | ||
| 260 | + </div> | ||
| 261 | + <!--最新小视频窗口--> | ||
| 262 | + <div class="item_pic"> | ||
| 263 | + <!--图片盒子--> | ||
| 264 | + <div class="pic_box"> | ||
| 265 | + <!--图片--> | ||
| 266 | + <div class="pic_box_top"> | ||
| 267 | + <img src="images/peke.png"> | ||
| 268 | + </div> | ||
| 269 | + <!--文字--> | ||
| 270 | + <div class="pic_box_bottom"> | ||
| 271 | + 某某主题 | ||
| 272 | + </div> | ||
| 273 | + </div> | ||
| 274 | + <div class="pic_box"> | ||
| 275 | + <!--图片--> | ||
| 276 | + <div class="pic_box_top"> | ||
| 277 | + <img src="images/peke.png"> | ||
| 278 | + </div> | ||
| 279 | + <!--文字--> | ||
| 280 | + <div class="pic_box_bottom"> | ||
| 281 | + 某某主题 | ||
| 282 | + </div> | ||
| 283 | + </div> | ||
| 284 | + </div> | ||
| 285 | + </div> | ||
| 286 | + <!--更多--> | ||
| 287 | + <div class="video_more"> | ||
| 288 | + MORE | ||
| 289 | + </div> | ||
| 290 | + </div> | ||
| 291 | + </div> | ||
| 292 | + | ||
| 293 | + | ||
| 294 | + | ||
| 295 | + | ||
| 296 | + | ||
| 297 | + <!--底部菜单栏--> | ||
| 298 | + <div class="menu"> | ||
| 299 | + <div class="menu_box"> | ||
| 300 | + <div class="menu_top"> | ||
| 301 | + <div class="menu_top_item"> | ||
| 302 | + <div class="iconfont icon-qietu11 font_s"></div> | ||
| 303 | + </div> | ||
| 304 | + <div class="menu_top_item"> | ||
| 305 | + <div class="iconfont icon-weixin font_s"></div> | ||
| 306 | + </div> | ||
| 307 | + <div class="menu_top_item"> | ||
| 308 | + <div class="iconfont icon-tuite font_s"></div> | ||
| 309 | + </div> | ||
| 310 | + <div class="menu_top_item"> | ||
| 311 | + <div class="iconfont icon-bilibilidonghua font_s"></div> | ||
| 312 | + </div> | ||
| 313 | + <div class="menu_top_item"> | ||
| 314 | + <div class="iconfont icon-NGlianshu font_s"></div> | ||
| 315 | + </div> | ||
| 316 | + <div class="menu_top_item"> | ||
| 317 | + <div class="iconfont icon-youtube font_s"></div> | ||
| 318 | + </div> | ||
| 319 | + <div class="menu_top_item"> | ||
| 320 | + <div class="iconfont icon-CD font_s"></div> | ||
| 321 | + </div> | ||
| 322 | + | ||
| 323 | + </div> | ||
| 324 | + <div class="menu_bottom"> | ||
| 325 | + <div class="menu_bottom_item"> | ||
| 326 | + 隐私协议 | ||
| 327 | + </div> | ||
| 328 | + <div class="menu_bottom_item"> | ||
| 329 | + 关于我们 | ||
| 330 | + </div> | ||
| 331 | + <div class="menu_bottom_item"> | ||
| 332 | + 联系我们 | ||
| 333 | + </div> | ||
| 334 | + <div class="menu_bottom_item"> | ||
| 335 | + 商店 | ||
| 336 | + </div> | ||
| 337 | + </div> | ||
| 338 | + </div> | ||
| 339 | + </div> | ||
| 340 | + | ||
| 341 | +</div> | ||
| 342 | +</body> | ||
| 343 | +<script> | ||
| 344 | + //标题切换 | ||
| 345 | + $('.item_m').click(function () { | ||
| 346 | + var index = $(this).index() | ||
| 347 | + | ||
| 348 | + $(this).addClass('item_color').siblings(".item_m").removeClass('item_color') | ||
| 349 | + | ||
| 350 | + | ||
| 351 | + //内容切换 | ||
| 352 | + var dataid = $(this).attr("data-id"); | ||
| 353 | + if(dataid == 1){ | ||
| 354 | + $(".message").show(); | ||
| 355 | + $('.audit').hide(); | ||
| 356 | + }else { | ||
| 357 | + $(".audit").show(); | ||
| 358 | + $(".message").hide(); | ||
| 359 | + } | ||
| 360 | + | ||
| 361 | + | ||
| 362 | + | ||
| 363 | + }) | ||
| 364 | +</script> | ||
| 365 | +</html> |
-
请 注册 或 登录 后发表评论