inviteFriends.wxss 4.2 KB

page{
  line-height: 1;
}

.container{
  width: 750rpx;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center; 
  position: relative;
}
.top{
  width:750rpx;
  height:317rpx;
  display: flex;
  position: relative;
}
.top image{
  width: 100%;
  height: 100%;
}
.top_t{
  margin-top: 39rpx;
  width: 100%;
  position: absolute;
  font-size:28rpx;
  font-family:PingFang-SC-Bold;
  font-weight:bold;
  color:rgba(255,255,255,0.8);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

}
.top_t_num{
  margin-top: 15rpx;
  font-size:80rpx;
  font-family:Roboto-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.top_right{
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  width:158rpx;
  height:43rpx;
  background:rgba(255,188,81,1);
  border-radius:22rpx;
  display: flex;
  align-items: center;
  justify-content: center;

}
.top_right_icon{
  width:16rpx;
  height:18rpx;
  display: flex;
}
.top_right_icon image{
  width: 100%;
  height: 100%;
}
.top_right_text{
  margin-left: 10rpx;
  font-size:24rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.mid{
  margin-top: 180rpx;
  
  display: flex;
  position: absolute;
  top: -30rpx;
}
.mid_pic{
  width: 742rpx;
  height: 350rpx;
  display: flex;
  position: relative;
}
.mid_pic image{
  width: 100%;
  height: 100%;
}
.mid_content{
  display: flex;
  flex-flow: column;
  position: absolute;
  color: #fff;
  left: 60rpx;
  top: 70rpx;
}
.mid_content_top{
  font-size:24rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,255,255,0.8);
}
.mid_content_mid{
  margin-top: 20rpx;
  font-size:80rpx;
  font-family:Roboto-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);
  text-shadow:0rpx 12rpx 14rpx rgba(221,140,34,0.3);

  background:linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(255,235,200,1) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mid_content_bottom{
  margin-top: 30rpx;
  font-size:24rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,255,255,0.8);
}

.mid_deposit{
  position: absolute;
  top: 100rpx;
  right: 30rpx;
  width:120rpx;
  height:54rpx;
  background:rgba(255,255,255,1);
  border-radius:27rpx 0rpx 0rpx 27rpx;
  display: flex;
  align-items: center;
 
}
.mid_deposit_text{
  margin-left: 28rpx;
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(254,147,70,1);
}
.mid_deposit_icon{
  margin-left: 14rpx;
  width:12rpx;
  height:20rpx;
  display: flex;
}
.mid_deposit_icon image{
  width: 100%;
  height: 100%;
}
.invite{
  margin-top: 160rpx;
  width:686rpx;
  /* height:788rpx; */
  background:rgba(253,255,255,1);
  box-shadow:0rpx 8rpx 49rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius:22px;

}
.invite_top{
  display: flex;
  justify-content: space-between;
  padding: 30rpx 60rpx;
  border-bottom: 1px solid #EBEBEB;
}
.invite_top_select{
 
  font-size:30rpx;
  font-family:PingFang-SC-Bold;
  font-weight:bold;
  color:#EBEBEB;
}
.color_yellow{
  color: #FFAA00;
  position: relative;
}
.color_yellow::before{
  content:'';
  position: absolute;
  bottom: -30rpx;
  left: -60rpx;
  width: 365rpx;
  height: 1px;
  background: #FFAA00;
}
.invite_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 15rpx 24rpx;
}
.invite_item_left{
  display: flex;
  align-items: center;
}
.invite_item_left_icon{
  width: 74rpx;
  height: 74rpx;
  display: flex;
}
.invite_item_left_icon image{
  width: 100%;
  height: 100%;
}
.invite_item_left_text{
  margin-left: 26rpx;
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(26,26,26,1);
}
.invite_item_right{
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,170,0,1);
}
.invite_box{
  margin-top: 15rpx;
}
.invite_bottom{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}
.invite_bottom_text{
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(102,102,102,1);
}
.invite_bottom_icon{
  margin-left: 17rpx;
  width: 18rpx;
  height: 10rpx;
  display: flex;
}
.invite_bottom_icon image{
  width: 100%;
  height: 100%;
}