jy2025-ui/src/views/index/css/style.scss

@import "../../../assets/styles/common.scss";

.home-container {
  background: url("@/assets/images/background.png") top center no-repeat;
  height: 100vh;
  background-size: cover;
  overflow: auto;

  .home-title-nav {
    background-image: url("@/assets/images/top_bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 80px;
    width: 100%;
    @include flexBetween;
    align-items: flex-start;
    color:#FFF;
    .l-span{
      width: 20%;
      padding:5px;
    }
    .r-span{
      width: 20%;
      text-align: right;
      padding:10px;
      font-size: 14px;
      color:#FFFFFF;
      font-family: "BebasNeue-1", serif;
    }
    .title-text{
      width: 60%;
      @include flexCenter;
      font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
      font-weight: 400;
      font-size: 32px;
      line-height: 47px;
      text-align: left;
      font-style: normal;
      background: linear-gradient(180deg, #FFFFFF 0%,#7DB1FF 70%, #7DB1FF 100%);
      -webkit-background-clip: text;
      letter-spacing: 2px;
      text-transform: none;
      color: transparent;
      padding-top:5px;
    }
  }
}

.home-page {

  padding: 0 20px 20px 20px;
  color: white;
  @include borderBox;

  .top-scroll-bar {
    .t-span {
      font-size: 12px;

      .t-time {
        font-size: 14px;
        letter-spacing: 1px;
        font-family: "BebasNeue-1", serif;
        margin-right: 5px;
      }

      .text-a {
        margin-left: 5px;
        color: #3AC4FF;
        text-decoration: underline;
        cursor: pointer;
        &:hover {
          text-decoration: none;
        }
      }
    }

    .right-btn {
      background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
      border-radius: 2px 2px 2px 2px;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
      height: 26px;
      line-height: 26px;
      font-size: 12px;
      padding: 0 10px;
      cursor: pointer;
    }

    .scroll-text {
      height: 54px;
      line-height: 54px;
      margin-bottom: 10px;
      padding: 0 10px;
      font-size: 12px;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .column-row-title {
    background: #112973;
    border-bottom-width: 0;
    padding: 0 8px 0 0;
    line-height: 40px;
    margin-bottom: 8px;
    @include flexBetween;

    .title-text {
      font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
      @include flexStart;
      font-size: 16px;

      .s-span {
        margin-left: 5px;
        font-size: 14px;
        font-style: italic;
        color: #A8CAF9;
      }

      & > img {
        margin-right: 10px;
      }
    }

    .yellow-txt {
      color: #FFB342;
      font-size: 20px;
      font-weight: 400;
      margin-left: 4px;
    }

    .el-checkbox {
      color: white;
      font-size: 16px;
    }

    .el-checkbox__inner {
      background: transparent;
      border: 1px solid #72D5FF80;
    }

    .el-checkbox__label {
      padding-left: 4px;
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #72D5FF;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner::after {
      border-color: #72D5FF;
    }
  }

  .content-top {
    @include flexBetween;
    align-items: flex-start;
    margin-top: 16px;

    .column-row {
      width: 375px;
    }
  }

  .app-health {
    height: calc(70vh - 138px);
    position: relative;
    //width: calc(100% - 750px);
    min-width: 550px;
    max-width: 660px;
    margin: 0 10px;
    z-index:1;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("@/assets/images/center-bg.png");
      background-repeat: no-repeat;
      background-position: center center;
      //background-size: 70%;
      background-size: 550px;
      opacity: 0.8; /* 设置背景透明度 */
      z-index: -1; /* 确保在文本下方 */
    }
    .h-img {
      width: 130px;
    }

    .a-h-item {
      position: absolute;
      top: 29%;
      left: -8%;
      text-align: center;
      cursor: pointer;
    }

    .item-cq {
      top: 63%;
      left: 17%;
    }

    .item-js {
      top: 4%;
      left: 50%;
      margin-left: -65px;
    }

    .item-hg {
      top: 63%;
      left: 62%;
    }

    .item-fb {
      left: calc(92% - 40px);
    }

    .item-jcd {
      left: 50%;
      margin-left: -140px;
      top: 1%;
    }

    .i-label {
      font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
      font-weight: 400;
      font-size: 20px;
      color: #F4FAFF;
      text-shadow: 2px 2px 0 #223FA3;
      font-style: normal;
      text-transform: none;
    }

    .i-value {
      font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
      font-weight: 400;
      font-size: 34px;
      letter-spacing: 2px;
      font-style: normal;
      text-transform: none;
      text-align: center;
      position: absolute;
      top: -20px;
      width: 100%;
    }

    .i-normal {
      //background: url("@/assets/images/icon-green.png") no-repeat center bottom;
      //background-size: 70%;
      background: linear-gradient(180deg, #FFFFFF 0%, #6CA0ED 100%);
      -webkit-background-clip: text;
      letter-spacing: 2px;
      text-transform: none;
      color: transparent;
    }

    .i-waring {
      color: #F0D90B;
      text-shadow: 2px 0 0 #9E9223;
      background: url("@/assets/images/icon-yellow.png") no-repeat center bottom;
      background-size: 60%;
    }

    .i-risk {
      //background-size: 70%;
      background: linear-gradient(180deg, #FFCB7D 0%, #FEB851 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .column-content {
    background: rgba(6, 5, 65, 0.8);
    box-shadow: inset 0px -3px 14px 0px rgba(112, 210, 253, 0.5);
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(0, 136, 194, 0.6), rgba(0, 136, 194, 0.4)) 1 1;
    height: calc(70vh - 286px);
    padding: 10px;
    @include borderBox;
    overflow: auto;

    .c-row {
      font-size: 14px;
      @include flexBetween;
      //border: 1px solid #8DB2E4;
      background: #060541;
      box-shadow: inset 0 0 7px 0 #2973C7;
      padding: 8px 12px;
      margin-top: 4px;

      &:first-child {
        margin-top: 0;
      }

      &:nth-child(odd) {
        background: #0C1B5B;
        box-shadow: inset 0 0 7px 0 #2973C7;
      }

      .c-item {
        width: 40%;
        text-align: left;
      }

      .statue-risk {
        width: 60px;
        text-align: center;
        padding: 1px 0;
        border: 1px solid #FFB342;
        background-image: linear-gradient(to bottom, #754E1380, #CA8A2940);
        color: #FFF;
        font-size: 12px;
      }

      .statue-normal {
        @extend .statue-risk;
        background-image: linear-gradient(to bottom, #203C6C80, #435D8A40);
        border-color: #669FFF;
        color: #7DADFF;
      }
    }
  }

  .column-content-half {
    height: calc(((70vh - 180px) / 2) - 26px);
    font-size: 12px;
    cursor: pointer;
  }

  .tab-block {
    @include flexCenter;
    color: #9FB9E7;
    margin-bottom: 10px;

    .tab-blue {
      background: #3D74FF;
      width: 20px;
      height: 10px;
      display: inline-block;
      border-right: 1px;
      margin: 0 5px 0 10px;

    }

    .tab-yellow {
      @extend .tab-blue;
      background: #FFB342;
    }
  }

  .access-row {
    @include flexStart;
    padding:2px 0;
    .a-r-label {
      width: 120px;
      text-align: right;
    }

    .a-r-progress {
      width: calc(100% - 110px);
      margin-left:10px;

      .p-total {
        @include flexStart;
        width: 100%;
        color: #9FB9E7;
        margin:2px 0;
        .progress {
          transition: all .3s;
          background-image: linear-gradient(to right, #1D47B0, #3D74FF);
          height: 10px;
          margin-right: 5px;
          border-radius: 0 5px 5px 0;
        }
      }

      .p-error {
        .progress {
          background-image: linear-gradient(to right, #A36F22, #FFB342);
        }
      }
    }
  }

  .alarm-ranking {
    margin-top: 11px;
  }

  .alarm-row {
    .ranking-title {
      margin-bottom: 5px;
      @include flexBetween;

      .no1 {
        color: #FFB342;
        font-size: 16px;
        font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
      }

      .no2 {
        @extend .no1;
        color: #72D5FF;
      }

      .no3 {
        @extend .no1;
        color: #56D4B3;
      }

      .no-other {
        @extend .no1;
        color: #A1B3D2;
      }

      .alarm-num {
        color: #9FB9E7;
      }
    }
  }

  .alarm-progress {
    margin-bottom: 5px;
    width: 100%;
    height: 10px;
    background: #205194;
    border-radius: 0 8px 8px 0;

    .progress {
      transition: all .3s;
      background-image: linear-gradient(to right, #1D47B0, #3D74FF);
      height: 10px;
      margin-right: 5px;
      border-radius: 0 8px 8px 0;
    }
  }

  .content-chart {
    @include flexBetween;
    margin-top: 16px;

    &-row {
      width: calc(50% - 8px);
      margin-left: 16px;

      &:first-child {
        margin-left: 0;
      }
    }

    .btn-span {
      background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
      border-radius: 2px 2px 2px 2px;
      border: 1px solid;
      border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
      font-size: 14px;
      cursor: pointer;
      line-height: 30px;
      padding: 0 10px;
      font-weight: bold;
    }

    .chart-content {
      height: 260px;
    }

    .run-tendency {
      @include flexBetween;
      align-items: flex-start;

      .run-title {
        width: 200px;
        height: 238px;
        overflow: auto;

        .r-t-row {
          @include flexStart;
          padding: 6px 8px;
          cursor: pointer;

          .r-value {
            width: 66px;
            line-height: 44px;
            background: #0B1254;
            box-shadow: inset 0 0 5px 0 #3885DB;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #0B0A55;
            text-align: center;
            font-size: 14px;
            color: #C9EFFF;
            margin-right: 5px;
          }

          .r-obj-name {
            font-size: 14px;
            width: 107px;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .r-obj-metrics-name {
            font-size: 12px;
            color: #9FB9E7;
            width: 107px;
            margin-top: 5px;
          }

          &:hover {
            background: #162E81;
          }
        }

        .active {
          background: #162E81;
        }
      }

      .chart-sort {
        width: calc(100% - 210px);
        font-size: 14px;
      }
    }

    .health-t {
      .el-input__wrapper {
        background-image: linear-gradient(to bottom, #28388D, #060443);
        box-shadow: 0 0 0 1px #7EC1FF;
      }

      .el-select .el-input .el-select__caret {
        color: white;
      }

      .el-input__inner {
        color: white;
      }

      .el-input__prefix {
        color: white;
      }
    }

    .food-list-footer {
      @include flexCenter;
      padding-top: 20px;
    }
  }


}

// 滚动条
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  // width: 6px;
  background: rgba(6, 5, 65, .2)
  // -webkit-border-radius: 2em;
  // -moz-border-radius: 2em;
  // border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(6, 5, 65, .8);
  background-clip: padding-box;
  min-height: 28px;
  // -webkit-border-radius: 2em;
  // -moz-border-radius: 2em;
  // border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background: #72D5FF;
}