Showing
3 changed files
with
448 additions
and
430 deletions
| 1 | 1 | ||
| 2 | -/*男首1150 女首/儿童/创意生活990*/ | 2 | +/*首页990*/ |
| 3 | +.min-screen { | ||
| 3 | .home-page { | 4 | .home-page { |
| 4 | width: 990px; | 5 | width: 990px; |
| 5 | - margin: 10px auto 0; | ||
| 6 | - // overflow: hidden; | 6 | + |
| 7 | /*大banner*/ | 7 | /*大banner*/ |
| 8 | .slide-container { | 8 | .slide-container { |
| 9 | - position: absolute; | ||
| 10 | - left: 0; | ||
| 11 | - right: 0; | ||
| 12 | height: 387px; | 9 | height: 387px; |
| 13 | 10 | ||
| 14 | &.slide-thumb-container { | 11 | &.slide-thumb-container { |
| @@ -22,7 +19,6 @@ | @@ -22,7 +19,6 @@ | ||
| 22 | 19 | ||
| 23 | .slide-container-placeholder { | 20 | .slide-container-placeholder { |
| 24 | height: 387px; | 21 | height: 387px; |
| 25 | - width: 100%; | ||
| 26 | 22 | ||
| 27 | &.slide-thumb-container-placeholder { | 23 | &.slide-thumb-container-placeholder { |
| 28 | height: 440px; | 24 | height: 440px; |
| @@ -31,43 +27,11 @@ | @@ -31,43 +27,11 @@ | ||
| 31 | 27 | ||
| 32 | /*大banner大图*/ | 28 | /*大banner大图*/ |
| 33 | .slide-wrapper { | 29 | .slide-wrapper { |
| 34 | - position: relative; | ||
| 35 | height: 387px; | 30 | height: 387px; |
| 36 | - overflow: hidden; | ||
| 37 | - | ||
| 38 | - ul { | ||
| 39 | - position: relative; | ||
| 40 | - height: 100%; | ||
| 41 | - } | ||
| 42 | - | ||
| 43 | - &:hover { | ||
| 44 | - .slide-switch.show { | ||
| 45 | - display: block; | ||
| 46 | - } | ||
| 47 | - } | ||
| 48 | 31 | ||
| 49 | li { | 32 | li { |
| 50 | - display: none; | ||
| 51 | - position: absolute; | ||
| 52 | - top: 0; | ||
| 53 | - right: 0; | ||
| 54 | - width: 100%; | ||
| 55 | - height: 100%; | ||
| 56 | - | ||
| 57 | a { | 33 | a { |
| 58 | - display: block; | ||
| 59 | - height: 100%; | ||
| 60 | width: 990px; | 34 | width: 990px; |
| 61 | - margin: 0 auto; | ||
| 62 | - } | ||
| 63 | - | ||
| 64 | - &:first-child { | ||
| 65 | - display: block; | ||
| 66 | - } | ||
| 67 | - | ||
| 68 | - img { | ||
| 69 | - width: 100%; | ||
| 70 | - height: 100%; | ||
| 71 | } | 35 | } |
| 72 | } | 36 | } |
| 73 | } | 37 | } |
| @@ -80,35 +44,17 @@ | @@ -80,35 +44,17 @@ | ||
| 80 | @include transition-duration(.2s); | 44 | @include transition-duration(.2s); |
| 81 | @include transition-timing-function(ease-in); */ | 45 | @include transition-timing-function(ease-in); */ |
| 82 | a { | 46 | a { |
| 83 | - position: absolute; | ||
| 84 | - top: 50%; | ||
| 85 | - margin: -30px 0 0; | ||
| 86 | - width: 60px; | ||
| 87 | - height: 60px; | ||
| 88 | - line-height: 56px; | ||
| 89 | - text-align: center; | ||
| 90 | - z-index: 2; | ||
| 91 | - background: #fff; | ||
| 92 | - @include opacity(0.55); | ||
| 93 | - | ||
| 94 | &.prev { | 47 | &.prev { |
| 95 | - left: 50%; | ||
| 96 | margin-left: -495px; | 48 | margin-left: -495px; |
| 97 | } | 49 | } |
| 98 | 50 | ||
| 99 | &.next { | 51 | &.next { |
| 100 | - right: 50%; | ||
| 101 | margin-right: -495px; | 52 | margin-right: -495px; |
| 102 | } | 53 | } |
| 103 | 54 | ||
| 104 | &:hover{ | 55 | &:hover{ |
| 105 | @include opacity(0.9); | 56 | @include opacity(0.9); |
| 106 | } | 57 | } |
| 107 | - | ||
| 108 | - .iconfont { | ||
| 109 | - font-size: 32px; | ||
| 110 | - color: #59585a; | ||
| 111 | - } | ||
| 112 | } | 58 | } |
| 113 | } | 59 | } |
| 114 | 60 | ||
| @@ -116,109 +62,19 @@ | @@ -116,109 +62,19 @@ | ||
| 116 | .thumb-pagination { | 62 | .thumb-pagination { |
| 117 | width: 990px; | 63 | width: 990px; |
| 118 | margin: 7px auto 0; | 64 | margin: 7px auto 0; |
| 65 | + padding: 0; | ||
| 119 | 66 | ||
| 120 | li { | 67 | li { |
| 121 | - position: relative; | ||
| 122 | - float: left; | ||
| 123 | - margin: 0 0 0 6px; | ||
| 124 | width: 118px; | 68 | width: 118px; |
| 125 | height: 46px; | 69 | height: 46px; |
| 126 | - | ||
| 127 | - &:first-child { | ||
| 128 | - margin: 0; | ||
| 129 | - } | ||
| 130 | - | ||
| 131 | - &.focus { | ||
| 132 | - a { | ||
| 133 | - @include opacity(0); | ||
| 134 | - } | ||
| 135 | - } | ||
| 136 | - | ||
| 137 | - a { | ||
| 138 | - position: absolute; | ||
| 139 | - left: 0; | ||
| 140 | - right: 0; | ||
| 141 | - bottom: 0; | ||
| 142 | - top: 0; | ||
| 143 | - background: #000; | ||
| 144 | - @include opacity(0.3); | ||
| 145 | - } | ||
| 146 | - | ||
| 147 | - img { | ||
| 148 | - width: 100%; | ||
| 149 | - height: 100%; | ||
| 150 | - } | ||
| 151 | } | 70 | } |
| 152 | } | 71 | } |
| 153 | 72 | ||
| 154 | - /*大banner圆点*/ | ||
| 155 | - .slide-pagination { | ||
| 156 | - position: absolute; | ||
| 157 | - left: 0; | ||
| 158 | - right: 0; | ||
| 159 | - bottom: 12px; | ||
| 160 | - text-align: center; | ||
| 161 | - font-size: 0; | ||
| 162 | - .slide-pagination-inner { | ||
| 163 | - position: relative; | ||
| 164 | - padding: 7px; | ||
| 165 | - @include inline-block; | ||
| 166 | - } | ||
| 167 | - .slide-shade { | ||
| 168 | - position: absolute; | ||
| 169 | - left: 0; | ||
| 170 | - right: 0; | ||
| 171 | - top: 0; | ||
| 172 | - bottom: 0; | ||
| 173 | - background: #000; | ||
| 174 | - @include opacity(0.3); | ||
| 175 | - @include border-radius(13px); | ||
| 176 | - } | ||
| 177 | - span { | ||
| 178 | - position: relative; | ||
| 179 | - @include inline-block; | ||
| 180 | - margin: 0 7px; | ||
| 181 | - width: 12px; | ||
| 182 | - height: 12px; | ||
| 183 | - background: #fff; | ||
| 184 | - cursor: pointer; | ||
| 185 | - @include opacity(0.6); | ||
| 186 | - @include border-radius(6px); | ||
| 187 | - z-index: 2; | ||
| 188 | - | ||
| 189 | - &.focus { | ||
| 190 | - @include opacity(1); | ||
| 191 | - } | ||
| 192 | - } | ||
| 193 | - } | 73 | + |
| 194 | 74 | ||
| 195 | /*女首碎片banner*/ | 75 | /*女首碎片banner*/ |
| 196 | .debris-slider { | 76 | .debris-slider { |
| 197 | height: 440px; | 77 | height: 440px; |
| 198 | - width: 100%; | ||
| 199 | - | ||
| 200 | - .col { | ||
| 201 | - float: left; | ||
| 202 | - | ||
| 203 | - a { | ||
| 204 | - display: block; | ||
| 205 | - } | ||
| 206 | - } | ||
| 207 | - | ||
| 208 | - .left-col a, | ||
| 209 | - .right-col a { | ||
| 210 | - margin-bottom: 10px; | ||
| 211 | - | ||
| 212 | - &:last-child { | ||
| 213 | - margin-bottom: 0; | ||
| 214 | - } | ||
| 215 | - } | ||
| 216 | - | ||
| 217 | - .right-col img, | ||
| 218 | - .left-col img { | ||
| 219 | - height: 100%; | ||
| 220 | - width: 100%; | ||
| 221 | - } | ||
| 222 | 78 | ||
| 223 | .left-col { | 79 | .left-col { |
| 224 | margin-right: 9px; | 80 | margin-right: 9px; |
| @@ -234,43 +90,8 @@ | @@ -234,43 +90,8 @@ | ||
| 234 | } | 90 | } |
| 235 | 91 | ||
| 236 | .center-col { | 92 | .center-col { |
| 237 | - position: relative; | ||
| 238 | width: 492px; | 93 | width: 492px; |
| 239 | - height: 100%; | ||
| 240 | margin-right: 9px; | 94 | margin-right: 9px; |
| 241 | - font-size: 0; | ||
| 242 | - | ||
| 243 | - &:hover { | ||
| 244 | - .slide-switch.show { | ||
| 245 | - display: block; | ||
| 246 | - } | ||
| 247 | - } | ||
| 248 | - | ||
| 249 | - .slide-wrapper { | ||
| 250 | - height: 100%; | ||
| 251 | - | ||
| 252 | - li { | ||
| 253 | - a { | ||
| 254 | - width: 100%; | ||
| 255 | - } | ||
| 256 | - } | ||
| 257 | - } | ||
| 258 | - | ||
| 259 | - .slide-switch { | ||
| 260 | - a.prev { | ||
| 261 | - left: 0; | ||
| 262 | - margin-left: 0; | ||
| 263 | - } | ||
| 264 | - a.next { | ||
| 265 | - right: 0; | ||
| 266 | - margin-right: 0; | ||
| 267 | - } | ||
| 268 | - } | ||
| 269 | - | ||
| 270 | - img { | ||
| 271 | - max-width: 100%; | ||
| 272 | - max-height: 100%; | ||
| 273 | - } | ||
| 274 | } | 95 | } |
| 275 | 96 | ||
| 276 | .right-col a { | 97 | .right-col a { |
| @@ -280,28 +101,18 @@ | @@ -280,28 +101,18 @@ | ||
| 280 | 101 | ||
| 281 | .right-col a:first-child { | 102 | .right-col a:first-child { |
| 282 | height: 326px; | 103 | height: 326px; |
| 283 | - margin-bottom: 11px; | 104 | + margin-bottom: 10px; |
| 284 | } | 105 | } |
| 285 | } | 106 | } |
| 286 | 107 | ||
| 287 | /*男首最新速报*/ | 108 | /*男首最新速报*/ |
| 288 | .new-report { | 109 | .new-report { |
| 289 | - img { | ||
| 290 | - display: block; | ||
| 291 | - width: 100%; | ||
| 292 | - height: 100%; | ||
| 293 | - } | ||
| 294 | .report-list { | 110 | .report-list { |
| 295 | - float: left; | ||
| 296 | width: 748px; | 111 | width: 748px; |
| 297 | li { | 112 | li { |
| 298 | - float: left; | ||
| 299 | - margin: 0 8px 8px 0; | ||
| 300 | width: 158px; | 113 | width: 158px; |
| 301 | height: 212px; | 114 | height: 212px; |
| 302 | - overflow: hidden; | ||
| 303 | &:first-child { | 115 | &:first-child { |
| 304 | - margin-right: 7px; | ||
| 305 | width: 242px; | 116 | width: 242px; |
| 306 | height: 432px; | 117 | height: 432px; |
| 307 | } | 118 | } |
| @@ -310,163 +121,57 @@ | @@ -310,163 +121,57 @@ | ||
| 310 | } | 121 | } |
| 311 | 122 | ||
| 312 | .last-item { | 123 | .last-item { |
| 313 | - float: left; | ||
| 314 | width: 242px; | 124 | width: 242px; |
| 315 | height: 432px; | 125 | height: 432px; |
| 316 | - overflow: hidden; | ||
| 317 | } | 126 | } |
| 318 | } | 127 | } |
| 319 | 128 | ||
| 320 | /*优选品牌*/ | 129 | /*优选品牌*/ |
| 321 | - .preference-brand { | ||
| 322 | - overflow: hidden; | ||
| 323 | - } | ||
| 324 | - | ||
| 325 | .preference-brand-list { | 130 | .preference-brand-list { |
| 326 | - margin-top: 8px; | ||
| 327 | width: 998px; | 131 | width: 998px; |
| 328 | } | 132 | } |
| 329 | 133 | ||
| 330 | .preference-brand-item { | 134 | .preference-brand-item { |
| 331 | - float: left; | ||
| 332 | margin-right: 7px; | 135 | margin-right: 7px; |
| 333 | - margin-bottom: 8px; | ||
| 334 | 136 | ||
| 335 | a { | 137 | a { |
| 336 | - display: table-cell; | ||
| 337 | width: 159px; | 138 | width: 159px; |
| 338 | height: 74px; | 139 | height: 74px; |
| 339 | - text-align: center; | ||
| 340 | - vertical-align: middle; | ||
| 341 | - } | ||
| 342 | - | ||
| 343 | - img { | ||
| 344 | - display: block; | ||
| 345 | - max-width: 100%; | ||
| 346 | - max-height: 100%; | ||
| 347 | - margin: 0 auto; | ||
| 348 | } | 140 | } |
| 349 | } | 141 | } |
| 350 | 142 | ||
| 351 | .preference-more { | 143 | .preference-more { |
| 352 | - float: left; | ||
| 353 | width: 159px; | 144 | width: 159px; |
| 354 | height: 74px; | 145 | height: 74px; |
| 355 | line-height: 90px; | 146 | line-height: 90px; |
| 356 | - text-align: center; | ||
| 357 | - color: black; | ||
| 358 | - font-size: 16px; | ||
| 359 | } | 147 | } |
| 360 | 148 | ||
| 361 | .img-slider-wrapper { | 149 | .img-slider-wrapper { |
| 362 | - position: relative; | ||
| 363 | - width: 100%; | ||
| 364 | height: 480px; | 150 | height: 480px; |
| 365 | - background: #8ae6e0; | ||
| 366 | - | ||
| 367 | - .img-brand-switch { | ||
| 368 | - display: block; | ||
| 369 | - a { | ||
| 370 | - position: absolute; | ||
| 371 | - top: 50%; | ||
| 372 | - font-size: 36px; | ||
| 373 | - color: #fff; | ||
| 374 | - | ||
| 375 | - &.next { | ||
| 376 | - right: 30px; | ||
| 377 | - } | ||
| 378 | - | ||
| 379 | - &.prev { | ||
| 380 | - left: 30px; | ||
| 381 | - } | ||
| 382 | - } | ||
| 383 | - } | ||
| 384 | } | 151 | } |
| 385 | 152 | ||
| 386 | .img-container-landscape { | 153 | .img-container-landscape { |
| 387 | margin: 73px auto 0; | 154 | margin: 73px auto 0; |
| 388 | - box-sizing: border-box; | ||
| 389 | width: 844px; | 155 | width: 844px; |
| 390 | height: 370px; | 156 | height: 370px; |
| 391 | - overflow: hidden; | ||
| 392 | - | ||
| 393 | - .img-list { | ||
| 394 | - width: 1000px; | ||
| 395 | - height: 100%; | ||
| 396 | - } | ||
| 397 | 157 | ||
| 398 | .img-item { | 158 | .img-item { |
| 399 | - float: left; | ||
| 400 | - box-sizing: border-box; | ||
| 401 | width: 275px; | 159 | width: 275px; |
| 402 | height: 100%; | 160 | height: 100%; |
| 403 | margin-right: 9px; | 161 | margin-right: 9px; |
| 404 | - | ||
| 405 | - img { | ||
| 406 | - width: 100%; | ||
| 407 | - height: 100%; | ||
| 408 | - } | ||
| 409 | } | 162 | } |
| 410 | } | 163 | } |
| 411 | 164 | ||
| 412 | /*男首优选品牌 图片品牌*/ | 165 | /*男首优选品牌 图片品牌*/ |
| 413 | .img-brand { | 166 | .img-brand { |
| 414 | - position: relative; | ||
| 415 | - width: 100%; | ||
| 416 | height: 150px; | 167 | height: 150px; |
| 417 | - overflow: hidden; | ||
| 418 | - | ||
| 419 | - &:hover { | ||
| 420 | - .img-brand-switch { | ||
| 421 | - display: block; | ||
| 422 | - } | ||
| 423 | - } | ||
| 424 | ul { | 168 | ul { |
| 425 | width: 998px; | 169 | width: 998px; |
| 426 | } | 170 | } |
| 427 | li { | 171 | li { |
| 428 | - float: left; | ||
| 429 | - margin: 0 8px 0 0; | ||
| 430 | width: 325px; | 172 | width: 325px; |
| 431 | height: 150px; | 173 | height: 150px; |
| 432 | line-height: 150px; | 174 | line-height: 150px; |
| 433 | - overflow: hidden; | ||
| 434 | - font-size: 0; | ||
| 435 | - text-align: center; | ||
| 436 | - | ||
| 437 | - img { | ||
| 438 | - max-width: 100%; | ||
| 439 | - max-height: 100%; | ||
| 440 | - vertical-align: middle; | ||
| 441 | - } | ||
| 442 | - } | ||
| 443 | - | ||
| 444 | - /*图片品牌左右切换按钮*/ | ||
| 445 | - .img-brand-switch { | ||
| 446 | - display: none; | ||
| 447 | - a { | ||
| 448 | - position: absolute; | ||
| 449 | - top: 50%; | ||
| 450 | - margin: -20px 0 0; | ||
| 451 | - width: 40px; | ||
| 452 | - height: 40px; | ||
| 453 | - line-height: 40px; | ||
| 454 | - text-align: center; | ||
| 455 | - z-index: 2; | ||
| 456 | - background: #fff; | ||
| 457 | - @include opacity(0.55); | ||
| 458 | - | ||
| 459 | - &.prev { | ||
| 460 | - left: 0; | ||
| 461 | - } | ||
| 462 | - &.next { | ||
| 463 | - right: 0; | ||
| 464 | - } | ||
| 465 | - &:hover { | ||
| 466 | - @include opacity(0.9); | ||
| 467 | - | ||
| 468 | - } | ||
| 469 | - } | ||
| 470 | } | 175 | } |
| 471 | } | 176 | } |
| 472 | 177 | ||
| @@ -474,9 +179,7 @@ | @@ -474,9 +179,7 @@ | ||
| 474 | 179 | ||
| 475 | /*男首优选品牌 logo品牌*/ | 180 | /*男首优选品牌 logo品牌*/ |
| 476 | .logo-brand { | 181 | .logo-brand { |
| 477 | - width: 100%; | ||
| 478 | height: 246px; | 182 | height: 246px; |
| 479 | - overflow: hidden; | ||
| 480 | 183 | ||
| 481 | &.logos-10 { | 184 | &.logos-10 { |
| 482 | height: 164px; | 185 | height: 164px; |
| @@ -486,44 +189,10 @@ | @@ -486,44 +189,10 @@ | ||
| 486 | width: 998px; | 189 | width: 998px; |
| 487 | } | 190 | } |
| 488 | li { | 191 | li { |
| 489 | - float: left; | ||
| 490 | margin: 8px 8px 0 0; | 192 | margin: 8px 8px 0 0; |
| 491 | width: 158px; | 193 | width: 158px; |
| 492 | height: 74px; | 194 | height: 74px; |
| 493 | line-height: 74px; | 195 | line-height: 74px; |
| 494 | - font-size: 0; | ||
| 495 | - text-align: center; | ||
| 496 | - img { | ||
| 497 | - max-width: 100%; | ||
| 498 | - max-height: 100%; | ||
| 499 | - vertical-align: middle; | ||
| 500 | - } | ||
| 501 | - } | ||
| 502 | - .logo-brand-switch { | ||
| 503 | - position: relative; | ||
| 504 | - background: image-url('index/logo-brand-line.png') no-repeat center center; | ||
| 505 | - line-height: normal; | ||
| 506 | - .iconfont { | ||
| 507 | - position: absolute; | ||
| 508 | - left: 50%; | ||
| 509 | - font-size: 32px; | ||
| 510 | - | ||
| 511 | - &.prev { | ||
| 512 | - top: 10px; | ||
| 513 | - | ||
| 514 | - margin: 0 0 0 -48px; | ||
| 515 | - } | ||
| 516 | - &.next { | ||
| 517 | - bottom: 12px; | ||
| 518 | - margin: 0 0 0 20px; | ||
| 519 | - } | ||
| 520 | - } | ||
| 521 | - } | ||
| 522 | - .brand-more { | ||
| 523 | - font-size: 16px; | ||
| 524 | - &:hover { | ||
| 525 | - text-decoration: underline; | ||
| 526 | - } | ||
| 527 | } | 196 | } |
| 528 | } | 197 | } |
| 529 | 198 | ||
| @@ -533,7 +202,6 @@ | @@ -533,7 +202,6 @@ | ||
| 533 | width: 1004px; | 202 | width: 1004px; |
| 534 | } | 203 | } |
| 535 | li { | 204 | li { |
| 536 | - float: left; | ||
| 537 | margin: 0 7px 7px 0; | 205 | margin: 0 7px 7px 0; |
| 538 | width: 161px; | 206 | width: 161px; |
| 539 | height: 214px; | 207 | height: 214px; |
| @@ -546,58 +214,22 @@ | @@ -546,58 +214,22 @@ | ||
| 546 | width: 326px; | 214 | width: 326px; |
| 547 | height: 435px; | 215 | height: 435px; |
| 548 | } | 216 | } |
| 549 | - img { | ||
| 550 | - display: block; | ||
| 551 | - width: 100%; | ||
| 552 | - height: 100%; | ||
| 553 | - } | ||
| 554 | } | 217 | } |
| 555 | } | 218 | } |
| 556 | 219 | ||
| 557 | 220 | ||
| 558 | 221 | ||
| 559 | .floor-header { | 222 | .floor-header { |
| 560 | - position: relative; | ||
| 561 | margin: 50px 0 30px; | 223 | margin: 50px 0 30px; |
| 562 | 224 | ||
| 563 | - .floor-title { | ||
| 564 | - margin: 0 auto; | ||
| 565 | - width: 298px; | ||
| 566 | - height: 31px; | ||
| 567 | - line-height: 31px; | ||
| 568 | - border: 1px solid #000; | ||
| 569 | - font-size: 16px; | ||
| 570 | - text-align: center; | ||
| 571 | - } | ||
| 572 | - | ||
| 573 | .header-navs { | 225 | .header-navs { |
| 574 | - position: absolute; | ||
| 575 | - padding: 10px 0; | ||
| 576 | - top: 0; | ||
| 577 | - right: 0; | ||
| 578 | - font-size: 14px; | ||
| 579 | 226 | ||
| 580 | li { | 227 | li { |
| 581 | - float: left; | ||
| 582 | padding: 1px 10px; | 228 | padding: 1px 10px; |
| 583 | - border-left: 1px solid #ccc; | ||
| 584 | - | ||
| 585 | - &:first-child { | ||
| 586 | - border-left: none; | ||
| 587 | - } | ||
| 588 | - | ||
| 589 | - &:hover { | ||
| 590 | - text-decoration: underline; | ||
| 591 | - } | ||
| 592 | - | ||
| 593 | - a { | ||
| 594 | - color: #333; | ||
| 595 | - } | ||
| 596 | - } | 229 | + } |
| 597 | } | 230 | } |
| 598 | } | 231 | } |
| 599 | - | ||
| 600 | - | 232 | +} |
| 601 | } | 233 | } |
| 602 | 234 | ||
| 603 | @import "index1150","_index-pliffy"; | 235 | @import "index1150","_index-pliffy"; |
| 1 | - | ||
| 2 | -@media screen and (min-width: 1150px) { | ||
| 3 | .home-page { | 1 | .home-page { |
| 4 | width: 1150px; | 2 | width: 1150px; |
| 5 | - | 3 | + margin: 10px auto 0; |
| 4 | + | ||
| 6 | .slide-container{ | 5 | .slide-container{ |
| 6 | + position: absolute; | ||
| 7 | + left: 0; | ||
| 8 | + right: 0; | ||
| 7 | height: 450px; | 9 | height: 450px; |
| 8 | 10 | ||
| 9 | &.slide-thumb-container { | 11 | &.slide-thumb-container { |
| @@ -13,17 +15,50 @@ | @@ -13,17 +15,50 @@ | ||
| 13 | 15 | ||
| 14 | 16 | ||
| 15 | .slide-wrapper { | 17 | .slide-wrapper { |
| 18 | + position: relative; | ||
| 16 | height: 450px; | 19 | height: 450px; |
| 20 | + overflow: hidden; | ||
| 21 | + | ||
| 22 | + ul { | ||
| 23 | + position: relative; | ||
| 24 | + height: 100%; | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + &:hover { | ||
| 28 | + .slide-switch.show { | ||
| 29 | + display: block; | ||
| 30 | + } | ||
| 31 | + } | ||
| 17 | 32 | ||
| 18 | li { | 33 | li { |
| 34 | + display: none; | ||
| 35 | + position: absolute; | ||
| 36 | + top: 0; | ||
| 37 | + right: 0; | ||
| 38 | + width: 100%; | ||
| 39 | + height: 100%; | ||
| 40 | + | ||
| 19 | a { | 41 | a { |
| 42 | + display: block; | ||
| 43 | + height: 100%; | ||
| 20 | width: 1150px; | 44 | width: 1150px; |
| 45 | + margin: 0 auto; | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + &:first-child { | ||
| 49 | + display: block; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + img { | ||
| 53 | + width: 100%; | ||
| 54 | + height: 100%; | ||
| 21 | } | 55 | } |
| 22 | } | 56 | } |
| 23 | } | 57 | } |
| 24 | 58 | ||
| 25 | .slide-container-placeholder { | 59 | .slide-container-placeholder { |
| 26 | height: 450px; | 60 | height: 450px; |
| 61 | + width: 100%; | ||
| 27 | 62 | ||
| 28 | &.slide-thumb-container-placeholder { | 63 | &.slide-thumb-container-placeholder { |
| 29 | height: 510px; | 64 | height: 510px; |
| @@ -33,14 +68,38 @@ | @@ -33,14 +68,38 @@ | ||
| 33 | 68 | ||
| 34 | 69 | ||
| 35 | .slide-switch { | 70 | .slide-switch { |
| 71 | + display: block; | ||
| 72 | + | ||
| 36 | a { | 73 | a { |
| 74 | + position: absolute; | ||
| 75 | + top: 50%; | ||
| 76 | + margin: -30px 0 0; | ||
| 77 | + width: 60px; | ||
| 78 | + height: 60px; | ||
| 79 | + line-height: 56px; | ||
| 80 | + text-align: center; | ||
| 81 | + z-index: 2; | ||
| 82 | + background: #fff; | ||
| 83 | + @include opacity(0.55); | ||
| 84 | + | ||
| 37 | &.prev { | 85 | &.prev { |
| 86 | + left: 50%; | ||
| 38 | margin-left: -575px; | 87 | margin-left: -575px; |
| 39 | } | 88 | } |
| 40 | 89 | ||
| 41 | &.next { | 90 | &.next { |
| 91 | + right: 50%; | ||
| 42 | margin-right: -575px; | 92 | margin-right: -575px; |
| 43 | } | 93 | } |
| 94 | + | ||
| 95 | + &:hover{ | ||
| 96 | + @include opacity(0.9); | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + .iconfont { | ||
| 100 | + font-size: 32px; | ||
| 101 | + color: #59585a; | ||
| 102 | + } | ||
| 44 | } | 103 | } |
| 45 | } | 104 | } |
| 46 | 105 | ||
| @@ -50,14 +109,108 @@ | @@ -50,14 +109,108 @@ | ||
| 50 | padding: 0 0 0 2px; | 109 | padding: 0 0 0 2px; |
| 51 | 110 | ||
| 52 | li { | 111 | li { |
| 112 | + position: relative; | ||
| 113 | + float: left; | ||
| 114 | + margin: 0 0 0 6px; | ||
| 53 | width: 138px; | 115 | width: 138px; |
| 54 | height: 54px; | 116 | height: 54px; |
| 117 | + | ||
| 118 | + &:first-child { | ||
| 119 | + margin: 0; | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + &.focus { | ||
| 123 | + a { | ||
| 124 | + @include opacity(0); | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + a { | ||
| 129 | + position: absolute; | ||
| 130 | + left: 0; | ||
| 131 | + right: 0; | ||
| 132 | + bottom: 0; | ||
| 133 | + top: 0; | ||
| 134 | + background: #000; | ||
| 135 | + @include opacity(0.3); | ||
| 136 | + } | ||
| 137 | + | ||
| 138 | + img { | ||
| 139 | + width: 100%; | ||
| 140 | + height: 100%; | ||
| 141 | + } | ||
| 142 | + } | ||
| 143 | + } | ||
| 144 | + | ||
| 145 | + /*大banner圆点*/ | ||
| 146 | + .slide-pagination { | ||
| 147 | + position: absolute; | ||
| 148 | + left: 0; | ||
| 149 | + right: 0; | ||
| 150 | + bottom: 12px; | ||
| 151 | + text-align: center; | ||
| 152 | + font-size: 0; | ||
| 153 | + .slide-pagination-inner { | ||
| 154 | + position: relative; | ||
| 155 | + padding: 7px; | ||
| 156 | + @include inline-block; | ||
| 157 | + } | ||
| 158 | + .slide-shade { | ||
| 159 | + position: absolute; | ||
| 160 | + left: 0; | ||
| 161 | + right: 0; | ||
| 162 | + top: 0; | ||
| 163 | + bottom: 0; | ||
| 164 | + background: #000; | ||
| 165 | + @include opacity(0.3); | ||
| 166 | + @include border-radius(13px); | ||
| 167 | + } | ||
| 168 | + span { | ||
| 169 | + position: relative; | ||
| 170 | + @include inline-block; | ||
| 171 | + margin: 0 7px; | ||
| 172 | + width: 12px; | ||
| 173 | + height: 12px; | ||
| 174 | + background: #fff; | ||
| 175 | + cursor: pointer; | ||
| 176 | + @include opacity(0.6); | ||
| 177 | + @include border-radius(6px); | ||
| 178 | + z-index: 2; | ||
| 179 | + | ||
| 180 | + &.focus { | ||
| 181 | + @include opacity(1); | ||
| 182 | + } | ||
| 55 | } | 183 | } |
| 56 | } | 184 | } |
| 57 | 185 | ||
| 58 | 186 | ||
| 59 | .debris-slider { | 187 | .debris-slider { |
| 60 | height: 510px; | 188 | height: 510px; |
| 189 | + width: 100%; | ||
| 190 | + | ||
| 191 | + .col { | ||
| 192 | + float: left; | ||
| 193 | + | ||
| 194 | + a { | ||
| 195 | + display: block; | ||
| 196 | + } | ||
| 197 | + } | ||
| 198 | + | ||
| 199 | + .left-col a, | ||
| 200 | + .right-col a { | ||
| 201 | + margin-bottom: 10px; | ||
| 202 | + | ||
| 203 | + &:last-child { | ||
| 204 | + margin-bottom: 0; | ||
| 205 | + } | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + .right-col img, | ||
| 209 | + .left-col img { | ||
| 210 | + height: 100%; | ||
| 211 | + width: 100%; | ||
| 212 | + } | ||
| 213 | + | ||
| 61 | .left-col { | 214 | .left-col { |
| 62 | margin-right: 10px; | 215 | margin-right: 10px; |
| 63 | 216 | ||
| @@ -72,31 +225,74 @@ | @@ -72,31 +225,74 @@ | ||
| 72 | } | 225 | } |
| 73 | 226 | ||
| 74 | .center-col { | 227 | .center-col { |
| 228 | + position: relative; | ||
| 75 | width: 570px; | 229 | width: 570px; |
| 76 | height: 100%; | 230 | height: 100%; |
| 77 | margin-right: 10px; | 231 | margin-right: 10px; |
| 78 | - } | 232 | + font-size: 0; |
| 79 | 233 | ||
| 80 | - .right-col { | ||
| 81 | - a { | ||
| 82 | - width: 280px; | ||
| 83 | - height: 120px; | 234 | + &:hover { |
| 235 | + .slide-switch.show { | ||
| 236 | + display: block; | ||
| 237 | + } | ||
| 84 | } | 238 | } |
| 239 | + | ||
| 240 | + .slide-wrapper { | ||
| 241 | + height: 100%; | ||
| 85 | 242 | ||
| 86 | - a:first-child { | ||
| 87 | - height: 380px; | 243 | + li { |
| 244 | + a { | ||
| 245 | + width: 100%; | ||
| 246 | + } | ||
| 247 | + } | ||
| 248 | + } | ||
| 249 | + | ||
| 250 | + .slide-switch { | ||
| 251 | + a.prev { | ||
| 252 | + left: 0; | ||
| 253 | + margin-left: 0; | ||
| 254 | + } | ||
| 255 | + a.next { | ||
| 256 | + right: 0; | ||
| 257 | + margin-right: 0; | ||
| 258 | + } | ||
| 259 | + } | ||
| 260 | + | ||
| 261 | + img { | ||
| 262 | + max-width: 100%; | ||
| 263 | + max-height: 100%; | ||
| 88 | } | 264 | } |
| 89 | } | 265 | } |
| 266 | + | ||
| 267 | + .right-col a { | ||
| 268 | + width: 280px; | ||
| 269 | + height: 120px; | ||
| 270 | + } | ||
| 271 | + | ||
| 272 | + .right-col a:first-child { | ||
| 273 | + height: 380px; | ||
| 274 | + margin-bottom: 11px; | ||
| 275 | + } | ||
| 90 | } | 276 | } |
| 91 | 277 | ||
| 92 | .new-report { | 278 | .new-report { |
| 279 | + img { | ||
| 280 | + display: block; | ||
| 281 | + width: 100%; | ||
| 282 | + height: 100%; | ||
| 283 | + } | ||
| 93 | .report-list { | 284 | .report-list { |
| 285 | + float: left; | ||
| 94 | width: 868px; | 286 | width: 868px; |
| 95 | li { | 287 | li { |
| 288 | + float: left; | ||
| 289 | + margin: 0 8px 8px 0; | ||
| 96 | width: 185px; | 290 | width: 185px; |
| 97 | height: 248px; | 291 | height: 248px; |
| 292 | + overflow: hidden; | ||
| 98 | &:first-child { | 293 | &:first-child { |
| 99 | - width: 282px; | 294 | + margin-right: 7px; |
| 295 | + width: 282px; | ||
| 100 | height: 504px; | 296 | height: 504px; |
| 101 | } | 297 | } |
| 102 | 298 | ||
| @@ -104,60 +300,173 @@ | @@ -104,60 +300,173 @@ | ||
| 104 | } | 300 | } |
| 105 | 301 | ||
| 106 | .last-item { | 302 | .last-item { |
| 303 | + float: left; | ||
| 107 | width: 282px; | 304 | width: 282px; |
| 108 | height: 504px; | 305 | height: 504px; |
| 306 | + overflow: hidden; | ||
| 109 | } | 307 | } |
| 110 | } | 308 | } |
| 111 | 309 | ||
| 112 | - .img-slider-wrapper { | ||
| 113 | - height: 558px; | ||
| 114 | - } | ||
| 115 | - | ||
| 116 | - .img-container-landscape { | ||
| 117 | - margin: 86px auto 0; | ||
| 118 | - width: 982px; | ||
| 119 | - height: 433px; | ||
| 120 | 310 | ||
| 121 | - .img-item { | ||
| 122 | - width: 320px; | ||
| 123 | - margin-right: 10px; | ||
| 124 | - } | 311 | + /*优选品牌*/ |
| 312 | + .preference-brand { | ||
| 313 | + overflow: hidden; | ||
| 125 | } | 314 | } |
| 126 | 315 | ||
| 127 | .preference-brand-list { | 316 | .preference-brand-list { |
| 317 | + margin-top: 8px; | ||
| 128 | width: 1158px; | 318 | width: 1158px; |
| 129 | } | 319 | } |
| 130 | 320 | ||
| 131 | .preference-brand-item { | 321 | .preference-brand-item { |
| 322 | + float: left; | ||
| 132 | margin-right: 8px; | 323 | margin-right: 8px; |
| 324 | + margin-bottom: 8px; | ||
| 133 | 325 | ||
| 134 | a { | 326 | a { |
| 327 | + display: table-cell; | ||
| 135 | width: 185px; | 328 | width: 185px; |
| 136 | height: 86px; | 329 | height: 86px; |
| 330 | + text-align: center; | ||
| 331 | + vertical-align: middle; | ||
| 332 | + } | ||
| 333 | + | ||
| 334 | + img { | ||
| 335 | + display: block; | ||
| 336 | + max-width: 100%; | ||
| 337 | + max-height: 100%; | ||
| 338 | + margin: 0 auto; | ||
| 137 | } | 339 | } |
| 138 | } | 340 | } |
| 139 | 341 | ||
| 140 | .preference-more { | 342 | .preference-more { |
| 343 | + float: left; | ||
| 141 | width: 185px; | 344 | width: 185px; |
| 142 | height: 86px; | 345 | height: 86px; |
| 143 | line-height: 100px; | 346 | line-height: 100px; |
| 347 | + text-align: center; | ||
| 348 | + color: black; | ||
| 349 | + font-size: 16px; | ||
| 350 | + } | ||
| 351 | + | ||
| 352 | + .img-slider-wrapper { | ||
| 353 | + position: relative; | ||
| 354 | + width: 100%; | ||
| 355 | + height: 558px; | ||
| 356 | + background: #8ae6e0; | ||
| 357 | + | ||
| 358 | + .img-brand-switch { | ||
| 359 | + display: block; | ||
| 360 | + a { | ||
| 361 | + position: absolute; | ||
| 362 | + top: 50%; | ||
| 363 | + font-size: 36px; | ||
| 364 | + color: #fff; | ||
| 365 | + | ||
| 366 | + &.next { | ||
| 367 | + right: 30px; | ||
| 368 | + } | ||
| 369 | + | ||
| 370 | + &.prev { | ||
| 371 | + left: 30px; | ||
| 372 | + } | ||
| 373 | + } | ||
| 374 | + } | ||
| 375 | + } | ||
| 376 | + | ||
| 377 | + .img-container-landscape { | ||
| 378 | + box-sizing: border-box; | ||
| 379 | + margin: 86px auto 0; | ||
| 380 | + width: 982px; | ||
| 381 | + height: 433px; | ||
| 382 | + overflow: hidden; | ||
| 383 | + | ||
| 384 | + .img-list { | ||
| 385 | + width: 1000px; | ||
| 386 | + height: 100%; | ||
| 387 | + } | ||
| 388 | + | ||
| 389 | + .img-item { | ||
| 390 | + float: left; | ||
| 391 | + box-sizing: border-box; | ||
| 392 | + width: 320px; | ||
| 393 | + height: 100%; | ||
| 394 | + margin-right: 10px; | ||
| 395 | + | ||
| 396 | + img { | ||
| 397 | + width: 100%; | ||
| 398 | + height: 100%; | ||
| 399 | + } | ||
| 400 | + } | ||
| 144 | } | 401 | } |
| 145 | 402 | ||
| 403 | + | ||
| 404 | + /*男首优选品牌 图片品牌*/ | ||
| 146 | .img-brand { | 405 | .img-brand { |
| 406 | + position: relative; | ||
| 407 | + width: 100%; | ||
| 147 | height: 175px; | 408 | height: 175px; |
| 409 | + overflow: hidden; | ||
| 148 | 410 | ||
| 411 | + &:hover { | ||
| 412 | + .img-brand-switch { | ||
| 413 | + display: block; | ||
| 414 | + } | ||
| 415 | + } | ||
| 149 | ul { | 416 | ul { |
| 150 | width: 1158px; | 417 | width: 1158px; |
| 151 | } | 418 | } |
| 152 | li { | 419 | li { |
| 420 | + float: left; | ||
| 421 | + margin: 0 8px 0 0; | ||
| 153 | width: 378px; | 422 | width: 378px; |
| 154 | height: 175px; | 423 | height: 175px; |
| 155 | line-height: 175px; | 424 | line-height: 175px; |
| 425 | + overflow: hidden; | ||
| 426 | + font-size: 0; | ||
| 427 | + text-align: center; | ||
| 428 | + | ||
| 429 | + img { | ||
| 430 | + max-width: 100%; | ||
| 431 | + max-height: 100%; | ||
| 432 | + vertical-align: middle; | ||
| 433 | + } | ||
| 434 | + } | ||
| 435 | + | ||
| 436 | + /*图片品牌左右切换按钮*/ | ||
| 437 | + .img-brand-switch { | ||
| 438 | + display: none; | ||
| 439 | + a { | ||
| 440 | + position: absolute; | ||
| 441 | + top: 50%; | ||
| 442 | + margin: -20px 0 0; | ||
| 443 | + width: 40px; | ||
| 444 | + height: 40px; | ||
| 445 | + line-height: 40px; | ||
| 446 | + text-align: center; | ||
| 447 | + z-index: 2; | ||
| 448 | + background: #fff; | ||
| 449 | + @include opacity(0.55); | ||
| 450 | + | ||
| 451 | + &.prev { | ||
| 452 | + left: 0; | ||
| 453 | + } | ||
| 454 | + &.next { | ||
| 455 | + right: 0; | ||
| 456 | + } | ||
| 457 | + &:hover { | ||
| 458 | + @include opacity(0.9); | ||
| 459 | + | ||
| 460 | + } | ||
| 461 | + } | ||
| 156 | } | 462 | } |
| 157 | } | 463 | } |
| 158 | 464 | ||
| 465 | + /*男首优选品牌 logo品牌*/ | ||
| 159 | .logo-brand { | 466 | .logo-brand { |
| 467 | + width: 100%; | ||
| 160 | height: 282px; | 468 | height: 282px; |
| 469 | + overflow: hidden; | ||
| 161 | 470 | ||
| 162 | &.logos-10 { | 471 | &.logos-10 { |
| 163 | height: 188px; | 472 | height: 188px; |
| @@ -167,16 +476,54 @@ | @@ -167,16 +476,54 @@ | ||
| 167 | width: 1158px; | 476 | width: 1158px; |
| 168 | } | 477 | } |
| 169 | li { | 478 | li { |
| 479 | + float: left; | ||
| 480 | + margin: 8px 8px 0 0; | ||
| 170 | width: 185px; | 481 | width: 185px; |
| 171 | height: 86px; | 482 | height: 86px; |
| 483 | + line-height: 86px; | ||
| 484 | + font-size: 0; | ||
| 485 | + text-align: center; | ||
| 486 | + img { | ||
| 487 | + max-width: 100%; | ||
| 488 | + max-height: 100%; | ||
| 489 | + vertical-align: middle; | ||
| 490 | + } | ||
| 491 | + } | ||
| 492 | + .logo-brand-switch { | ||
| 493 | + position: relative; | ||
| 494 | + background: image-url('index/logo-brand-line.png') no-repeat center center; | ||
| 495 | + line-height: normal; | ||
| 496 | + .iconfont { | ||
| 497 | + position: absolute; | ||
| 498 | + left: 50%; | ||
| 499 | + font-size: 32px; | ||
| 500 | + | ||
| 501 | + &.prev { | ||
| 502 | + top: 10px; | ||
| 503 | + | ||
| 504 | + margin: 0 0 0 -48px; | ||
| 505 | + } | ||
| 506 | + &.next { | ||
| 507 | + bottom: 12px; | ||
| 508 | + margin: 0 0 0 20px; | ||
| 509 | + } | ||
| 510 | + } | ||
| 511 | + } | ||
| 512 | + .brand-more { | ||
| 513 | + font-size: 16px; | ||
| 514 | + &:hover { | ||
| 515 | + text-decoration: underline; | ||
| 516 | + } | ||
| 172 | } | 517 | } |
| 173 | } | 518 | } |
| 174 | 519 | ||
| 520 | + /*创意生活商品分类*/ | ||
| 175 | .categorys-list { | 521 | .categorys-list { |
| 176 | ul { | 522 | ul { |
| 177 | width: 1158px; | 523 | width: 1158px; |
| 178 | } | 524 | } |
| 179 | li { | 525 | li { |
| 526 | + float: left; | ||
| 180 | margin: 0 8px 8px 0; | 527 | margin: 0 8px 8px 0; |
| 181 | width: 185px; | 528 | width: 185px; |
| 182 | height: 248px; | 529 | height: 248px; |
| @@ -189,16 +536,52 @@ | @@ -189,16 +536,52 @@ | ||
| 189 | width: 377px; | 536 | width: 377px; |
| 190 | height: 504px; | 537 | height: 504px; |
| 191 | } | 538 | } |
| 539 | + img { | ||
| 540 | + display: block; | ||
| 541 | + width: 100%; | ||
| 542 | + height: 100%; | ||
| 543 | + } | ||
| 192 | } | 544 | } |
| 193 | } | 545 | } |
| 546 | + | ||
| 194 | .floor-header { | 547 | .floor-header { |
| 548 | + position: relative; | ||
| 195 | margin: 80px 0 40px; | 549 | margin: 80px 0 40px; |
| 196 | 550 | ||
| 551 | + .floor-title { | ||
| 552 | + margin: 0 auto; | ||
| 553 | + width: 298px; | ||
| 554 | + height: 31px; | ||
| 555 | + line-height: 31px; | ||
| 556 | + border: 1px solid #000; | ||
| 557 | + font-size: 16px; | ||
| 558 | + text-align: center; | ||
| 559 | + } | ||
| 560 | + | ||
| 197 | .header-navs { | 561 | .header-navs { |
| 562 | + position: absolute; | ||
| 563 | + padding: 10px 0; | ||
| 564 | + top: 0; | ||
| 565 | + right: 0; | ||
| 566 | + font-size: 14px; | ||
| 567 | + | ||
| 198 | li { | 568 | li { |
| 569 | + float: left; | ||
| 199 | padding: 1px 15px; | 570 | padding: 1px 15px; |
| 571 | + border-left: 1px solid #ccc; | ||
| 572 | + | ||
| 573 | + &:first-child { | ||
| 574 | + border-left: none; | ||
| 575 | + } | ||
| 576 | + | ||
| 577 | + &:hover { | ||
| 578 | + text-decoration: underline; | ||
| 579 | + } | ||
| 580 | + | ||
| 581 | + a { | ||
| 582 | + color: #333; | ||
| 583 | + } | ||
| 200 | } | 584 | } |
| 201 | } | 585 | } |
| 202 | } | 586 | } |
| 203 | -} | ||
| 204 | } | 587 | } |
| 1 | .hotrank-page { | 1 | .hotrank-page { |
| 2 | - width: 990px; | 2 | + width: 1150px; |
| 3 | margin: 0 auto; | 3 | margin: 0 auto; |
| 4 | - | 4 | + |
| 5 | .popular-list { | 5 | .popular-list { |
| 6 | width: 1160px; | 6 | width: 1160px; |
| 7 | 7 | ||
| 8 | li { | 8 | li { |
| 9 | position: relative; | 9 | position: relative; |
| 10 | float: left; | 10 | float: left; |
| 11 | - width: 324px; | ||
| 12 | - height: 521px; | 11 | + |
| 12 | + width: 378px; | ||
| 13 | + height: 596px; | ||
| 13 | overflow: hidden; | 14 | overflow: hidden; |
| 14 | list-style: none; | 15 | list-style: none; |
| 15 | margin: 0 8px 0 0; | 16 | margin: 0 8px 0 0; |
| 16 | 17 | ||
| 17 | .item-img { | 18 | .item-img { |
| 18 | width: 100%; | 19 | width: 100%; |
| 19 | - height: 434px; | ||
| 20 | - line-height: 434px; | 20 | + height: 506px; |
| 21 | + line-height: 506px; | ||
| 22 | + | ||
| 21 | text-align: center; | 23 | text-align: center; |
| 22 | overflow: hidden; | 24 | overflow: hidden; |
| 23 | } | 25 | } |
| @@ -82,14 +84,14 @@ | @@ -82,14 +84,14 @@ | ||
| 82 | .popular-item7, | 84 | .popular-item7, |
| 83 | .popular-item8, | 85 | .popular-item8, |
| 84 | .popular-item9 { | 86 | .popular-item9 { |
| 85 | - width: 240px; | ||
| 86 | - height: 408px; | 87 | + width: 280px; |
| 88 | + height: 464px; | ||
| 87 | margin: 0 10px 0 0; | 89 | margin: 0 10px 0 0; |
| 88 | overflow: hidden; | 90 | overflow: hidden; |
| 89 | 91 | ||
| 90 | .item-img { | 92 | .item-img { |
| 91 | - height: 320px; | ||
| 92 | - line-height: 320px; | 93 | + height: 374px; |
| 94 | + line-height: 374px; | ||
| 93 | } | 95 | } |
| 94 | 96 | ||
| 95 | } | 97 | } |
| @@ -116,7 +118,6 @@ | @@ -116,7 +118,6 @@ | ||
| 116 | padding: 0 26px; | 118 | padding: 0 26px; |
| 117 | font-size: 14px; | 119 | font-size: 14px; |
| 118 | color: #777; | 120 | color: #777; |
| 119 | - line-height: 20px; | ||
| 120 | border-left: 1px solid #999; | 121 | border-left: 1px solid #999; |
| 121 | } | 122 | } |
| 122 | } | 123 | } |
| @@ -135,21 +136,23 @@ | @@ -135,21 +136,23 @@ | ||
| 135 | } | 136 | } |
| 136 | } | 137 | } |
| 137 | 138 | ||
| 139 | + | ||
| 138 | .hot-week-list { | 140 | .hot-week-list { |
| 139 | width: 1160px; | 141 | width: 1160px; |
| 140 | 142 | ||
| 141 | .good-info { | 143 | .good-info { |
| 142 | - width: 240px; | ||
| 143 | - height: 408px; | 144 | + |
| 145 | + width: 280px; | ||
| 146 | + height: 464px; | ||
| 144 | margin: 10px 10px 0 0; | 147 | margin: 10px 10px 0 0; |
| 145 | 148 | ||
| 146 | .tag-container { | 149 | .tag-container { |
| 147 | display: none; | 150 | display: none; |
| 148 | } | 151 | } |
| 149 | 152 | ||
| 150 | - .good-detail-img { | ||
| 151 | - height: 320px; | ||
| 152 | - line-height: 320px; | 153 | + .good-detail-img { |
| 154 | + height: 374px; | ||
| 155 | + line-height: 374px; | ||
| 153 | text-align: center; | 156 | text-align: center; |
| 154 | font-size: 0; | 157 | font-size: 0; |
| 155 | 158 | ||
| @@ -243,17 +246,17 @@ | @@ -243,17 +246,17 @@ | ||
| 243 | } | 246 | } |
| 244 | } | 247 | } |
| 245 | 248 | ||
| 246 | -@media screen and (min-width: 1150px) { | 249 | +.min-screen { |
| 247 | .hotrank-page { | 250 | .hotrank-page { |
| 248 | - width: 1150px; | 251 | + width: 990px; |
| 249 | 252 | ||
| 250 | .popular-list { | 253 | .popular-list { |
| 251 | li { | 254 | li { |
| 252 | - width: 378px; | ||
| 253 | - height: 596px; | 255 | + width: 324px; |
| 256 | + height: 521px; | ||
| 254 | .item-img { | 257 | .item-img { |
| 255 | - height: 506px; | ||
| 256 | - line-height: 506px; | 258 | + height: 434px; |
| 259 | + line-height: 434px; | ||
| 257 | } | 260 | } |
| 258 | } | 261 | } |
| 259 | 262 | ||
| @@ -261,12 +264,12 @@ | @@ -261,12 +264,12 @@ | ||
| 261 | .popular-item7, | 264 | .popular-item7, |
| 262 | .popular-item8, | 265 | .popular-item8, |
| 263 | .popular-item9 { | 266 | .popular-item9 { |
| 264 | - width: 280px; | ||
| 265 | - height: 464px; | 267 | + width: 240px; |
| 268 | + height: 408px; | ||
| 266 | 269 | ||
| 267 | .item-img { | 270 | .item-img { |
| 268 | - height: 374px; | ||
| 269 | - line-height: 374px; | 271 | + height: 320px; |
| 272 | + line-height: 320px; | ||
| 270 | } | 273 | } |
| 271 | 274 | ||
| 272 | } | 275 | } |
| @@ -274,12 +277,12 @@ | @@ -274,12 +277,12 @@ | ||
| 274 | 277 | ||
| 275 | .hot-week-list { | 278 | .hot-week-list { |
| 276 | .good-info { | 279 | .good-info { |
| 277 | - width: 280px; | ||
| 278 | - height: 464px; | 280 | + width: 240px; |
| 281 | + height: 408px; | ||
| 279 | 282 | ||
| 280 | .good-detail-img { | 283 | .good-detail-img { |
| 281 | - height: 374px; | ||
| 282 | - line-height: 374px; | 284 | + height: 320px; |
| 285 | + line-height: 320px; | ||
| 283 | } | 286 | } |
| 284 | } | 287 | } |
| 285 | } | 288 | } |
-
Please register or login to post a comment