recommend.wxss 4.1 KB

page{
  line-height: 1;
}
.container{
  width: 750rpx;
  display: flex;
  flex-flow: column;
  position: relative;
}
.top{
  width: 750rpx;
  height: 1100rpx;
  display: flex;
}
.top image{
  width: 100%;
  height: 100%;
}
.mid{
  width: 750rpx;
  position: absolute;
  top: 263rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
.item_1{
  width:688rpx;
  height:685rpx;
  background:rgba(253,255,255,1);
  box-shadow:0rpx 8rpx 49rpx 0rpx rgba(255,107,82,0.34);
  border-radius:22rpx;
  box-sizing: border-box;
  padding: 46rpx 50rpx;
}
.item_1_top{
  font-size:32rpx;
  font-family:PingFang-SC-Bold;
  font-weight:bold;
  color:rgba(254,76,48,1);
  line-height: 52rpx;
}
.item_1_mid{
  margin-top: 40rpx;
  display: flex;
  flex-flow: column;
}
/* .item_1_mid_t{
  width:584rpx;
  height:72rpx;
  line-height: 72rpx;
  text-align: center;
  background:linear-gradient(180deg,rgba(255,118,88,1),rgba(255,138,101,1));
  border-radius:22rpx 22rpx 0rpx 0rpx;
  font-size: 40rpx;
  color: #fff;
  font-family:PangMenZhengDao;
} */
.item_1_mid_t{
  width:584rpx;
  height:72rpx;
  border-radius:22px 22px 0px 0px;
  display: flex;
}
.item_1_mid_t image{
  width: 100%;
  height: 100%;
}

.color_yellow{
  color: #FFF285;
}
.item_1_mid_b{
  width:584rpx;
  height:131rpx;
  background:rgba(247,247,247,1);
  border-radius:0rpx 0rpx 22rpx 22rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  font-size:30rpx;
  font-family:PingFang-SC-Bold;
  font-weight:bold;
  color:rgba(75,75,77,1);
}
.mid_b_text{
  margin-top: 23rpx;
  font-size:26rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(153,153,153,1);
}
.item_2{
  margin-top: 24rpx;
  width:688rpx;
  height:213rpx;
  background:rgba(253,255,255,1);
  box-shadow:0rpx 8rpx 49rpx 0rpx rgba(255,107,82,0.34);
  border-radius:22rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 66rpx;
}
.item_2_left{
  display: flex;
  flex-flow: column;
  align-items: center;
}
.item_2_left_top{

  font-size:80rpx;
  font-family:Roboto-Medium;
  font-weight:500;
  color:rgba(251,92,69,1);
  
}
.item_2_left_bottom{
  font-size:28rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(251,92,69,1);
  margin-top: 20rpx;
}
.item_2_mid{
  width:2rpx;
  height:89rpx;
  background:rgba(255,137,101,0.54);
}
.item_3{
  margin-top: 24rpx;
  width:688rpx;
  height:363rpx;
  background:rgba(253,255,255,1);
  box-shadow:0rpx 8rpx 49rpx 0rpx rgba(255,107,82,0.34);
  border-radius:22rpx;
}
.item_3_top{
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item_3_top_line{
  width:77rpx;
  height:2rpx;
  background:rgba(255,131,96,0.4);
}
.item_3_top_mid{
  font-size:40rpx;
  font-family:PangMenZhengDao;
  font-weight:400;
  color:rgba(255,131,96,1);
  margin: 0 37rpx;
}
.item_3_box{
  margin-top: 26rpx;
  display: flex;
  flex-flow: column;
}
.box_item{
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 50rpx;
}
.box_item_left{
  width:38rpx;
  height:38rpx;
  line-height: 38rpx;
  text-align: center;
  background:rgba(255,131,96,1);
  border-radius:50%;

  font-size:28rpx;
  font-family:Roboto-Regular;
  font-weight:400;
  color:rgba(255,254,254,1);
}
.box_item_right{
  margin-left: 24rpx;
  font-size:30rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(75,75,76,1);
}

.item_4{
  margin-top: 24rpx;
  width:688rpx;
  /* height:1129rpx; */
  background:rgba(253,255,255,1);
  box-shadow:0rpx 8rpx 49rpx 0rpx rgba(255,107,82,0.34);
  border-radius:22rpx;
  display: flex;
  flex-flow: column;
}
.item_4_content{

  font-size:26rpx;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(77,77,77,1);
  line-height: 48rpx;
  box-sizing: border-box;
  padding: 30rpx 60rpx 42rpx 50rpx;
}
.bottom{
  margin-top: 72rpx;
  margin-bottom: 32rpx;
  width:686rpx;
  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);

}