mine.wxss 4.1 KB
/* pages/mine/mine.wxss */
page{
  background: #f7f7f7;
}

.container{
  width: 750rpx;
  display: flex;
  flex-flow: column;
  position: relative;
}
.head{
  display: flex;
  flex-flow: column;
  margin-top: 32rpx;
  padding: 0 64rpx;
  /* position: relative; */
  z-index: 66;
}
.head_t{
  display: flex;
  justify-content: space-between;
}
.head_t_right{
  width:112rpx;
  height:32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius:24rpx;
  font-size:20rpx;
  font-family:PingFang SC;
  background: rgba(255, 255, 255, 0.1);
  font-weight:400;
  color:#fff;
  
}
.head_b{
  display: flex;
  align-items: center;
  margin-top: 32rpx;

}
.head_b_pic{
  width:128rpx;
  height:128rpx;
  border-radius:50%;
  opacity:1;
}
.head_b_pic image{
  width: 100%;
  height: 100%;
  border-radius:50%;
}
.head_b_text{
  margin-left: 20rpx;
  font-size:34rpx;
  font-family:PingFang SC;
  font-weight:600;
  line-height:36rpx;
  color:#fff;
  opacity:1;
}
.top{
  width: 750rpx;
  height: 336rpx;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
.top image{
  width: 100%;
  height: 100%;
}


.mid{
  width:688rpx;
  height:272rpx;
  background:rgba(255,255,255,1);
  box-shadow:0rpx 6rpx 60rpx rgba(64,219,0,0.06);
  opacity:1;
  border-radius:8rpx;
  z-index: 77;
  margin: 48rpx 30rpx 0 32rpx;
}
.mid_top{
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  box-sizing: border-box;
  padding: 0 32rpx 0 0;
  margin: 0 0 0 32rpx;
  
}
.mid_top_left{
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:600;
  color:rgba(51,51,51,1);
  opacity:1;
}
.mid_top_right{
  font-size:24rpx;
  font-family:PingFang SC;
  font-weight:400;
  color:rgba(153,153,153,1);
  opacity:1;
  display: flex;
}

.mid_bottom{
  display: flex;
  height: 179rpx;
  align-items: center;
  justify-content: space-around;
}
.mid_bottom_item{
  display: flex;
  flex-flow: column;
  align-items: center;
}
.mid_bottom_item_pic{
  width:48rpx;
  height:38rpx;
  display: flex;
}
.mid_bottom_item_pic image{
  width: 100%;
  height: 100%;
}
.mid_bottom_item_pic2{
  width:61rpx;
  height:48rpx;
  display: flex;
}
.mid_bottom_item_pic2 image{
  width: 100%;
  height: 100%;
}
.mid_bottom_item_pic3{
  width:60rpx;
  height:43rpx;
  display: flex;
}
.mid_bottom_item_pic3 image{
  width: 100%;
  height: 100%;
}
.mid_bottom_item_pic4{
  width:46rpx;
  height:48rpx;
  display: flex;
}
.mid_bottom_item_pic4 image{
  width: 100%;
  height: 100%;
}
.mid_bottom_item_pic5{
  width:39rpx;
  height:43rpx;
  display: flex;
}
.mid_bottom_item_pic5 image{
  width: 100%;
  height: 100%;
}



.mid_bottom_item_text{
  
  font-size:22rpx;
  font-family:PingFang SC;
  font-weight:400;
  
  color:rgba(51,51,51,1);
  opacity:1;
  margin-top: 15rpx;
}
.pic_box{
  display: flex;
  align-items: center;
  height: 50rpx;
}
.bottom{
  margin-top: 64rpx;
  display: flex;
  flex-flow: column;
  background: #fff;
}
.bottom_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 34rpx;
  border-bottom: 1px solid #F5F5F5;
}
.bottom_left{
  display: flex;
  align-items: center;
}
.bottom_left_pic{
  width:26rpx;
  height:32rpx;
  opacity:1;
  display: flex;
}
.bottom_left_pic image{
  width: 100%;
  height: 100%;
}
.bottom_left_pic2{
  width: 32rpx;
  height: 28rpx;
  opacity:1;
  display: flex;
}
.bottom_left_pic2 image{
  width: 100%;
  height: 100%;
}
.bottom_left_pic3{
  width: 32rpx;
  height: 32rpx;
  opacity:1;
  display: flex;
}
.bottom_left_pic3 image{
  width: 100%;
  height: 100%;
}



.bottom_left_text{
  margin-left: 16rpx;
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:400;
  line-height:36rpx;
  color:rgba(51,51,51,1);
  opacity:1;
}
.bottom_right{
  width: 16rpx;
  height: 32rpx;
  display: flex;
}
.bottom_right image{
  width: 100%;
  height: 100%;
}
.bottom_pic_box{
  width: 50rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mid_top_right_pic{
  width:16rpx;
  height:32rpx;
  display:flex;
  margin-left: 10rpx
}
.mid_top_right_pic image{
  width: 100%;
  height: 100%;
}