inviteFriends.wxss 6.5 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;
  z-index: 666;
}
.invite_top{
  display: flex;
  justify-content: space-between;
  padding: 30rpx 60rpx;
  border-bottom: 1px solid #EBEBEB;
}
.invite_top_select{
  /* text-align: center; */
  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: -32rpx;
  left: -60rpx;
  right:0rpx;
  width: 288rpx;
  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%;
}
.fontSize{

  font-size:40rpx;
  font-family:Roboto-Regular;
  font-weight:400;
  color:rgba(255,255,255,1);
  text-shadow:0rpx 14rpx 14rpx rgba(250,127,52,0.22);
}

.mask{
  position: fixed;
  width: 750rpx;
  height: 1800rpx;
  background:rgba(0,0,0,0.4);
  z-index: 999;
  display: flex;
  /* align-items: center; */
  justify-content: center;
}
.mask_item{
  margin-top: 750rpx;
  width:686rpx;
  height:679rpx;
  background:rgba(255,255,255,1);
  border-radius:10rpx;
  box-sizing: border-box;
  padding: 30rpx;
  /* display: flex;
  flex-flow: column; */
  /* align-items: center; */

}
.mask_item_top{
  display: flex;
  justify-content: space-between;
}
.mask_item_top_pic{
  width:30rpx;
  height:30rpx;
  display: flex;
}
.mask_item_top_pic image{
  width: 100%;
  height: 100%;
}
.mask_item_title{
  text-align: center;
  font-size:40rpx;
  font-family:PingFang-SC-Bold;
  font-weight:bold;
  color:rgba(26,26,26,1);
  
}
.input_item{
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.input_item_left{
  font-size:32rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(26,26,26,1);
  /* line-height:36px; */
  width: 200rpx;
  text-align: right;
}
.input_item input{
  margin-left: 39rpx;
  width:393rpx;
  height:60rpx;
  background:#F2F2F2;
  border-radius:2rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  padding: 0 25rpx;
}
.item3 input{
  width:340rpx;
  height:60rpx;
  background:rgba(242,242,242,1);
  border-radius:2rpx;
}
.input_text{
  margin-left: 23rpx;
  font-size:32rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(26,26,26,1);
}
.marin_t{
  margin-top: 57rpx;
}
.button_box{
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button{
  width:300rpx;
  height:80rpx;
  line-height: 80rpx;
  text-align: center;
  background:rgba(255,129,44,1);
  border-radius:5rpx;

  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,255,255,1);

}
.bottom_text{
  margin-top: 20rpx;
  font-size:24rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(255,102,0,0.8);
  line-height: 36rpx;
  box-sizing: border-box;
  padding: 0 24rpx 10rpx 20rpx;
}