.main { padding: 0 20rpx; } .spike-bd { margin-bottom: 20rpx; border-radius: 16rpx; padding: 0 20rpx 0 10rpx; display: flex; position: relative; justify-content: space-between; .title-img{ width: 136rpx; height: 36rpx; } .title { font-weight: bold; color: #282828; font-size: 0; .title-img{ width: 136rpx; height: 36rpx; } } .spike-distance { margin-left: 15rpx; position: relative; top: 1.4rpx; display: flex; border: 1px solid #e93323; border-radius: 4rpx; height: 40rpx; padding-left: 92rpx; .bg-red { font-size: 20rpx; color: #fff; background-color: #e93323; padding: 0 10rpx; display: flex; justify-content: center; align-items: center; height: 100%; position: absolute; left: 0; border-radius: 4rpx 0 0 4rpx; } .time { font-size: 22rpx; padding: 0 12rpx; color: #e93323; // height: 36rpx; // line-height: 40rpx; /deep/.red { margin: 0; } } .red-color { color: #e93323; } } .more-btn { color: #282828; font-size: 24rpx; .iconfont { font-size: 22rpx; } } } .colum0{ white-space: nowrap; display: flex; } .combination-item { /* #ifdef MP */ width: 294rpx; height: 140rpx; /* #endif */ /* #ifdef H5 || APP-PLUS */ width: 328rpx; height: 180rpx; /* #endif */ display: inline-block; background-size: 100%; position: relative; background-repeat: no-repeat; border-radius: 16rpx; .img-box { width: 122rpx; height: 122rpx; position: absolute; /deep/image,/deep/.easy-loadimage,/deep/uni-image { width: 122rpx; height: 122rpx; } &.img-box1 { /deep/image,/deep/.easy-loadimage,/deep/uni-image{ border-radius: 16rpx; } } } .name { font-size: 30rpx; color: #333333; font-weight: bold; line-height: 32rpx; } .price { display: block; font-size: 30rpx; font-weight: bold; margin-top: 8rpx; color: #e93323; text { font-size: 20rpx; } } .gocom_btn { display: block; margin-top: 6rpx; color: #fff; font-size: 22rpx; font-weight: bold; width: 120rpx; line-height: 30rpx; text-align: center; border-radius: 16rpx; text { font-weight: normal; font-size: 16rpx; } } &:nth-child(1) { /* #ifdef MP */ height: 336rpx; /* #endif */ /* #ifdef H5 || APP-PLUS */ height: 378rpx; /* #endif */ padding: 20rpx 20rpx 28rpx; float: left; .img-box { width: 210rpx; height: 210rpx; right: 18rpx; bottom: 18rpx; /deep/image,/deep/.easy-loadimage,/deep/uni-image { width: 210rpx; height: 210rpx; } } .gocom_btn { background: linear-gradient(90deg, #fd5d48 0%, #f63724 100%); } } &:nth-child(2), &:nth-child(3) { float: right; padding: 20rpx 18rpx; .name { width: 148rpx; } .img-box { right: 14rpx; bottom: 14rpx; /deep/image,/deep/.easy-loadimage,/deep/uni-image{ width: 122rpx; height: 122rpx; } } } &:nth-child(2) { .gocom_btn { background: linear-gradient(90deg, #fdca1a 0%, #f7b21f 100%); } } &:nth-child(3) { margin-top: 18rpx; .img-box { right: 14rpx; bottom: 14rpx; } .gocom_btn { background: linear-gradient(90deg, #ffb052 0%, #fe961a 100%); } } } .spike-wrapper { width: 100%; &.wrapper2{ overflow: hidden; } .spike-item { display: inline-block; width: 222rpx; margin: 0 20rpx 20rpx 0; &.presell-item { width: 210rpx; .img-box { height: 210rpx; /deep/image,/deep/.easy-loadimage,uni-image{ height: 210rpx; } } .name { margin-top: 8rpx; color: #282828; } } &.assist-item { box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08); } .img-box { position: relative; height: 222rpx; .participants { padding: 4rpx 12rpx; border-radius: 16rpx; background: rgba(0, 0, 0, 0.35); color: #fff; text-align: center; position: absolute; top: 10rpx; left: 10rpx; font-size: 20rpx; } /deep/image,/deep/.easy-loadimage,uni-image { width: 100%; height: 222rpx; border-radius: 16rpx; } .box_bg { position: absolute; bottom: 0; left: 0; text-align: center; width: 149rpx; height: 42rpx; line-height: 42rpx; background-repeat: no-repeat; background-size: cover; color: #fff; font-size: 22rpx; } .msg { position: absolute; left: 10rpx; bottom: 16rpx; width: 86rpx; height: 30rpx; background: rgba(255, 255, 255, 1); border: 1px solid rgba(255, 109, 96, 1); border-radius: 6rpx; font-size: 20rpx; color: $theme-color; } } /deep/.img-box0 image,/deep/.img-box0 .easy-loadimage,/deep/.img-box0 uni-image { border-radius: 0; } .info { margin-top: 10rpx; .name { font-size: 26rpx; } .stock-box { width: 100%; height: 20rpx; background-color: #ffdcd9; border-radius: 20rpx; margin-top: 13rpx; position: relative; color: #fff; font-size: 18rpx; line-height: 20rpx; text-align: center; overflow: hidden; .grabbed { height: 20rpx; background: linear-gradient(#ff0000, #ff5400); position: absolute; top: 0; left: 0; border-radius: 20rpx; } .stock-sales { position: absolute; left: 50%; margin-left: -40rpx; } } .price-box { display: flex; align-items: center; justify-content: start; margin-top: 4rpx; &.presell-price { display: block; .old-price { display: block; margin: 6rpx 0 0 0; } } .tips { display: flex; align-items: center; justify-content: center; width: 28rpx; height: 28rpx; background-color: $theme-color; color: #fff; font-size: 20rpx; border-radius: 2px; } .price { display: flex; color: $theme-color; font-size: 28rpx; font-weight: bold; text { font-size: 22rpx; } } .old-price { display: flex; margin-left: 10rpx; color: #aaaaaa; text-decoration: line-through; font-size: 20rpx; text { font-size: 18rpx; } } } } .assist-info { .price { display: flex; color: $theme-color; font-size: 28rpx; font-weight: bold; margin-top: 8rpx; text { font-size: 18rpx; } .assist_price { font-size: 20rpx; display: inline-block; width: 82rpx; height: 32rpx; text-align: center; line-height: 30rpx; background: #ffeae5; border-radius: 4rpx; } } &.assist-info1{ padding-bottom: 20rpx; } .price-box { padding: 15rpx 15rpx 8rpx; .name { font-size: 24rpx; color: #333; line-height: 30rpx; } } .initiate_btn { width: 100%; height: 48rpx; line-height: 48rpx; background: linear-gradient(90deg, #ff0000 0%, #ff5400 100%); text-align: center; color: #fff; font-size: 24rpx; border-radius: 0 0 16rpx 16rpx; margin: 0 auto; &.initiate_btn1{ width: 90%; border-radius: 24rpx; } } } } &.wrapper1{ .spike-item{ width: 210rpx; } } }