215 lines
3.2 KiB
Plaintext
215 lines
3.2 KiB
Plaintext
page, .container {
|
|
background: #efeff4;
|
|
}
|
|
|
|
/*隐藏滚动条*/
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
}
|
|
|
|
.sharp-tabs {
|
|
background: #fff;
|
|
}
|
|
|
|
.sharp-tabs .sharp-tabs--container {
|
|
background: #30353c;
|
|
}
|
|
|
|
.sharp-tabs .sharp-tabs--empty {
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item {
|
|
position: relative;
|
|
min-width: 170rpx;
|
|
height: 110rpx;
|
|
background: #30353c;
|
|
color: #fff;
|
|
padding: 15rpx 45rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item .item-time {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item .item-status {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item .item-title {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item.active {
|
|
background: #fd4a5f;
|
|
}
|
|
|
|
.sharp-tabs .tabs-item.active::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 999;
|
|
bottom: -15rpx;
|
|
left: 50%;
|
|
margin-left: -12rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border: 20rpx solid #fd4a5f;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
/* 活动状态 */
|
|
|
|
.sharp-active {
|
|
background: #fff;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.sharp-active .active-status {
|
|
font-size: 32rpx;
|
|
color: #fd4a5f;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.sharp-active .active-status .active-status--icon {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.sharp-active .active-status .active-status--time {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
/* 倒计时 */
|
|
|
|
.active--count-down {
|
|
font-size: 26rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.active--count-down .clock-text {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.active--count-down .clock-time {
|
|
background: #252525;
|
|
color: #fff;
|
|
padding: 0 8rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.active--count-down .clock-symbol {
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
/* 商品列表 */
|
|
|
|
.bargain-hall {
|
|
padding-top: 20rpx;
|
|
/* background: #fff; */
|
|
}
|
|
|
|
.goods-item {
|
|
background: #fff;
|
|
padding: 30rpx 16rpx;
|
|
border-bottom: 1rpx solid #e7e7e7;
|
|
}
|
|
|
|
.goods-item .goods-image image {
|
|
display: block;
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
}
|
|
|
|
.goods-item .goods-info {
|
|
width: 498rpx;
|
|
padding-top: 8rpx;
|
|
margin-left: 15rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.goods-item .goods-info .goods-name {
|
|
font-size: 28rpx;
|
|
min-height: 72rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
/* 秒杀进度条 */
|
|
|
|
.yoo-progress {
|
|
position: relative;
|
|
width: 70%;
|
|
height: 14px;
|
|
border-radius: 6px;
|
|
background: rgb(248, 182, 182);
|
|
}
|
|
|
|
.yoo-progress--portion {
|
|
width: 0%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
background: linear-gradient(to right, rgb(247, 102, 83), #fd4a5f);
|
|
}
|
|
|
|
.yoo-progress--text {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
line-height: 1.6;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.sharp-sales {
|
|
margin-left: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #fd4a5f;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 秒杀价格 */
|
|
|
|
.sharp-price {
|
|
margin-top: 40rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.seckill-price {
|
|
font-size: 32rpx;
|
|
color: #fd4a5f;
|
|
margin-bottom: -2rpx;
|
|
}
|
|
|
|
.original-price {
|
|
margin-left: 5rpx;
|
|
font-size: 24rpx;
|
|
color: #818181;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* 立即参加按钮 */
|
|
|
|
.opt-touch {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 10rpx;
|
|
}
|
|
|
|
.touch-btn {
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
background: #fd4a5f;
|
|
border-radius: 30rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|