@import "../../var/style.less"; // 导入变量和混合定义


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;

  &::-webkit-scrollbar {
    width: 0;
    /* 隐藏垂直滚动条 */
    height: 0;
    /* 隐藏水平滚动条 */
  }
}

@keyframes arrowMove {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.MediScreen {
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  background: #051833;

  .topbar {
    position: relative;
    width: 100%;
    .px-to-vh(height, 213);


    img {
      width: 100%;
      .px-to-vh(max-height, 213);
    }

    .topbarInfo {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .hospName {
        font-weight: normal;
        .font-size-to-vw(50);
        color: #FFFFFF;
        .px-to-vw(padding-left, 40);
        .px-to-vh(padding-top, 103);
        font-family: 'DingTalk', sans-serif;
      }

      .date {
        font-weight: normal;
        .font-size-to-vw(50);
        color: #FFFFFF;
        .px-to-vw(padding-right, 40);
        .px-to-vh(padding-top, 103);
        font-family: 'DingTalk', sans-serif;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .px-to-vh(height, 1818);
    .px-to-vw(padding-left, 20);
    .px-to-vw(padding-right, 20);
    .px-to-vh(margin-bottom, 58);


    .left {
      .px-to-vw(width, 1080);
      height: 100%;

      .blockOne {
        .blockHeader {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .px-to-vh(height, 60);
          .px-to-vw(padding-left, 62);
          .font-size-to-vw(32);
          color: #E6F2FF;
          .px-to-vh(margin-bottom, 50);
          font-family: 'DingTalk', sans-serif;
          background: url('../../images/title.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;

        }

        .rowOne {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          .px-to-vw(padding-left, 60);
          .px-to-vw(padding-right, 60);
          .px-to-vw(margin-bottom, 40);

          .cycleProgress {
            .px-to-vw(width, 120);
            .px-to-vw(height, 120);

          }

          .rowDetail {
            display: flex;
            .px-to-vw(width, 820);
            .px-to-vh(height, 160);
            .px-to-vh(padding-top, 12);
            flex-direction: row;
            justify-content: flex-start;
            background: url('../../images/shebeijingzhiditu2.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .typeBlock {
              .px-to-vw(width, 200);


              .label {
                font-weight: 400;
                .font-size-to-vw(28);
                .px-to-vh(height, 28);
                .px-to-vh(line-height, 28);
                color: #CCE6FF;
                white-space: nowrap;
                .px-to-vh(margin-bottom, 12);
                .px-to-vh(padding-left, 50);
              }

              .value {
                font-weight: normal;
                .px-to-vh(height, 48);
                .px-to-vh(line-height, 48);
                color: #FFFFFF;
                font-family: 'DingTalk', sans-serif;
                .px-to-vh(padding-left, 50);
              }

              &:first-child {
                .px-to-vw(width, 320);

                .value {
                  font-weight: normal;
                  .px-to-vh(height, 48);
                  .px-to-vh(line-height, 48);

                }
              }

              &:nth-child(2) {
                .value {
                  color: #7FBEFF;
                }
              }

              &:nth-child(3) {
                .value {
                  color: #CDE6FF;
                }
              }
            }
          }
        }

        .rowTwo {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          .px-to-vw(padding-left, 60);
          .px-to-vw(padding-right, 60);

          .cycleProgress {
            .px-to-vw(width, 120);
            .px-to-vw(height, 120);

          }

          .rowDetail {
            display: flex;
            .px-to-vw(width, 820);
            .px-to-vh(height, 160);
            .px-to-vh(padding-top, 12);
            flex-direction: row;
            justify-content: flex-start;
            background: url('../../images/shebeijingzhiditu2.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;


            .typeBlock {
              .px-to-vw(width, 200);


              .label {
                font-weight: 400;
                .font-size-to-vw(28);
                .px-to-vh(height, 28);
                .px-to-vh(line-height, 28);
                color: #CCE6FF;
                white-space: nowrap;
                .px-to-vh(margin-bottom, 12);
                .px-to-vh(padding-left, 50);
              }

              .value {
                font-weight: normal;
                .px-to-vh(height, 48);
                .px-to-vh(line-height, 48);
                color: #FFFFFF;
                font-family: 'DingTalk', sans-serif;
                .px-to-vh(padding-left, 50);
              }

              &:first-child {
                .px-to-vw(width, 320);

                .value {
                  font-weight: normal;
                  .px-to-vh(height, 48);
                  .px-to-vh(line-height, 48);

                }
              }

              &:nth-child(2) {
                .value {
                  color: #7FBEFF;
                }
              }

              &:nth-child(3) {
                .value {
                  color: #CDE6FF;
                }
              }
            }

          }
        }
      }

      .blockTwo {
        .px-to-vh(margin-top, 100);

        .blockHeader {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .px-to-vh(height, 60);
          .px-to-vw(padding-left, 62);
          .font-size-to-vw(32);
          color: #E6F2FF;
          .px-to-vh(margin-bottom, 40);
          font-family: 'DingTalk', sans-serif;
          background: url('../../images/title.png');
          background-size: cover;
          background-repeat: no-repeat;
        }

        .barLineChartwrap {
          width: 100%;
          .px-to-vh(height, 500);
          .px-to-vh(margin-bottom, 60);
        }

        .listWrap {
          .px-to-vh(height, 1075);
          .px-to-vh(margin-top, -14);
          // overflow: scroll;

          .list {
            display: flex;
            width: 100%;
            .px-to-vh(height, 56);
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .sort {
              .px-to-vw(width, 113);
              .font-size-to-vw(28);
              text-align: center;
              .px-to-vh(line-height, 100);
              color: #CCE6FF;
            }

            .name {
              .px-to-vw(width, 229);
              font-weight: 400;
              .font-size-to-vw(28);
              color: #FFFFFF;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .info {
              .px-to-vw(width, 229);
              font-weight: 400;
              .font-size-to-vw(28);
              color: #FFFFFF;
            }

            .company {
              font-weight: 400;
              .font-size-to-vw(28);
              color: #FFFFFF;
            }

            &:first-child {
              .name {
                color: #CCE6FF;
              }

              .info {
                color: #CCE6FF;
              }

              .company {
                color: #CCE6FF;
              }
            }

            &:nth-child(2n) {
              background: #162840;
            }

            &:nth-child(2) {
              .sort {
                color: #FF4D6A;
              }
            }

            &:nth-child(3) {
              .sort {
                color: #FF4D6A;
              }
            }

            &:nth-child(4) {
              .sort {
                color: #FF4D6A;
              }
            }

          }
        }
      }
    }

    .middle {
      .px-to-vw(width, 1500);
      height: 100%;
      .px-to-vh(padding-top, 24);


      .title {
        margin: 0 auto;
        .px-to-vw(width, 600);
        .px-to-vh(height, 60);
        .px-to-vh(line-height, 60);
        .px-to-vh(margin-bottom, 50);
        text-align: center;
        font-weight: normal;
        .font-size-to-vw(40);
        color: #E6F3FF;
        font-family: 'DingTalk', sans-serif;
        background: url('../../images/zhongjianbiaotizs.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .subTitle {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .px-to-vh(margin-bottom, 50);

        .leftSubTitle {
          font-weight: 400;
          .font-size-to-vw(28);
          color: #CCE6FF;
          .px-to-vw(margin-right, 80);

          &>i {
            display: inline-block;
            .px-to-vw(margin-left, 20);
            font-family: 'DingTalk', sans-serif;
            .font-size-to-vw(40);

          }
        }

        .rightSubTitle {
          font-weight: 400;
          .font-size-to-vw(28);
          color: #CCE6FF;

          &>i {
            display: inline-block;
            .px-to-vw(margin-left, 20);
            font-family: 'DingTalk', sans-serif;
            .font-size-to-vw(40);
          }
        }
      }

      .dataWrap {
        display: flex;
        .px-to-vw(width, 1500);
        flex-direction: row;
        overflow: visible;
        justify-content: space-between;
        align-items: center;
        .px-to-vh(margin-bottom, 84);

        .dataBox {
          position: relative;
          .px-to-vw(width, 430);
          .px-to-vh(height, 260);
          // background: url('../../images/bianzuBg.png');
          // background-size: 100% auto;
          // .px-to-vh(background-position-y,100);
          // background-repeat: no-repeat;

          .innerWrap {
            position: absolute;
            top: 0;
            left: 0;

            .info {
              // position: absolute;
              // .px-to-vh(top, -72);
              display: flex;
              width: 100%;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .px-to-vh(margin-bottom, 88);

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

                .label {
                  font-weight: 400;
                  .px-to-vh(height, 28);
                  .px-to-vh(line-height, 28);
                  .px-to-vh(margin-bottom, 16);
                  .font-size-to-vw(28);
                  color: #CCE6FF;
                  white-space: nowrap;
                }

                .value {
                  font-weight: normal;
                  .font-size-to-vw(80);
                  color: #80C0FF;
                  white-space: nowrap;
                  font-family: 'DingTalk', sans-serif;

                  i {
                    .font-size-to-vw(20);
                  }
                }

                &:nth-child(2) {
                  .px-to-vw(margin-left, 58);

                  .label {
                    position: relative;
                    .px-to-vh(padding-top, 30);
                    .px-to-vh(margin-bottom, 35);
                  }

                  .value {
                    font-weight: normal;
                    .font-size-to-vw(40);
                    color: #FFFFFF;

                    i {
                      .font-size-to-vw(20);
                    }
                  }
                }
              }
            }

            .cardBottom {
              // position: absolute;
              // .px-to-vh(bottom, 43);
              display: flex;
              width: 100%;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              .px-to-vw(padding-left, 55);
              .px-to-vw(padding-right, 55);

              .a {
                .font-size-to-vw(24);
                color: #CCE6FF;

                &>span {
                  font-weight: 400;
                  color: #FFFFFF;
                  .px-to-vw(padding-left, 18);
                  font-family: 'DingTalk', sans-serif;
                }
              }
            }
          }

          .smoothLineChartWrap {
            .px-to-vh(height, 80);
            .px-to-vh(margin-top, 130);

          }

        }
      }

      .banner {
        .px-to-vh(margin-bottom, 60);
        text-align: center;
        .px-to-vh(height, 500);

        .blockType {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .px-to-vh(margin-bottom, 26);

          .leftBlockType {
            font-weight: 400;
            .font-size-to-vw(24);
            color: #CCE6FF;
            .px-to-vw(margin-right, 40);

            &::before {
              position: relative;
              content: '';
              display: inline-block;
              .px-to-vw(width, 20);
              .px-to-vw(height, 16);
              background: #80EAFF;
              .px-to-vw(margin-right, 8);
              .px-to-vw(border-radius, 4);
            }
          }

          .rightBlockType {
            font-weight: 400;
            .font-size-to-vw(24);
            color: #CCE6FF;

            &::before {
              position: relative;
              content: '';
              display: inline-block;
              .px-to-vw(width, 20);
              .px-to-vw(height, 16);
              background: #FFE980;
              .px-to-vw(margin-right, 8);
              .px-to-vw(border-radius, 4);
            }
          }
        }
      }

      .titleSheb {
        text-align: center;
        width: 100%;
        .px-to-vh(height, 60);
        .px-to-vh(line-height, 60);
        background: url('../../images/shebeibyBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-weight: normal;
        .font-size-to-vw(40);
        color: #E6F3FF;
        font-family: 'DingTalk', sans-serif;
        .px-to-vh(margin-bottom, 20);
      }

      .shebeiCard {
        .px-to-vh(height, 500);
        .px-to-vh(margin-bottom, 40);

        .blockType {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .px-to-vh(margin-bottom, 26);

          .leftBlockType {
            font-weight: 400;
            .font-size-to-vw(24);
            color: #CCE6FF;
            .px-to-vw(margin-right, 40);

            &::before {
              position: relative;
              content: '';
              display: inline-block;
              .px-to-vw(width, 20);
              .px-to-vw(height, 16);
              background: #80EAFF;
              .px-to-vw(margin-right, 8);
              .px-to-vw(border-radius, 4);
            }
          }

          .rightBlockType {
            font-weight: 400;
            .font-size-to-vw(24);
            color: #CCE6FF;

            &::before {
              position: relative;
              content: '';
              display: inline-block;
              .px-to-vw(width, 20);
              .px-to-vw(height, 16);
              background: #FFE980;
              .px-to-vw(margin-right, 8);
              .px-to-vw(border-radius, 4);
            }
          }
        }

        .card {
          position: relative;
          .px-to-vw(width, 360);
          .px-to-vh(height, 180);
          .px-to-vw(padding-top, 20);
          .px-to-vw(padding-left, 20);
          .px-to-vw(padding-bottom, 20);
          .px-to-vw(padding-right, 20);
          background: url('../../images/kapianBg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .number {
            font-weight: normal;
            .font-size-to-vw(40);
            .px-to-vh(height, 48);
            .px-to-vh(line-height, 48);
            color: #66B3FF;
            font-family: 'DingTalk', sans-serif;
            .px-to-vh(margin-bottom, 8);
          }

          .name {
            font-weight: 400;
            .font-size-to-vw(28);
            color: #FFFFFF;
            .px-to-vh(height, 28);
            .px-to-vh(line-height, 28);
            .px-to-vh(margin-bottom, 32);
          }

          .date {
            font-weight: 400;
            .font-size-to-vw(24);
            color: #CCE6FF;
          }

          &::after {
            position: absolute;
            content: '';
            display: inline-block;
            .px-to-vw(width, 130);
            .px-to-vh(height, 130);
            .px-to-vh(top, 30);
            .px-to-vw(right, 10);
            background: url('../../images/baoyangicon.png');
            background-size: 100% auto;
            background-repeat: no-repeat;
          }

          &.gray {
            .number {
              color: #6B8299;
            }

            .name {
              color: #6B8299;
            }

            .date {
              color: #6B8299;
            }

            &::after {
              background: url('../../images/baoyangicon_gray.png');
              background-size: 100% auto;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }

    .right {
      .px-to-vw(width, 1080);
      height: 100%;

      .blockHeader {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        .px-to-vh(height, 60);
        .px-to-vw(padding-left, 62);
        .font-size-to-vw(32);
        color: #E6F2FF;
        font-family: 'DingTalk', sans-serif;
        .px-to-vh(margin-bottom, 53);
        background: url('../../images/title.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .listWrap {
        .px-to-vh(height, 439);
        .px-to-vh(margin-top, -14);
        .px-to-vh(margin-bottom, 48);
        // overflow: scroll;

        .list {
          display: flex;
          width: 100%;
          .px-to-vh(height, 56);
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          .name {
            text-align: center;
            width: 25%;
            font-weight: bold;
            .font-size-to-vw(28);
            color: #FFFFFF;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .info {
            text-align: center;
            width: 25%;
            font-weight: bold;
            .font-size-to-vw(28);
            color: #FFFFFF;
          }

          .company {
            text-align: center;
            width: 25%;
            font-weight: bold;
            .font-size-to-vw(28);
            color: #FFFFFF;
          }

          .companyA {
            text-align: center;
            width: 25%;
            font-weight: bold;
            .font-size-to-vw(28);
            color: #FEE980;
          }

          &:first-child {
            .name {
              color: #CCE6FF;
            }

            .info {
              color: #CCE6FF;
            }

            .company {
              color: #CCE6FF;
            }
          }

          &:nth-child(2n) {
            background: #162840;
          }
        }
      }

      .SingleBarChartComponentWrap {
        .px-to-vh(height, 421);
        .px-to-vh(margin-bottom, 60);
        .px-to-vh(margin-top, 80);
      }

      .keshichufangblockHeader {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        .px-to-vh(height, 60);
        .px-to-vw(padding-left, 62);
        .font-size-to-vw(32);
        color: #E6F2FF;
        font-family: 'DingTalk', sans-serif;
        .px-to-vh(margin-bottom, 60);
        background: url('../../images/title.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      // .barChartWrapper {
      //   .px-to-vh(margin-bottom, 40);
      // }

      // .progressWrapper {
      //   .px-to-vw(padding-left, 62);
      //   .px-to-vw(padding-right, 62);
      //   .px-to-vh(margin-bottom, 40);
      // }

      // .listWrap {
      //   .px-to-vh(height, 1075);
      //   overflow: scroll;

      //   .list {
      //     display: flex;
      //     width: 100%;
      //     .px-to-vh(height, 100);
      //     .px-to-vh(margin-bottom, 8);
      //     flex-direction: row;
      //     justify-content: flex-start;
      //     align-items: center;
      //     background: url('../../images/listbg.png');
      //     background-size: 100% 100%;
      //     background-repeat: no-repeat;


      //     .number {
      //       .px-to-vw(width, 100);
      //       .font-size-to-vw(40);
      //       text-align: center;
      //       .px-to-vh(line-height, 100);
      //       color: #CCE6FF;
      //     }

      //     .title {
      //       .px-to-vw(width, 500);

      //       .name {
      //         font-weight: 500;
      //         .px-to-vh(height, 28);
      //         .px-to-vh(line-height, 28);
      //         .font-size-to-vw(28);
      //         color: #FFFFFF;
      //         .px-to-vh(margin-bottom, 10);
      //       }

      //       .sub {
      //         font-weight: 400;
      //         .font-size-to-vw(24);
      //         color: #A3B8CC;
      //       }
      //     }

      //     .al {
      //       .px-to-vw(width, 120);

      //       .label {
      //         font-weight: 400;
      //         .font-size-to-vw(20);
      //         .px-to-vh(height, 20);
      //         .px-to-vh(line-height, 20);
      //         color: #CCE6FF;
      //         .px-to-vh(margin-bottom, 10);
      //       }

      //       .value {
      //         font-weight: normal;
      //         .font-size-to-vw(32);
      //         color: #B3D9FF;
      //         font-family: 'DingTalk', sans-serif;
      //       }

      //       &:nth-child(5) {
      //         .value {
      //           color: #FFEA80;
      //         }
      //       }

      //       &:nth-child(6) {
      //         .value {
      //           color: #80EAFF;
      //         }
      //       }
      //     }

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

    }
  }

  .bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: visible;
    .px-to-vh(height, 72);
    background: url('../../images/bottomBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .btnGroup {
      position: relative;
      .px-to-vh(top, -47);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      &>a {
        &:-webkit-any-link {
          text-decoration: none !important;
        }
      }

      .btn {
        text-align: center;
        .px-to-vw(width, 198);
        .px-to-vh(height, 56);
        .px-to-vh(line-height, 56);
        font-weight: 500;
        cursor: pointer;
        color: #CCDDFF;
        .font-size-to-vw(28);
        .px-to-vw(margin-right, 22);
        background: url('../../images/btnBg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        text-decoration: none;

        &.active {
          background: url('../../images/btnBgActive.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

      }
    }
  }
}