.shopping-cart-good { position: relative; padding-left: 16px; $cartRed: #d0253b; .prevent-img-click { position: absolute; width: 20px; height: 200px; background-color: transparent; z-index: 99; } .none { display: none; } .checkbox { position: absolute; top: 50%; margin-top: -34px; margin-left: 8px; font-size: 28px; &.icon-cb-checked { color: #000; } &.disabled { color: #f0f0f0; } } .few-tag { width: 150px; position: absolute; text-align: center; top: 72%; color: #fff; span { display: inline-block; transform: scale(0.833); } } .gift-tag { background-color: #88be51; } .plus-tag { background-color: #fc1264; } .few-tag-expire { position: absolute; top: 40%; left: 20px; background-color: #7f7f7f; display: inline-block; color: #fff; border-radius: 12px; padding: 4px; font-size: 20px; width: 48px; text-align: center; } .info { float: left; margin-left: 60px; padding: 16px 0; padding-right: 20px; } .fixed-height { height: 2.7rem; } .thumb { float: left; width: 150px; background-size: 100%; background-repeat: no-repeat; } .deps { position: relative; width: 380px; margin-left: 180px; border-bottom: 1px solid #e0e0e0; padding: 0.5rem 0; } .name { display: inline-block; width: 80%; color: #5a5a5a; font-size: 0.6rem; line-height: 0.7rem; } .color-size-row > span { margin-right: 15px; } .color, .size { font-size: 0.6rem; color: #b6b6b6; } .appear-date { float: left; color: $cartRed; display: block; font-size: 0.5rem; } .price { font-size: 0.6rem; color: $cartRed; display: inline; .sale-price { color: #b0b0b0; text-decoration: line-through; } } .count { font-size: 20px; color: #999; display: inline-block; width: 22%; position: absolute; text-align: center; } .low-stocks { display: inline-block; width: 100px; height: 30px; line-height: 30px; font-size: 22px; border: none; color: #fff; text-align: center; float: right; margin-right: 16px; padding: 4px; border-radius: 20px; } .low-stocks { background: #7f7f7f; } .vip { display: inline-block; color: #fff; background: #e01; border-radius: 16px; padding: 0 12px; margin-left: 8px; font-size: 20px; } .la-tag { margin-top: 0.3rem; min-height: 1rem; } .icon-del, .icon-edit { position: absolute; color: #ccc; font-size: 30px; } .icon-del { right: 20px; } .icon-edit { right: 72px; } .opt-panel { position: absolute; width: 220px; right: 0; top: 0; bottom: 0; color: #fff; > div { float: left; box-sizing: border-box; width: 110px; height: 100%; text-align: center; padding: 40px 20px 0; font-size: 15px; } span { display: block; } .put-in-favorite { background: #bbb; } .del { background: #999; .iconfont { margin-bottom: 20px; } } } .calculate-num { float: right; .price { line-height: 60px; font-size: 46px; font-weight: bold; } .count { position: absolute; right: 20px; top: 20px; font-size: 46px; } } .calculate { float: right; border: 1px solid #b0b0b0; border-radius: 0.2rem; p { color: #444; &:first-child { height: 60px; border-bottom: 1px solid #b0b0b0; span { border-left: 1px solid #b0b0b0; border-right: 1px solid #b0b0b0; } } i { width: 72px; height: 60px; float: left; line-height: 60px; text-align: center; } span { width: 96px; height: 60px; float: left; font-size: 40px; line-height: 60px; text-align: center; } &:last-child { span { width: 168px; overflow: hidden; font-size: 36px; text-overflow: ellipsis; white-space: nowrap; } } } } } .shopping-cart-good:last-child { .deps { border: none; } }