KC-MiddlePlatform/src/pages/index/index.less

.MsgProcessDrawer {
  .drawerHeader {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #17181A;

      &>span {
        display: inline-block;
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin-right: 8px;
        border-radius: 4px;
        text-align: center;
        line-height: 20px;

        &>img {
          width: 16px;
          height: 16px;
        }

        &:hover {
          background: #E6EAF2;
        }
      }
    }
  }

  .msgInfo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 0 16px;
    margin-bottom: 16px;

    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      &>img {
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }

      .detail {
        .msgtitle {
          height: 18px;
          line-height: 18px;
          font-weight: 500;
          font-size: 18px;
          color: #17181A;
          margin-bottom: 8px;
        }

        .date {
          height: 14px;
          line-height: 14px;
          font-weight: 400;
          font-size: 14px;
          color: #7A8599;
        }
      }
    }

    .right {
      position: relative;
      top: 12px;
      font-weight: 500;
      font-size: 14px;
      color: #FFAA33;
    }
  }

  .content {
    height:calc(100% - 126px);
    background: #FFFFFF;
    border-radius: 8px;
    overflow: scroll;
  }
}

.indexPage {
  height: 100%;
  min-width: 1180px;
  background: #f5f7fa;

  .pageContainer {
    display: flex;
    width: calc(100%);
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    // .profileCard {
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: flex-start;
    //   padding: 32px;
    //   background: #FFFFFF;
    //   border-radius: 4px;

    //   .wraper {
    //     display: flex;
    //     flex: 1;

    //     .avatar {
    //       width: 80px;
    //       height: 80px;
    //       margin-right: 24px;

    //       img {
    //         width: 100%;
    //       }
    //     }

    //     .description {
    //       width: calc(100% - 104px);

    //       .rowOne {
    //         display: flex;
    //         flex: 1;
    //         flex-direction: row;
    //         justify-content: space-between;
    //         align-items: flex-start;
    //         padding-top: 16px;

    //         .info {
    //           .name {
    //             height: 20px;
    //             font-size: 20px;
    //             font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    //             font-weight: bold;
    //             color: #17181A;
    //             line-height: 30px;
    //             margin-bottom: 16px;
    //           }

    //           .baseInfo {
    //             height: 14px;
    //             font-size: 14px;
    //             font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //             font-weight: 400;
    //             color: #666E80;
    //             line-height: 21px;
    //           }
    //         }

    //         .staffBaseInfo {
    //           display: flex;
    //           flex: 1;
    //           flex-direction: row;
    //           justify-content: flex-end;
    //           align-items: flex-start;

    //           .staffBaseInfoSpan {
    //             display: flex;
    //             flex-direction: column;
    //             justify-content: center;
    //             align-items: center;

    //             .spanName {
    //               height: 14px;
    //               font-size: 14px;
    //               font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //               font-weight: 400;
    //               color: #666E80;
    //               line-height: 14px;
    //               margin-bottom: 16px;
    //             }

    //             .spanValue {
    //               height: 20px;
    //               font-size: 20px;
    //               font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    //               font-weight: bold;
    //               color: #17181A;
    //               line-height: 20px;

    //               &.status {
    //                 color: #FFB54D;
    //               }
    //             }
    //           }

    //           .Divider {
    //             height: 24px;
    //             margin-left: 5%;
    //             margin-right: 5%;
    //             margin-top: 10px;
    //           }
    //         }
    //       }

    //       .rowTwo {
    //         display: flex;
    //         flex: 1;
    //         margin-top: 45px;
    //         flex-direction: row;
    //         justify-content: flex-start;
    //         align-items: center;

    //         .medicalInfoSpan {
    //           display: flex;
    //           width: 20%;
    //           height: 45px;
    //           flex-direction: column;
    //           align-items: flex-start;
    //           margin-right: 10%;

    //           .span {
    //             height: 14px;
    //             font-size: 14px;
    //             font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //             font-weight: 400;
    //             color: #666E80;
    //             line-height: 14px;
    //             margin-bottom: 16px;

    //             span {
    //               color: #17181A;
    //             }

    //             &:last-child {
    //               margin-bottom: 0;
    //             }
    //           }

    //           &:first-child {
    //              width: 40%;
    //           }

    //           &:last-child {
    //             margin-right: 0;
    //           }
    //         }
    //       }
    //     }
    //   }

    //   .profileFooter {
    //     display: flex;
    //     flex-direction: row;
    //     justify-content: space-between;
    //     padding-top: 25px;
    //     margin-top: 32px;
    //     border-top: 1px solid #DFE3EB;

    //     .flowInstruction {
    //       height: 14px;
    //       font-size: 14px;
    //       font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //       font-weight: 400;
    //       color: #17181A;
    //       line-height: 14px;
    //       cursor: pointer;

    //       &::before {
    //         position: relative;
    //         display: inline-block;
    //         content: '';
    //         top: 2px;
    //         width: 16px;
    //         height: 16px;
    //         margin-right: 8px;
    //         // background-image: url('../../../../public/images/alert.png');
    //         // background-size: cover;
    //       }
    //     }

    //     .action {
    //       display: flex;
    //       flex-direction: row;

    //       .editProfile {
    //         height: 14px;
    //         font-size: 14px;
    //         font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //         font-weight: 400;
    //         color: #26334D;
    //         line-height: 14px;
    //         margin-right: 32px;
    //         cursor: pointer;

    //         &::before {
    //           position: relative;
    //           display: inline-block;
    //           content: '';
    //           top: 3px;
    //           width: 16px;
    //           height: 16px;
    //           margin-right: 8px;
    //           // background-image: url('../../../../public/images/box.png');
    //           // background-size: cover;
    //         }
    //       }

    //       .qualificationApply {
    //         height: 14px;
    //         font-size: 14px;
    //         font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    //         font-weight: 400;
    //         color: #26334D;
    //         line-height: 14px;
    //         cursor: pointer;

    //         &::before {
    //           position: relative;
    //           display: inline-block;
    //           content: '';
    //           top: 3px;
    //           width: 16px;
    //           height: 16px;
    //           margin-right: 8px;
    //           // background-image: url('../../../../public/images/blueFile.png');
    //           // background-size: cover;
    //         }
    //       }
    //     }
    //   }
    // }
    // .cardTwo {
    //   display: flex;
    //   flex-direction: row;
    //   padding-top: 16px;
    //   margin-bottom: 16px;
    // }
    // .cardThree {
    //   display: flex;
    //   flex-direction: row;
    //   margin-bottom: 16px;
    // }

    .left {
      width: calc(100% - 454px);
      height: calc(100vh - 80px);
      min-height: 686px;
      padding: 16px;
      border-radius: 4px;
      background: #fff;

      .leftTitle {
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        font-weight: bold;
        color: #17181a;
        margin-bottom: 12px;
      }

      .leftTitleSub {
        font-size: 14px;
        font-weight: 400;
        color: #525866;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .leftContent {
        display: flex;
        width: 100%;
        height: calc(100% - 112px);
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        overflow: hidden;

        .imgWrap {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-size: cover !important;
          background-repeat: no-repeat !important;

          &>img {
            width: 810px;
            transition: all 0.3s linear;
          }
        }

        /* 当屏幕宽度小于或等于 600px */
        @media screen and (max-width: 1250px) {
          .imgWrap>img {
            width: 600px;
          }
        }

        /* 当屏幕宽度小于或等于 600px */
        @media screen and (min-width: 1250px) and (max-width: 1360px) {
          .imgWrap>img {
            width: 700px;
          }
        }

        /* 当屏幕宽度在 601px 到 900px */
        @media screen and (min-width: 1360px) and (max-width: 1500px) {
          .imgWrap>img {
            width: 800px;
          }
        }

        /* 当屏幕宽度大于 900px */
        @media screen and (min-width: 1500px) and (max-width: 1760px) {
          .imgWrap>img {
            width: 900px;
          }
        }

        /* 当屏幕宽度大于 900px */
        @media screen and (min-width: 1760px) and (max-width: 1920px) {
          .imgWrap>img {
            width: 1000px;
          }
        }

        /* 当屏幕宽度大于 900px */
        @media screen and (min-width: 1960px) and (max-width: 2000px) {
          .imgWrap>img {
            width: 1200px;
          }
        }

        /* 当屏幕宽度大于 900px */
        @media screen and (min-width: 2000px) {
          .imgWrap>img {
            width: 1400px;
          }
        }
      }
    }

    .right {
      width: 434px;
      min-height: 686px;
      height: calc(100vh - 80px);

      .cardOne {
        position: relative;
        width: 100%;
        height: 132px;
        padding: 16px;
        background: linear-gradient(180deg, #ebf2fc 0%, #fcfeff 100%);
        box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.02);
        border-radius: 4px;
        border: 1px solid #f7fbff;

        .welcomBg {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .inner {
          position: relative;
          z-index: 9;
          width: 100%;
          height: 100%;

          .userId {
            position: absolute;
            top: -7px;
            right: -15.5px;
            font-size: 14px;
            color: #5c7599;
            height: 24px;
            padding-left: 16px;
            padding-right: 8px;
            font-weight: 500;
            background: linear-gradient(180deg, #e8f1fc 0%, #fcfeff 100%);
            border-radius: 100px 0px 0px 100px;
            opacity: 0.8;
            border: 1px solid #f7fbff;
          }

          .cardOneTitle {
            height: 24px;
            font-size: 24px;
            font-weight: bold;
            color: #17181a;
            margin-bottom: 25px;
          }

          .content {
            .row {
              display: flex;
              height: 16px;
              flex-direction: row;
              align-items: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              .label {
                width: 50%;
                font-size: 14px;
                color: #17181a;
                text-align: left;

                &>img {
                  position: relative;
                  top: -1px;
                  width: 16px;
                  height: 16px;
                  margin-right: 4px;
                }

                &>span {
                  color: #7a8599;
                  padding-right: 16px;
                }
              }

              &:last-child {
                margin-top: 14px;
              }
            }
          }
        }
      }

      .cardTwo {
        margin-top: 16px;
      }

      .cardThree {
        // height: calc(100% - 340px);
        margin-top: 16px;
        border-radius: 4px;
        background-color: #fff;
      }
    }
  }
}