Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
26b6f857cd
  1. 1
      package.json
  2. 9
      pnpm-lock.yaml
  3. 318
      src/layout/components/tag/index.scss
  4. 455
      src/layout/components/tag/index.vue
  5. 3
      src/layout/theme/auroraGreen-vars.scss
  6. 27
      src/layout/theme/default-vars.scss
  7. 3
      src/layout/theme/dusk-vars.scss
  8. 2
      src/layout/theme/light-vars.scss
  9. 3
      src/layout/theme/mingQing-vars.scss
  10. 3
      src/layout/theme/pink-vars.scss
  11. 3
      src/layout/theme/saucePurple-vars.scss
  12. 3
      src/layout/theme/volcano-vars.scss
  13. 3
      src/layout/theme/yellow-vars.scss
  14. 6
      src/layout/types.ts
  15. 2
      src/plugins/fontawesome/index.ts
  16. 6
      src/style/element-plus.scss
  17. 4
      src/style/index.scss
  18. 28
      src/style/sidebar.scss
  19. 2
      src/style/transition.scss

1
package.json

@ -49,6 +49,7 @@
"path": "^0.12.7",
"path-to-regexp": "^6.2.0",
"pinia": "^2.0.0-rc.14",
"remixicon": "^2.5.0",
"resize-observer-polyfill": "^1.5.1",
"responsive-storage": "^1.0.11",
"typescript-cookie": "^1.0.0",

9
pnpm-lock.yaml

