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-09-12 17:46:02
 */

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

:global {
  #app {
    height: inherit;
  }
  .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: #fff;

    .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 .top {
    height: 56px;
    background: @dy-bg;
    box-shadow: 0px 1px 5px #e0e0e0;

    .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: url(../imgs/login/bg@2x.png) no-repeat 0 -47px / 100% 109% #1c45b4;
  }

  .bottom_body {
    background: #fff;

    .home {
      padding: 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      background: unset;

      .leftContent {
        width: 320px;
        height: 100%;
        z-index: 9;

        .topMsg {
          width: 100%;
          height: 284px;
          background: #FFFFFF;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          border-radius: 26px;
          padding: 16px;

          .hello {
            font-weight: 600;
            font-size: 20px;
            color: @dy-active;
            line-height: 28px;
            display: block;
            padding: 11px 0;
          }

          .xFont {
            height: 20px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 20px;
          }

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


        .bottomContent {
          width: 100%;
          height: calc(100% - 300px);
          background: #FFFFFF;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          border-radius: 26px;
          margin-top: 16px;
          //min-height: 432px;
        }
      }

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

      .bigDivPd {
        padding: 16px;
      }

      .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: 320px;
        height: 100%;
        z-index: 9;

        .topMsg {
          width: 100%;
          height: 284px;
          background: #FFFFFF;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          border-radius: 26px;
          padding: 16px;

          .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 {
          width: 100%;
          height: calc(100% - 300px);
          background: #FFFFFF;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          border-radius: 26px;
          margin-top: 16px;
          //min-height: 432px;
        }
      }


      .centerCon {
        width: calc(100% - 672px);
        height: 100%;

        .centerContent {
          width: 100%;
          height: 56px;
          background: #FFFFFF;
          box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
          border-radius: 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 24px;

          .inform {
            font-size: 18px;
            color: #1B45B4;
            font-weight: 700;
            margin-right: 24px;
            font-style: italic;
          }

          .ant-carousel {
            width: 100%;

            .slick-dots-bottom {
              bottom: -10px;
            }

            .slick-dots li button {
              height: 2px;
              background: #e4e3e3;
              border-radius: 10px;
            }

            .slick-dots li.slick-active button {
              background: @dy-active;
            }
          }

          .inform_d {
            width: calc(100% - 65px);
            display: flex;
            justify-content: space-between;

            .inform_d_d {
              display: flex !important;
              justify-content: space-between;
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }

        .center_bg {
          width: 84%;
          margin-left: 8%;
          height: calc(100% - 56px);
          background: url(../imgs/login/bg_s@2x.png) no-repeat 0 center / 100% auto;
        }
      }

    }
  }

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