.sku-content { position: fixed; bottom: 0px; z-index: 9999; } .sku-card { width: 750rpx; box-sizing: border-box; border-radius: 30rpx 30rpx 0 0; background: #fff; overflow: hidden; padding: 40rpx 40rpx 0 40rpx; } .sku-card .close { position: absolute; right: 28rpx; top: 28rpx; width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; } .sku-card .close .image { width: 26rpx; height: 26rpx; } .sku-card .sku-header { display: flex; align-items: flex-start; margin-bottom: 40rpx; } .sku-card .sku-header .sku-img { width: 160rpx; height: 160rpx; border: 1rpx solid #e4e4e4; margin-right: 30rpx; } /* .sku-card .sku-header .sku-img image { border: none; } */ .sku-card .sku-header .sku-desc { display: flex; flex-direction: column; } .sku-card .sku-header .sku-desc .sku-title { width: 390rpx; min-height: 60rpx; margin-bottom: 16rpx; color: #444; font-weight: bold; position: relative; } .sku-card .sku-header .sku-desc .sku-title .span { position: absolute; width: 390rpx; height: 60rpx; left: 0; top: 0; font-size: 26rpx; line-height: 30rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: initial; white-space: normal; } .sku-card .sku-header .sku-price { display: flex; align-items: flex-end; margin-bottom: 12rpx; font-size: 24rpx; line-height: 24rpx; } .sku-card .sku-header .sku-price .sale-price { color: #ff758c; margin-right: 12rpx; margin-bottom: -4rpx; } .sku-card .sku-header .sku-price .sale-price .span { font-size: 56rpx; line-height: 56rpx; margin-left: 8rpx; font-weight: bold; } .sku-card .sku-header .sku-price .market-price { text-decoration: line-through; color: #999; margin-right: 30rpx; } .sku-card .sku-header .sku-switch-on { font-size: 24rpx; color: #444; } .sku-card .sku-msg { width: 670rpx; margin: 0 auto 60rpx; border-radius: 16rpx; background: linear-gradient(to right, #fff7f0, #fff4ec); display: flex; align-items: flex-start; padding: 20rpx; color: #ca7e57; box-sizing: border-box; } .sku-card .sku-msg .tag { border-radius: 16rpx; border: 1rpx solid #ffa49c; font-size: 20rpx; line-height: 28rpx; font-weight: 500; padding: 0 8rpx; margin-right: 8rpx; color: #4facfe; white-space: nowrap; vertical-align: middle; } .sku-card .sku-msg .sku-activity-msg { color: #ca7e57; font-size: 24rpx; line-height: 32rpx; width: 540rpx; font-weight: 500; } .sku-card .sku-spec { width: 670rpx; margin: 0 auto 40rpx; display: flex; align-items: flex-start; } .sku-card .sku-spec .title { font-size: 26rpx; line-height: 50rpx; margin-right: 8rpx; } .sku-card .sku-spec .spec-list { width: 600rpx; display: flex; flex: 1; flex-wrap: wrap; } .sku-card .sku-spec .spec-list .span { position: relative; height: 46rpx; background: #f6f6f6; border: 2rpx solid #f6f6f6; text-align: center; line-height: 46rpx; font-size: 26rpx; margin: 0 8rpx 20rpx 0; color: #666; border-radius: 46rpx; padding: 0 30rpx; display: block; white-space: nowrap; } .sku-card .sku-spec .spec-list .on { border-color: #ffa49c; color: #4facfe; background: #fff; } .sku-card .sku-spec .spec-list .disabled { color: #ccc; } .sku-card .sku-num-content { width: 670rpx; margin: 0 auto 52rpx; display: flex; align-items: center; } .sku-card .sku-num-content .title { width: 80rpx; font-size: 26rpx; line-height: 50rpx; } .sku-card .sku-num-content .msg { width: 420rpx; color: #aaa; font-size: 26rpx; line-height: 50rpx; text-align: right; } .sku-card .sku-num-content .even-num { width: 420rpx; color: #4facfe; font-size: 26rpx; line-height: 50rpx; white-space: nowrap; text-align: right; } .sku-card .sku-confirm { width: 750rpx; background: linear-gradient(to right,#4facfe,#00f2fe); line-height: 96rpx; text-align: center; color: #fff; font-size: 30rpx; margin: 0 0 0 -40rpx; padding: 0; border-radius: 0; font-weight: bold; padding-bottom: calc(env(safe-area-inset-bottom) - 30rpx); } .sku-card .sku-confirm::after{ border: 0; } .i-input-number { color: #495060; display: flex; align-items: center; position: relative; } .i-input-number .num-btn { width: 48rpx; height: 48rpx; display: inline-block; vertical-align: middle; } .icon-btn { width: 48rpx; height: 48rpx; } .i-input-number-minus { border-right: none; border-radius: 4rpx 0 0 4rpx; } .i-input-number-plus { border-left: none; border-radius: 0 4rpx 4rpx 0; } .i-input-number-text { text-align: center; height: 48rpx; width: 66rpx; font-size: 24rpx; line-height: 48rpx; color: #495060; z-index: 0; }