@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;
  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, 60);

          .iconWrap {
            display: flex;
            justify-content: center;
            align-items: center;
            .px-to-vw(width, 130);
            .px-to-vh(height, 130);
            // .px-to-vw(margin-right, 20);

            &>img {
              width: 100%;
            }
          }

          .rowDetail {
            .px-to-vw(width, 820);
            .px-to-vh(height, 160);
            .px-to-vh(padding-left, 50);
            .px-to-vh(padding-top, 12);
            background: url('../../images/yuanzhiditu.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

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

              &>span {
                font-weight: 400;
                .px-to-vw(padding-left, 158);
                .px-to-vh(height, 24);
                .px-to-vh(line-height, 24);
                .font-size-to-vw(24);
                color: #6B8299;
              }
            }

            .value {
              font-weight: normal;
              .font-size-to-vw(48);
              .px-to-vh(height, 48);
              .px-to-vh(line-height, 48);
              color: #66B3FF;
              overflow: visible;
              font-family: 'DingTalk', sans-serif;
            }
          }
        }

        .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);

          .iconWrap {
            display: flex;
            justify-content: center;
            align-items: center;
            .px-to-vw(width, 130);
            .px-to-vh(height, 130);

            &>img {
              width: 100%;
            }
          }

          .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);
              overflow: visible;

              .label {
                font-weight: 400;
                .font-size-to-vw(28);
                .px-to-vh(height, 28);
                .px-to-vh(line-height, 28);
                color: #CCE6FF;
                .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;
                overflow: visible;
                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);
                  color: #52CCCC;
                }
              }
            }

          }
        }
      }

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

        .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;
        }

        .progressWrap {
          display:flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          .px-to-vw(padding-left, 62);
          .px-to-vw(padding-right, 62);
          .px-to-vh(margin-bottom, 40);
          .infoOne {
            .px-to-vw(margin-right,40);
            .font-size-to-vw(28);
            color: #CCE6FF;
            i {
              .font-size-to-vw(32);
              color: #FFEA80;
              .px-to-vw(padding-left,16);
              font-family: 'DingTalk', sans-serif;
            }
          }
          .infoTwo {
            .font-size-to-vw(28);
            color: #CCE6FF;
            i {
              .font-size-to-vw(32);
              color: #80EAFF;
              .px-to-vw(padding-left,16);
              font-family: 'DingTalk', sans-serif;
            }
          }
        }

        .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 {
                .px-to-vw(width,466);
                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);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .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(3) {
                .value {
                  color: #FFEA80;
                }
              }

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

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

    .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, 106);
        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;
      }

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

        .dataBox {
          position: relative;
          .px-to-vw(width, 430);
          .px-to-vh(height, 198);
          overflow: visible;
          background: url('../../images/chufangbeijing.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;


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

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

              .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;
                overflow: visible;
              }

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

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

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

                  &::before {
                    position: absolute;
                    top: 0;
                    .px-to-vw(left, 24);
                    content: '';
                    display: inline-block;
                    .px-to-vw(width, 24);
                    .px-to-vh(height, 24);
                    animation: arrowMove 2s infinite;
                    background: url('../../images/downArrow.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                  }
                }

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

              &.yellow {
                &:nth-child(2) {
                  .label {
                    &::before {

                      background: url('../../images/upArrow.png');
                      background-size: 100% 100%;
                      background-repeat: no-repeat;

                    }
                  }

                  .value {
                    color: #FFBF80;
                  }
                }
              }
            }
          }

          .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;
                font-family: 'DingTalk', sans-serif;
              }
            }
          }
        }
      }

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

        &>img {
          .px-to-vw(width, 1440);
          .px-to-vh(height, 680);
        }
      }

      .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 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .px-to-vh(margin-bottom, 40);

        .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;
          .season {
            .px-to-vh(height,40);
            .px-to-vh(line-height, 40);
            .font-size-to-vw(40);
            .px-to-vh(margin-bottom,10);
            color: #6B8299;
            font-family: 'DingTalk', sans-serif;
            &.completed {
              color: #66B3FF;
            }
          }
          .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,35);
        background: url('../../images/title.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .barChartWrapper {
        .px-to-vh(height,395);
        overflow: hidden;
        .px-to-vh(margin-bottom, 40);
      }

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

        .allexpired {
          .font-size-to-vw(28);
          color: #CCE6FF;
          i {
            .px-to-vw(padding-left,16);
            .px-to-vw(padding-right,40);
            .font-size-to-vw(32);
            color: #F2FFB3;
          }
        }
        .expiredper {
          .font-size-to-vw(28);
          color: #CCE6FF;
          i {
            .px-to-vw(padding-left,16);
            .px-to-vw(padding-right,125);
            .font-size-to-vw(32);
            color: #F2FFB3;
          }
        }
        .stockCount {
          .font-size-to-vw(28);
          color: #CCE6FF;
          i {
            .px-to-vw(padding-left,16);
            .font-size-to-vw(32);
            color: #FFFFFF;
          }
        }
      }

      .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, 570);

            .name {
              font-weight: 500;
              .px-to-vh(width,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);
              white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .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;
        }

      }
    }
  }
}