xt_pad/src/styles/style.scss

.body {
  // background: $base-color;
}
html,
body {
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}

.iconfont {
  color: #a8b3ba;
  font-size: 0.45rem;
}

.mainBox {
  font-size: 0.3rem;
}

.plateTitle {
  border-bottom: 1px solid rgba(193, 193, 193, 0.4);
  line-height: 1rem;
  @include text-align;
  font-size: 0.36rem;
  color: $main-color;
  font-weight: 600;
  position: relative;
  @include display-flex;
  @include align-items-center;
  width: 100%;
  @include justify-content-center;
  @media only screen and (max-width: 767px) {
    line-height: 1.2rem;
    font-size: 0.45rem;
  }
  .line {
    width: 0.2rem;
    height: 0.04rem;
    background: $main-color;
    z-index: 99;
    display: inline-block;
    margin: 0 0.2rem;
  }
}

.blueBorder {
  height: 0.2rem;
  line-height: 0.2rem;
  background: #f6f8f9;
}

// 数据详情
.plate-box {
  background: $text-color;
  padding: 0 0 0.3rem 0;
  .title {
    border-bottom: 1px $border-color solid;
    line-height: 1rem;
    @include text-align;
    font-size: 0.36rem;
    color: $main-color;
    font-weight: 600;
    position: relative;
    @include display-flex;
    @include align-items-center;
    width: 100%;
    @include justify-content-center;
    @media only screen and (max-width: 767px) {
      line-height: 1.2rem;
      font-size: 0.45rem;
    }
  }
  .line {
    width: 0.2rem;
    height: 0.04rem;
    background: $main-color;
    z-index: 99;
    display: inline-block;
    margin: 0 0.2rem;
  }
  .plate {
    margin: 0.25rem 1rem;
    padding-bottom: 0.28rem;
    @include box-sizing;
    @include display-flex;
    @include align-items-start;
    @include justify-content-between;
    border-bottom: 1px #e6e6e6 dashed;
    ul {
      @include flex;
      li {
        font-size: 0.34rem;
        line-height: 0.62rem;
        float: left;
        width: 5rem;
        @media only screen and (min-width: 376px) and (max-width: 413px) {
          width: 4.2rem;
        }
        @media only screen and (min-width: 415px) and (max-width: 767px) {
          width: 5.6rem;
          font-size: 0.4rem;
        }
        @media only screen and (min-width: 768px) {
          width: 6.6rem;
        }
        .content {
          color: $main-color;
        }
        .unit {
          color: $font-color;
        }
      }
    }
  }
  .note {
    font-size: 0.34rem;
    color: $pgh-color;
    width: 100%;
    padding: 0 1rem;
    line-height: 0.5rem;
    span {
      color: $main-color;
    }
  }
  .border {
    border: none;
  }
}

// 今日弹出层
.popup-content {
  @include box-sizing; // @include display-flex;
  // @include flex;
  background: $text-color;
  border-radius: 6px;
  font-size: 0.28rem;
  width: 13.2rem;
  .title {
    border-bottom: 1px $border-color solid;
    height: 0.88rem;
    line-height: 0.88rem;
    @include text-align;
    font-size: 0.3rem;
    color: $main-color;
    font-weight: 700;
    position: relative;
    @include display-flex;
    @include align-items-center;
    width: 100%;
    @include justify-content-center;
    .line {
      width: 0.1rem;
      height: 0.04rem;
      background: $main-color;
      z-index: 99;
      display: inline-block;
      margin: 0 0.14rem;
    }
  }
  .content {
    padding: 0 0.36rem;
    .cell {
      float: left;
      width: 3.22rem;
      margin: 0.35rem 0.4rem 0 0.4rem;
      label {
        display: block;
        height: 0.55rem;
        line-height: 0.55rem;
        color: $pgh-color;
      }
      select {
        width: 100%;
        padding: 0.2rem 0;
        border: 1px $border-color solid;
        border-radius: 2px;
        padding-left: 5px;
      }
      .inputBox {
        border: 1px $border-color solid;
        border-radius: 2px;
        padding: 0.18rem 0;
        padding-left: 5px;
      }
      .textarea {
        width: 100%;
        height: 1.22rem;
        border: 1px $border-color solid;
        border-radius: 2px;
        padding-left: 5px;
      }
    }
    .width {
      width: 90%;
      label {
        display: inline-block;
      }
      button {
        background: $main-color;
        color: #fff;
        border-radius: 6px;
        width: 3.1rem;
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: center;
        margin: 0 0 0.9rem 0;
      }
    }
    .center {
      text-align: center;
    }
  }
}

