page {
  background: #F3F3F3;
  color: #333;
  box-sizing: border-box;
  width:750rpx;
}

view,text{
  box-sizing: border-box;
  color:#333;
  font-size: 30rpx;
}
.center-top{
  padding:30rpx 24rpx 0;
  /* height:478rpx; */
  background: url('https://jzmall.lifejingzhi.com/file/wx-servant/learn-bg.png') no-repeat center 8rpx;
  background-size: contain;
  position: relative;
}
.badge{
  width:140rpx;
  height:140rpx;
  position: absolute;
  top:84rpx;
  right:92rpx;
  z-index:999;
}
.learn-time{
  height:50rpx;
  display: flex;
  align-items: center;
  padding-left:28rpx;
}
.learn-time view{
  font-size: 36rpx;
  font-weight: bold;
  margin-left:12rpx;
}
.time-detail{
  margin:22rpx 0 30rpx;
  height:70rpx;
  display: flex;
  align-items: center;
  padding-left:34rpx;
  color: #426D3B;
  font-size: 34rpx;
}
.time-detail text{
  font-size: 50rpx;
  font-weight: bold;
  margin-right:12rpx;
  color: #426D3B;
}
.get-skill{
  width: 702rpx;
/* height: 126rpx; */
background: #FFFFFF;
border-radius: 18rpx;
/* padding:0 20rpx 0 34rpx; */
display: flex;
align-items: center;
padding:34rpx 20rpx 40rpx 34rpx;
flex-wrap: wrap;
}
.skill-title{
  color: #426D3B;
  font-size: 44rpx;
  /* font-weight: bold; */
  margin-bottom:10rpx;
}
.skill-list{
  display: flex;
  flex-wrap: wrap;
}
.skill-item{
  /* width: 110rpx; */
height: 56rpx;
background: #E6F7FF;
border-radius: 4rpx;
border: 2rpx solid #91D5FF;
color: #096DD9;
margin-right:14rpx;
font-size: 34rpx;
text-align: center;
padding:0 16rpx;
margin-top:14rpx;
}
.learned-content{
  width: 702rpx;
height: 126rpx;
background: #FFFFFF;
border-radius: 18rpx;
padding:0 24rpx 0 34rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin:22rpx 0 34rpx;
}
.learned-content text{
  font-size: 44rpx;
  /* font-weight: bold; */
color: #426D3B;
}
.learned-content .arrow{
  width: 0;
  height: 0;
  border: 20rpx solid;
  border-color:transparent transparent transparent #014B00;
}
.tab-sticky{
  height:94rpx;
  display: flex;
  align-items: center;
  padding:0 24rpx;
  background: #F3F3F3;
}
.tab-sticky view{
  color: #8B938A;
  font-size: 34rpx;
  margin-right:22rpx;
}


.tabs-wrapper{
  /* margin:0 0 14rpx; */
  padding:0 176rpx 0 0rpx;
  background: #F3F3F3;
  /* width:600rpx; */
}
.tabs-wrapper .van-ellipsis{
  font-size: 34rpx;
  color: #8B938A;
}
.van-tabs__nav .van-tab:first-child{
  flex:0.6;
}
.drop-block .van-ellipsis{
  font-size: 38rpx;
}

.drop-block .van-dropdown-menu{
  /* background:#f3f3f3; */
}
.drop-block{
  display: flex;
  height: 94rpx;
  align-items: center;
  /* margin-top:4rpx; */
  background:#fff;
  justify-content: space-between;
  padding:0 28rpx;
  margin-bottom:20rpx;
}
.van-dropdown-menu{
  height:74rpx!important;
  box-shadow:none!important;
  padding-right:50rpx;
}
.after-wrapper{
  margin-left:-56rpx;
}
.date-wrapper{
  height: 74rpx;
  display: flex;
  align-items: center;
}
.date-wrapper view{
  font-size: 38rpx;
}
.after-wrapper .arrow{
  width: 0;
  height: 0;
  border: 12rpx solid;
  border-color: 
  #000 transparent transparent transparent ;
  margin:16rpx 0 0 8rpx;
}
.after-wrapper{
  flex:1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-dropdown-menu__title:after {
  /* border-width:8rpx!important;
  margin:16rpx 0 0 8rpx!important; */
  display:none!important
}
.overlay-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* z-index:999; */
  padding:0 50rpx;
  flex-direction: column;
 
}

.no-msg{
  text-align: center;
  margin-top:200rpx;
  color:#999;
  font-size: 28rpx;
}
.coupon-list{
  padding:24rpx 24rpx 40rpx;
  /* min-height: 1600rpx; */
}
.coupon-item{
  overflow: hidden;
  margin-bottom:20rpx;
  /* background:#fff; */
  border-radius: 18rpx 18rpx 0px 0px;
  width:702rpx;
  height:198rpx;
  background:url('https://jzmall.lifejingzhi.com/file/wx-servant/coupon-bg.png') no-repeat center;
  background-size:702rpx 198rpx ;
  display:flex;
}
.coupon-left{
  width:510rpx;
  background:url('https://jzmall.lifejingzhi.com/file/wx-servant/coupon-dc.png') no-repeat left top;
  background-size:122rpx 94rpx ;
  padding:58rpx 0 0 44rpx;
}
.coupon-right{
  width:192rpx;
  height:198rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.coupon-right view{
  color: #6F4913;
line-height: 70rpx;
font-size: 48rpx;
}
.coupon-left .name{
  height: 56rpx;
font-size: 40rpx;
color: #6F4913;
line-height: 56rpx;
margin-bottom:10rpx;
}
.coupon-left .date{
  font-size: 28rpx;
color: #6F4913;
line-height: 40rpx;
}
.qrcode-wrapper{
width: 562rpx;
height: 752rpx;
background: #FFFFFF;
/* border-radius: 33rpx; */
padding:44rpx  44rpx 70rpx;
display:flex;
flex-direction: column;
align-items: center;
}
.qrcode-wrapper .name{
  font-size: 34rpx;
  height: 136rpx;
  color: #4B4646;
  line-height: 68rpx;
  font-size: 48rpx;
  width:474rpx;
}

.overlay-wrapper image{
  width:474rpx;
  height: 474rpx;
  margin-bottom:32rpx;
}