H5_module/integralshop/index/index.css

/* pages/integralshop/integralshop.wxss */
.banner{position:absolute;
 /*  #ifndef  H5  */
 z-index: -1;
 /* #endif */
height: 280rpx;width: 100%;}
.banner image{width: 100%;height:280rpx}
.banner::after{content: '';display: block;width: 110%;background: linear-gradient(#FD3A31,#FE934C);height: 280rpx;position: absolute;top: 0;left: -5%;border-radius: 0 0 10% 10%;}
.top{padding: 50rpx 0 0 40rpx;}
.top .my{font-size: 28rpx; color: #FFFFFF;align-items: center;}
.top .my image{width: 29rpx;height: 27rpx;margin-right: 9rpx;}
.top .integral{align-items: center;justify-content: space-between;}
.top .integral .txt{font-size: 60rpx;color: #FFFFFF;}
.top .integral .rule{font-size: 30rpx;
	color: #FC9816;
	background: linear-gradient(90deg, #FFF6E9 0%, #FCEEDB 60%, #FFDFB5 100%);
	height: 64rpx;
	border-radius: 32rpx 0 0 32rpx;
	padding: 0 30rpx 0 27rpx;
	align-items: center;
	justify-content: center;}
.top .integral .rule image{ width: 34rpx;height: 32rpx;margin-right: 11rpx;}
.nav{margin: 50rpx 40rpx;border-radius: 12rpx;background: #fff;position: relative;z-index: 3;}
.nav .item{padding: 31rpx 0;justify-content: space-between;}
.nav .item view{color: #333333;align-items: center;
    flex: 0.5;
    justify-content: center;
    font-size: 26rpx;}
.grule {
    border-right: 1rpx solid rgba(232,232,232,.6);
}	
/* .nav .item image{ width: 98rpx;height: 98rpx;} */

/* 筛选 */
.cont{background: #fff; margin-top: 35rpx;}
.filter{padding: 0 20rpx; border-bottom:2rpx solid rgba(232,232,232,.5) ;}
.filter1{position: relative;z-index: 100;}
.filter .li{width: 33.33%;display: flex;display: -webkit-flex;align-items: center;justify-content: center;padding: 25rpx 0;font-size: 30rpx;color: #333;}
.filter .li.active{color: #FE0419}
.updown{width: 14rpx;height: 8rpx;margin-left: 9rpx;}
.cont .pop .item{position: absolute;z-index: 100;background: #fff;width: 100%; border-radius: 0 0 30rpx 30rpx;}
.cont .pop .item view{padding: 30rpx; justify-content: space-between; align-items: center; font-size: 28rpx;}
.cont .pop .item image{width: 30rpx;height: 20rpx;}
.cont .brbtm{border-bottom: 2rpx solid rgba(232,232,232,.5);}
.cont .pop .active{color: #FE0419;}
/* 产品展示 */
.pintuan{ position: relative;}
.pintuan .li{margin-top: 24rpx;padding-bottom: 35rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid rgba(232,232,232,.5);}
.pintuan .li:last-child{border-bottom: none;}
.pinimgs{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;position: relative;}
.pinimg{display: block;width: 100%;height: 100%;border-radius: 10rpx;}
.tuan{display: block;width: 87rpx;height: 44rpx;font-size: 22rpx;color: #fff;text-align: center;line-height: 34rpx;position: absolute;top: 21rpx;left: -10rpx;}
.tuan image{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.tuan text{position: relative;z-index: 2;display: block;}
.pininfo{overflow:hidden }
.pininfo .proname{font-size: 28rpx;color: #333;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;}
.pininfo .operate{margin-bottom: 57rpx;}
.pininfo .operate .introduce{color: #999999;font-size: 24rpx;}
.pininfo .price{align-items: center;justify-content: space-between;line-height: 50rpx;}
.pininfo .price .prc{font-size: 24rpx;color: #FE0419;margin-left: 8rpx;}

.pininfo .price .num{font-size: 36rpx;color: #FE0419;}
.pininfo .price .money{font-size: 24rpx;color: #FE0419;margin-left: 4rpx;}
.pininfo .price .btn{width: 130rpx;height: 50rpx;border-radius: 25rpx;background: linear-gradient(90deg, #FF6070 0%, #FE0419 100%);text-align: center;line-height: 50rpx;font-size: 24rpx; color: #fff;}
/* .pininfo .price .baglig{background: linear-gradient(to left,#FE0419,#FF6070);color: #fff;} */
.pininfo .price .file{background: #D1D1D1; color: #999999;}
.more{
  width: 31rpx;
  height: 31rpx;
  margin-right: 13rpx;
}
.detailed{
  width: 28rpx;
  height: 28rpx;
  margin-right: 12rpx;
}