.center-content { width: 1150px; margin-left: auto; margin-right: auto; } .sale-page { margin-top: 10px; .slide-container { position: relative; height: 450px; ul { width: 100%; height: 100%; position: relative; } li { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } li > a { width: 100%; height: 100%; display: block; } .slide-wrapper { height: 100%; } .slide-switch { position: relative; width: 1150px; left: 50%; margin-left: -575px; top: -225px; display: block; } } /* 大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; } } } .activity-entry { margin: 10px 0; width: 1150px; .entry-item { display: block; margin-right: 10px; background: #f5f5f5; &.last { margin-right: 0; } } .entry-text { padding-left: 160px; font-size: 16px; } .icon { width: 70px; height: 70px; margin-left: 48px; background-repeat: no-repeat; } .title { font-size: 30px; font-weight: bold; line-height: 48px; } } .floor-title { margin: 80px auto 40px; width: 300px; font-size: 16px; line-height: 30px; text-align: center; border: 1px solid #000; } .brand-sale { .sale-group-big { width: 1150px + 10px; .item { width: 375px; margin-right: 8px; margin-bottom: 10px; } .pic { position: relative; height: 375px; } .time { @include box-sizing(border-box); position: absolute; left: 0; bottom: 0; opacity: 0.7; width: 100%; letter-spacing: 1px; font-size: 16px; line-height: 30px; text-align: right; color: #fff; background: #4e4e4e; span { margin-right: 10px; } } .time-span { margin-right: 20px; } .detail { background: #f5f5f5; } .brand { margin: 10px; } .text { padding: 24px 10px 48px 0; font-size: 16px; padding-bottom: 20px; color: #fd5659; } .discount { font-size: 28px; font-weight: bold; text-align: right; margin-right: 20px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; .num { font-size: 38px; max-width: 120px; overflow: hidden; } } .active-name { font-size: 15px; font-weight: bold; text-align: center; margin-top: 10px; } .title { font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } } .sale-group { width: 1150px + 8px; .item { width: 183px; margin-right: 8px; margin-bottom: 10px; } .pic { width: 100%; display: block; } .detail { padding: 14px 10px; background: #f5f5f5; text-align: center; line-height: 20px; } .title { height: 20px; width: auto; font-size: 10px; line-height: 20px; font-weight: 500; text-align: center; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; span { font-size: 18px; color: #ff0705; display: inline-block; } } .time { font-size: 13px; font-weight: 600; } } } .sale-nav { display: inline-block; width: 100%; height: 40px; background-color: #f5f5f5; } li { cursor: pointer; float: left; width: 20%; height: 40px; line-height: 40px; text-align: center; background-color: #f5f5f5; color: #6d6d6d; margin-bottom: 10px; &.active { color: #fff; background-repeat: no-repeat; background-size: 100% 100%; } &.green { &.active { color: #fff; background-image: resolve("sale/navactive-green-middle.png"); background-repeat: no-repeat; background-size: 100% 100%; } &.first.active { background-image: resolve("sale/navactive-green-first.png"); } &.last.active { background-image: resolve("sale/navactive-green-last.png"); } } &.yellow { &.active { color: #fff; background-image: resolve("sale/navactive-yellow-middle.png"); background-repeat: no-repeat; background-size: 100% 100%; } &.first.active { background-image: resolve("sale/navactive-yellow-first.png"); } &.last.active { background-image: resolve("sale/navactive-yellow-last.png"); } } &.red { &.active { color: #fff; background-image: resolve("sale/navactive-red-middle.png"); background-repeat: no-repeat; background-size: 100% 100%; } &.first.active { background-image: resolve("sale/navactive-red-first.png"); } &.last.active { background-image: resolve("sale/navactive-red-last.png"); } } } @media screen and (min-width: 1150px) { .floor-header { margin: 80px 0 40px; .header-navs li { padding: 1px 15px; } } } .commodity-list ul { width: 1004px; } .commodity-item { float: left; width: 241px; margin: 0 10px 0 0; } .commodity-img { position: relative; height: 323px; text-align: center; img { width: 100%; height: 100%; vertical-align: middle; } .top-tag { position: absolute; width: 60px; height: 60px; top: 10px; right: 10px; line-height: 60px; font-size: 20px; color: #fff; } .few-tag { position: absolute; bottom: 0; width: 100%; height: 20px; background: #ffac5b; color: #fff; line-height: 20px; text-align: center; font-size: 12px; } } .commodity-content { padding-top: 10px; height: 69px; overflow: hidden; .commodity-name { font-size: 12px; color: #000; line-height: 18px; text-align: center; } .commodity-price { position: relative; margin-top: 3px; text-align: center; line-height: 20px; color: #000; span { display: inline-block; *display: inline; *zoom: 1; font-size: 12px; padding: 0 15px; &.origin { text-decoration: line-through; } } strong { font-weight: normal; color: #565656; font-size: 13px; } } } @media screen and (min-width: 1150px) { .commodity-list ul { width: 1160px; } .commodity-item { width: 280px; } .commodity-img { height: 374px; } .commodity-content { padding-top: 14px; height: 77px; } } .good-info { .good-detail-text { > a { margin-top: 16px; line-height: 1.5; display: block; text-align: center; font-weight: 600; @mixin ellipsis ; } > .price { margin-top: 5px; text-align: center; font-weight: bold; } .brand { display: none; } .market-price { text-decoration: line-through; margin-left: 30px; color: #444; font-weight: bold; } } } .sale-vip-box { .good-info { width: 280px; height: 380px; margin-right: 10px; float: left; margin-bottom: 100px; } .good-detail-img { height: 100%; } .good-detail-text { > a { margin-top: 16px; line-height: 1.5; display: block; text-align: center; font-weight: 600; @mixin ellipsis ; } > .price { margin-top: 5px; text-align: center; font-weight: bold; } .brand { display: none; } .market-price { text-decoration: line-through; color: #444; font-weight: bold; } .vip-span { background-repeat: no-repeat; background-size: 100% 100%; line-height: 20px; color: #fff; font-style: italic; margin-right: 5px; margin-left: 10px; margin-bottom: -3px; padding-right: 5px; padding-left: 5px; display: inline-block; } .vip-tag { background-image: resolve("sale/vip.png"); margin-left: 30px; width: 20px; height: 15px; line-height: 16px; padding-right: 7px; } .vip-1 { background-image: resolve("product/silver.png"); margin-left: 30px; width: 16px; height: 16px; } .vip-2 { background-image: resolve("product/golden.png"); margin-left: 30px; width: 16px; height: 16px; } .vip-3 { background-image: resolve("product/platinum.png"); margin-left: 30px; width: 16px; height: 16px; } } } } .sale-discount-page { .sale-title { margin: 30px 0; font-size: 12px; line-height: 26px; .title { margin-right: 20px; font-size: 16px; display: inline-block; vertical-align: middle; } .discount { display: inline-block; margin-right: 10px; padding: 0 10px; height: 25px; vertical-align: center; font-weight: lighter; line-height: 25px; color: #fff; background: #ff575c; } .time { .iconfont { margin-right: 5px; } } } .sort { padding: 10px; border: 1px solid #eaeceb; li { display: inline-block; margin-right: 15px; padding: 0 10px; font-size: 12px; line-height: 20px; color: #444; &.title { margin-right: 0; font-weight: bold; } &.active { color: #666; border: 1px solid #000; } } } .pager { float: right; } .good-info { .good-detail-text { > .price { margin-top: 5px; text-align: left; font-weight: bold; position: relative; } .brand { display: none; } .sale-price { margin-left: 20px; } .market-price { text-decoration: line-through; margin-left: 5px; margin-right: 0; color: #444; font-weight: bold; } strong { font-weight: normal; color: #565656; font-size: 13px; float: left; } .vip-span { background-repeat: no-repeat; background-size: 100% 100%; line-height: 20px; color: #fff; font-style: italic; margin-right: 5px; margin-left: 10px; padding-right: 5px; padding-left: 5px; float: left; } .vip-tag { background-image: resolve("sale/vip.png"); width: 20px; height: 15px; } .vip-1 { background-image: resolve("product/silver.png"); width: 18px; height: 16px; } .vip-2 { background-image: resolve("product/golden.png"); width: 18px; height: 16px; } .vip-3 { background-image: resolve("product/platinum.png"); width: 18px; height: 16px; margin-bottom: 1px; } } } }