.shop-index { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; &.new-shop { position: initial; overflow: initial; #pos-nav { z-index: 99; } #pos-list { z-index: 100; } #pos-nav, #pos-list { position: fixed; left: 0; top: 0; } .nav { li { height: 100%; line-height: 100%; margin-top: 0px; border-left: none; .text { display: block; width: 100%; border-left: 1px solid #e0e0e0; margin-top: 30px; height: 28px; } &:first-child { .text { border-left: none; } } } } .shop-foot-wrapper { position: fixed; left: 0; } } .nav-main { margin-bottom: 30px; } .branner-top { width: 100%; height: 200px; position: relative; overflow: hidden; .shop-back-img { height: 100%; width: 100%; } } .logo { position: absolute; overflow: hidden; left: 30px; bottom: 30px; width: 100px; height: 100px; } .store-name { color: #fff; font-size: 28px; position: absolute; overflow: hidden; left: 148px; bottom: 20px; } .collect { width: 128px; height: 49px; position: absolute; bottom: 30px; right: 30px; border-radius: 10px; text-align: center; background-size: contain; } .already-collect { width: 128px; height: 50px; border-radius: 10px; background-image: url("/product/already-collect.png") no-repeat; background-size: contain; } .not-collect { width: 128px; height: 50px; border-radius: 10px; background-image: url("/product/not-collect.png") no-repeat; background-size: contain; } .nav { width: 100%; height: 88px; margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; list-style: none; font-size: 28px; background: #fff; overflow: hidden; border-sizing: border-box; border-bottom: 1px solid #e0e0e0; z-index: 2; li{ display: block; height: 28px; float: left; line-height: 28px; width: 24.7%; text-align: center; border-left: 1px solid #e0e0e0; margin-top: 30px; border-sizing: border-box; color: #b0b0b0; &:first-child { border-left: none; } a { color: #b0b0b0; } } .color { color: #444; } } .main { background: #f0f0f0; padding-bottom: 40px; overflow: hidden; } .banner-area { @extend .banner-top; margin-bottom: 30px; } .coupon { width: 100%; padding: 30px 0; overflow: hidden; img { width: 245px; height: 120px; vertical-align: top; margin-left: 30px; float: left; } } .multi-brands { width: 100%; height: 270px; background: #fff; border: 1px solid #e0e0e0; border-top: none; font-size: 20px; text-align: center; padding-top: 25px; margin-bottom: 30px; overflow: hidden; p { font-size: 30px; } } .multi-browse { margin-top: 50px; } .brand-img { margin-left: 30px; width: 140px; height: 150px; overflow: hidden; padding-bottom: 20px; float: left; p { font-size: 18px; color: #b0b0b0; padding-top: 10px; height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } img { height: 120px; } } .spring { margin: 0 15px; overflow: hidden; li { width: 50%; height: 160px; float: left; text-align: center; list-style: none; display: list-item; img { width: 275px; height: 160px; border-radius: 10px; vertical-align: top; } } } .hot-category .floor-header { margin: 0; } .popularity-title, .hot-category .floor-header { background: #fff; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; color: #444; text-align: center; height: 100px; line-height: 100px; font-size: 30px; margin-top: 30px; position: relative; } .hot-category .floor-header { border-bottom: none; } .more { position: absolute; right: 30px; top: 0; bottom: 0; color: #b0b0b0; font-size: 50px; font-family: "iconfont" !important; font-style: normal; text-decoration: none; } .product-list { margin-left: auto; margin-right: auto; width: 610px; overflow: hidden; background: #fff; border-bottom: 30px solid #f0f0f0; li { width: 275px; height: 368px; margin-top: 50px; margin-left: 15px; margin-right: 15px; float: left; text-align: center; list-style: none; img { width: 275px; height: 368px; vertical-align: top; } } } .list-price { height: 60px; background: #aaaeac; color: #fff; font-size: 22px; margin-top: -60px; position: relative; opacity: 0.9; padding-left: 15px; p { margin: 0; line-height: 32px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .red { color: red; } .icon { position: relative; color: #b0b0b0; i { position: absolute; } .up { top: -5px; left: 8px; } .down { top: 8px; left: 8px; } } .product-warp{ background-color: #fff; } .goods-container { position: relative; min-height: 440px; /* padding-left: 15px; */ padding-top: 20px; border-bottom: 1px solid #e0e0e0; } .pos-list { border-bottom: 1px solid #e6e6e6; li { position: relative; } .default .iconfont, .new .iconfont, .price .iconfont, .discount .iconfont { transform: scale(0.8); -webkit-transform: scale(0.8); font-weight: bold; } .default:after, .newest:after, .new:after, .price:after, .discount:after { height: 28px; content: ''; border-left: 1px solid #e0e0e0; position: absolute; top: 25px; left: 163px; } } .discount-area { @extend .sale-page; #list-nav { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .list-nav li { display: block; height: 80px; float: left; line-height: 80px; width: 24.8%; text-align: center; border-sizing: border-box; position: relative; span { padding-top: 0; font-size: 28px; } &.default:after, &.newest:after, &.new:after, &.price:after, &.discount:after { height: 28px; content: ''; border-left: 1px solid #e0e0e0; position: absolute; top: 25px; left: 163px; } } .active .cur{ color: #444; } .list-nav .icon .up { top: -28px; } .list-nav .icon .down { top: -14px; } .goods-container { padding-top: 30px; padding-bottom: 100px; } } .search-area { @extend .search-page; } .hide { display: none; } .shop-foot-wrapper { position: absolute; bottom: 0; display: table; width: 100%; height: 88px; line-height: 88px; font-size: 28px; background: #fff; border-top: 1px solid #e0e0e0; z-index: 2; ul { display: table-row; } li { display: table-cell; text-align: center; .wall { width: 0; height: 28px; margin-top: 30px; float: right; border-right: 1px solid #e0e0e0; display: inline-block; } } .sub-group { position: absolute; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; bottom: 104px; width: 40%; margin-left: 5%; dl { padding: 0 30px; margin: 0 auto; } dd { line-height: 80px; text-align: center; border-top: 1px solid #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; a { color: #444; } } dd:first-child { border-top: 0; } } .sharp { position: absolute; width: 100%; height: 10px; background: resolve('product/sharp.png') no-repeat center center; } .foot-list-3 .sub-group { width: 29%; margin-left: 2%; } } .bytouch { background: #eee; } .new-arrival { padding-top: 30px; overflow: hidden; padding-left: 15px; background: #fff; padding-bottom: 100px; } .popularity { padding-top: 30px; overflow: hidden; padding-left: 15px; background: #fff; padding-bottom: 100px; } .pos-list { @extend .sale-page; background: #fff; width: 100%; overflow: hidden; li { display: block; height: 78px; float: left; line-height: 78px; width: 24.8%; text-align: center; border-sizing: border-box; span { font-size: 28px; } a { display: block; box-sizing: border-box; text-align: center; width: 100%; height: 100%; color: #b0b0b0; } } .active .cur { color: #444; } .active a { color: #444; } .new .iconfont { transform: scale(0.8); font-weight: bold; } .price .iconfont { transform: scale(0.8); font-weight: bold; } .filter .iconfont { font-size: 22px; transition: transform 0.1 ease-in; } .filter.active .iconfont { transform: rotate(-180deg); } } .pos-list .icon .up { top: -28px; } .pos-list .icon .down { top: -14px; } .category-list-top-board { border-top: 1px solid #e0e0e0; } .category-list-last-li { border-right: 1px solid #e0e0e0; } .category-list-only-one-row { border-top: none!important; } .new-list { width: 100%; background-color: #fff; font-size: 28px; color: #444; position: absolute; z-index: 102; &.classics { position: fixed; top: 80px; left: 0px; } &.full-height { height: 100%; } li { margin-left: 35px; height: 88px; line-height: 88px; border-bottom: 1px solid #e0e0e0; padding-right: 38px; &:last-child { border-bottom: none; } &.active { background: resolve('product/shop/check.png') no-repeat 94% center; background-size: 36px 26px; } } } .no-result { margin-top: 320px; color: #ccc; vertical-align: middle; text-align: center; font-size: 1.2em; } } .shop-index + .filter-mask { margin-top: 1px; z-index: 101; .filter-body { overflow: auto; } .classify { height: auto; } &.call-by-fix { top: 78px; } } .new-shop + .filter-mask { margin-top: initial; position: fixed; top: 46px; &.call-by-fix { top: 80px; position: fixed; left: 0; } }