.yzNav {
  width: 60%;
  margin: 0 auto;
  @include display-flex;
  @include text-align;
  @include align-items-center;
  @include justify-content-around;
  background: #fff;
  span {
    height: 1.2rem;
    line-height: 1.2rem;
    background: #fff;
    border-radius: 5px;
    border: 1px $border-color solid;
    display: inline-block;
    @include text-align;
    margin: 0.25rem 0;
    color: #34495e;
    font-size: 0.45rem;
    padding: 0 0.16rem;
  }
  .forbid {
    color: $forbid-color;
  }
}

// 监控搜索
.search-content {
  background: #ebf1f7;
  padding: 0.2rem 0.28rem;
  .search {
    background: $white-bg;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 0.5rem;
    @include flex;
    @include display-flex;
    @include align-items-center;
    margin: 0 0.3rem;
    padding: 0 0 0 0.3rem;
    .iconfont {
      color: #a8b3ba;
      font-size: 0.4rem;
      margin: 0 0.1rem 0 0;
    }
    .searchInput {
      width: 87%;
      height: 0.6rem;
      line-height: 0.6rem;
      border: none;
      outline: none;
      color: $pgh-color;
      font-size: 0.28rem;
    }
  }
}

// 监控表单
.MonitoringForm {
  width: 100%;
  overflow: hidden;
  font-size: 0.3rem;
  border: $border-color;
  background: $text-color;
  padding: 0 0 0.28rem 0;
  tr {
    padding: 0;
    margin: 0;
    padding: 0.1rem 0;
    th {
      background: $main-color;
      border: none;
      color: #fff;
      padding: 0;
      margin: 0;
      height: 0.88rem;
      line-height: 0.88rem;
      font-weight: normal;
    }
    td {
      background: #f0f5fa;
      border: none;
      padding: 0.3rem 0;
      text-align: center;
      button {
        background: $pink;
        color: #fff;
        display: inline-block;
        width: 40%;
        margin: 0 2%;
        height: 0.6rem;
        line-height: 0.6rem;
        border-radius: 4px;
      }
    }
  }
}

.vux-popover {
  box-shadow: 0 0 15px #eee;
  .popover-demo-content {
    ul {
      // width: 6.4rem;
      padding: 0.28rem;
      li {
        font-size: 0.32rem;
        color: $title-color;
        line-height: 0.7rem;
        height: 0.7rem;
        .iconfont {
          float: right;
          color: #409eff;
          font-size: 0.5rem;
          display: inline-block;
        }
      }
    }
  }
}

// el
.popover-demo-content {
  ul {
    li {
      font-size: 0.45rem;
      color: $title-color;
      line-height: 1rem;
      height: 1rem;
      .iconfont {
        float: right;
        color: #409eff;
        font-size: 0.5rem;
        display: inline-block;
      }
    }
  }
}

.tick {
  position: relative;
  color: $main-color !important;
  font-weight: 600;
}

.mainBox {
  .mainContent {
    // margin: 0 0 0 1.58rem;
  }
}

.van-popup {
  top: 7% !important;
  transform: translate3d(-50%, 0, 0) !important;
}

// 弹窗滚动条
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
  background-color: #fff;
  @media only screen and (max-width: 812px) {
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
  }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    width: 0 !important;
  }
  @media only screen and (min-width: 1024px) {
    width: 0 !important;
  }
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  @media only screen and (max-width: 812px) {
    background-color: transparent !important;
  }
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e5e5e5;
  @media only screen and (max-width: 812px) {
    background-color: transparent !important;
  }
}

// 弹窗样式
.van-popup {
  //  max-height:8.6rem !important;
}