@ -49,6 +49,7 @@ specifiers:
postcss-import: 14.0.0
prettier: 2.3.2
pretty-quick: 3.1.1
remixicon: ^2.5.0
resize-observer-polyfill: ^1.5.1
responsive-storage: ^1.0.11
rimraf: 3.0.2
@ -93,6 +94,7 @@ dependencies:
path: 0.12.7
path-to-regexp: 6.2.0
pinia: 2.0.2_typescript@4.4.2+vue@3.2.21
remixicon: 2.5.0
resize-observer-polyfill: 1.5.1
responsive-storage: 1.0.11_vue@3.2.21
typescript-cookie: 1.0.0
@ -5221,6 +5223,13 @@ packages:
- supports-color
dev: true
/remixicon/2.5.0:
resolution:
{
integrity: sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
}
dev: false
/repeat-string/1.6.1:
resolution: { integrity: sha1-jcrkcOHIirwtYA//Sndihtp15jc= }
engines: { node: ">=0.10" }

318
src/layout/components/tag/index.scss

@ -0,0 +1,318 @@
@keyframes scheduleInWidth {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes scheduleOutWidth {
from {
width: 100%;
}
to {
width: 0;
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.tags-view {
width: 100%;
font-size: 14px;
display: flex;
align-items: center;
box-shadow: 0 0 1px #888;
color: var(--el-text-color-regular);
background: #fff;
.scroll-item {
border-radius: 3px 3px 0 0;
padding: 2px 6px;
display: inline-block;
position: relative;
margin-right: 4px;
height: 28px;
line-height: 25px;
transition: all 0.4s;
.el-icon-close {
font-size: 10px;
color: #1890ff;
cursor: pointer;
&:hover {
border-radius: 50%;
color: #fff;
background: #b4bccc;
font-size: 14px;
}
}
&.is-closable:not(:first-child) {
&:hover {
padding-right: 8px;
}
}
}
a {
text-decoration: none;
color: #666;
padding: 0 4px 0 4px;
}
.scroll-container {
flex: 1;
overflow: hidden;
padding: 5px 0;
white-space: nowrap;
position: relative;
.tab {
position: relative;
float: left;
list-style: none;
overflow: visible;
white-space: nowrap;
transition: transform 0.5s ease-in-out;
.scroll-item {
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:nth-child(1) {
margin-left: 5px;
}
}
}
}
.right-button {
display: flex;
font-size: 16px;
li {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 38px;
border-right: 1px solid #ccc;
cursor: pointer;
}
}
/* 右键菜单 */
.contextmenu {
margin: 0;
background: #fff;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
color: #000000d9;
font-weight: normal;
font-size: 13px;
white-space: nowrap;
outline: 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
li {
width: 100%;
margin: 0;
padding: 7px 12px;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
background: #eee;
}
svg {
display: block;
margin-right: 0.5em;
}
}
}
}
.el-dropdown-menu {
padding: 0;
li {
width: 100%;
margin: 0;
padding: 0 12px;
cursor: pointer;
display: flex;
align-items: center;
svg {
display: block;
margin-right: 0.5em;
}
}
}
.el-dropdown-menu__item:not(.is-disabled):hover {
color: #606266;
background: #f0f0f0;
}
:deep(.el-dropdown-menu__item) i {
margin-right: 10px;
}
.el-dropdown-menu__item--divided::before {
margin: 0;
}
.el-dropdown-menu__item.is-disabled {
cursor: not-allowed;
}
.is-active {
background-color: #eaf4fe;
position: relative;
color: #fff;
a {
color: #1890ff;
}
}
.ri-arrow-left-s-line {
width: 40px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 20px;
color: #00000073;
box-shadow: 5px 0 5px -6px #ccc;
&:hover {
cursor: w-resize;
}
}
.ri-arrow-right-s-line {
width: 40px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 20px;
border-right: 1px solid #ccc;
color: #00000073;
box-shadow: -5px 0 5px -6px #ccc;
&:hover {
cursor: e-resize;
}
}
/* 卡片模式 */
.card-active {
border: 1px solid #1890ff;
}
/* 卡片模式下鼠标移入显示蓝色边框 */
.card-in {
border: 1px solid #1890ff;
color: #1890ff;
a {
color: #1890ff;
}
}
/* 卡片模式下鼠标移出隐藏蓝色边框 */
.card-out {
border: none;
color: #666;
a {
color: #666;
}
}
/* 灵动模式 */
.schedule-active {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
}
/* 灵动模式下鼠标移入显示蓝色进度条 */
.schedule-in {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
animation: scheduleInWidth 400ms ease-in;
}
/* 灵动模式下鼠标移出隐藏蓝色进度条 */
.schedule-out {
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
animation: scheduleOutWidth 400ms ease-in;
}
/* 刷新按钮动画效果 */
.refresh-button {
-webkit-animation: rotate 600ms linear infinite;
-moz-animation: rotate 600ms linear infinite;
-o-animation: rotate 600ms linear infinite;
animation: rotate 600ms linear infinite;
}

455
src/layout/components/tag/index.vue

@ -24,15 +24,6 @@ import {
getCurrentInstance,
ComputedRef
} from "vue";
import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
import { emitter } from "/@/utils/mitt";
import { templateRef } from "@vueuse/core";
import { handleAliveRoute, delAliveRoutes } from "/@/router";
import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { transformI18n } from "/@/utils/i18n";
import close from "/@/assets/svg/close.svg";
import refresh from "/@/assets/svg/refresh.svg";
@ -41,16 +32,108 @@ import closeLeft from "/@/assets/svg/close_left.svg";
import closeOther from "/@/assets/svg/close_other.svg";
import closeRight from "/@/assets/svg/close_right.svg";
let refreshButton = "refresh-button";
const instance = getCurrentInstance();
import { emitter } from "/@/utils/mitt";
import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
import { transformI18n } from "/@/utils/i18n";
import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router";
import { handleAliveRoute, delAliveRoutes } from "/@/router";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
// storage
let relativeStorage: relativeStorageType;
const route = useRoute();
const router = useRouter();
const translateX = ref<number>(0);
const activeIndex = ref<number>(-1);
let refreshButton = "refresh-button";
const instance = getCurrentInstance();
let relativeStorage: relativeStorageType;
const showTags = ref(storageLocal.getItem("tagsVal") || false);
const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null);
const activeIndex = ref(-1);
const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
const dynamicTagView = () => {
const index = dynamicTagList.value.findIndex(item => {
return item.path === route.path;
});
moveToView(index);
};
watch([route], () => {
dynamicTagView();
});
useResizeObserver(
scrollbarDom,
useDebounceFn(() => {
dynamicTagView();
}, 200)
);
const tabNavPadding = 10;
const moveToView = (index: number): void => {
if (!instance.refs["dynamic" + index]) {
return;
}
const tabItemEl = instance.refs["dynamic" + index];
const tabItemElOffsetLeft = (tabItemEl as HTMLElement).offsetLeft;
const tabItemOffsetWidth = (tabItemEl as HTMLElement).offsetWidth;
//
const scrollbarDomWidth = scrollbarDom.value
? scrollbarDom.value.offsetWidth
: 0;
//
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
translateX.value = 0;
} else if (tabItemElOffsetLeft < -translateX.value) {
//
translateX.value = -tabItemElOffsetLeft + tabNavPadding;
} else if (
tabItemElOffsetLeft > -translateX.value &&
tabItemElOffsetLeft + tabItemOffsetWidth <
-translateX.value + scrollbarDomWidth
) {
//
translateX.value = Math.min(
0,
scrollbarDomWidth -
tabItemOffsetWidth -
tabItemElOffsetLeft -
tabNavPadding
);
} else {
//
translateX.value = -(
tabItemElOffsetLeft -
(scrollbarDomWidth - tabNavPadding - tabItemOffsetWidth)
);
}
};
const handleScroll = (offset: number): void => {
const scrollbarDomWidth = scrollbarDom.value
? scrollbarDom.value?.offsetWidth
: 0;
const tabDomWidth = tabDom.value ? tabDom.value.offsetWidth : 0;
if (offset > 0) {
translateX.value = Math.min(0, translateX.value + offset);
} else {
if (scrollbarDomWidth < tabDomWidth) {
if (translateX.value >= -(tabDomWidth - scrollbarDomWidth)) {
translateX.value = Math.max(
translateX.value + offset,
scrollbarDomWidth - tabDomWidth
);
}
} else {
translateX.value = 0;
}
}
};
const tagsViews = ref<Array<tagsViewsType>>([
{
@ -469,40 +552,50 @@ onBeforeMount(() => {
<template>
<div ref="containerDom" class="tags-view" v-if="!showTags">
<el-scrollbar wrap-class="scrollbar-wrapper" class="scroll-container">
<i class="ri-arrow-left-s-line" @click="handleScroll(200)"></i>
<div ref="scrollbarDom" class="scroll-container">
<div
v-for="(item, index) in dynamicTagList"
:key="index"
:ref="'dynamic' + index"
:class="[
'scroll-item is-closable',
$route.path === item.path ? 'is-active' : '',
$route.path === item.path && showModel === 'card' ? 'card-active' : ''
]"
@contextmenu.prevent="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(item, index)"
@mouseleave.prevent="onMouseleave(item, index)"
class="tab"
ref="tabDom"
:style="{ transform: `translateX(${translateX}px)` }"
>
<router-link :to="item.path" @click="tagOnClick(item)">{{
transformI18n(item.meta.title, item.meta.i18n)
}}</router-link>
<el-icon
v-if="
($route.path === item.path && index !== 0) ||
(index === activeIndex && index !== 0)
"
class="el-icon-close"
@click="deleteMenu(item)"
>
<CloseBold />
</el-icon>
<div
:ref="'schedule' + index"
v-if="showModel !== 'card'"
:class="[$route.path === item.path ? 'schedule-active' : '']"
></div>
:ref="'dynamic' + index"
v-for="(item, index) in dynamicTagList"
:key="index"
:class="[
'scroll-item is-closable',
$route.path === item.path ? 'is-active' : '',
$route.path === item.path && showModel === 'card'
? 'card-active'
: ''
]"
@contextmenu.prevent="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(item, index)"
@mouseleave.prevent="onMouseleave(item, index)"
>
<router-link :to="item.path" @click="tagOnClick(item)">{{
transformI18n(item.meta.title, item.meta.i18n)
}}</router-link>
<el-icon
v-if="
($route.path === item.path && index !== 0) ||
(index === activeIndex && index !== 0)
"
class="el-icon-close"
@click="deleteMenu(item)"
>
<CloseBold />
</el-icon>
<div
:ref="'schedule' + index"
v-if="showModel !== 'card'"
:class="[$route.path === item.path ? 'schedule-active' : '']"
></div>
</div>
</div>
</el-scrollbar>
</div>
<i class="ri-arrow-right-s-line" @click="handleScroll(-200)"></i>
<!-- 右键菜单按钮 -->
<transition name="el-zoom-in-top">
<ul
@ -563,277 +656,5 @@ onBeforeMount(() => {
</template>
<style lang="scss" scoped>
@keyframes scheduleInWidth {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes scheduleOutWidth {
from {
width: 100%;
}
to {
width: 0;
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.tags-view {
width: 100%;
font-size: 14px;
display: flex;
box-shadow: 0 0 1px #888;
.scroll-item {
border-radius: 3px 3px 0 0;
padding: 2px 6px;
display: inline-block;
position: relative;
margin-right: 4px;
height: 28px;
line-height: 25px;
transition: all 0.4s;
.el-icon-close {
font-size: 10px;
color: #1890ff;
cursor: pointer;
transform: fontsize3s;
&:hover {
border-radius: 50%;
color: #fff;
background: #b4bccc;
font-size: 14px;
}
}
&.is-closable:not(:first-child) {
&:hover {
padding-right: 8px;
}
}
}
a {
text-decoration: none;
color: #666;
padding: 0 4px 0 4px;
}
.scroll-container {
padding: 5px 0;
white-space: nowrap;
position: relative;
width: 100%;
background: #fff;
.scroll-item {
&:nth-child(1) {
margin-left: 5px;
}
}
.scrollbar-wrapper {
position: absolute;
height: 40px;
overflow-x: hidden !important;
}
}
//
.contextmenu {
margin: 0;
background: #fff;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
color: #000000d9;
font-weight: normal;
font-size: 13px;
white-space: nowrap;
outline: 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
li {
width: 100%;
margin: 0;
padding: 7px 12px;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
background: #eee;
}
svg {
display: block;
margin-right: 0.5em;
}
}
}
}
.right-button {
display: flex;
align-items: center;
background: #fff;
font-size: 16px;
li {
width: 40px;
height: 38px;
line-height: 38px;
text-align: center;
border-right: 1px solid #ccc;
cursor: pointer;
}
}
.el-dropdown-menu {
padding: 0;
li {
width: 100%;
margin: 0;
padding: 0 12px;
cursor: pointer;
display: flex;
align-items: center;
svg {
display: block;
margin-right: 0.5em;
}
}
}
.el-dropdown-menu__item:not(.is-disabled):hover {
color: #606266;
background: #f0f0f0;
}
:deep(.el-dropdown-menu__item) i {
margin-right: 10px;
}
.el-dropdown-menu__item--divided::before {
margin: 0;
}
.el-dropdown-menu__item.is-disabled {
cursor: not-allowed;
}
.is-active {
background-color: #eaf4fe;
position: relative;
color: #fff;
a {
color: #1890ff;
}
}
//
.card-active {
border: 1px solid #1890ff;
}
//
.card-in {
border: 1px solid #1890ff;
color: #1890ff;
a {
color: #1890ff;
}
}
//
.card-out {
border: none;
color: #666;
a {
color: #666;
}
}
//
.schedule-active {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
}
//
.schedule-in {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
animation: scheduleInWidth 400ms ease-in;
}
//
.schedule-out {
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background: #1890ff;
animation: scheduleOutWidth 400ms ease-in;
}
//
.refresh-button {
-webkit-animation: rotate 600ms linear infinite;
-moz-animation: rotate 600ms linear infinite;
-o-animation: rotate 600ms linear infinite;
animation: rotate 600ms linear infinite;
}
@import "./index.scss";
</style>

3
src/layout/theme/auroraGreen-vars.scss

@ -1,5 +1,4 @@
// 极光绿
/* 极光绿 */
$subMenuActiveText: #fff;
$menuBg: #0b1e15;
$menuHover: #60ac80;

27
src/layout/theme/default-vars.scss

@ -1,24 +1,29 @@
/**
*此scss变量文件作为multipleScopeVars去编译时会自动移除!default以达到变量提升
*同时此scss变量文件作为默认主题变量文件被其他.scss通过 @import 必需 !default
* 暗雅默认
* 此scss变量文件作为multipleScopeVars去编译时会自动移除!default以达到变量提升
* 同时此scss变量文件作为默认主题变量文件被其他.scss通过 @import 必需 !default
*/
// 暗雅默认
// 菜单选中后字体样式
/* 菜单选中后字体样式 */
$subMenuActiveText: #fff !default;
//菜单背景
/* 菜单背景 */
$menuBg: #001529 !default;
// 鼠标覆盖到菜单时的背景
/* 鼠标覆盖到菜单时的背景 */
$menuHover: #4091f7 !default;
// 子菜单背景
/* 子菜单背景 */
$subMenuBg: #0f0303 !default;
// 有无子集的激活菜单背景
/* 有无子集的激活菜单背景 */
$subMenuActiveBg: #4091f7 !default;
$navTextColor: #fff !default;
$menuText: rgba(254, 254, 254, 0.65) !default;
// logo背景颜色
/* logo背景颜色 */
$sidebarLogo: #002140 !default;
// 鼠标覆盖到菜单时的字体颜色
/* 鼠标覆盖到菜单时的字体颜色 */
$menuTitleHover: #fff !default;
$menuActiveBefore: #4091f7 !default;

3
src/layout/theme/dusk-vars.scss

@ -1,5 +1,4 @@
// 薄暮
/* 薄暮 */
$subMenuActiveText: #fff;
$menuBg: #2a0608;
$menuHover: #e13c39;

2
src/layout/theme/light-vars.scss

@ -1,4 +1,4 @@
// 明亮
/* 明亮 */
$subMenuActiveText: #409eff;
$menuBg: #fff;
$menuHover: #e0ebf6;

3
src/layout/theme/mingQing-vars.scss

@ -1,5 +1,4 @@
// 明青
/* 明青 */
$subMenuActiveText: #fff;
$menuBg: #032121;
$menuHover: #59bfc1;

3
src/layout/theme/pink-vars.scss

@ -1,5 +1,4 @@
// 粉红
/* 粉红 */
$subMenuActiveText: #fff;
$menuBg: #28081a;
$menuHover: #d84493;

3
src/layout/theme/saucePurple-vars.scss

@ -1,5 +1,4 @@
// 酱紫
/* 酱紫 */
$subMenuActiveText: #fff;
$menuBg: #130824;
$menuHover: #693ac9;

3
src/layout/theme/volcano-vars.scss

@ -1,5 +1,4 @@
// 火山
/* 火山 */
$subMenuActiveText: #fff;
$menuBg: #2b0e05;
$menuHover: #e85f33;

3
src/layout/theme/yellow-vars.scss

@ -1,5 +1,4 @@
// 黄色
/* 橘黄 */
$subMenuActiveText: #d25f00;
$menuBg: #2b2503;
$menuHover: #f6da4d;

6
src/layout/types.ts

@ -73,3 +73,9 @@ export type themeColorsType = {
rgb: string;
themeColor: string;
};
export interface scrollbarDomType extends HTMLElement {
wrap?: {
offsetWidth: number;
};
}

2
src/plugins/fontawesome/index.ts

@ -8,6 +8,8 @@ import "font-awesome/css/font-awesome.css";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
import "remixicon/fonts/remixicon.css";
export function useFontawesome(app: App) {
library.add(faUserSecret);

6
src/style/element-plus.scss

@ -1,5 +1,3 @@
// cover some element-plus styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
@ -15,7 +13,6 @@
display: none;
}
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
@ -27,17 +24,14 @@
}
}
// dropdown
.el-dropdown-menu {
padding: 2px 0 2px 0 !important;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}
// el-tooltip的权重
.is-dark {
z-index: 99999 !important;
}

4
src/style/index.scss

@ -70,7 +70,7 @@ ul {
display: none !important;
}
// 灰色模式
/* 灰色模式 */
.html-grey {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
@ -79,7 +79,7 @@ ul {
-o-filter: grayscale(100%);
}
// 色弱模式
/* 色弱模式 */
.html-weakness {
filter: invert(80%);
-webkit-filter: invert(80%);

28
src/style/sidebar.scss

@ -1,8 +1,7 @@
@import "../layout/theme/default-vars.scss";
@mixin merge-style(
// vertical模式下主体内容距离网页文档左侧的距离
$sideBarWidth
/* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
) {
$menuActiveText: #7a80b4;
@ -126,7 +125,6 @@
}
}
// menu hover
.submenu-title-noDropdown,
.el-sub-menu__title {
&:hover {
@ -155,12 +153,12 @@
background-color: $subMenuBg !important;
}
// 无子集的激活菜单背景
/* 无子集的激活菜单背景 */
.is-active.submenu-title-noDropdown.outer-most {
background: $subMenuActiveBg;
}
// 有子集的激活菜单背景
/* 有子集的激活菜单背景 */
.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
@ -319,7 +317,7 @@
}
}
// vertical菜单折叠
/* vertical菜单折叠 */
.el-menu--vertical {
.el-menu--popup {
background-color: $subMenuBg !important;
@ -355,7 +353,7 @@
}
}
// 子菜单中还有子菜单
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
@ -396,7 +394,7 @@
}
}
// horizontal菜单
/* horizontal菜单 */
.el-menu--horizontal {
& > .el-sub-menu .el-sub-menu__icon-arrow {
position: static !important;
@ -425,13 +423,13 @@
}
}
// 无子菜单时激活border-bottom
/* 无子菜单时激活border-bottom */
.router-link-exact-active > .submenu-title-noDropdown {
height: 60px;
border-bottom: 2px solid var(--el-menu-active-color);
}
// 子菜单中还有子菜单
/* 子菜单中还有子菜单 */
.el-menu .el-sub-menu__title {
font-size: 12px;
min-width: $sideBarWidth !important;
@ -464,7 +462,7 @@
}
}
// 有子集的激活菜单背景
/* 有子集的激活菜单背景 */
.is-active.nest-menu {
background: $subMenuActiveBg !important;
}
@ -484,7 +482,7 @@
min-width: $sideBarWidth !important;
}
// 有子菜单
/* 有子菜单 */
.el-menu--collapse
.is-active.outer-most.el-sub-menu
> .el-sub-menu__title::before {
@ -502,7 +500,7 @@
transform: translateY(0);
}
// 无子菜单
/* 无子菜单 */
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
top: 0;
@ -530,7 +528,7 @@
top: 50%;
}
// 手机端
/* 手机端 */
.mobile {
.fixed-header {
width: 100% !important;
@ -604,7 +602,7 @@ body[layout="vertical"] {
}
}
// 菜单折叠
/* 菜单折叠 */
.el-menu--collapse {
margin-left: -5px;

2
src/style/transition.scss

@ -1,5 +1,3 @@
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {

Loading…
Cancel
Save