challengeFamily/pages/growup/passport/passport.wxss

.box{padding:0 20rpx;box-sizing:border-box;background: url('http://img.bbztx.com/image_test/upload/thumbs/20210324/logo/1616579157433042148.png');background-size: 100%;}
.column{text-align:center;padding-top:60rpx;padding-bottom: 80rpx;}
.icon{
  font-size:48rpx; 
  /* margin-right: 20rpx; */
}
.yinBox,.xunBox{display:flex;flex-wrap:wrap;justify-content:center;}
.yinCol{width:140rpx;height:140rpx;border-radius:18rpx;background-color:#fff;margin:0 8rpx 16rpx 8rpx;}
.yinNone{text-align:center;font-size:28rpx;margin-top:40rpx;}
.xunBox .lastMedal{width:200rpx;}
.xunBox .medal17{width:250rpx;}
.xunBox .medal13{width:170rpx;}
.xunBox .lastMedal image{width:100%;height: 200rpx;}
.xunCol{width:145rpx;padding-top:10rpx;box-sizing:border-box;position:relative;margin:15rpx 11rpx;}
.xunCol .pic_box{height: 240rpx;position: relative;}
.xunCol .lastMedalHeight{height: 300rpx;position: relative;}
.xunCol .pic_box image{width:100%;height:auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
.xunCol .cumulativeDays{font-size: 24rpx;}
.xunName{width:100%;font-size:24rpx;text-align:center;line-height:1.5;}
.mask{color: #fff;background: #fb8143;box-shadow: 0 0 4rpx 0 #666, inset 0 0 6rpx 0 #fff;padding: 6rpx 0; text-align: center;border-radius: 30rpx;font-size: 20rpx;transform: scale(.8);position: absolute;bottom: 0;width: 100%;}
.wall .welfare .welfare_tab{
  margin-top: 40rpx;
  position: relative;
}
.wall .welfare .welfare_tab .welfare_title{
  position: absolute;
  left: -20rpx;
  top: 0;
  background: #e9474d;
  color: #fff;
  padding: 6rpx 30rpx;
  border-top-right-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
}
.wall .welfare .welfare_tab image{
  margin-top: 80rpx;
}

page{
  background: #fff;
}
.tabBox{
  height: 100rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.tab{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  height: 58rpx;
  background: #ee3a43;
}
.tab .tab-item{
  flex: 1;
  text-align: center;
  background: #ee3a43;
  color: #fff;
  padding: 10rpx;
  height: 38rpx;
  font-size: 28rpx;
  font-weight: 700;
  line-height: 45rpx;
}
.tab .tab-item text{
  padding: 10rpx;
}
.tab .active{
  color: #ee3a43;
  background: #fff;
  font-size: 32rpx;
  height: 48rpx;
  line-height:48rpx;
  box-shadow: 0rpx 0rpx 20rpx 0rpx #333;
  z-index: 1;
}
.tab .active text{
  border-bottom: 2rpx solid #ee3a43;
}
.tab .no_active{
  box-shadow: inset 0px -15px 10px -15px #333;
}
.box .column .wall{
  border-radius: 20rpx;
  background: rgba(234, 70, 77, .1);
  padding: 20rpx;
  padding-top: 40rpx;
  position: relative;
  box-shadow: 0px -50px 2px -49px #f1b9b8;
  margin-bottom: 80rpx;
  font-size: 24rpx;
}
.box .column .wall .head_title{
  padding: 10rpx 30rpx;
  color: #fff;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-around;
  border-radius: 10rpx;
  width: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: -75rpx auto;
  box-shadow: 0px 0px 2px 0px #333;
  background-image: linear-gradient(to right,rgba(238,58,67),rgba(238,58,67,.9),rgba(238,58,67))
}
.box .column .wall .head_title .h{ 
  font-size: 32rpx;
}
.box .column .wall .head_title .point{
  color: #f7d1d3;
}
.box .column .wall .head_title .leftPoint{
  margin-left: -30rpx;
}
.box .column .wall .head_title .rightPoint{
  margin-right: -30rpx;
}
.box .column .wall .head_title image{
  width: 35rpx;
}
.box .column .article .jump_btn{
  background: #fff;
  display: inline-block;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  color: #ee3a43;
  font-weight: 700;
  box-shadow: inset 0 -5rpx 5rpx rgba(238,58,67,.5);
  margin: 20rpx 0;
}