H5_module/product/index/index.css

/**index.wxss**/
page{background: #fff;}
.top-fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 50;background: var(--mina);}
.topbg{width: 100%;height: 100%;}
.top-title{position: absolute;left: 0;right: 0;text-align: left;font-size: 36rpx;color: #fff;padding-left: 34rpx;}
.top-title image{height: 60rpx;position: absolute;left: 34rpx;top: 50%;transform: translateY(-50%);}
.not-color{background: #fff;}
.not-color .top-title{color: #333;}
.top{box-sizing: border-box;align-items: center;position: relative;}
.top-bg{width: 100%;height: 260rpx;position: absolute;top: 0;left: 0;z-index: 0;}
.topcon{padding: 40rpx 45rpx;position: relative;z-index: 1;}
.logo{width: 100rpx;height: 100rpx;border: 2rpx solid #fff;background: #fff;border-radius: 50%;margin-right: 25rpx;}
.areas{font-size: 34rpx;color: #fff;}
/* .areas image{width: 22rpx;height: 17rpx;margin-left: 10rpx;margin-top: 10rpx;} */
.recent{align-items: center;font-size: 22rpx;color: #fff;margin-top: 10rpx;}
.recent text{display: block;width: 100rpx;height: 32rpx;text-align: center;line-height: 32rpx;border-radius: 16rpx;margin-right: 9rpx;font-size: 22rpx;}
.renqi{padding: 0 35rpx;text-align: center;font-size: 34rpx;color: #fff;}
.renqi text{display: block;opacity: .7;font-size: 24rpx;margin-top: 10rpx;}

/* .top{box-sizing: border-box;align-items: center;position: relative;}
.top-bg{display: block;width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;}
.topcon{position: relative;z-index: 2;display: flex;display: -webkit-flex;}
.logo{display: block;width: 80rpx;height: 80rpx;z-index: 2;}
.areas{align-items: center;color: #fff; z-index: 3;}
.areas image{width: 22rpx;height: 17rpx;margin-left: 10rpx;margin-top: 10rpx;}
.recent{align-items: center;font-size: 22rpx;color: #fff;margin-top: 10rpx;}
.recent text{display: block;width: 100rpx;height: 32rpx;text-align: center;line-height: 32rpx;border-radius: 16rpx;margin-right: 9rpx;font-size: 22rpx;}
.renqi{padding: 0 35rpx;text-align: center;font-size: 34rpx;color: #fff;}
.renqi text{display: block;opacity: .7;font-size: 24rpx;margin-top: 10rpx;} */
.tcon{position: relative;}
.tcbg{width: 100%;height: 260rpx;position: absolute;top: 0;left: 0;z-index: 0;}
.merchant{padding: 40rpx 45rpx;position: relative;z-index: 1;}
.logo{width: 100rpx;height: 100rpx;border: 2rpx solid #fff;background: #fff;border-radius: 50%;margin-right: 25rpx;}
.merchant-name{font-size: 36rpx;color: #fff;}
.change{margin-left: 10rpx;font-size: 24rpx;color: rgba(255,255,255,.5);}
.change image{width: 14rpx;height: 23rpx;margin-left: 6rpx;}
.merchant-info{font-size: 24rpx;color: #FFDEC4;margin-top: 14rpx;}
.merchant-info .li{margin-right: 20rpx;}
.merchant-info image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
.m-share{font-size: 22rpx;color: #fff;margin-left: 50rpx !important;}
.m-share image{width: 34rpx;height: 34rpx;margin: 0 auto 15rpx;}








.box1{border-radius: 50rpx 50rpx 0 0;padding-top: 26rpx;padding-bottom: 5rpx;position: relative;z-index: 2;} 
.search{background: #F0F2F3;height: 70rpx;border-radius: 35rpx;padding: 0 15rpx 0 30rpx;align-items: center;font-size: 26rpx;color: #666;}
.search image{width: 30rpx;height: 30rpx;margin-right: 13rpx;}
.search image.sao{width: 42rpx;height: 42rpx;}
.banner{margin-top: 24rpx;overflow: hidden;position: relative;}
.swiper,.swiper image{width: 100%;height: 300rpx;border-radius: 20rpx;}
.swiper1{width: 100%;height: 400rpx;}
.sat{padding-top: 1rpx;}
.dotse,.dots1{position: absolute;left: 0;right: 0;bottom: 11rpx;align-items: center;justify-content: center;}
.dot{background: #fff;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
.dot.active{width: 30rpx;}
.dot1{background: var(--mina);width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
.dot1.active{width: 30rpx;}
.nav{flex-wrap: wrap;margin-top: 30rpx;position: relative;}
.nav .li{width: 25% !important;text-align: center;font-size: 28rpx;color: #333;margin-bottom: 35rpx;/* height: 41%; */}
.nav .li button{font-size: 28rpx !important;color: #333 !important;}
.nav .li image{width: 80rpx;height: 80rpx;margin: 0 auto 10rpx;}
.grid{flex-wrap: wrap;}
.more{width: 16rpx;height: 27rpx;}
.quan{padding-bottom: 40rpx;}
.quan .li{width: 212rpx;height: 220rpx;margin-right: 17rpx;position: relative;text-align: center;}
.quan .li:last-child{margin-right: 0;}
.quanbg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.quan .lic{position: relative;z-index: 2;width: 100%;height: 100%;overflow: hidden;}
.quan .li.gray .sbglinear{background: linear-gradient(90deg,#ddd,#c7c6c6);color: #666;}
.amount{font-weight: bold;font-size: 56rpx;color: #fff;margin: 20rpx 0 0;}
.amount text{font-size: 24rpx;}
.rule{font-size: 24rpx;color: #fff;margin: 0 0 40rpx;}
.ling{width:140rpx;height:40rpx;line-height: 40rpx;font-size: 22rpx;color: #FF6009;position: absolute;left: 50%;transform: translateX(-50%);bottom: 15rpx;}
.jingxuan{padding-bottom: 40rpx;flex-wrap: wrap;}
.jingxuan .li{width: 47%;margin-right: 20rpx;text-align: center;overflow: hidden;margin-bottom: 25rpx;}
.jingxuan .li image{width: 100%;height: 210rpx;border-radius: 10rpx;}
.name{font-size: 28Prpx;color: #333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 15rpx 0 10rpx;}
.price{font-size: 24rpx;color: #FE0419;}
.price text{font-size: 36rpx;font-weight: bold;}
.shequ .li{border-bottom: 2rpx solid #eee;padding: 0 20rpx 38rpx;margin-bottom: 38rpx;overflow: hidden;}
.shequ .li:last-child{border-bottom: none;margin-bottom: 0;}
.shequ .li .flex{overflow: hidden;}
.proimg{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;}
.proname{font-size: 28rpx;color: #333;overflow : hidden;line-height: 36rpx;height: 72rpx;}
.endtime{display: inline-block;height: 32rpx;line-height: 32rpx;border: 2rpx solid #FE0419;border-radius: 6rpx;padding: 0 8rpx;font-size: 24rpx;color: #FE0419;margin: 0 0 10rpx;/* margin: 15rpx 0 25rpx; */}
.operate{justify-content: space-between;align-items: center;}
.price .del{font-weight: normal;font-size: 24rpx;color: #999;margin-left: 12rpx;text-decoration: line-through;}
.price .vip{    font-size: 24rpx;margin-left: 12rpx;color: #333;font-weight: normal;}
.add-cart image{width: 42rpx;height: 42rpx;}
.nums{align-items: center;}
.num{font-size: 30rpx;width: 50rpx;text-align: center;line-height: 42rpx;}
.remind{width: 150rpx;height: 50rpx;border-radius: 25rpx;font-size: 24rpx;color: #fff;text-align: center;justify-content: center;line-height: 50rpx;}
.datas{justify-content: space-between;align-items: center;font-size: 24rpx;color: #666;padding: 20rpx 0 0}
.yigou{margin-left: 6rpx;align-items: center;}
.yigou image{width: 40rpx;height: 40rpx;border-radius: 50%;margin-left: -6rpx;border: 2rpx solid #fff;}
.yigou image.more1{border: none;width: 46rpx;height: 46rpx;}
.yigou text{margin-left: 12rpx;}
.xiaoliang{color: #999;}
.miaosha{margin-top: 15rpx;}
.times{margin-bottom: 30rpx;}
.times .li{width: 20%;text-align: center;font-size: 20rpx;color: #999;position: relative;}
.times .li::before{content: '';display: block;width: 2rpx;height: 61rpx;background: #D2D2D2;position: absolute;left: 0;bottom: 5rpx;}
.times .li:first-child::before{display: none;}
.times .li text{display: block;font-size: 36rpx;color: #333;margin-bottom: 5rpx;}
.times .li.active,.times .li.active text{color: #FE0419;}
.msinfos{padding: 20rpx 20rpx 32rpx}
.msinfos image{width: 100%;height: 390rpx;}
.msinfo{padding: 0 9rpx}
.msname{font-size: 30rpx;line-height: 36rpx;margin: 20rpx 0 10rpx}
.qgsta{align-items: center;justify-content: space-between;}
.qiang{width: 100rpx;height: 40rpx;border-radius: 35rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;color: #fff;}
.pintuan{padding-bottom: 50rpx;}
.pintuan .li{margin-bottom: 50rpx;}
.pintuan .li:last-child{margin-bottom: 0;}
.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 .endtime{margin-bottom: 45rpx;}
.pininfo .del{font-size: 24rpx;color: #999;text-decoration: line-through;}
/* .pininfo .price{color: #333;} */
.jishida{margin: 20rpx 0;}
/* .tab{align-items: center;font-size: 28rpx;color: #666;}
.tab .li{width: 25%;text-align: center;position: relative;}
.tab .li::after{content: '';display: block;width: 2rpx;height: 28rpx;background: #D2D2D2;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.tab .li:first-child::after{display: none;}
.tab .li.active{color: var(--mina) !important;}
.tabcon{flex-wrap: wrap;margin-top: 20rpx;}
.tabcon .li{width: 50%;} */
/* .tabcon .li{background: #fff;border-radius: 10rpx;width: 345rpx;margin: 20rpx 20rpx 0 0;} */
/* .tabcon .li:nth-child(2n){margin-right: 0;} */
.tabconTh .li{width: 223rpx;margin-right: 20rpx !important;}
.tabconTh .li:nth-child(3n){margin-right: 0 !important;}
.jsdimgs{width: 345rpx;height: 345rpx;position: relative;}
.tabconTh .li .jsdimgs{width: 223rpx;height: 223rpx;}
.jsdpro{width: 100%;height: 100%;}
.jsdimg{width: 82rpx;height: 36rpx;position: absolute;top: 20rpx;left: 20rpx;}
.jsdinfo{padding: 15rpx 20rpx 30rpx;}
.kan-guoqi{background: #999;}
.idxnav{justify-content: space-between;padding: 30rpx;}
.zbgm image{width: 336rpx;height: 321rpx;}
.lqzx{margin-bottom: 20rpx;}
.lqzx image{width: 336rpx;height: 151rpx;}
.myzx image{width: 336rpx;height: 151rpx;}

.guide{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.7);z-index: 102;}
.guide image{width: 100%;}
.layer{
  position: fixed;
  top: 0;
  z-index: 101;
  left: 0;
  right: 0;
  display: flex;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.layer image{
  width: 535rpx;
  height: 650rpx;
}
/*关闭按钮样式 */
.layer .close{
  color:#fff;
  width: 60rpx;
  height: 60rpx;
  margin-top: 80rpx;
}
/* 专题 */
.ztdiv{height: 310rpx;
  background-color: #fff;
  margin-top: 20rpx;
  padding: 0rpx 0rpx 20rpx 0rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
  
  }
.imgdiv{width: 100%;
  height: 240rpx;
  }
.t-img{height:240rpx;width: 710rpx;border-radius: 20rpx 20rpx 0 0;}

.txtdiv{padding-left: 20rpx;padding-top: 20rpx; border-top: 1rpx #eee solid;
}

.imgtit{width: 100%; margin-bottom:20rpx; }
.jishida .imgtit{width: 100%; margin-bottom:10rpx; }

/* 砍价活动 */
.kjcon{overflow: hidden;}
.kan-price{align-items: center;margin: 10rpx 0 45rpx;}
.tag{width: 80rpx;height: 36rpx;border-radius: 8rpx;text-align: center;line-height: 36rpx;font-size: 20rpx;color: #fff;}
.kan-price .price{font-size: 38rpx;color: #FE0419;margin: 0 20rpx 0 12rpx;}
.kan-price .price text{font-size: 25rpx;}
.kan-price .del{font-size: 24rpx;color: #999;text-decoration: line-through;}
.kan-times{align-items: center;justify-content: space-between;}
.kan-time{align-items: center;font-size: 20rpx;color: #333;margin: 15rpx 0 65rpx;}
.kan-time text{display: block;width: 38rpx;height: 38rpx;border-radius: 8rpx;background: #333;line-height: 38rpx;text-align: center;margin: 0 7rpx;font-size: 24rpx;color: #fff;}
.kan-time text:first-child{margin-left: 0;}
.kan-time view{margin-left: 5rpx;}
.kan-btn{width: 150rpx;height: 50rpx;border-radius: 25rpx;text-align: center;line-height: 50rpx;font-size: 24rpx;color: #fff;}

.cont{flex-wrap: wrap;font-size: 26rpx;}
.cont .li{align-items: center;margin-right: 20rpx; color: #fff;margin-top: 5rpx;}
.cont image{width: 30rpx;
  height: 30rpx;}
  .ss{padding-bottom:20rpx ;}
  
.li3{width: 33% !important;text-align: center;font-size: 28rpx;margin-top: 30rpx !important;position: relative;}
.li3 button{font-size: 28rpx !important;color: #333 !important;}
.li5{width: 20% !important;text-align: center;font-size: 28rpx;margin-top: 30rpx !important;position: relative;}
.li5 button{font-size: 28rpx !important;color: #333 !important;}
.btn-tag{height: 27rpx;background: #F68461;border-radius: 10rpx 10rpx 10rpx 0rpx;font-size: 18rpx;color: #fff;padding: 0 8rpx;line-height: 27rpx;position: absolute;top: -13rpx;right: 0;}
.nav .li3 image{width: 140rpx;height: 140rpx;margin: 0 auto 10rpx;}
.nav .li5 image{width: 75rpx;height: 75rpx;margin: 0 auto 10rpx;}
.swiper2{width: 100%;height: 240rpx;}/*一行三个*/
.swiper3{width: 100%;height: 432rpx;}/*两行三个*/
.swiper4{width: 100%;height: 200rpx;}/*一行四个*/
.swiper5{width: 100%;height: 160rpx;}/*一行五个*/
  





.kjpop{position: fixed;top: 50%;transform: translateY(-50%);left: 85rpx;right: 85rpx;background: #fff;border-radius: 20rpx;z-index: 100;overflow: hidden;}
.kjpop .tops {height: 100rpx;}
.kjpop .tops image{width: 100%;height: 100rpx;}
.kjpop .cont{padding: 0rpx 44rpx;}
.kjpop .cont text{font-size:24rpx ; color: #707070;}
.kjpop .cont .title{text-align: center; font-size: 28rpx;color: #DC1515; font-weight: bold;margin: 30rpx 0 45rpx 0;}
/* .kjpop .cont .btn{width: 430rpx; height: 60rpx;border-radius: 40rpx;border: 1rpx solid #DE1F20; color: #DE1E1F; font-size: 28rpx;text-align: center; line-height: 60rpx;margin: 0 auto;} */
.kjpop .bottom{
	border-top: 1rpx solid #E4E4E4;
}
.botLeft,.botRight{
	width: 50%;
	text-align: center;
	padding: 20rpx 0;
}
.botLeft{
	border-right: 1rpx solid #E4E4E4;
}


.spinner {
      margin: 255px auto 0px auto ;
      width: 60rpx;
      height: 60rpx;
      position: relative;
    }
     
    .container1 > view, .container2 > view, .container3 > view {
      width: 15rpx;
      height: 15rpx;
      background-color: var(--mina);
      border-radius: 100%;
      position: absolute;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
      animation: bouncedelay 1.2s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
     
    .container2 {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }
     
    .container3 {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }
     
    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }
     
    .container2 .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .container3 .circle1 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .container1 .circle2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .container2 .circle2 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    .container3 .circle2 {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
     
    .container1 .circle3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
     
    .container2 .circle3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
     
    .container3 .circle3 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
     
    .container1 .circle4 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
     
    .container2 .circle4 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
     
    .container3 .circle4 {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
	.lond{
		text-align: center;
		margin-top: 30rpx;
		font-size: 30rpx;
	}
	
	.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;
		}
	}