|
@@ -1,319 +1,340 @@
|
|
|
<template>
|
|
|
- <div class="layout-columns-aside">
|
|
|
- <el-scrollbar>
|
|
|
- <ul @mouseleave="onColumnsAsideMenuMouseleave()">
|
|
|
- <li v-for="(v, k) in columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" @mouseenter="onColumnsAsideMenuMouseenter(v, k)" :ref="(el: any) => {
|
|
|
+ <div class="layout-columns-aside">
|
|
|
+ <el-scrollbar>
|
|
|
+ <ul @mouseleave="onColumnsAsideMenuMouseleave()">
|
|
|
+ <li
|
|
|
+ v-for="(v, k) in columnsAsideList"
|
|
|
+ :key="k"
|
|
|
+ @click="onColumnsAsideMenuClick(v, k)"
|
|
|
+ @mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
|
|
+ :ref="(el: any) => {
|
|
|
if (el) columnsAsideOffsetTopRefs[k] = el;
|
|
|
}
|
|
|
- " :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }" :title="v.meta?.title.indexOf('.') > 0 ? $t(v.meta?.title) : v.meta?.title">
|
|
|
- <div :class="setColumnsAsidelayout" v-if="!v.meta?.isLink || (v.meta?.isLink && v.meta.isIframe)">
|
|
|
- <SvgIcon :name="v.meta?.icon" />
|
|
|
- <div class="columns-vertical-title font12">
|
|
|
- {{ tMenuTitle(v.meta?.title) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div :class="setColumnsAsidelayout" v-else>
|
|
|
- <a :href="v.meta?.isLink" target="_blank">
|
|
|
- <SvgIcon :name="v.meta?.icon" />
|
|
|
- <div class="columns-vertical-title font12">
|
|
|
- {{ tMenuTitle(v.meta?.title) }}
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
|
|
|
- </ul>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
+ "
|
|
|
+ :class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
|
|
|
+ :title="v.meta?.title.indexOf('.') > 0 ? $t(v.meta?.title) : v.meta?.title"
|
|
|
+ >
|
|
|
+ <div :class="setColumnsAsidelayout" v-if="!v.meta?.isLink || (v.meta?.isLink && v.meta.isIframe)">
|
|
|
+ <SvgIcon :name="v.meta?.icon" />
|
|
|
+ <div class="columns-vertical-title font12">
|
|
|
+ {{ tMenuTitle(v.meta?.title) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :class="setColumnsAsidelayout" v-else>
|
|
|
+ <a :href="v.meta?.isLink" target="_blank">
|
|
|
+ <SvgIcon :name="v.meta?.icon" />
|
|
|
+ <div class="columns-vertical-title font12">
|
|
|
+ {{ tMenuTitle(v.meta?.title) }}
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
|
|
|
+ </ul>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
|
|
|
-import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
|
|
-import { useStore } from '/@/store/index';
|
|
|
+import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from "vue";
|
|
|
+import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from "vue-router";
|
|
|
+import { useStore } from "/@/store/index";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
|
|
// 定义接口来定义对象的类型
|
|
|
interface ColumnsAsideState {
|
|
|
- columnsAsideList: any[];
|
|
|
- liIndex: number;
|
|
|
- liOldIndex: null | number;
|
|
|
- liHoverIndex: null | number;
|
|
|
- liOldPath: null | string;
|
|
|
- difference: number;
|
|
|
- routeSplit: string[];
|
|
|
- isNavHover: boolean;
|
|
|
+ columnsAsideList: any[];
|
|
|
+ liIndex: number;
|
|
|
+ liOldIndex: null | number;
|
|
|
+ liHoverIndex: null | number;
|
|
|
+ liOldPath: null | string;
|
|
|
+ difference: number;
|
|
|
+ routeSplit: string[];
|
|
|
+ isNavHover: boolean;
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'layoutColumnsAside',
|
|
|
- setup() {
|
|
|
- const columnsAsideOffsetTopRefs: any = ref([]);
|
|
|
- const columnsAsideActiveRef = ref();
|
|
|
- const { t } = useI18n();
|
|
|
- const { proxy } = <any>getCurrentInstance();
|
|
|
- const store = useStore();
|
|
|
- const route = useRoute();
|
|
|
- const router = useRouter();
|
|
|
- const state = reactive<ColumnsAsideState>({
|
|
|
- columnsAsideList: [],
|
|
|
- liIndex: 0,
|
|
|
- liOldIndex: null,
|
|
|
- liHoverIndex: null,
|
|
|
- liOldPath: null,
|
|
|
- difference: 0,
|
|
|
- routeSplit: [],
|
|
|
- isNavHover: false,
|
|
|
- });
|
|
|
- // 设置菜单名称
|
|
|
- const tMenuTitle = (title: string): string => {
|
|
|
- let rTitle = title.indexOf('.') > 0 ? t(title) : title;
|
|
|
- rTitle && rTitle.length >= 4
|
|
|
- ? rTitle.substring(0, store.state.themeConfig.themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
|
|
|
- : rTitle
|
|
|
- return rTitle
|
|
|
- };
|
|
|
- // 设置分栏高亮风格
|
|
|
- const setColumnsAsideStyle = computed(() => {
|
|
|
- return store.state.themeConfig.themeConfig.columnsAsideStyle;
|
|
|
- });
|
|
|
- // 设置分栏布局风格
|
|
|
- const setColumnsAsidelayout = computed(() => {
|
|
|
- return store.state.themeConfig.themeConfig.columnsAsideLayout;
|
|
|
- });
|
|
|
- // 设置菜单高亮位置移动
|
|
|
- const setColumnsAsideMove = (k: number) => {
|
|
|
- state.liIndex = k;
|
|
|
- columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
|
|
- };
|
|
|
- // 菜单高亮点击事件
|
|
|
- const onColumnsAsideMenuClick = (v: any, k: number) => {
|
|
|
- // setColumnsAsideMove(k);
|
|
|
- // 找到二级菜单中的第一个菜单进行跳转
|
|
|
- if (v.children) {
|
|
|
- const route = v.children.find((item: any) => !item.children)
|
|
|
- if (route) router.push(route.path);
|
|
|
- }
|
|
|
+ name: "layoutColumnsAside",
|
|
|
+ setup() {
|
|
|
+ const columnsAsideOffsetTopRefs: any = ref([]);
|
|
|
+ const columnsAsideActiveRef = ref();
|
|
|
+ const { t } = useI18n();
|
|
|
+ const { proxy } = <any>getCurrentInstance();
|
|
|
+ const store = useStore();
|
|
|
+ const route = useRoute();
|
|
|
+ const router = useRouter();
|
|
|
+ const state = reactive<ColumnsAsideState>({
|
|
|
+ columnsAsideList: [],
|
|
|
+ liIndex: 0,
|
|
|
+ liOldIndex: null,
|
|
|
+ liHoverIndex: null,
|
|
|
+ liOldPath: null,
|
|
|
+ difference: 0,
|
|
|
+ routeSplit: [],
|
|
|
+ isNavHover: false,
|
|
|
+ });
|
|
|
+ // 设置菜单名称
|
|
|
+ const tMenuTitle = (title: string): string => {
|
|
|
+ let rTitle = title.indexOf(".") > 0 ? t(title) : title;
|
|
|
+ rTitle && rTitle.length >= 4 ? rTitle.substring(0, store.state.themeConfig.themeConfig.columnsAsideLayout === "columns-vertical" ? 4 : 3) : rTitle;
|
|
|
+ return rTitle;
|
|
|
+ };
|
|
|
+ // 设置分栏高亮风格
|
|
|
+ const setColumnsAsideStyle = computed(() => {
|
|
|
+ return store.state.themeConfig.themeConfig.columnsAsideStyle;
|
|
|
+ });
|
|
|
+ // 设置分栏布局风格
|
|
|
+ const setColumnsAsidelayout = computed(() => {
|
|
|
+ return store.state.themeConfig.themeConfig.columnsAsideLayout;
|
|
|
+ });
|
|
|
+ // 设置菜单高亮位置移动
|
|
|
+ const setColumnsAsideMove = (k: number) => {
|
|
|
+ state.liIndex = k;
|
|
|
+ columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k]?.offsetTop + state.difference}px`;
|
|
|
+ };
|
|
|
+ // 菜单高亮点击事件
|
|
|
+ const onColumnsAsideMenuClick = (v: any, k: number) => {
|
|
|
+ // setColumnsAsideMove(k);
|
|
|
+ // 找到二级菜单中的第一个菜单进行跳转
|
|
|
+ if (v.children) {
|
|
|
+ const route = v.children.find((item: any) => !item.children);
|
|
|
+ if (route) router.push(route.path);
|
|
|
+ }
|
|
|
|
|
|
- // let { path, redirect } = v as any;
|
|
|
- // if (redirect) router.push(redirect);
|
|
|
- // else router.push(path);
|
|
|
- };
|
|
|
- // 鼠标移入时,显示当前的子级菜单
|
|
|
- const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
|
|
- let { path } = v;
|
|
|
- state.liOldPath = path;
|
|
|
- state.liOldIndex = k;
|
|
|
- state.liHoverIndex = k;
|
|
|
- proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
|
|
- store.dispatch('routesList/setColumnsMenuHover', false);
|
|
|
- store.dispatch('routesList/setColumnsNavHover', true);
|
|
|
- state.isNavHover = true;
|
|
|
- };
|
|
|
- // 鼠标移走时,显示原来的子级菜单
|
|
|
- const onColumnsAsideMenuMouseleave = async () => {
|
|
|
- await store.dispatch('routesList/setColumnsNavHover', false);
|
|
|
- // 添加延时器,防止拿到的 store.state.routesList 值不是最新的
|
|
|
- setTimeout(() => {
|
|
|
- const { isColumnsMenuHover, isColumnsNavHover } = store.state.routesList;
|
|
|
- if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
|
|
|
- }, 100);
|
|
|
- // state.isNavHover = false;
|
|
|
- };
|
|
|
- // 设置高亮动态位置
|
|
|
- const onColumnsAsideDown = (k: number) => {
|
|
|
- nextTick(() => {
|
|
|
- setColumnsAsideMove(k);
|
|
|
- });
|
|
|
- };
|
|
|
- // 设置/过滤路由(非静态路由/是否显示在菜单中)
|
|
|
- const setFilterRoutes = () => {
|
|
|
- state.columnsAsideList = filterRoutesFun(store.state.routesList.routesList);
|
|
|
- const resData: any = setSendChildren(route.path);
|
|
|
- if (Object.keys(resData).length <= 0) return false;
|
|
|
- onColumnsAsideDown(resData.item[0].k);
|
|
|
- proxy.mittBus.emit('setSendColumnsChildren', resData);
|
|
|
- };
|
|
|
- // 传送当前子级数据到菜单中
|
|
|
- const setSendChildren = (path: string) => {
|
|
|
- const currentPathSplit = path.split('/');
|
|
|
- let currentData: any = {};
|
|
|
- state.columnsAsideList.map((v: any, k: number) => {
|
|
|
- if (v.path === `/${currentPathSplit[1]}`) {
|
|
|
- v['k'] = k;
|
|
|
- currentData['item'] = [{ ...v }];
|
|
|
- currentData['children'] = [{ ...v }];
|
|
|
- if (v.children) currentData['children'] = v.children;
|
|
|
- }
|
|
|
- });
|
|
|
- return currentData;
|
|
|
- };
|
|
|
- // 路由过滤递归函数
|
|
|
- const filterRoutesFun = (arr: Array<object>) => {
|
|
|
- return arr
|
|
|
- .filter((item: any) => !item.meta?.isHide)
|
|
|
- .map((item: any) => {
|
|
|
- item = Object.assign({}, item);
|
|
|
- if (item.children) item.children = filterRoutesFun(item.children);
|
|
|
- return item;
|
|
|
- });
|
|
|
- };
|
|
|
- // tagsView 点击时,根据路由查找下标 columnsAsideList,实现左侧菜单高亮
|
|
|
- const setColumnsMenuHighlight = (path: string) => {
|
|
|
- state.routeSplit = path.split('/');
|
|
|
- state.routeSplit.shift();
|
|
|
- const routeFirst = `/${state.routeSplit[0]}`;
|
|
|
- const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
|
|
|
- if (!currentSplitRoute) return false;
|
|
|
- // 延迟拿值,防止取不到
|
|
|
- setTimeout(() => {
|
|
|
- onColumnsAsideDown((<any>currentSplitRoute).k);
|
|
|
- }, 0);
|
|
|
- };
|
|
|
- // 监听布局配置信息的变化,动态增加菜单高亮位置移动像素
|
|
|
- watch(store.state, (val) => {
|
|
|
- val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
|
|
- if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
|
|
- state.liHoverIndex = null;
|
|
|
- proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
|
|
- } else {
|
|
|
- state.liHoverIndex = state.liOldIndex;
|
|
|
- if (!state.liOldPath) return false;
|
|
|
- proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
|
|
- }
|
|
|
- });
|
|
|
- // 页面加载时
|
|
|
- onMounted(() => {
|
|
|
- setFilterRoutes();
|
|
|
- // 销毁变量,防止鼠标再次移入时,保留了上次的记录
|
|
|
- proxy.mittBus.on('restoreDefault', () => {
|
|
|
- state.liOldIndex = null;
|
|
|
- state.liOldPath = null;
|
|
|
- });
|
|
|
- });
|
|
|
- // 页面卸载时
|
|
|
- onUnmounted(() => {
|
|
|
- proxy.mittBus.off('restoreDefault', () => { });
|
|
|
- });
|
|
|
- // 路由更新时
|
|
|
- onBeforeRouteUpdate((to) => {
|
|
|
- setColumnsMenuHighlight(to.path);
|
|
|
- proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
|
|
|
- });
|
|
|
- return {
|
|
|
- columnsAsideOffsetTopRefs,
|
|
|
- columnsAsideActiveRef,
|
|
|
- onColumnsAsideDown,
|
|
|
- setColumnsAsideStyle,
|
|
|
- setColumnsAsidelayout,
|
|
|
- onColumnsAsideMenuClick,
|
|
|
- onColumnsAsideMenuMouseenter,
|
|
|
- onColumnsAsideMenuMouseleave,
|
|
|
- tMenuTitle,
|
|
|
- ...toRefs(state),
|
|
|
- };
|
|
|
- },
|
|
|
+ // let { path, redirect } = v as any;
|
|
|
+ // if (redirect) router.push(redirect);
|
|
|
+ // else router.push(path);
|
|
|
+ };
|
|
|
+ // 鼠标移入时,显示当前的子级菜单
|
|
|
+ const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
|
|
+ let { path } = v;
|
|
|
+ state.liOldPath = path;
|
|
|
+ state.liOldIndex = k;
|
|
|
+ state.liHoverIndex = k;
|
|
|
+ proxy.mittBus.emit("setSendColumnsChildren", setSendChildren(path));
|
|
|
+ store.dispatch("routesList/setColumnsMenuHover", false);
|
|
|
+ store.dispatch("routesList/setColumnsNavHover", true);
|
|
|
+ state.isNavHover = true;
|
|
|
+ };
|
|
|
+ // 鼠标移走时,显示原来的子级菜单
|
|
|
+ const onColumnsAsideMenuMouseleave = async () => {
|
|
|
+ await store.dispatch("routesList/setColumnsNavHover", false);
|
|
|
+ // 添加延时器,防止拿到的 store.state.routesList 值不是最新的
|
|
|
+ setTimeout(() => {
|
|
|
+ const { isColumnsMenuHover, isColumnsNavHover } = store.state.routesList;
|
|
|
+ if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit("restoreDefault");
|
|
|
+ }, 100);
|
|
|
+ // state.isNavHover = false;
|
|
|
+ };
|
|
|
+ // 设置高亮动态位置
|
|
|
+ const onColumnsAsideDown = (k: number) => {
|
|
|
+ nextTick(() => {
|
|
|
+ setColumnsAsideMove(k);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 设置/过滤路由(非静态路由/是否显示在菜单中)
|
|
|
+ const setFilterRoutes = () => {
|
|
|
+ state.columnsAsideList = filterRoutesFun(store.state.routesList.routesList);
|
|
|
+ const resData: any = setSendChildren(route.path);
|
|
|
+ if (Object.keys(resData).length <= 0) return false;
|
|
|
+ onColumnsAsideDown(resData.item[0].k);
|
|
|
+ proxy.mittBus.emit("setSendColumnsChildren", resData);
|
|
|
+ };
|
|
|
+ // 循环引用到获取一级菜单路由
|
|
|
+ const mathCurrentMenu = (menuList: Array<any>, path: string): any => {
|
|
|
+ const res = menuList.find((item: any) => item.path === path);
|
|
|
+ if (res) {
|
|
|
+ return res;
|
|
|
+ } else {
|
|
|
+ return menuList.find((item: any) => item.children && mathCurrentMenu(item.children, path));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 通过当前菜单路由,获取一级菜单路由
|
|
|
+ const getFirstMenuByPath = (path: string) => {
|
|
|
+ const menuLevelList = store.state.routesList.routesList;
|
|
|
+ return mathCurrentMenu(menuLevelList, path);
|
|
|
+ };
|
|
|
+ // 传送当前子级数据到菜单中
|
|
|
+ const setSendChildren = (path: string) => {
|
|
|
+ const firstMenu = getFirstMenuByPath(path);
|
|
|
+ let currentData: any = {};
|
|
|
+ state.columnsAsideList.map((v: any, k: number) => {
|
|
|
+ if (v.path === firstMenu?.path) {
|
|
|
+ v["k"] = k;
|
|
|
+ currentData["item"] = [{ ...v }];
|
|
|
+ currentData["children"] = [{ ...v }];
|
|
|
+ if (v.children) currentData["children"] = v.children;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return currentData;
|
|
|
+ };
|
|
|
+ // 路由过滤递归函数
|
|
|
+ const filterRoutesFun = (arr: Array<object>) => {
|
|
|
+ return arr
|
|
|
+ .filter((item: any) => !item.meta?.isHide)
|
|
|
+ .map((item: any) => {
|
|
|
+ item = Object.assign({}, item);
|
|
|
+ if (item.children) item.children = filterRoutesFun(item.children);
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // tagsView 点击时,根据路由查找下标 columnsAsideList,实现左侧菜单高亮
|
|
|
+ const setColumnsMenuHighlight = (path: string) => {
|
|
|
+ state.routeSplit = path.split("/");
|
|
|
+ state.routeSplit.shift();
|
|
|
+ const routeFirst = getFirstMenuByPath(path)?.path;
|
|
|
+ const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
|
|
|
+ if (!currentSplitRoute) return false;
|
|
|
+ // 延迟拿值,防止取不到
|
|
|
+ setTimeout(() => {
|
|
|
+ onColumnsAsideDown((<any>currentSplitRoute).k);
|
|
|
+ }, 0);
|
|
|
+ };
|
|
|
+ // 监听布局配置信息的变化,动态增加菜单高亮位置移动像素
|
|
|
+ watch(store.state, (val) => {
|
|
|
+ val.themeConfig.themeConfig.columnsAsideStyle === "columnsRound" ? (state.difference = 3) : (state.difference = 0);
|
|
|
+
|
|
|
+ if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
|
|
+ state.liHoverIndex = null;
|
|
|
+ proxy.mittBus.emit("setSendColumnsChildren", setSendChildren(route.path));
|
|
|
+ } else {
|
|
|
+ state.liHoverIndex = state.liOldIndex;
|
|
|
+ if (!state.liOldPath) return false;
|
|
|
+ proxy.mittBus.emit("setSendColumnsChildren", setSendChildren(state.liOldPath));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 页面加载时
|
|
|
+ onMounted(() => {
|
|
|
+ setFilterRoutes();
|
|
|
+ // 销毁变量,防止鼠标再次移入时,保留了上次的记录
|
|
|
+ proxy.mittBus.on("restoreDefault", () => {
|
|
|
+ state.liOldIndex = null;
|
|
|
+ state.liOldPath = null;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 页面卸载时
|
|
|
+ onUnmounted(() => {
|
|
|
+ proxy.mittBus.off("restoreDefault", () => {});
|
|
|
+ });
|
|
|
+ // 路由更新时
|
|
|
+ onBeforeRouteUpdate((to) => {
|
|
|
+ setColumnsMenuHighlight(to.path);
|
|
|
+ proxy.mittBus.emit("setSendColumnsChildren", setSendChildren(to.path));
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ columnsAsideOffsetTopRefs,
|
|
|
+ columnsAsideActiveRef,
|
|
|
+ onColumnsAsideDown,
|
|
|
+ setColumnsAsideStyle,
|
|
|
+ setColumnsAsidelayout,
|
|
|
+ onColumnsAsideMenuClick,
|
|
|
+ onColumnsAsideMenuMouseenter,
|
|
|
+ onColumnsAsideMenuMouseleave,
|
|
|
+ tMenuTitle,
|
|
|
+ ...toRefs(state),
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.layout-columns-aside {
|
|
|
- width: 70px;
|
|
|
- height: 100%;
|
|
|
- background: var(--next-bg-columnsMenuBar);
|
|
|
+ width: 70px;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--next-bg-columnsMenuBar);
|
|
|
|
|
|
- ul {
|
|
|
- position: relative;
|
|
|
+ ul {
|
|
|
+ position: relative;
|
|
|
|
|
|
- li {
|
|
|
- color: var(--next-bg-columnsMenuBarColor);
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
+ li {
|
|
|
+ color: var(--next-bg-columnsMenuBarColor);
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .columns-vertical {
|
|
|
- margin: auto;
|
|
|
- .columns-vertical-title {
|
|
|
- padding-top: 1px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .columns-vertical {
|
|
|
+ margin: auto;
|
|
|
+ .columns-vertical-title {
|
|
|
+ padding-top: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &:has(.columns-vertical){
|
|
|
- height: 68px;
|
|
|
- }
|
|
|
- .columns-horizontal {
|
|
|
- display: flex;
|
|
|
- height: 50px;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- padding: 0 5px;
|
|
|
+ &:has(.columns-vertical) {
|
|
|
+ height: 68px;
|
|
|
+ }
|
|
|
+ .columns-horizontal {
|
|
|
+ display: flex;
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 5px;
|
|
|
|
|
|
- i {
|
|
|
- margin-right: 3px;
|
|
|
- }
|
|
|
+ i {
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
|
|
|
- a {
|
|
|
- display: flex;
|
|
|
+ a {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .columns-horizontal-title {
|
|
|
- padding-top: 1px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .columns-horizontal-title {
|
|
|
+ padding-top: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- a {
|
|
|
- text-decoration: none;
|
|
|
- color: var(--next-bg-columnsMenuBarColor);
|
|
|
- }
|
|
|
- }
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: var(--next-bg-columnsMenuBarColor);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .columns-vertical {
|
|
|
- .el-icon {
|
|
|
- font-size: 22px !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ .columns-vertical {
|
|
|
+ .el-icon {
|
|
|
+ font-size: 22px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .layout-columns-active {
|
|
|
- color: var(--el-color-white);
|
|
|
- transition: 0.3s ease-in-out;
|
|
|
- background: var(--next-menu-level1-bg);
|
|
|
- color: #2D6CE8 !important;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
+ .layout-columns-active {
|
|
|
+ color: var(--el-color-white);
|
|
|
+ transition: 0.3s ease-in-out;
|
|
|
+ background: var(--next-menu-level1-bg);
|
|
|
+ color: #2d6ce8 !important;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
|
|
|
- .layout-columns-hover:not(.layout-columns-active) {
|
|
|
- color: var(--el-color-primary);
|
|
|
+ .layout-columns-hover:not(.layout-columns-active) {
|
|
|
+ color: var(--el-color-primary);
|
|
|
|
|
|
- a {
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
+ a {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .columns-round {
|
|
|
- // background: var(--el-color-primary);
|
|
|
- // color: var(--el-color-white);
|
|
|
- // position: absolute;
|
|
|
- // left: 50%;
|
|
|
- // top: 2px;
|
|
|
- // height: 44px;
|
|
|
- // width: 65px;
|
|
|
- // transform: translateX(-50%);
|
|
|
- // z-index: 0;
|
|
|
- // transition: 0.3s ease-in-out;
|
|
|
- // border-radius: 5px;
|
|
|
- }
|
|
|
+ .columns-round {
|
|
|
+ // background: var(--el-color-primary);
|
|
|
+ // color: var(--el-color-white);
|
|
|
+ // position: absolute;
|
|
|
+ // left: 50%;
|
|
|
+ // top: 2px;
|
|
|
+ // height: 44px;
|
|
|
+ // width: 65px;
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ // z-index: 0;
|
|
|
+ // transition: 0.3s ease-in-out;
|
|
|
+ // border-radius: 5px;
|
|
|
+ }
|
|
|
|
|
|
- .columns-card {
|
|
|
- @extend .columns-round;
|
|
|
- top: 0;
|
|
|
- height: 50px;
|
|
|
- width: 100%;
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .columns-card {
|
|
|
+ @extend .columns-round;
|
|
|
+ top: 0;
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|