tqv-data-operation-screen/src/assets/css/styleTemplate.less

/*
 * @Author: dayan_hjm 茶百道主题样式
 * @Date: 2022-10-27 10:56:37 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-08 17:15:55
 */

@import url("../../themes/themes.less");

:global {
  #app {
    height: inherit;
    font-family: 'DingTalkJinBuTi', "DingTalkSans";
  }

  .hidetip {
    display: none;
  }

  .ant-pro-table {
    padding-bottom: 40px;
  }

  .ant-pro-table-list-toolbar-container {
    padding: 0px 0 5px;
  }

  .disabledBtn,
  .disabledBtn:hover {
    color: #b0b0b0 !important
  }

  #form1222 .ant-col-19 {
    max-width: 100%;
    margin-left: 80px;
  }

  // 表格内设置自动ellipsis省略显示
  .tableTd_ellipsis {
    max-width: 300px;
    line-height: 24px;
    height: 24px;
    white-space: nowrap;
    /* 规定文本是否折行 */
    overflow: hidden;
    /* 规定超出内容宽度的元素隐藏 */
    text-overflow: ellipsis;

    span {
      max-width: 100%;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  a {
    color: @dy-active;
    cursor: pointer;
  }

  .ant-tabs-content-holder {
    padding: 10px;
  }

  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: @dy-all-themes;
    text-shadow: 0 0 0.25px currentcolor;
  }


  //左侧导航栏 start----------------
  .ant-menu-item.ant-menu-item-active.click_active:hover,
  .ant-menu-item-active,
  .ant-menu-submenu-open,
  .ant-menu-submenu-active {
    background: @dy-all-themes  !important;
  }

  .tsddd {
    padding: 20px 16px 16px 16px;
    background: #fff;
  }

  .normal_menu,
  .ant-tabs-ink-bar,
  .click_active {
    background: @dy-all-themes  !important;
  }

  .ant-menu.ant-menu-root.ant-menu-inline.ant-menu-dark {
    background-color: @dy-all-themes  !important;

    .click_active {
      background: @dy-all-active  !important;
      border-left: 3px solid @dy-all-active-hover;

      .text_over {
        color: rgba(255, 255, 255, 1) !important;
      }
    }

    .normal_menu {
      background-color: @dy-all-themes;
    }
  }

  .log {
    background: #fff;
  }

  .left_menu_search {
    background: @dy-all-themes;
  }

  //左侧导航栏 end----------------

  //tab栏 start----------------
  .body_box {
    margin-top: 56px !important;
    background: unset;

    .navigator {
      background-color: @dy-all-themes;
      height: 40px;
      line-height: 31px;
      align-items: flex-end;

      .close_icon {
        margin-top: 2px;
      }

      .cust_tag_static {
        height: 30px;
      }

      .cust_tag_actived {
        line-height: 42px;
      }
    }
  }

  //tab栏 end----------------

  //系统悬浮公告 start----------------
  .modelMsg {
    z-index: 99;
    color: #000;
    position: absolute;
    top: 100px;
    left: calc(50% - 300px);
    width: 200px;
    text-align: center;
    background: #e7e7e7;
    border-radius: 10px;
    height: 30px;
    line-height: 40px;
    width: 604px;
    height: 40px;
    background: #FDEEDA;
    border-radius: 2px;
    animation: modelMsgShow 1s infinite;
    -webkit-animation: modelMsgShow 1s infinite;

    >p {
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 0 10px;

      .ok_f {
        color: rgba(0, 0, 0, 0.65);
        width: calc(100% - 70px);
        text-align: left;
        margin-left: 8px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .ok_t {
        font-size: 14px;
        color: #FAAD14;
        cursor: pointer;
      }
    }
  }


  @keyframes modelMsgShow {
    from {
      background-color: red;
    }

    to {
      background-color: blue;
    }
  }

  /*Safari 和 Chrome:*/
  @-webkit-keyframes modelMsgShow {
    from {
      background-color: red;
    }

    to {
      background-color: blue;
    }
  }

  //系统悬浮公告 end----------------


  .buildStard {
    margin-right: 5px;
    color: #ffbc3b;
    margin-top: 2px;
  }


  //上方导航栏
  .tips_pop .yjyd_but {
    width: 50%;
    display: inline-block;
    border: 1px solid #ececec;
  }

  #app .top2 {
    background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
    height: 8%;
    background: #0a091e;
    background-color: #0a091e;

  }

  #app .top {
    background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
    height: 100%;
    position: unset;

    .title_box {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      height: 8%;
      width: 100%;

      >img {
        width: 4em;
        height: 3em;
        padding-right: 1em;
        // border-right: 1px solid #3d5271;
        // margin-right: 1em;
      }

      >span {
        width: 1px;
        height: 1.8em;
        background: #5d5d5db8;
        margin-right: 1em;
        margin-top: 0.2em;
      }

      >h1 {
        color: #fff;
        margin: 0;
        font-size: 30px;
      }
    }

    .controler .ant-dropdown-link {
      color: @dy-font;
    }

    .contact {
      border-right: 1px solid #cacaca;
      width: 33px;
    }

    .ant-dropdown-trigger {
      min-width: 70px;
      margin-top: -5px;
      margin-left: 10px;
    }

    .menu li {
      color: @dy-font;
      font-size: 12px;
      width: auto;
      line-height: 38px;
      padding-right: 24px;
    }

    .menu li:hover {
      color: @dy-active;
      opacity: 0.9;
    }

    .menu li {
      span {
        opacity: 0.65;
      }

      .actived {
        color: @dy-active;
        box-shadow: 0 -2px 0 0 @dy-active inset;
        font-weight: 700;
        opacity: 1;
        height: 41px;
        margin-top: -10px;
      }

    }

    .logo {
      padding-left: 10px;
      cursor: pointer;

      img {
        height: 42px;
      }
    }
  }

  //首页背景
  .homePage .bottom_body {
    // background-image: linear-gradient(to top, #F8FCFE, #F8FCFE, #F8FCFE);
    background: linear-gradient(51.4deg, #000308 0%, #041b40 100%);

    // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 0 / 100% 100% #041b40;
  }

  .home_box {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;

    .video_box_hide {
      z-index: 12;
    }

    .video_box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      pointer-events: none;

      video {
        width: 89%;
        height: 83%;
        padding: 1% 0 0 10%;
      }
    }

  }

  .bottom_body {
    background: #fff;

    .home {
      padding: 0 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      background: unset;
      flex-wrap: wrap;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: unset;
      z-index: 11;

      .topMsg_title {
        background: url(../imgs/dataVimg/tipleBg.png) no-repeat 0 0 / 100% 100%;
        height: 2em;
        color: #fff;
        text-align: left;
        padding-left: 2.5em;
        box-sizing: border-box;
        line-height: 2.2em;
        font-family: "DingTalk JinBuTi";
      }

      .leftContent {
        width: 28%;
        height: 88%;
        z-index: 9;

        .topMsg2 {
          width: 100%;
          height: 22%;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          /* border-radius: 26px; */
          /* padding: 16px; */
          margin-bottom: 3%;
        }

        .topMsg {
          width: 100%;
          height: 100%;

          .topMsg_content {
            height: calc(100% - 1em);
            line-height: 4em;
            font-size: 2em;
            color: #69FFDE;
            background: url(../imgs/dataVimg/zongChanZhi.gif) no-repeat 0 bottom / 100% 70%;

            .topMsg_number_2 {
              font-size: 0.8em;
              color: #fff;
              font-family: DingTalkJinBuTi;
            }

          }

          .changBg_topMsg_content {
            background: url(../imgs/dataVimg/zongChanZhi2.gif) no-repeat 0 bottom / 100% 70%;
          }

          .msglist {
            padding: 16px 0;

            li {
              width: 100%;
              height: 42px;
              background: #F8F8F8;
              border-radius: 28px;
              display: flex;
              margin-bottom: 15px;
              text-align: center;
              font-weight: 400;
              font-size: 14px;
              color: #333;
              line-height: 42px;
              align-items: center;
              justify-content: left;
              padding-left: 30px;

              img {
                margin-right: 5px;
              }
            }
          }
        }

        .center_box2 {
          width: 100%;
          height: 30%;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          margin-bottom: 3%;
        }

        .center_box {
          .topMsg_content {
            width: 100%;
            height: 100%;

            .eacharView {
              display: flex;
              align-items: center;
              justify-content: space-between;
              position: relative;

              .name_ul {
                width: 43%;
                height: 80%;
                color: #fff;
                position: absolute;
                left: 48%;
                top: 0.5em;

                li {
                  height: 24%;
                  text-align: left;
                  font-size: 0.9em;
                }
              }
              @media (min-height: 900px) {
                .name_ul{
                  top:1.5em
                }
              }


              #echarts4,
              #echarts6_box {
                width: 45%;
                height: 90%;
              }

              #echarts4 {
                width: 55%;
              }

              #echarts6_box {
                margin-top: -2em;
                position: relative;

                // background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
                .guanghuan {
                  width: 100%;
                  /* height: 187px; */
                  position: absolute;
                  left: 0;
                  top: 0;
                }

                @media (max-height: 768px) {
                  .guanghuan {
                    top: -10%;
                  }
                }

                @media (min-height: 900px) {
                  .guanghuan {
                    top: -7%;
                  }
                }

                @media (min-height: 1000px) {
                  .guanghuan {
                    top: 0%;
                  }
                }

                #echarts6 {
                  width: 100%;
                  height: 100%;
                }
              }

            }
          }

          width: 100%;
          height: 100%;
        }

        .bottomContent2 {
          width: 100%;
          height: 42%;
        }

        .bottomContent {
          width: 100%;
          height: 100%;

          .topMsg_content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            #chartmain {
              width: 90%;
              height: 100%;
            }

          }

        }
      }

      .listIconFont {
        width: 100%;
        height: 36px;
        display: flex;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #333;
        line-height: 36px;
        align-items: center;
        justify-content: left;
        cursor: pointer;

        img {
          margin-right: 5px;
        }
      }

      .rightContent .bottomContent2 {
        width: 100%;
        height: 28%;
      }

      .rightContent .bottomContent {
        width: 100%;
        height: 100%;
      }

      .topMsg_content {
        width: 100%;
        height: 100%;

        .eacharView {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;

          #echarts5 {
            width: 100%;
            height: 80%;
          }
        }
      }

      .bigDivPd {}

      .titleDiv {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        margin-bottom: 15px;

        a {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          text-align: right;
          line-height: 22px;
          font-weight: 400;
        }
      }

      .kbs_c {
        height: calc(100% - 40px);
        overflow-y: scroll;
      }

      .kbs_c::-webkit-scrollbar {
        display: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .kbs_c:hover::-webkit-scrollbar {
        display: unset;
        scrollbar-width: unset;
        -ms-overflow-style: unset;
      }


      .rightContent {
        width: 28%;
        height: 88%;
        z-index: 9;

        .topMsg_2 .topMsg_content {
          height: 80%;
        }

        .topMsg_22 {
          width: 100%;
          height: 28%;
        }

        .topMsg_33 {
          width: 100%;
          height: 22%;
          margin-bottom: 2%;
        }

        .topMsg_2,
        .topMsg_3 {
          width: 100%;
          height: 100%;
        }

        .topMsg_4 {
          width: 100%;
          height: 22%;
        }

        .topMsg_3 {
          .topMsg_content {
            height: calc(100% - 1em);
            line-height: 2.8em;
            font-size: 1.8em;
            color: #69FFDE;
            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center/ 71% 99%;
            display: flex;
            align-items: center;
            justify-content: center;

            .topMsg_number_2 {
              font-size: 0.5em;
            }

            .topMsg_number_p {
              font-size: 0.5em;
              line-height: 0em;
              color: #fff;
              font-weight: 100;
              margin-top: -1.5em;
            }

          }

          .changBg_topMsg_content {
            background: url(../imgs/dataVimg/wanchanglv2.gif) no-repeat center center / 84% 98%;
          }

        }

        .topMsg2 {
          width: 100%;
          height: 20%;
          margin-bottom: 3%;
        }

        .topMsg {
          width: 100%;
          height: 100%;

          .topMsg_content {
            height: calc(100% - 1em);
            font-size: 2em;
            color: #69FFDE;
            background: url(../imgs/dataVimg/sunGong.gif) no-repeat 48% 0/86% 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            .topMsg_box {
              width: 52%;

              .topMsg_number_p {
                font-size: 0.5em;
                line-height: 0em;
                color: #fff;
                font-weight: 100;
                margin-top: 0.8em;
              }
            }

            .topMsg_number_2 {
              font-size: 0.5em;
            }
          }

          .changBg_topMsg_content {
            background: url(../imgs/dataVimg/sunGong2.gif) no-repeat 48% 0/86% 100%;
          }

          .icon_c {
            width: 100%;
            display: flex;
            align-items: flex-start;
            justify-content: unset !important;
            flex-wrap: wrap;
            height: calc(100% - 40px);
            overflow-y: scroll;

            .icon_p {
              width: 33%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-wrap: wrap;
              padding: 2px 0;
              cursor: pointer;
              position: relative;

              >i {
                display: flex;
                width: 54px;
                height: 54px;
                background: @dy-active;
                color: #fff;
                border-radius: 50%;
                text-align: center;
                justify-content: center;
                line-height: 50px;
                font-size: 23px;
                font-style: normal;
                font-weight: 700;
              }

              >span {
                display: flex;
                width: 100%;
                justify-content: center;
                margin-top: 5px;
              }

              .delectt {
                display: none;
                position: absolute;
                background: #ff3737;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                line-height: 13px;
                font-size: 28px;
                top: 0;
                right: 14px;
                color: #fff;
              }
            }

            .icon_p:hover {
              .delectt {
                display: block;
              }
            }
          }

          .icon_c::-webkit-scrollbar {
            display: none;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }

          .icon_c:hover::-webkit-scrollbar {
            display: unset;
            scrollbar-width: unset;
            -ms-overflow-style: unset;
          }
        }

        .bottomContent {}
      }

      .bottom_box {
        width: 100%;
        height: 12%;
        background: url(../imgs/dataVimg/bottomBg.png) no-repeat 0 0 / 100% 35%;
        position: absolute;
        left: 0;
        bottom: 0;
      }


      .centerCon {
        width: calc(100% - 56%);
        height: 88%;
        position: relative;

        .topMsg3 {
          width: 100%;
          height: 18%;
          margin-top: 2em;
        }

        .bottomContent3 {
          height: 23%;
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 5%;

        }

        .bottomContent {
          height: 100%;
          width: 100%;

          .topMsg_content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .eacharView {
              justify-content: center;
            }

            #echarts2 {
              width: 95%;
              height: 90%;
            }
          }
        }

        .center_li {
          width: 33%;
          background: url(../imgs/dataVimg/toplineB.png) no-repeat 0 bottom / 100% 11%;
          height: 78%;
        }
        @media (min-height: 900px) {
          .center_li{
            height: 60%;
          }
        }


        .right_li {
          background: url(../imgs/dataVimg/toplineV.png) no-repeat right top / 1px 100%;
        }

        .topMsg {
          background: url(../imgs/dataVimg/toplineleft.png) no-repeat 1.2em 0.2em/ 45px 80%;
          ;
          height: 100%;
          color: #69FFDE;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          font-size: 1.8em;

          .topMsg_content {
            width: 80%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .topMsg_line {
              width: 100%;
              height: 0.5em;
              background: url(../imgs/dataVimg/line.gif) no-repeat 50% bottom / 50% 100%;
            }

            .topMsg_tip {
              color: #CDF1FF;
              font-size: 0.5em;
              font-weight: 100;
              display: block;
              margin-top: 0.3em;
            }
          }
        }

        .topMsg2 {
          background: url(../imgs/dataVimg/toplineright.png) no-repeat 98% 35%/ 48px 80%;
          ;
          color: #69FFDE;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          font-size: 1.2emem;
          width: 100%;
          height: 100%;
        }

      }

    }
  }

  .bq {
    width: 100%;
    height: 103px;
    /* opacity: 0.5; */
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    line-height: 170px;
    bottom: 0px;
    left: 0;
    z-index: 0;
    position: absolute;
    background: url(../imgs/login/home_line@2x.png) no-repeat 0 0 / 100% 100%;
  }

  .area_top_title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    font-family: "微软雅黑";
    margin-bottom: 10px;
    color: #1b45b4;

    >p {
      font-size: 12px;
      margin-left: 10px;
      font-weight: normal;
      color: #666;
    }
  }

  .lables {
    display: flex;
    align-items: center;
    margin-top: 30px;

    >p {
      width: 88px;
    }
  }

  .tanhao {
    border: 2px solid #fdcd60;
    border-radius: 50%;
    display: block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 18px;
    color: #fdcd60;
    font-weight: 700;
    font-size: 21px;
    margin-left: 10px;
    cursor: pointer;
  }

  .lables2 {
    flex-wrap: wrap;

    >.ant-select-show-search:first-child {
      width: 85%;
      margin-left: 0%;
    }
  }

  //table
  .module_line,
  .module_search {
    padding-bottom: 10px;
  }

  .space {
    margin-bottom: 10px;
  }

  .module_body {
    padding-top: 10px;
  }

  .ant-table-wrapper {
    margin-top: 6px;
  }



  //按钮
  .ant-btn-primary,
  .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-icon,
  .ant-checkbox-checked .ant-checkbox-inner,
  .ant-checkbox-indeterminate .ant-checkbox-inner::after,
  .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title::after,
  .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner,
  .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after {
    border-color: @dy-active  !important;
    background: @dy-active  !important;
  }

  .ant-checkbox-checked .ant-checkbox-inner::after,
  .ant-select-tree-checkbox-inner::after {
    border-color: #f5f5f5 !important
  }

  .ant-steps-item-finish .ant-steps-item-icon,
  .ant-pagination-item-active {
    border-color: @dy-active  !important;
  }

  a:hover,
  .ant-steps-item-finish .ant-steps-item-icon>.ant-steps-icon,
  .more {
    color: @dy-all-active-hover  !important;
  }

  .sys_account___aWmgk .col_blue,
  .ant-pagination-item-active a,
  .themeColor,
  .col_blue span {
    color: @dy-active  !important;
  }

  .module_title::before {
    background-color: @dy-all-little;
    width: 2px;
    height: 15px;
    margin-top: 6px;
  }

  .ant-btn {
    border-radius: 3px;
  }

  .ant-btn:hover,
  .ant-btn:focus {
    border-color: @dy-all-active-hover  !important;
    color: @dy-all-active-hover  !important;
  }

  .ant-btn-danger:focus,
  .ant-btn-danger:hover {
    color: #fff !important;
    border-color: #ff4d4f !important;
    background: #ff4d4f !important;
  }

  .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner,
  .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
    border-color: @dy-all-active-hover  !important;
    box-shadow: 0 0 0 2px rgba(7, 45, 151, 0.2) !important;
  }

  .ant-btn-primary:hover,
  .ant-btn-primary:focus {
    border-color: @dy-active  !important;
    background: @dy-active  !important;
    color: #fff !important;
  }

  .ant-btn-primary {
    color: #fff !important;
  }

  #echarts8 {
    width: 53%;
    height: 80%;
    box-sizing: border-box;
    background: url(../imgs/dataVimg/toplineV.png) no-repeat 26% 50% / 1px 70%;

  }

  #echarts9 {
    width: 40%;
    height: 80%;
    box-sizing: border-box;
    padding-right: 3%;
    background: url(../imgs/dataVimg/toplineV.png) no-repeat 95% 55% / 1px 70%;

  }

  .cbRightBottomView {
    flex-wrap: wrap;
    position: relative;

    .right_b_tip2 {
      width: 46%;
      display: block;
      position: absolute;
      color: rgba(205, 241, 255, 1);
      left: 37%;
      top: 1.2em;
      text-align: right;
    }

    .right_b_tip1 {
      width: 36%;
      display: block;
      position: absolute;
      color: rgba(205, 241, 255, 1);
      left: 0;
      top: 1.2em;
      text-align: right;
    }
  }

  .testDiv {
    width: 4em;
    display: flex;
    align-items: center;
    justify-self: center;
    flex-wrap: wrap;
    margin-left: -2.2em;
    margin-top: -1.5em;

    .p3 {
      font-size: 0.4em;
      margin-left: 0.2em;
      display: inline-block;
    }

    .p2 {
      font-size: 0.5em;
      text-align: center;
      width: 100%;
      color: #CDF1FF;
      line-height: 0.3em;
      margin-top: 0.2em;
    }

    .p1 {
      text-align: center;
      width: 100%;
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 1.6em;

    }
  }

  .leftContent .bottomContent {
    height: 100% !important;

    .eacharView {
      display: flex;
      align-items: end;
    }
  }
}