body { color: #333333; } .ns-supply-index { background-color: #FFFFFF; } .ns-goods-store { padding: 20px; } .ns-goods-store .ns-store-info { width: 100%; height: 115px; margin-top: 10px; margin-bottom: 20px; padding: 20px; background-color: #f8f8f8; display: flex; box-sizing: border-box; position: relative; } .ns-goods-store .ns-store-info .store-img { flex-shrink: 0; width: 75px; height: 75px; margin-right: 10px; } .ns-goods-store .ns-store-info .store-img img { width: 100%; height: 100%; object-fit: cover; } .ns-goods-store .ns-store-info .store-info { flex: 1; } .ns-goods-store .ns-store-info .store-name-wrap { display: flex; justify-content: space-between; align-items: center; } .ns-goods-store .ns-store-info .store-btn .layui-btn { height: 24px; line-height: 22px; padding: 0 10px; } .ns-goods-store .ns-store-info .store-intro { font-size: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 7px 0 8px; color: #646566; } .ns-goods-store .ns-store-info .store-goods span { color: #969799; font-size: 12px; margin-right: 20px; } .ns-goods-store .ns-store-score { position: absolute; width: 200px; height: 115px; top: 0; right: 0; padding: 20px 30px; box-sizing: border-box; line-height: 25px; font-size: 12px; font-weight: 600; color: red; text-align: right; } .ns-goods-store .ns-store-score span { font-weight: 500; color: #646566; } .ns-goods-list { width: 100%; padding: 0 10px; box-sizing: border-box; display: flex; flex-wrap: wrap; } .ns-goods-li { width: 170px; overflow: hidden; margin-right: 32.5px; margin-bottom: 30px; } .ns-goods-li:nth-child(5n) { margin-right: 0; } .ns-goods-li .ns-goods-img { width: 100%; height: 170px; box-sizing: border-box; overflow: hidden; position: relative; } .ns-goods-li .ns-goods-img img { width: 100%; height: 100%; object-fit: cover; transition: all 1s ease-out; } .ns-goods-li .ns-goods-img .ns-goods-sale { font-size: 12px; position: absolute; bottom: 0; padding-left: 10px; width: 100%; height: 30px; line-height: 30px; background-color: rgba(0, 0, 0, 0.6); color: #c8c9cc; box-sizing: border-box; } .ns-goods-li .ns-goods-img .ns-goods-sale .sale-label { opacity: .66; } .ns-goods-li .ns-goods-img .ns-goods-sale .sale-num { display: inline-block; margin-left: 10px; color: #fff; } .ns-goods-li .ns-goods-img .hover-content { display: none; font-size: 12px; position: absolute; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #ff8143; color: #fff; font-weight: bolder; } .ns-goods-li .ns-goods-img:hover { border: 2px solid #ff8143; } .ns-goods-li .ns-goods-img:hover img { transform: scale(1.2); } .ns-goods-li .ns-goods-img:hover .hover-content { display: block; } .ns-goods-li .ns-goods-name { font-size: 12px; color: #323233; margin: 5px 0; height: 42px; } .ns-goods-li .ns-goods-name:hover { color: #ff8143; } .ns-goods-li .ns-goods-info { position: relative; } .ns-goods-li .ns-goods-info p { font-size: 12px; } .ns-goods-li .ns-goods-info p span:first-child { color: #969799; display: inline-block; } .ns-goods-li .ns-goods-info .ns-goods-profit { font-size: 15px; } .ns-goods-li .ns-goods-info p:nth-child(2) { margin-top: 5px; } .ns-goods-li .ns-goods-info p:nth-child(3) { position: absolute; right: 0; bottom: 0; cursor: pointer; }