.van-popup {
  border-radius: 10px !important;
  .Dialog {
    font-size: 0.36rem;
    width: 11.8rem;
    @media only screen and (min-width: 415px) and (max-width: 737px) {
      width: 12.8rem !important;
    }
    @media only screen and (min-width: 376px) and (max-width: 415px) {
      width: 10.8rem !important;
    }
    @media only screen and (min-width: 769px) and (max-width: 1024px) {
      width: 12.8rem !important;
    }
    @media only screen and (min-width: 1024px) {
      width: 15.8rem !important;
    }
    background: #ebf1f7;
    position: relative;
    .DialogTit {
      @include box-sizing;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-between;
      padding: 0.3rem 0.36rem;
      z-index: 999;
      background: #fff;
      box-shadow: 3px 3px 3px #d7dce2;
      margin-bottom: 0.24rem;
      .iconfont {
        font-size: 0.6rem;
        color: $main-color;
        font-weight: bold;
        // @media only screen and (max-width: 812px) {
        //   font-size: 0.34rem !important;
        // }
      }
      .back {
        font-size: 0.45rem;
        color: $main-color;
        @include display-flex;
        @include align-items-center;
        font-weight: 600;
        .iconfont {
          font-size: 0.5rem;
          font-weight: 700;
          color: $main-color;
          margin-top: 0.06rem;
        }
      }
      .name {
        font-size: 0.45rem;
        color: $main-color;
        font-weight: 600;
      }
      .success {
        font-size: 0.45rem;
        font-weight: 600;
        color: $title-color;
      }
    }
    .line {
      height: 0.24rem;
      background: #ebf1f7;
    }
    .gradient {
      height: 0.24rem;
      background: -webkit-linear-gradient(#dfe4ea, #ebf1f7);
    }
    .DialogContent {
      height: 11.8rem !important;
      overflow-y: scroll;
      background: #fff;
      @media only screen and (max-width: 415px) {
        height: 14.8rem !important;
      }
      @media only screen and (min-width: 415px) and (max-width: 737px) {
        height: 14.8rem !important;
      }
      // @media only screen and (min-width: 666px) and (max-width: 737px) {
      //   height: 8.8rem !important;
      // }
      // @media only screen and (min-width: 737px) and (max-width: 768px) {
      //   height: 14.8rem !important;
      // }
      @media only screen and (min-width: 768px) {
        height: 11.8rem !important;
      }
      @media only screen and (min-width: 768px) {
        height: 11.8rem !important;
      }
      .item {
        padding: 0 0.32rem;
        border-bottom: 1px #e5e5e5 solid;
        @include box-sizing;
        @include display-flex;
        @include align-items-center;
        @include text-align;
        @include justify-content-between;
        color: $title-color;
        .name {
          font-size: 0.45rem;
          height: 1.2rem;
          line-height: 1.2rem;
          color: $title-color;
          @media only screen and (max-width: 767px) {
            height: 1.4rem;
            line-height: 1.4rem;
          }
        }
        .content {
          @include flex;
          text-align: right;
          margin-left: 0.2rem;
          .iconfont {
            font-size: 0.5rem;
          }
          input {
            height: 1rem;
            line-height: 1rem;
            border: none;
            font-size: 0.45rem;
            @include flex;
            text-align: right;
            width: 100%;
          }
          .text {
            height: 1rem;
            line-height: 0.5rem;
            font-size: 0.45rem;
          }
        }
      }
    }
    .footer {
      height: 1rem;
      line-height: 1rem;
      padding-left: 0.36rem;
    }
    .PrescSubmit {
      width: 100%;
      padding: 0.2rem 0;
      background: #fff;
      text-align: center;
      button {
        padding: 0 0.32rem;
        border: $main-color;
        font-size: 0.45rem;
        text-align: center;
        height: 1.3rem;
        line-height: 0.7rem;
        background: #fff;
        border: 1px $main-color solid;
        border-radius: 5px;
        color: $main-color;
        margin: 0 0.11rem;
        &.tjcq {
          background: $main-color;
          color: #fff;
        }
      }
    }
  }
}

// 表单样式
.table {
  width: 1800px;
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    width: 2800px;
  }
  overflow: auto;
  font-size: 0.45rem;
  text-align: center;
  border: $border-color;
  padding-bottom: 0.02rem;
  border: none;
  tr {
    padding: 0;
    margin: 0;
    padding: 0.14rem 0;
    th {
      background: $main-color;
      border: none;
      color: #fff;
      padding: 0;
      margin: 0;
      height: 1.2rem;
      font-weight: normal;
    }
    td {
      background: #ecf5ff;
      border: none;
      padding: 0.26rem 0;

      .xg {
        color: $main-color;
        font-size: 0.45rem;
        margin-right: 0.2rem;
        cursor: pointer;
        .iconfont {
          margin-right: 0.1rem;
          color: $main-color;
          font-size: 0.45rem;
        }
      }
      .sc {
        color: #ff7979;
        margin-right: 0.2rem;
        cursor: pointer;
        .iconfont {
          color: #ff7979;
        }
      }
    }
  }
}

.van-checkbox__icon--checked .van-icon {
  color: #fff;
  border-color: $main-color !important;
  background-color: $main-color !important;
  @media only screen and (min-width: 768px) {
    font-size: 20px !important;
    line-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }
}
.van-checkbox__icon {
  @media only screen and (min-width: 768px) {
    line-height: 30px !important;
    height: 30px !important;
  }
}
.van-checkbox__icon .van-icon {
  @media only screen and (min-width: 768px) {
    font-size: 20px !important;
    line-height: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }
}

// .van-checkbox__icon .van-icon {
//   @media only screen and (max-width: 812px) {
//     font-size: 14px !important;
//     line-height: 16px !important;
//     width: 16px !important;
//     height: 16px !important;
//   }
// }

.CheckBox .van-checkbox__label {
  width: 94%;
  font-size: 0.45rem;
  @media only screen and (max-width: 812px) {
    width: 90%;
  }
}

.mint-datetime-action {
  font-size: 0.45rem;
}

.picker-item {
  font-size: 0.45rem;
}

