.home-page { width: 1150px; margin: 10px auto 0; .slide-container { position: absolute; left: 0; right: 0; height: 450px; } .slide-thumb-container { height: 510px; } .slide-wrapper { position: relative; height: 450px; overflow: hidden; ul { position: relative; height: 100%; } &:hover .slide-switch.show { display: block; } li { display: none; position: absolute; top: 0; right: 0; width: 100%; height: 100%; a { display: block; height: 100%; width: 1150px; margin: 0 auto; } &:first-child { display: block; } img { width: 100%; height: 100%; } } } .slide-container-placeholder { height: 450px; width: 100%; } .slide-thumb-container-placeholder { height: 510px; } .slide-switch { display: block; a { position: absolute; top: 50%; margin: -30px 0 0; width: 60px; height: 60px; line-height: 56px; text-align: center; z-index: 2; background: #fff; opacity: 0.55; &.prev { left: 50%; margin-left: -575px; } &.next { right: 50%; margin-right: -575px; } &:hover { opacity: 0.9; } .iconfont { font-size: 32px; color: #59585a; } } } .thumb-pagination { width: 1148px; margin: 6px auto 0; padding-left: 2px; li { position: relative; float: left; margin-left: 6px; width: 138px; height: 54px; &:first-child { margin: 0; } &.focus a { opacity: 0; } a { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #000; opacity: 0.3; } img { width: 100%; height: 100%; } } } /* 大banner圆点 */ .slide-pagination { font-size: 0; .slide-shade { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #000; opacity: 0.3; border-radius: 13px; } span { position: relative; display: inline-block; margin: 0 7px; width: 12px; height: 12px; background: #fff; cursor: pointer; opacity: 0.6; border-radius: 6px; z-index: 2; &.focus { opacity: 1; } } } .debris-slider { height: 510px; width: 100%; .col { float: left; a { display: block; } } .left-col a, .right-col a { margin-bottom: 10px; &:last-child { margin-bottom: 0; } } .right-col img, .left-col img { height: 100%; width: 100%; } .left-col { margin-right: 10px; a { width: 280px; height: 120px; } a:first-child { height: 250px; } } .center-col { position: relative; width: 570px; height: 100%; margin-right: 10px; font-size: 0; &:hover { .slide-switch.show { display: block; } } .slide-wrapper { height: 100%; a { width: 100%; } } .slide-switch { a.prev { left: 0; margin-left: 0; } a.next { right: 0; margin-right: 0; } } img { max-width: 100%; max-height: 100%; } } .right-col a { width: 280px; height: 120px; } .right-col a:first-child { height: 380px; margin-bottom: 11px; } } .new-report { .report-list { float: left; width: 868px; li { float: left; margin: 0 8px 8px 0; width: 185px; height: 248px; overflow: hidden; &:first-child { margin-right: 7px; width: 282px; height: 504px; } } } .last-item { float: left; width: 282px; height: 504px; overflow: hidden; } } /* 优选品牌 */ .preference-brand { overflow: hidden; } .preference-brand-list { margin-top: 8px; width: 1158px; } .preference-brand-item { float: left; margin-right: 8px; margin-bottom: 8px; a { display: table-cell; width: 185px; height: 86px; text-align: center; vertical-align: middle; } img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; } } .preference-more { float: left; width: 185px; height: 86px; line-height: 100px; text-align: center; color: black; font-size: 16px; } .img-slider-wrapper { position: relative; width: 100%; height: 558px; background: #8ae6e0; overflow: hidden; .img-brand-switch, .new-user-switch { display: block; a { position: absolute; top: 50%; font-size: 36px; color: #fff; &.next { right: 30px; } &.prev { left: 30px; } } } } .img-container-landscape { box-sizing: border-box; margin: 86px auto 0; width: 980px; height: 433px; overflow: hidden; .img-list { width: 1000px; height: 100%; } .img-item { float: left; box-sizing: border-box; width: 320px !important; height: 100%; margin-right: 10px; img { width: 100%; height: 100%; } } } .img-brand, .new-user-prolist { position: relative; width: 100%; height: 175px; overflow: hidden; &:hover { .img-brand-switch { display: block; } } ul { width: 1158px; } li { float: left; margin-right: 8px; width: 378px !important; height: 175px; line-height: 175px; overflow: hidden; font-size: 0; text-align: center; img { max-width: 100%; max-height: 100%; vertical-align: middle; } } .img-brand-switch { display: none; a { position: absolute; top: 50%; margin: -20px 0 0; width: 40px; height: 40px; line-height: 40px; text-align: center; z-index: 2; background: #fff; opacity: 0.55; &.prev { left: 0; } &.next { right: 0; } &:hover { opacity: 0.9; } } } } .logo-brand { width: 100%; height: 282px; overflow: hidden; &.logos-10 { height: 188px; } ul { width: 1158px; } li { float: left; margin: 8px 8px 0 0; width: 185px; height: 86px; line-height: 86px; font-size: 0; text-align: center; img { max-width: 100%; max-height: 100%; vertical-align: middle; } } .logo-brand-switch { position: relative; background: resolve(index/logo-brand-line.png) no-repeat center center; line-height: normal; .iconfont { position: absolute; left: 50%; font-size: 32px; &.prev { top: 10px; margin-left: -48px; } &.next { bottom: 12px; margin-left: 20px; } } } .brand-more { font-size: 16px; &:hover { text-decoration: underline; } } } .categorys-list { ul { width: 1158px; } li { float: left; margin: 0 8px 8px 0; width: 185px; height: 248px; &.cate-item0 { width: 185px; height: 504px; } &.cate-item1 { width: 377px; height: 504px; } img { display: block; width: 100%; height: 100%; } } } /* 新人专享 */ .new-user { .new-user-banner > img { width: 100%; height: 368px; } .new-user-prolist { height: auto; margin-top: 10px; .img-brand-switch { display: block; a { margin: -30px 0 0; width: 60px; height: 60px; line-height: 60px; } a .iconfont { font-size: 30px; } } } .new-user-list { .img-item { float: left; } .good-info { display: inline-block; width: 185px; padding: 18px; margin-bottom: 0; background-color: #f5f5f5; .tag-container, .brand { display: none; } .good-detail-img { height: 247px; } } .good-detail-text { > a { font-weight: bold; margin-top: 0; } .price { font-weight: bold; } .market-price { color: #000; } .sale-price { color: #d62238; } .new-user-tag { background-color: #d62238; color: #fff; font-weight: normal; padding: 3px 10px; margin-left: 10px; } } } } .floor-header { position: relative; margin: 80px 0 40px; .floor-title { margin: 0 auto; width: 298px; height: 31px; line-height: 31px; border: 1px solid #000; font-size: 16px; text-align: center; } .header-navs { position: absolute; padding: 10px 0; top: 0; right: 0; font-size: 14px; li { float: left; padding: 1px 15px; border-left: 1px solid #ccc; &:first-child { border-left: none; } &:hover { text-decoration: underline; } a { color: #333; } } } } }