|
|
@@ -1,860 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="top-bar-container" :style="topStyle">
|
|
|
- <div class="top-bar-main">
|
|
|
- <!-- :style="{ background: variables[`${style}-menu-background`] }"-->
|
|
|
-
|
|
|
- <el-row class="top-bar-row">
|
|
|
- <el-col
|
|
|
- :xl="3"
|
|
|
- :lg="6"
|
|
|
- :md="6"
|
|
|
- :sm="6"
|
|
|
- :xs="6"
|
|
|
- class="top-bar-row-logo"
|
|
|
- >
|
|
|
- <img src="@/assets/top_images/logo.png" class="logo-padding" />
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col
|
|
|
- :xl="16"
|
|
|
- :lg="14"
|
|
|
- :md="14"
|
|
|
- :sm="14"
|
|
|
- :xs="14"
|
|
|
- class="top-bar-center"
|
|
|
- >
|
|
|
- <!-- <div v-show="menuLeft < 0" class="menu-left" @click="leftClick">
|
|
|
- <i class="el-icon-arrow-left"></i>
|
|
|
- </div> -->
|
|
|
- <div ref="menuScroll" class="menu-scroll menu-wrap">
|
|
|
- <el-menu
|
|
|
- id="menuContentRef"
|
|
|
- router
|
|
|
- :background-color="variables[`${style}-menu-background`]"
|
|
|
- :text-color="variables[`${style}-menu-color`]"
|
|
|
- :active-text-color="themeColor"
|
|
|
- :style="{
|
|
|
- '--menuBgColor': variables[`${style}-menu-background`],
|
|
|
- left: menuLeft + 'px',
|
|
|
- }"
|
|
|
- :default-active="activeMenu"
|
|
|
- mode="horizontal"
|
|
|
- menu-trigger="hover"
|
|
|
- >
|
|
|
- <!-- 使用v-for遍历mockMenu数组 -->
|
|
|
- <template v-for="menu in mockMenu">
|
|
|
- <!-- 如果菜单没有子项，直接显示菜单项 -->
|
|
|
- <el-menu-item
|
|
|
- v-if="!menu.children || menu.children.length === 0"
|
|
|
- :key="menu.index"
|
|
|
- :index="menu.index"
|
|
|
- >
|
|
|
- <i :class="menu.icon"></i>
|
|
|
- <span>{{ menu.title }}</span>
|
|
|
- </el-menu-item>
|
|
|
-
|
|
|
- <!-- 如果菜单有子项，显示为子菜单 -->
|
|
|
- <el-submenu v-else :key="menu.index" :index="menu.index">
|
|
|
- <template slot="title">
|
|
|
- <i :class="menu.icon"></i>
|
|
|
- <span>{{ menu.title }}</span>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 遍历子菜单 -->
|
|
|
- <template v-for="subMenu in menu.children">
|
|
|
- <!-- 子菜单可能还有孙菜单 -->
|
|
|
- <el-submenu
|
|
|
- v-if="subMenu.children && subMenu.children.length > 0"
|
|
|
- :key="subMenu.index"
|
|
|
- :index="subMenu.index"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <i :class="subMenu.icon"></i>
|
|
|
- <span>{{ subMenu.title }}</span>
|
|
|
- </template>
|
|
|
-
|
|
|
- <!-- 遍历孙菜单 -->
|
|
|
- <el-menu-item
|
|
|
- v-for="child in subMenu.children"
|
|
|
- :key="child.index"
|
|
|
- :index="child.index"
|
|
|
- >
|
|
|
- {{ child.title }}
|
|
|
- </el-menu-item>
|
|
|
- </el-submenu>
|
|
|
-
|
|
|
- <!-- 如果子菜单没有孙菜单，直接显示 -->
|
|
|
- <el-menu-item
|
|
|
- v-else
|
|
|
- :key="subMenu.index"
|
|
|
- :index="subMenu.index"
|
|
|
- >
|
|
|
- <i :class="subMenu.icon"></i>
|
|
|
- <span>{{ subMenu.title }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </template>
|
|
|
- </el-submenu>
|
|
|
- </template>
|
|
|
- </el-menu>
|
|
|
- <!-- <el-menu id="menuContentRef" :background-color="variables[`${style}-menu-background`]"
|
|
|
- :text-color="variables[`${style}-menu-color`]" :active-text-color="themeColor" :style="{
|
|
|
- '--menuBgColor': variables[`${style}-menu-background`],
|
|
|
- left: menuLeft + 'px',
|
|
|
- }" :default-active="activeMenu" mode="horizontal" menu-trigger="hover">
|
|
|
- <template v-for="route in currentShowMenu">
|
|
|
- <ht-side-bar-item v-if="!route.hidden" :key="route.id" :full-path="route.path" :item="route" />
|
|
|
- </template>
|
|
|
- </el-menu> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <div v-show="showRightIcon" class="menu-right" @click="rightClick">
|
|
|
- <i class="el-icon-arrow-right"></i>
|
|
|
- </div> -->
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xl="4" :lg="4" :md="4" :sm="4" :xs="4" class="top-bar-right">
|
|
|
- <div
|
|
|
- class="right-panel"
|
|
|
- :style="{
|
|
|
- '--topRightColor': '#ffffff',
|
|
|
- // '--topRightColor': variables[`${style}-top-right-color`],
|
|
|
- }"
|
|
|
- >
|
|
|
- <ht-message
|
|
|
- :message-count="messageCount"
|
|
|
- @msg-click="$router.push('/personal/message')"
|
|
|
- ></ht-message>
|
|
|
-
|
|
|
- <ht-full-screen-bar @refresh="refreshRoute" />
|
|
|
-
|
|
|
- <!-- <ht-apps /> -->
|
|
|
-
|
|
|
- <!-- <ht-error-log /> -->
|
|
|
-
|
|
|
- <ht-theme-bar v-show="false" class="hidden-md-and-down" />
|
|
|
-
|
|
|
- <el-divider direction="vertical"></el-divider>
|
|
|
-
|
|
|
- <ht-avatar />
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import variables from '@/styles/variables.scss'
|
|
|
- import adjustPX from '@/mixins/adjustPX.js'
|
|
|
- import { mapGetters, mapState } from 'vuex'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'HtTopBar',
|
|
|
- mixins: [adjustPX],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- menuTrigger: 'hover',
|
|
|
- menuLeft: 0,
|
|
|
- showRightIcon: true,
|
|
|
- calcRatio: undefined,
|
|
|
- // 菜单数据直接定义在data中
|
|
|
- mockMenu: [
|
|
|
- {
|
|
|
- index: 'costAudit',
|
|
|
- icon: 'el-icon-folder',
|
|
|
- title: '成本监审',
|
|
|
- children: [
|
|
|
- {
|
|
|
- index: 'costAudit/baseInfo',
|
|
|
- icon: 'el-icon-document',
|
|
|
- title: '基础信息管理',
|
|
|
- children: [
|
|
|
- { index: '/costAudit/catalogManage', title: '监审目录管理' },
|
|
|
- {
|
|
|
- index: '/costAudit/auditEntityManage',
|
|
|
- title: '被监审单位管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/costFormManage',
|
|
|
- title: '成本调查表管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/financeSheetManage',
|
|
|
- title: '财务数据表管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/costVerifyManage',
|
|
|
- title: '成本核定表管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/auditReviewDocManage',
|
|
|
- title: '监审文书管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/auditDocNoManage',
|
|
|
- title: '监审文书号管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/auditProcessManage',
|
|
|
- title: '监审流程管理',
|
|
|
- },
|
|
|
- { index: '/costAudit/auditDocManage', title: '监审资料管理' },
|
|
|
- { index: '/costAudit/dictionaryManage', title: '字典项维护' },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- index: 'costAudit/projectInfo',
|
|
|
- icon: 'el-icon-setting',
|
|
|
- title: '项目信息管理',
|
|
|
- children: [
|
|
|
- {
|
|
|
- index: '/costAudit/annualReviewPlan',
|
|
|
- title: '年度监审计划',
|
|
|
- },
|
|
|
- { index: '/costAudit/initiation', title: '成本监审立项管理' },
|
|
|
- { index: '/costAudit/memoManage', title: '备忘录管理' },
|
|
|
- {
|
|
|
- index: '/costAudit/taskProgressManage',
|
|
|
- title: '任务进度管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/taskQueryStatistics',
|
|
|
- title: '任务查询统计',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/superviseMattersManage',
|
|
|
- title: '督办事项管理',
|
|
|
- },
|
|
|
- {
|
|
|
- index: '/costAudit/superviseResultManage',
|
|
|
- title: '督办结果管理',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.setRatio()
|
|
|
- console.log('this.calcRatio', this.calcRatio)
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- this.setRatio()
|
|
|
- })
|
|
|
- },
|
|
|
- computed: {
|
|
|
- topStyle() {
|
|
|
- return {
|
|
|
- //需要使用到的各种样式变量，可以给一个变量为空的默认值
|
|
|
- '--calcRatio': this.calcRatio,
|
|
|
- }
|
|
|
- },
|
|
|
- ...mapGetters({
|
|
|
- style: 'settings/style',
|
|
|
- routes: 'routes/routes',
|
|
|
- themeColor: 'settings/themeColor',
|
|
|
- visitedRoutes: 'tabsBar/visitedRoutes',
|
|
|
- messageCount: 'navHeader/getUnreadMsgCount',
|
|
|
- }),
|
|
|
- ...mapState('routes', ['menus']),
|
|
|
- activeMenu() {
|
|
|
- const route = this.$route
|
|
|
- const { meta, path } = route
|
|
|
- if (meta.activeMenu) {
|
|
|
- return meta.activeMenu
|
|
|
- }
|
|
|
- return path
|
|
|
- },
|
|
|
- variables() {
|
|
|
- return variables
|
|
|
- },
|
|
|
- currentShowMenu() {
|
|
|
- const menu = this.menus.find((item, index) => index === 6)
|
|
|
- if (!menu) return this.routes
|
|
|
- const menuIndex = this.routes.findIndex((it) => it.path === menu.path)
|
|
|
- const currentMenuList = this.routes.filter(
|
|
|
- (menu, index) => index <= menuIndex
|
|
|
- )
|
|
|
- const otherMenus = this.routes.filter(
|
|
|
- (menu, index) => index > menuIndex
|
|
|
- )
|
|
|
- if (otherMenus && otherMenus.length > 0) {
|
|
|
- currentMenuList.push({
|
|
|
- alwaysShow: true,
|
|
|
- children: otherMenus,
|
|
|
- name: 'moreMenu',
|
|
|
- meta: { icon: 'icon-gengduo2' },
|
|
|
- path: '/more',
|
|
|
- })
|
|
|
- }
|
|
|
- currentMenuList.forEach((element) => {
|
|
|
- element.isOnlyOne = false
|
|
|
- if (element.children && element.children.length > 0) {
|
|
|
- const child = element.children.filter((menu, index) => !menu.hidden)
|
|
|
- if (child && child.length === 1) {
|
|
|
- element.isOnlyOne = true
|
|
|
- // element.routeChildren = child[0]
|
|
|
- // element.path = path.resolve(element.path, child[0].path)
|
|
|
- // element.meta.target = child[0].meta.target
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- return currentMenuList
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$store.dispatch('navHeader/setUnreadMsgCount')
|
|
|
- // this.$root.$on('resize', () => {
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.initMenuScroll()
|
|
|
- // })
|
|
|
- // })
|
|
|
- // this.initMenuScroll()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- setRatio() {
|
|
|
- this.calcRatio = this.calcRem()
|
|
|
- this.$store.state.user.calcRatio = this.calcRatio
|
|
|
- },
|
|
|
- async refreshRoute() {
|
|
|
- this.$baseEventBus.$emit('reload-router-view')
|
|
|
- },
|
|
|
- async initMenuScroll() {
|
|
|
- if (!this.$refs.menuScroll) {
|
|
|
- await this.awaitOneSecond()
|
|
|
- }
|
|
|
- const lookWidth = this.$refs.menuScroll.clientWidth
|
|
|
- const totalWidth = document.getElementById('menuContentRef').scrollWidth
|
|
|
- let rightSurplus = totalWidth - Math.abs(this.menuLeft) - lookWidth
|
|
|
- this.showRightIcon = rightSurplus > 0
|
|
|
- },
|
|
|
- awaitOneSecond() {
|
|
|
- return new Promise((resolve) => {
|
|
|
- setTimeout(() => {
|
|
|
- resolve()
|
|
|
- }, 1000)
|
|
|
- })
|
|
|
- },
|
|
|
- // 点击右箭头（左侧滚动）
|
|
|
- rightClick() {
|
|
|
- // 获取可视区域宽度
|
|
|
- const lookWidth = this.$refs.menuScroll.clientWidth
|
|
|
- const totalWidth = document.getElementById('menuContentRef').scrollWidth
|
|
|
- let rightSurplus = totalWidth - Math.abs(this.menuLeft) - lookWidth
|
|
|
- let percentOffest = lookWidth * 0.5
|
|
|
- if (rightSurplus > 0) {
|
|
|
- this.menuLeft -=
|
|
|
- rightSurplus >= percentOffest ? percentOffest : rightSurplus
|
|
|
- if (totalWidth - Math.abs(this.menuLeft) - lookWidth <= 0) {
|
|
|
- this.showRightIcon = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.showRightIcon = false
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击左箭头（右侧滚动）
|
|
|
- leftClick() {
|
|
|
- // 获取可视区域宽度
|
|
|
- const lookWidth = this.$refs.menuScroll.clientWidth
|
|
|
- const totalWidth = document.getElementById('menuContentRef').scrollWidth
|
|
|
- let percentOffest = lookWidth * 0.5
|
|
|
- let rightSurplus = totalWidth - Math.abs(this.menuLeft) - lookWidth
|
|
|
- if (Math.abs(this.menuLeft) > 0) {
|
|
|
- this.menuLeft +=
|
|
|
- Math.abs(this.menuLeft) >= percentOffest
|
|
|
- ? percentOffest
|
|
|
- : Math.abs(this.menuLeft)
|
|
|
- this.showRightIcon = true
|
|
|
- }
|
|
|
- if (rightSurplus > 0) {
|
|
|
- this.showRightIcon = true
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- @mixin dot-border-color {
|
|
|
- border-color: var(--themeColor);
|
|
|
- }
|
|
|
-
|
|
|
- @mixin more-submenu-style($color) {
|
|
|
- .sub-menu-title,
|
|
|
- .ht-fa-icon,
|
|
|
- .el-submenu__icon-arrow {
|
|
|
- color: var($color) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @mixin menu-arrow($degree) {
|
|
|
- .el-submenu__icon-arrow {
|
|
|
- transform: rotateZ($degree);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-bar-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-items: flex-end;
|
|
|
- height: $base-top-bar-height;
|
|
|
-
|
|
|
- .top-bar-main {
|
|
|
- width: $base-full-width;
|
|
|
- background: url('~@/assets/top_images/h-back.png');
|
|
|
-
|
|
|
- .top-bar-row {
|
|
|
- width: 92% !important;
|
|
|
- margin: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .top-bar-row-logo {
|
|
|
- // width: 180px;
|
|
|
- // lj-修改
|
|
|
- //width: 80px;
|
|
|
- width: calc(var(--calcRatio) * 360px);
|
|
|
- }
|
|
|
-
|
|
|
- .top-bar-right {
|
|
|
- width: 380px;
|
|
|
- }
|
|
|
-
|
|
|
- .top-bar-center {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- position: relative;
|
|
|
- padding: 0 calc(var(--calcRatio) * 30px);
|
|
|
-
|
|
|
- .menu-scroll {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-wrap {
|
|
|
- ::v-deep {
|
|
|
- .is-active {
|
|
|
- .el-submenu__title {
|
|
|
- .more-menu {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-left {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- position: absolute;
|
|
|
- left: 14px;
|
|
|
- top: 14px;
|
|
|
- background: #f5f5f5;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .menu-right {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- position: absolute;
|
|
|
- right: 14px;
|
|
|
- top: 14px;
|
|
|
- background: #f5f5f5;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .logo-padding {
|
|
|
- padding-left: $base-logo-padding-left;
|
|
|
- background: transparent !important;
|
|
|
- //height: var(--calcRatio);
|
|
|
- width: calc(var(--calcRatio) * 50px);
|
|
|
- }
|
|
|
-
|
|
|
- .menu-more-wrap {
|
|
|
- height: $base-top-bar-height;
|
|
|
- width: 68px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .more-menu {
|
|
|
- position: fixed;
|
|
|
- top: 60px;
|
|
|
- z-index: 99;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .el-menu {
|
|
|
- &.el-menu--horizontal {
|
|
|
- // width: 100%;
|
|
|
- height: $base-top-bar-height;
|
|
|
- // display: flex;
|
|
|
- flex-shrink: 0;
|
|
|
- // overflow-x: auto;
|
|
|
- // overflow-y: hidden;
|
|
|
- // overflow: hidden;
|
|
|
- border-bottom: 0 solid transparent !important;
|
|
|
- background-color: var(--menuBgColor) !important;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- // &::before {
|
|
|
- // content: '';
|
|
|
- // flex: 1;
|
|
|
- // }
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- background-color: rgba(144, 147, 153, 0.3);
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb:hover {
|
|
|
- background-color: rgba(144, 147, 153, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item.is-active {
|
|
|
- background-color: rgba(var(--themeColorRgb), 0.2) !important;
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu.is-active {
|
|
|
- .el-submenu__title {
|
|
|
- background-color: rgba(var(--themeColorRgb), 0.2) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .is-active.more-menu__submenu {
|
|
|
- .el-menu--horizontal {
|
|
|
- .el-submenu.is-active {
|
|
|
- .el-submenu__title {
|
|
|
- @include more-submenu-style(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu .el-submenu__title {
|
|
|
- background-color: var(--menuBgColor) !important;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- @include more-submenu-style(--themeColor);
|
|
|
- @include menu-arrow(90deg);
|
|
|
- }
|
|
|
-
|
|
|
- @include more-submenu-style(--menuColor);
|
|
|
- @include menu-arrow(0deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item,
|
|
|
- .el-submenu__title {
|
|
|
- // padding: 0 15px;
|
|
|
- // background-color: var(--menuBgColor) !important;
|
|
|
- &:hover {
|
|
|
- .ht-fa-icon {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media only screen and (max-width: 767px) {
|
|
|
- .el-menu-item,
|
|
|
- .el-submenu__title {
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
-
|
|
|
- li:nth-child(4),
|
|
|
- li:nth-child(5) {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- > .el-menu-item {
|
|
|
- flex-shrink: 0;
|
|
|
- height: $base-top-bar-height;
|
|
|
- line-height: unset;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- // &:hover {
|
|
|
- // background-color: rgba(var(--themeColorRgb), 0.2) !important;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- > .el-submenu {
|
|
|
- .el-submenu__title {
|
|
|
- height: $base-top-bar-height;
|
|
|
- line-height: unset;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .ht-fa-icon {
|
|
|
- margin-right: 0;
|
|
|
-
|
|
|
- &::before {
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sub-menu-title {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu--popup {
|
|
|
- .el-submenu {
|
|
|
- margin: 0 10px;
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu__title {
|
|
|
- height: 48px;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu {
|
|
|
- .el-menu-item {
|
|
|
- margin: 0 $base-menu-bg-margin;
|
|
|
- }
|
|
|
-
|
|
|
- .el-icon-arrow-down {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- // &:hover {
|
|
|
- // .el-icon-arrow-down {
|
|
|
- // display: none;
|
|
|
- // color: var(--themeColor);
|
|
|
- // }
|
|
|
- // }
|
|
|
- .is-active {
|
|
|
- background-color: rgba(var(--themeColorRgb), 0.2) !important;
|
|
|
- border-radius: $base-radius;
|
|
|
-
|
|
|
- .sub-menu-child__title {
|
|
|
- &::before {
|
|
|
- background: transparent;
|
|
|
- @include dot-border-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .sub-menu-child__title {
|
|
|
- &::before {
|
|
|
- border-color: $base-color-second-color;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item {
|
|
|
- &:hover {
|
|
|
- .sub-menu-child__title {
|
|
|
- &::before {
|
|
|
- @include dot-border-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu.is-active {
|
|
|
- // .el-submenu__title {
|
|
|
- // background-color: rgba(var(--themeColorRgb), 0.2) !important;
|
|
|
- // }
|
|
|
- .ht-fa-icon {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
|
|
|
- transform: rotateZ(90deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 1rem;
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
-
|
|
|
- &--horizontal {
|
|
|
- .el-menu {
|
|
|
- .el-menu-item,
|
|
|
- .el-submenu__title {
|
|
|
- height: $base-menu-item-height;
|
|
|
- line-height: $base-menu-item-height;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu,
|
|
|
- .el-menu-item {
|
|
|
- &.is-active {
|
|
|
- // background-color: $base-color-blue !important;
|
|
|
- border-bottom: 0 solid transparent !important;
|
|
|
-
|
|
|
- .el-icon-arrow-down {
|
|
|
- color: var(--themeColor);
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu__title {
|
|
|
- border-bottom: 0 solid transparent !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- > .el-menu-item {
|
|
|
- .el-tag {
|
|
|
- margin-top: calc(#{$base-top-bar-height} / 2 - 7.5px);
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- @media only screen and (max-width: 1199px) {
|
|
|
- .el-tag {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- background-color: transparent !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-menu {
|
|
|
- &.el-menu--horizontal {
|
|
|
- background-color: transparent !important;
|
|
|
-
|
|
|
- > .el-submenu {
|
|
|
- .ht-fa-icon {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu-item {
|
|
|
- color: #ffffff !important;
|
|
|
- background: transparent !important;
|
|
|
-
|
|
|
- .ht-fa-icon {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- background: rgba(255, 255, 255, 0.1) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu {
|
|
|
- .el-submenu__title {
|
|
|
- color: #ffffff !important;
|
|
|
- background: transparent !important;
|
|
|
- padding: 0 calc(var(--calcRatio) * 15px) !important;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: rgba(255, 255, 255, 0.1) !important;
|
|
|
-
|
|
|
- .ht-fa-icon {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- .el-submenu__title {
|
|
|
- background: rgba(255, 255, 255, 0.1) !important;
|
|
|
- }
|
|
|
-
|
|
|
- .ht-fa-icon {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-menu-title {
|
|
|
- color: #ffffff !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-submenu {
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-panel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- height: $base-top-bar-height;
|
|
|
-
|
|
|
- div:not(.el-divider--vertical),
|
|
|
- span {
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .el-divider--vertical {
|
|
|
- margin: 0 20px;
|
|
|
- background-color: var(--topRightColor);
|
|
|
- }
|
|
|
-
|
|
|
- svg {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- font-size: $base-font-size-big;
|
|
|
- color: rgba($base-color-white, 0.9);
|
|
|
- cursor: pointer;
|
|
|
- fill: var(--topRightColor);
|
|
|
- }
|
|
|
-
|
|
|
- button {
|
|
|
- svg {
|
|
|
- margin-right: 0;
|
|
|
- color: rgba($base-color-white, 0.9);
|
|
|
- cursor: pointer;
|
|
|
- fill: rgba($base-color-white, 0.9);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-badge {
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .message-title {
|
|
|
- color: var(--topRightColor);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .right-panel {
|
|
|
- .avatar-dropdown .user-name {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
shiyanyu