.NoData {
  width: 100%;
  text-align: center;
  background: #fff;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  img {
    width: 180px;
  }
}
.el-popper {
  margin-top: 0 !important;
}

.CheckBox,
.DialogContent,
.optionsBox,
.el-collapse-item__content {
  /* 针对缺省样式 (必须的) */
  &::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }
  /* 滚动条的滑轨背景颜色 */
  &::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /* 滑块颜色 */
  &::-webkit-scrollbar-thumb {
    background: #d7dce2;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /*内层轨道的颜色*/
  &::-webkit-scrollbar-track-piece {
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
  }
  /* 滑轨两头的监听按钮颜色 */
  &::-webkit-scrollbar-button {
    background-color: #eee;
    width: 0;
    height: 0;
  }
  /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
  &::-webkit-scrollbar-corner {
    background-color: #eee;
  }
}

.el-form-item__label {
  font-size: 0.45rem !important; // width: 90px !important;
  @media only screen and (max-width: 812px) {
    text-align: left !important;
  }
}

.el-radio__label {
  font-size: 0.45rem !important;
}

.el-radio + .el-radio {
  margin-left: 15px !important;
  @media only screen and (max-width: 812px) {
    margin-left: 0 !important;
  }
}

.el-button--mini {
  font-size: 0.32rem !important;
}
.el-form-item__label,
.el-radio,
.van-checkbox__label {
  color: $title-color !important;
}

.el-collapse-item__header {
  font-size: 0.45rem !important;
  color: $pgh-color !important;
  height: 64px !important;
  line-height: 64px !important;
  @media only screen and (max-width: 767px) {
    font-size: 0.45rem !important;
    height: 48px !important;
    line-height: 48px !important;
  }
}
.el-collapse-item__arrow {
  color: #a8b3ba !important;
  line-height: 64px !important;
  @media only screen and (max-width: 812px) {
    line-height: 48px !important;
  }
}

// 搜索全局
.search {
  color: #a8b3ba;
  width: 6.2rem;
  float: right;
  font-size: 0.45rem;
  .field {
    // @media only screen and (max-width: 812px) {
    //   margin-top: 6px;
    // }
  }
  .iconfont {
    color: #a8b3ba;
    font-size: 0.42rem;
    @media only screen and (max-width: 812px) {
      font-size: 0.52rem;
    }
  }
  .field {
    background-color: #ebf1f7;
    padding: 0 0 0 10px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    height: 0.64rem !important;
    line-height: 0.64rem !important;
    @media only screen and (max-width: 812px) {
      padding: 0 0 0 4px;
    }
  }
}

.van-cell {
  // @media only screen and (max-width: 812px) {
  //   font-size: 12px !important;
  // }
}
.van-field__left-icon {
  // @media only screen and (max-width: 812px) {
  //   // margin-right: 0 !important;
  //   margin-top: -1px;
  // }
  .van-icon-arrow-down {
    @media only screen and (max-width: 812px) {
      font-size: 12px !important;
    }
  }
}
.van-field__button {
  @media only screen and (max-width: 812px) {
    padding-left: 0 !important;
  }
}
.van-switch {
  @media only screen and (max-width: 812px) {
    font-size: 16px !important;
  }
}
.picker-toolbar {
  @media only screen and (max-width: 768px) {
    height: 40px !important;
  }
}
.mint-datetime-action {
  @media only screen and (max-width: 768px) {
    line-height: 40px !important;
  }
}

// 返回
.goBack {
  cursor: pointer;
  @include display-flex;
  @include align-items-center;
  @include text-align;
  font-size: 0.45rem;
  .back {
    // color: $main-color;
    color: #fff;
    margin-right: 0.3rem;
    .iconfont {
      // color: $main-color;
      color: #fff;
      font-size: 0.42rem;
    }
  }
  .name {
    .iconfont {
      margin-left: 0.1rem;
    }
  }
}

.van-button--small {
  font-size: 0.28rem !important;
  @media only screen and (max-width: 812px) {
    min-width: 36px !important;
  }
}

.el-input {
  color: #1b2631 !important;
  font-size: 0.36rem !important;
}

.el-collapse-item__content {
  height: 7.4rem !important;
  overflow-y: auto !important;
}

// 顶部导航固定
.top,
.top_row {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}
// .choice,
// .screening{
//   position: fixed;
//   top: 63px;
//   right: 0;
//   z-index: 66;
//   left: 1.58rem;
//   background: #fff;
// }
.stateBox {
  padding-top: 140px;
  background: #fff;
  min-height: calc(100vh - 2px);
  padding-left: 0.45rem;
  @media only screen and (min-width: 768px) {
    padding-top: 232px;
  }
  @media only screen and (min-width: 415px) and (max-width: 767px) {
    padding-top: 186px;
  }
}
#app {
  -webkit-overflow-scrolling: touch;
}