epmet-work-mp/pages/work/work.wxss

/* pages/work/work.wxss */
page {
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f7f7f7;
  }
  .gray{
    color: #B6B6B6;
  }
  .yellow_T{
      color: #DFA168;
  }
  .yellow{
      color:#FF783C;
      font-weight: 500;
  }
  .green{
    color:#10B2A5 ;
  }
  .blue{
      color: #5F9BD4 ;
  }
  .font_size_44{
      font-size: 44rpx;
  }
  .font_size_26{
      font-size: 26rpx;
  }
  .none{
      display: none !important;
  }
.header {
    width: 100%;
    height: 470rpx;
    /* position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; */
    background: linear-gradient(180deg, #116FED 0%, #66A6FD 63%, #F7F7F7 100%);
    overflow: hidden;
}
.header .header-bg {
    width: 100%;
    height: 444rpx;
    position: absolute;
    height: 100%;
    z-index: -999;
}
.header .navigation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    color: #fff;
    font-size: 32rpx;
    position: relative;
    padding-left: 20rpx;
    z-index: 100;
}
.header .navigation image{
    width: 34rpx;
    height: 34rpx;
    margin-right: 17rpx;
}
.header .content{
    margin:90rpx 0 0;
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.header .content .tab{
   display: flex;
   justify-content: space-around;
   text-align: center;
   position: relative;
   color: #fff;
}
.header .content .tab image{
    position: absolute;
    width:140rpx;
    height: 14rpx;
}
.header .content  .tab_resi{
    top: 50rpx;
    left: 109rpx;
}
.header .content  .tab_house{
    top: 50rpx;
    left: 462rpx;
}
.header .content .inout_box {
    position: relative;
    margin-top: 47rpx;
}
.header .content .inout_box input{
    width: auto;
    background: #F5F5FA;
    border-radius: 47rpx;
    padding:0 100rpx 0 69rpx;
    height: 76rpx;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header .content .inout_box image{
    position: absolute;
    left: 21rpx;
    top: 24rpx;
    width: 30rpx;
    height: 30rpx;
}
.header .content .inout_box .btn_box{
    width: 110rpx;
    height: 50rpx;
    position: absolute;
    top: 15rpx;
    right:-10rpx;
    display: flex;
    align-items: center;
}
.header .content .inout_box .btn_box text{
    width: 80rpx;
    height: 30rpx;
    line-height: 30rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    color:#3A80E7;
    padding-left: 15rpx;
    border-left:2rpx #3A80E7 solid ;
}
.header .content .jump {
    height: 80rpx;
    background: linear-gradient(0deg, #579EFD 0%, #408DF3 100%);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 30rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
}
.content .searChrecord{
    font-size:26rpx;
    color: #FFFFFF;
    margin-top: 30rpx;
    display: flex;
    overflow: hidden;
    justify-content: space-around;
    align-items: center;
}
.content .searChrecord .item_list {
    flex: 1;
    display: flex;
    justify-content: start;
    overflow: hidden;
    margin: 0 20rpx;
    box-sizing: border-box;
}

.content .searChrecord .item_list .label{
    width: 111rpx;
}
.content .searChrecord .item_list .item{
    padding: 7rpx 16rpx;
    height: 40rpx;
    line-height: 26rpx;
    width: fit-content;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(0deg, #579EFD 0%, #408DF3 100%);
    opacity: 0.9;
    border-radius: 20rpx;
    box-sizing: border-box;
    margin-left: 10rpx;
}
.content .searChrecord .item_list .item:last-child {
    flex: 1;                
    overflow: hidden;   
    max-width: 150rpx;     
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.content .searChrecord image{
    width: 32rpx;
    height: 32rpx;
}
.header .content .jump  view{
    flex: 1;
    text-align: left;
}
.body{
    padding: 0 20rpx 20rpx;
    position: relative;
    top: -20rpx;
    box-sizing: border-box;
    overflow: hidden;
}
.body .top{
    width: 100%;
    height: 695rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
}
.body .top .title{
    display: flex;
    justify-content: space-between;
    height: 90rpx;
    align-items: center;
}
.body .top .title text{
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #B4B4B4;
}
.body .top .tip{
    display: flex;
    align-items: center;
    height: 60rpx;
    background-color:#ffeccc;
    border-radius: 10rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FF783C ;
    padding:0 20rpx;
}
.body .top .tip image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
}
.big_box {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 498rpx;
    margin-top: 16rpx;
}
.big_box .left{
    width: 310rpx;
    background-color: #f6f9fe;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.big_box .left .left_title{
    display: flex;
    align-items: center;
    padding-left: 17rpx;
    font-family: PingFang SC;
    font-weight: 600;
}
.big_box .left .left_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.big_box .left .left_body view {
    display: flex;
    flex-direction: column;
    padding-left: 50rpx;
   justify-content: space-between;
}

.big_box .left image {
    width: 50rpx;
    height: 50rpx;
}

.big_box .center_image{
    position: absolute;
    width: 352rpx;
    height: 352rpx;
    left: 50%;
    top: 50%;
    transform: translateX(-170rpx) translateY(-170rpx);
}
.big_box .right{
    width: 310rpx;
    background-color: #fefbf0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.big_box .right .right_title{
    display: flex;
    align-items: center;
    justify-content: end;
    padding-left: 55rpx;
    font-family: PingFang SC;
    font-weight: 600;
}
.big_box .right .right_body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.big_box .right .right_body view {
    display: flex;
    flex-direction: column;
    padding-right: 50rpx;
    text-align: right;
   justify-content: space-between;
}

.big_box .right image {
    width: 50rpx;
    height: 50rpx;
}
.body .bto{
    width: 100%;
    max-height: 695rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;
    margin-top:20rpx ;
    margin-bottom: 100rpx;
    padding: 0 30rpx 20rpx;
}
.body .bto .content{
    border-radius: 20rpx;
    /*  */
    border-image: linear-gradient(0deg, #E7F1FF, #E5EDFB) 10 10;
    background: rgba(246,249,254,0.72);
    border: 1px solid #E7F1FF;
    box-sizing: border-box;
    padding: 32rpx 26rpx;
}
.body .bto .title{
    display: flex;
    justify-content: space-between;
    height: 90rpx;
    align-items: center;
}
.body .bto .title text{
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #B4B4B4;
}
.body .bto .content .bg_box{
    display: flex;
}
.body .bto .content .bg_box .bg_left{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.body .bto .content .bg_box .bg_left .h2{
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
 }
 .body .bto .content .bg_box .bg_left .submit{
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 20rpx;
 }
 .body .bto .content .bg_box .bg_left .btn_Box{
    display: flex;
    height: 56rpx;
    padding-right: 50rpx;
    color: #fff;
    font-size: 28rpx;
    margin-top:30rpx ;
 }
 .body .bto .content .bg_box .bg_left .btn_Box .btn_fx{
    width: 160rpx;
    height: 56rpx;
    background: #FF783C;
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
    margin-right:31rpx ;
 }
 .body .bto .content .bg_box .bg_left .btn_Box .btn_tj{
    width: 160rpx;
    height: 56rpx;
    background: #13c8bd;
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
 }
 
 .body .bto .content .bg_box .bg_left .submit b{
     color:#3A80E7 ;
 }
.body .bto .content .bg_box .bg_right{
    position: relative;
    width: 160rpx;
    height: 100%;
    display: flex;
    align-items: center;
}
.body .bto .content .bg_box .bg_right image{
    width: 160rpx;
    height: 160rpx;
    position: relative;
    top: 20rpx;
}
.body .bto .content .bg_box .bg_right .tag{
    display: inline-block;
    position: absolute;
    top: -36rpx;
    right: -28rpx;
    background: #FFEFDB;
    border-radius: 0rpx 10rpx 0rpx 10rpx;
    padding: 10rpx 26rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FF783C;
}

.body .bto .list{
    display: flex;
    flex-direction: column;
}
.body .bto .list .list_card{
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    align-items: center;
    color: #333333;
    border-bottom: 1px solid #EAEAEA;
}
.body .bto .list .list_card .left{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
}
.body .bto .list .list_card .left :nth-child(1),
.body .bto .list .list_card .left :nth-child(2){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;     
}
.body .bto .list .list_card .left .submit{
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 29rpx;
}
.body .center_img{
    height: 130rpx;
    width: 100%;
    margin-top: 20rpx;
}
.list_card .right b{
    font-size: 40rpx;
    font-family: DIN Alternate;
    font-weight: bold;
    color: #FF783C;
}