H5_module/product/detail/detail.css

/* pages/detail/detail.wxss */
.banner{overflow: hidden;position: relative;background: #fff;}
.swiper,.swiper image{width: 100%;height: 750rpx;}
.dots{position: absolute;left: 0;right: 0;bottom: 11rpx;align-items: center;justify-content: center;}
.dot{background: var(--main) ;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
.dot.active{width: 30rpx;}
.info{padding: 30rpx 0;}
.infos{align-items: center;justify-content: space-between;padding: 0 30rpx;}
.price{font-size: 28rpx;color: #FE0419;align-items: center;flex: 0.5;}
.price text{font-size: 40rpx;color: #FE0419;font-weight: bold;}
.price text.origin{font-weight: normal;font-size: 24rpx;color: #999;text-decoration: line-through;margin-left: 10rpx;}
/* 积分产品 */
.bot .btnfot{flex: 0.5;display: flex;justify-content: space-around;}
.bot .btnbuy{flex: 0.5;display: flex;}
.price text.money{font-size: 26rpx;color: #FE0419;}
.hyprice{align-items: center;margin-left: 15rpx;}
.hyprice text{font-size: 30rpx;color: #333;font-weight: bold;}
.hytxt{position: relative;width: 78rpx;height: 25rpx;margin-left: 8rpx;}
.hytxt image{display: block;width: 78rpx;height: 25rpx;position: absolute;z-index: 1;top: 0;left: 0;}
.hytxt text{font-size: 18rpx;color: #FFD9AF;position: relative;z-index: 2;font-weight: normal;display: block;line-height: 25rpx;text-align: center;padding-left: 5rpx;}
.share{font-size: 20rpx;color: #999;text-align: center;position: relative;flex: 0.1;}
.share::after{content: '';display: block;width: 2rpx;height: 45rpx;background: #e7e7e7;position: absolute;top: 50%;transform: translateY(-50%);left: -9rpx;}
.share image{width: 31rpx;height: 31rpx;margin: 0 auto 10rpx;}
.title{font-size: 30rpx;color: #222;line-height: 40rpx;font-weight: bold;margin-top: 25rpx; padding: 0 30rpx;}
.tag{width: 82rpx;height: 36rpx;display: inline-block;margin: 0 10rpx 0 0;position: relative;top: 7rpx;}
.yushou{display: inline-block;border: 2rpx solid #FE0419;border-radius: 6rpx;font-size: 22rpx;color: #FE0419;height: 30rpx;line-height: 30rpx;padding: 0 10rpx;vertical-align: top;margin-right: 15rpx;margin-top: 5rpx;}
.detinfo .item{padding: 30rpx;border-bottom: 1rpx solid #f6f6f6;}
.detinfo .item:last-child{border-bottom: none;}
.item label{display: block;width: 130rpx;font-size: 28rpx;color: #222;font-weight: bold;line-height: 40rpx; white-space: nowrap;}
.pro-time label{width: auto;margin-right: 30rpx;}
.quan .flex{align-items: center;}
.quan text{display: block;background: #FDF5F3;padding: 0 13rpx;height: 40rpx;line-height: 40rpx;font-size: 24rpx;color: #FF5F08;margin: 0 10rpx 10rpx 0;white-space: nowrap;}
.coupon-list{flex-wrap: wrap;}
.ling{font-size: 24rpx;color: #FF5F08;align-items: center;}
.ling image{width: 14rpx;height: 24rpx;margin-left: 11rpx;}
.address{font-size: 28rpx;color: #333;line-height: 40rpx;}
.huo{font-size: 24rpx;color: #666;line-height: 40rpx;}
.huo text{color: #FE0419;margin-right: 46rpx;font-size: 24rpx;}
.more{width: 36rpx;height: 10rpx;padding: 15rpx 0;}
/* .user{width: 68rpx;height: 68rpx;border-radius: 50%;margin-right: 15rpx;} */
.name{font-size: 28rpx;color: #666;line-height: 68rpx;justify-content: space-between;align-items: center;}
.pinglun{font-size: 28rpx;color: #333;margin: 15rpx 0 0;line-height: 44rpx;}
.huifu{background: #F2F2F2;border-radius: 6rpx;margin: 25rpx 0 0;line-height: 42rpx;padding: 20rpx 30rpx;position: relative;}
.huifu::after{content: '';display: block;width: 0;height: 0;border: 9rpx solid transparent;border-bottom-color: #F2F2F2;border-top: none;position: absolute;top: -8rpx;left: 39rpx;}
.show{display: block;}
.hide{display: none;}

.bot{height: 80rpx;align-items: center;padding: 20rpx 30rpx 20rpx 0;}
.botbtn{font-size: 22rpx;color: #6A6A6A;width: 95rpx !important;text-align: center;position: relative;}
.botbtn image{width: 40rpx;height: 34rpx;margin: 10rpx auto 5rpx;}
.message{background: #DF1A14;height: 28rpx;line-height: 28rpx;font-size: 20rpx;color: #fff;text-align: center;border-radius: 15rpx;box-sizing: border-box;min-width: 21rpx;padding: 0 8rpx;position: absolute;top: 0;right: 25%;}
.addcart{width: 206rpx;height: 76rpx;border: 2rpx solid #FD3C31;border-radius: 40rpx;text-align: center;line-height: 76rpx;font-size: 30rpx;color: #FD3A31;margin: 0 10rpx;}
.gray{color: #999;border-color: #999;}
.gmbtn{width: 210rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;}
.integral{width: 430rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;}
.xiajia{position: fixed;background: rgba(0,0,0,.6);left: 0;right: 0;bottom: 120rpx;height: 80rpx;line-height: 80rpx;font-size: 28rpx;color: #999999;text-align: center;z-index: 50;}


.details image{width: 100%;}

/* 小店相关 */
.xiaodian{position: relative;height: 122rpx;padding: 0 26rpx 0 110rpx;align-items: center;margin: 35rpx 30rpx 0;}
.xdbg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
.shouyi{position: relative;z-index: 2;color: #fff;margin-right: 10rpx;}
.shouyi view{font-size: 40rpx;font-weight: bold;margin-top: 8rpx;}
.shouyi text{font-weight: normal;font-size: 24rpx;}
.addshop{height: 62rpx;padding: 0 25rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
.fenxiang{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
.goShop{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}

.suc{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;width: 536rpx;border-radius: 20rpx;z-index: 100;text-align: center;padding-bottom: 47rpx;}
.tjcg1{width: 100%;height: 284rpx;}
.tjcg{width: 195rpx;height: 38rpx;margin: 52rpx auto 15rpx;}
.suc text{display: block;font-size: 24rpx;color: #333;}
.shopcc{justify-content: center;}
.shop{width:220rpx;height:80rpx;background:linear-gradient(123deg,rgba(255,130,130,1) 0%,rgba(220,21,21,1) 100%);font-size: 30rpx;color: #fff;line-height: 80rpx;border-radius: 40rpx;margin: 45rpx 15rpx 40rpx;}
.share-btn{justify-content: space-between;padding: 0 54rpx;}
.wxfriend,.wxposter{width: 196rpx !important;height: 76rpx !important;align-items: center;justify-content: center;font-size: 30rpx;color: #666;border: 2rpx solid #D8D8D8;border-radius: 40rpx !important;}
.wxfriend image,.wxposter image{width: 31rpx;height: 31rpx;margin-right: 13rpx;}
.suc-close{position: absolute;left: 50%;transform: translateX(-50%);bottom: -102rpx;width: 62rpx;height: 62rpx;}
.sellStock{text-align: right; color: #999;flex: 0.3;}
.sellStock text{ color:#222 ;}
.protext{color: #999;margin-top: 15rpx;padding: 0 30rpx;/* overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; */}
.guarantee{border-top: 1rpx solid #f6f6f6;padding: 15rpx 0 0 0; margin-top: 15rpx;}
.guarantee .cont{padding: 0 30rpx;flex-wrap: wrap;font-size: 26rpx;}
.guarantee .cont .li{align-items: center;margin-right: 20rpx;
  margin-bottom: 10rpx;}
.guarantee .cont image{        width: 30rpx;
  height: 30rpx;}
.you{width: 12rpx;height: 20rpx;}
/* 海外购 */
.logistics{align-items: center;justify-content: space-around;margin-top: 40rpx;}
.logistics view{color: #666666;}
.logistics .lsicText{color: #238CF5;}
.logistics .abroad{width: 46rpx;height: 46rpx;margin: 0 auto 20rpx;}

/* 非会员 */
.huiyuan{
  margin: 34rpx 30rpx 0 30rpx;
}
.huiyuanjia{
  padding: 20rpx;
  background: #FFF4E8;
  font-size: 28rpx;
  color: #553420;
  border-radius: 6rpx;
  align-items: center;
  justify-content: space-between;
}
.huiyuanimg{
  width: 152rpx;
  height: 30rpx;
  margin-right:6rpx ;
}
.d-open{color: #FD3A31;border-radius: 5rpx;font-size: 24rpx;border: 1rpx solid #FD3A31;padding: 5rpx 10rpx;}
.hymoney{
  font-weight: bold;
  color: #FD3A31;
  margin-right: 6rpx;
}
.govipimg{
  width: 28rpx;
  height: 28rpx;
}
/* 会员 */
.hyimg{
height: 74rpx;
width: 96rpx;
position: absolute;
left: -21rpx;
top: -20rpx;
}
.hyjiage{
  border-radius: 16rpx 6rpx 6rpx 0;
  background: #FFFFFF;
  box-shadow: 5rpx 5rpx 10rpx #FD3A31 ;
  /* height: 32rpx; */
  position: relative;
  margin-left: 32rpx;
  height: 32rpx;
  font-size: 26rpx;
  color: #FD3A31;
  padding: 0 16rpx 0rpx 63rpx;
}
.huodong{
  margin-bottom: 30rpx;
}

.acti{
  justify-content: space-between;
}
.pro-sel{align-items: center;}
.pro-sel .flex{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.mrico{width: 16rpx;height: 27rpx;}

/* 右侧首页悬浮 */
.side-contact{position: fixed;bottom: 400rpx;right: 20rpx;background: #fff !important;border-radius: 50% !important;width: 80rpx !important;height: 80rpx !important;box-shadow: 0 0 10rpx rgba(86, 86, 86, 0.36);font-size: 18rpx;color: #555;z-index: 20;text-align: center;}
.side-contact image{width: 34rpx;height: 34rpx;margin: 12rpx auto 5rpx;}

/* 供应商 */
.det-sup{overflow: hidden;}
.det-sup .flex{overflow: hidden;}
.det-sup .mrico{margin-left: 20rpx;}
.sup-name{font-size: 28rpx;color: #333;}
.sup-bri{font-size: 24rpx;color: #999;margin-top: 15rpx;padding-right: 35rpx;}

.roll-notice{height: 60rpx;background: rgba(0,0,0,.55);border-radius: 30rpx;padding: 0 30rpx 0 15rpx;font-size: 24rpx;color: #fff;position: fixed;left: 35rpx;align-items: center;animation: spin 5s ease-in-out infinite;animation-fill-mode: forwards;z-index: 20;max-width: 435rpx;overflow: hidden;}
.roll-notice .flex{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.roll-notice image{width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 11rpx;}
@keyframes spin {
		0% {
			top: 305rpx;
			opacity: 0;
		}
		25% {
			top: 255rpx;
			opacity: 1;
		}
		50% {
			top: 255rpx;
			opacity: 1;
		}
		75% {
			top: 215rpx;
			opacity: 0;
		}
		100%{
			top: 215rpx;
			opacity: 0;
		}
	}