pika_shangjia/pages/topic/topic.css

/* pages/topic/topic.wxss */
/* .banner{padding: 20rpx 20rpx 0;}
.banner image{width: 100%;height: 255rpx;border-radius: 12rpx;} */
/* 分块一 */
.list1{padding: 0 20rpx 20rpx;}
.list1 .li{background: #fff;border-radius: 12rpx;padding: 20rpx;overflow: hidden;align-items: flex-start;margin-top: 20rpx;}
.liimg{width: 200rpx;height: 200rpx;border-radius: 12rpx;margin-right: 20rpx;}
.list1 .li .info{overflow: hidden;/* height: 200rpx; */}
.list1 .li .title{font-size: 28rpx;color: #333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.list1 .li .infos{font-size: 24rpx;color: #999;margin: 25rpx 0 40rpx;/* height: 20rpx; */}
.operate{justify-content: space-between;align-items: center;}
.price{font-size: 25rpx;color: #FE0419;align-items: center;}
.price text{font-size: 38rpx;font-weight: bold;}
.price text.del{font-size: 24rpx !important;color: #999;text-decoration: line-through;margin-left: 15rpx;font-weight: normal;}
.btn{width:150rpx;height:50rpx;background:linear-gradient(90deg,rgba(254,147,76,1) 0%,rgba(253,58,49,1) 100%);font-size: 24rpx;color: #fff;text-align: center;line-height: 50rpx;border-radius: 25rpx;}
/* yml */
.jsdimgs1{position: relative;}
.jsdimg1{position: absolute;top: 5rpx;left: 0rpx;width: 82rpx;height: 36rpx;}
/* 分块二 */
.list2{flex-wrap: wrap;padding: 0 20rpx 20rpx;}
.list2 .li{background: #fff;border-radius: 10rpx;width: 345rpx;margin: 20rpx 20rpx 0 0;overflow: hidden;}
.list2 .li:nth-child(2n){margin-right: 0;}
.jsdimgs{width: 345rpx;height: 345rpx;position: relative;}
.jsdpro{width: 100%;height: 100%;border-radius: 10rpx 10rpx 0 0;}
.proname{font-size: 28rpx;color: #333;margin-bottom: 20rpx;overflow: hidden;line-height: 36rpx;height: 72rpx;}
.jsdimg{width: 82rpx;height: 36rpx;position: absolute;top: 20rpx;left: 20rpx;}
.jsdinfo{padding: 15rpx 20rpx 30rpx;}
.add-cart image{width: 42rpx;height: 42rpx;}
.list2 .li .price{font-size: 24rpx;}
.list2 .li .price text{font-size: 36rpx;}
/* 分块三 */
.list3{flex-wrap: wrap;padding: 0 20rpx 20rpx;}
.list3 .li{background: #fff;border-radius: 10rpx;width: 220rpx;margin: 20rpx 25rpx 0 0;}
.list3 .li:nth-child(3n){margin-right: 0;}
.list3 .jsdimgs{width: 100%;height: 220rpx;} 
.list3 .li .jsdinfo{padding: 10px 14px 15rpx;}
.list3 .li .proname{margin-bottom: 10rpx;}
.list3 .li .price{font-size: 20rpx;}
.list3 .li .price text{font-size: 28rpx;}
.list3 .li .jsdimg{top: 0;left: 0;}
/* 分隔线一 */
.list4{padding: 0 20rpx;background: #fff;}
.list4 .li{border-radius: 0;background-color: none;border-bottom: 2rpx solid #f4f1f4;padding: 20rpx 0;margin-top: 0;}
.list4 .li:last-child{border-bottom: none;}
/* 分隔线二 */
.list5{padding: 20rpx;background: #fff;}
.list5 .li{width: 355rpx;border-radius: 0;background-color: none;border-bottom: 2rpx solid #f4f1f4;border-right: 2rpx solid #f4f1f4;margin: 0;box-sizing: border-box;padding-top: 20rpx;}
.list5 .li:nth-child(2n){padding-left: 10rpx;border-right: none;}
.list5 .li:nth-child(3n){padding-right: 10rpx;}
.list5 .li:first-child{padding-right: 10rpx;}
.list5 .li:first-child,.list5 .li:nth-child(2){padding-top: 0;}
/* .list5 .li:nth-last-child(2),.list5 .li:last-child{border-bottom: none;} */
.list5 .li:last-child{border-bottom: none;} 
.list5 .li .jsdinfo{padding-bottom: 20rpx;}
.list5 .li:nth-last-child(2) .jsdinfo,.list5 .li:last-child .jsdinfo{padding-bottom: 10rpx;}
/* 分隔线三 */
.list6{padding: 20rpx;background: #fff;}
.list6 .li{width: 237rpx;border-radius: 0;background-color: none;border-bottom: 2rpx solid #f4f1f4;border-right: 2rpx solid #f4f1f4;margin: 0;box-sizing: border-box;padding: 20rpx 10rpx 0;}
.list6 .li:nth-child(3n){padding-right: 0;border-right: none;}
.list6 .li:first-child,.list6 .li:nth-child(3n+1){padding-left: 0;}
.list6 .li:first-child,.list6 .li:nth-child(2),.list6 .li:nth-child(3){padding-top: 0;}
.list6 .li:nth-last-child(3),.list6 .li:nth-last-child(2),.list6 .li:last-child{border-bottom: none;}
.list6 .li .jsdinfo{padding: 10rpx 10rpx 15rpx;}
/* 无分隔线 */
.list7{background: #fff;margin: 20rpx;border-radius: 12rpx;padding: 0 20rpx 15rpx;}
.list7 .li{width: 210rpx;margin-right: 22rpx;}
.list7 .li:nth-child(3n){margin-right: 0;}
.list7 .li .jsdinfo{padding: 10rpx 0 15rpx;}

/* yml  banner图 */
.banner{margin-bottom: 20rpx; height: 300rpx;  overflow: hidden;position: relative;}
.banner2{padding:0 20rpx; height: 300rpx;  overflow: hidden;position: relative;}
.banner .swiper,.banner .swiper image{width: 100%;height: 300rpx; }
.banner2 .swiper,.banner2 .swiper image{width: 100%;height: 300rpx; border-radius: 20rpx;}
.dots{position: absolute;left: 0;right: 0;bottom:20rpx;align-items: center;justify-content: center;}
.dot{background: #fff;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
.dot.active{width: 30rpx;}

.quan{margin: 0 20rpx;background: #FFEBEB;padding: 20rpx;border-radius: 8rpx;}
.quan text{height: 45rpx;background: linear-gradient(90deg, #FE934C 0%, #FD3A31 100%);border-radius: 8rpx;font-size: 24rpx;color: #fff;padding: 0 14rpx;margin-right: 10rpx;line-height: 45rpx;font-weight: normal;}
.rico{width: 12rpx;height: 21rpx;margin-left: 12rpx;}