veterans_H5/h5_web/pages/jobDetails/scss/jobDetails.scss

page{background-color: #f2f2f2;}
.jobdetails{
  background-color: #f2f2f2;
  
  &-head{
    &-card{
      margin: 0 0 20rpx !important;
      
      .jobdetails-head-cardhead{
        padding: 40rpx 5% 0;
        
        .content{
          padding-bottom: 30rpx;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          border-bottom: 1px solid #e4e7ed;
        }
        
        .left{
          max-width: 70%;
          
          view:first-child{
            margin-bottom: 12rpx;
            font-size: 46rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 65rpx;
            letter-spacing: 2px;
          }
          
          view:last-child{
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9B9B9B;
            line-height: 50rpx;
            letter-spacing: 1px;
          }
        }
        
        .right{
          text-align: right;
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #EF651F;
          line-height: 50rpx;
          letter-spacing: 1px;
        }
      }
      
      .jobdetails-head-cardbody{
        padding: 30rpx 5% 0;
        
        .container{
          padding-bottom: 30rpx;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid #e4e7ed;
          
          .container-image{
            .image{
              width: 86rpx;
              height: 86rpx;
              box-shadow: 0px 0px 10rpx 0px rgba(77, 77, 77, 0.23);
              border-radius: 7rpx;
            }
          }
          
          .content{
            margin-left: 4%;
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            .content-left{
              max-width: 85%;
              
              view:first-child{
                margin-bottom: 12rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 45rpx;
              }
              
              view:last-child{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #9F9F9F;
                line-height: 33rpx;
              }
            }
            
            .content-right{
              margin-top: 15rpx;
              text-align: right;
              line-height: 80rpx;
            }
          }
        }
      }
      
      .jobdetails-head-cardfoot{
        padding: 30rpx 5% 0;
        
        .content{
          padding-bottom: 30rpx;
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          
          .content-left{
            max-width: 80%;
            
            view:first-child{
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9F9F9F;
              line-height: 30rpx;
            }
          }
          
          .content-right{
            display: flex;
            flex-wrap: wrap;
            line-height: 30rpx;
            
            &-icon{
              display: initial;
            }
            
            &-text{
              text-align: right;
              font-size: 22rpx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #028DFE;
              line-height: 30rpx;
            }
          }
        }
      }
    }
  }
  
  &-content{
    &-card{
      margin: 0 0 20rpx !important;
      
      .jobdetails-content-cardhead{
        padding: 40rpx 5% 0;
        
        .container{
          padding-bottom: 30rpx;
          width: 100%;
          // border-bottom: 1px solid #e4e7ed;
          
          .title{
            margin-bottom: 12rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: #000000;
            line-height: 45rpx;
            letter-spacing: 1px;
          }
          
          .content{
            .content-textarea{
              ::v-deep .u-input__textarea{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #545454;
                line-height: 35rpx;
                letter-spacing: 1px;
              }
            }
          }
        }
      }
      
      .jobdetails-content-cardbody{
        padding: 40rpx 5% 0;
        
        .container{
          padding-bottom: 30rpx;
          width: 100%;
          
          .title{
            margin-bottom: 12rpx;
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: #000000;
            line-height: 45rpx;
            letter-spacing: 1px;
          }
          
          .content{
            .content-textarea{
              ::v-deep .u-input__textarea{
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #545454;
                line-height: 35rpx;
                letter-spacing: 1px;
              }
            }
          }
        }
      }
    }
  }

  .jobdetailsbtn{
    .jobdetailsbtn-container{
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      flex-direction: row;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 998;
      box-sizing: content-box;
      background-color: #FFFFFF;
      
      .jobdetailsbtn-content{
        flex: 1;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 6px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background-color: #FFFFFF;
        
        view:first-child{
          width: 100%;
          padding: 43rpx 30rpx;
          
          .jobdetailsubmitbtn{
            width: 100%;
          }
        }
      }
    }
  }
}