kind.wxss 4.1 KB
/* pages/kind/kind.wxss */
.top{
  width: 750rpx;
  height: 80rpx;
  background: #6EAC3D;

  display: flex;
  align-items: center;
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  opacity:1;
  overflow-x: scroll;
  flex-wrap: nowrap
}
::-webkit-scrollbar{
  display: none;
}
.nav_item{
  /* width: 200rpx; */
  padding: 0 38rpx;
  text-align: center;
  flex:0 0 auto;
}
.active{
  color: #FFFFFF;
  position: relative;
}
.active:before{
  content: "";
  width:48rpx;
  height:4rpx;
  background:rgba(255,255,255,1);
  opacity:1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20rpx;
  margin: 0 auto;
}
.container{
  width: 750rpx;
  display: flex;
  align-items: center;
  flex-flow: column;
}
.mid{
  margin-top: 16rpx;
  display: flex;
  flex-flow: column;
}
.ware_box{
 width:688rpx;
 height:400rpx;
 margin:32rpx auto;
 background:#F9FAFC;
}
.ware_top{
 overflow: hidden;
 display: flex;
 padding:32rpx 18rpx 0;
}
.ware_1{
 width:312rpx;
 height:208rpx;
 position: relative;
}
.ware_1 image{
 width:100%;
 height:100%;
}
.ware_1_time{
 position: absolute;
 bottom:0;
 width:208rpx;
 height:48rpx;
 color: white;
 text-align: center;
 line-height:48rpx;
 font-size:24rpx;
 background:#FAC8C8;
 font-family:PingFang SC;
}
.ware_text{
 margin-left:14rpx;
 width:100%;
}
.ware_2{
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.ware_2Txt1{
 font-size:32rpx;
 font-family:PingFang SC;
 font-weight:600;
 line-height:44rpx;
 color:rgba(51,51,51,1);
}
.ware_2Txt2{
 font-size:22rpx;
 /* margin-left:98rpx; */
 font-family:PingFang SC;
 font-weight:400;
 line-height:32rpx;
 color:rgba(204,204,204,1);
}
.ware_3 progress{
 width:370rpx;
 color:#B5DE96;
 margin-top:24rpx;
}
.ware_4 text,.ware5_t2{
 font-size:22rpx;
 font-family:PingFang SC;
 font-weight:400;
 line-height:32rpx;
 color:rgba(204,204,204,1);
}
.ware_5{
 display: flex;
 display: -webkit-flex;
 justify-content: space-between;
}
.ware5_t1{
 font-size:30rpx;
 font-family:DIN 1451 Std Mittelschrift;
 font-weight:400;
 color:rgba(255,0,0,1);
}
.ware5_t3{
 font-size:22rpx;
 font-family:PingFang SC;
 font-weight:400;
 line-height:30rpx;
 color:rgba(51,51,51,1);
}
.ware5_t4{
 font-size:18rpx;
 font-family:PingFang SC;
 font-weight:400;
 color:rgba(153,153,153,1);
}
.ware_6{
 width:144rpx;
 height:48rpx;
 background:rgba(249,150,20,1);
 box-shadow:0px 2rpx 12rpx rgba(255,145,0,0.16);
 border-radius:24rpx;
}
.ware_6 view{
 font-size:26rpx;
 font-family:PingFang SC;
 font-weight:400;
 text-align: center;
 line-height:48rpx;
 color:rgba(255,255,255,1);
}
.ware_bot{
 width:670rpx;
 height:80rpx;
 margin: auto;
 display: flex;
 line-height:80rpx;
 margin-top:32rpx;
 background-color:#F1F7F1;
}
.ware_bot_tit{
 font-size:30rpx;
 font-weight:bold;
 margin-left:32rpx;
 color:rgba(110,172,61,1);
}
.ware_bot_tit:after{
 content:"";
 margin:0 38rpx;
 border-right:1px solid #B5DE96;
}
.ware_bot_txt{
 font-size:24rpx;
 font-family:PingFang SC;
 font-weight:400;
 color:rgba(153,153,153,1);
}
/* 规格 */
.spec{
 width:100%;
 padding:0 32rpx;
 line-height:80rpx;
 display: flex;
 height:80rpx;
 margin-top:8rpx;
 background:white;
}
.spec_txt{
 font-size:32rpx;
 font-family:PingFang SC;
 font-weight:400;
 color:rgba(51,51,51,1);
}
.spec_txt2{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:400;
  margin-left:108rpx;
  color:rgba(153,153,153,1);
}
/* 商品详情 */
.ware_detail{
 width:100%;
 margin-top:8rpx;
 margin-bottom:96rpx;
 padding-bottom:66rpx;
 background: white;
}
.ware_detail_tit{
 width:688rpx;
 margin: auto;
 display: flex;
 padding:44rpx 0rpx 42rpx;
 justify-content:space-around;
 border-bottom:2rpx solid #F5F5F5;
}
.ware_detail .ware_active{
 color:#6EAC3D;
 font-weight:600;
}
.ware_active:after{
 content: "";
 width:16rpx;
 height: 6rpx;
 margin: auto;
 display: block;
 margin-top:6rpx;
 border-radius:8rpx;
 background:rgba(110,172,61,1);
}
.ware_detail_tit view{
 font-size:28rpx;
 font-family:PingFang SC;
 font-weight:400;
 color:rgba(153,153,153,1);
}
.ware_detailC{
 width:688rpx;
 margin:26rpx auto 0;
}

.ware_detailImg{
 width:688rpx;
 height:470rpx;
}
.ware_detailImg image{
 width:100%;
 height:100%;
}