SaaS-lib/hx-op/src/App.vue

<template>
  <a-config-provider :locale="locale">
    <router-view />
  </a-config-provider>
</template>

<script lang="ts">
  import { defineComponent, watch, ref } from 'vue';
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    name: 'App',

    setup() {
      const router = useRouter();

      const cachedViews = ['Status'];
      return {
        cachedViews,
        locale: zhCN,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ns-content-main) {
    .ant-tabs-content {
      height: 100%;
    }
  }
  // 树组件
  :deep(.ant-tree-node-content-wrapper) {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  :deep(.ant-tree-node-selected) {
    color: @primary-color !important;
  }

  // ns-view-list-table 搜索区域
  :deep(.ns-table-search) {
    .ns-flexv2-form {
      .ns-operate {
        text-align: left;
        margin-left: 0;
        .ant-btn {
          margin: 0;
          margin-right: 6px;
        }
      }
    }
    .ns-form-body {
      max-width: 1000px;
    }
  }

  // 区域阴影
  // .ns-list-table {

  :deep(.ant-tabs) {
    //   // overflow: visible;
    //   box-shadow: @ns-content-box-shadow;
    //   border-radius: @ns-border-radius;
    .ns-table-search {
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
    .ns-table-main {
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
    //   .ant-tabs-tabpane-active > div {
    //     height: 100%;
    //   }
  }
  // .ant-tabs .ns-table-main {
  //   border-bottom-left-radius: 0px !important;
  //   border-bottom-right-radius: 0px !important;
  // }
  // }

  // 菜单icon(仅仅处理特殊需求：未选中时icon与文字不同色)
  :deep(.anticon) {
    color: #8d96a3 !important;
  }

  :deep(.ant-menu-item-selected .ant-menu-item-only-child),
  :deep(.ant-menu-submenu-selected .ant-menu-item-only-child),
  :deep(.firstMenuItem-selected) {
    .router-link-active > .anticon {
      color: @white !important;
    }
  }

  :deep(.ant-menu-item-active) {
    .anticon {
      color: @primary-color !important;
    }
  }
  :deep(.ant-menu-submenu-active),
  :deep(.ant-menu-submenu-open),
  :deep(.ant-menu-item-selected) {
    .ant-menu-submenu-title {
      .anticon {
        color: @primary-color !important;
      }
    }
  }

  @min-padding: 5px;
  :deep(.ns-left-menu-space):not(.ns-left-menu-space-collapsed) {
    .firstMenuItem-selected {
      background-color: transparent !important;
    }
    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
      background-color: transparent;
      &::before {
        background-color: @primary-color;
        opacity: 1;
        height: calc(100% - @min-padding*2);
        top: @min-padding;
        border-radius: @ns-border-radius;
      }
    }
    .ant-menu-item-active:not(.ant-menu-item-selected) {
      background-color: transparent !important;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        background-color: rgb(@primary-color, 0.1);
        height: calc(100% - @min-padding*2);
        top: @min-padding;
        left: 0;
        border-radius: @ns-border-radius;
        z-index: 0;
      }
    }

    // .ant-menu-inline .ant-menu-item-selected::after {
    //   content: '';
    //   position: absolute;
    //   top: 50%;
    //   right: -20px;
    //   transform: translateY(-50%);
    //   width: 3px !important;
    //   border-radius: 2px;
    //   background-color: red;
    //   height: 30px;
    //   z-index: 2;
    //   border: none;
    // }

    .ant-menu-title-content {
      z-index: 1;
    }
  }

  :deep(.nsHeader_action) {
    .action {
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(51, 51, 51, 1);
    }
  }
</style>