mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-04 07:27:41 +08:00
refactor: tag
This commit is contained in:
xiaoxian521
parent
067ed96de4
commit
0b79b65575
1
src/assets/svg/arrow-left.svg
Normal file
1
src/assets/svg/arrow-left.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="icon-left"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
|
||||
|
After Width: | Height: | Size: 218 B |
1
src/assets/svg/arrow-right.svg
Normal file
1
src/assets/svg/arrow-right.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="icon-right" ><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
303
src/layout/components/tag/index.scss
Normal file
303
src/layout/components/tag/index.scss
Normal file
@ -0,0 +1,303 @@
|
||||
@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;
|
||||
|
||||
.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 {
|
||||
&:nth-child(1) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.right-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
||||
li {
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
&:hover {
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
&: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;
|
||||
}
|
||||
@ -24,33 +24,63 @@ 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";
|
||||
import closeAll from "/@/assets/svg/close_all.svg";
|
||||
import closeLeft from "/@/assets/svg/close_left.svg";
|
||||
import arrowLeft from "/@/assets/svg/arrow-left.svg";
|
||||
import arrowRight from "/@/assets/svg/arrow-right.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 } 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,
|
||||
scrollbarDomType
|
||||
} 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<scrollbarDomType>("scrollbarDom", null);
|
||||
|
||||
const handleScroll = (offset: number): void => {
|
||||
const scrollbarDomWidth = scrollbarDom.value?.wrap
|
||||
? scrollbarDom.value?.wrap.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 +499,55 @@ onBeforeMount(() => {
|
||||
|
||||
<template>
|
||||
<div ref="containerDom" class="tags-view" v-if="!showTags">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" class="scroll-container">
|
||||
<arrowLeft @click="handleScroll(200)" />
|
||||
<el-scrollbar
|
||||
tag="span"
|
||||
ref="scrollbarDom"
|
||||
wrap-class="scrollbar-wrapper"
|
||||
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>
|
||||
<arrowRight @click="handleScroll(-200)" />
|
||||
<!-- 右键菜单按钮 -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul
|
||||
@ -563,277 +608,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>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 极光绿
|
||||
|
||||
/* 极光绿 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #0b1e15;
|
||||
$menuHover: #60ac80;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 薄暮
|
||||
|
||||
/* 薄暮 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #2a0608;
|
||||
$menuHover: #e13c39;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// 明亮
|
||||
/* 明亮 */
|
||||
$subMenuActiveText: #409eff;
|
||||
$menuBg: #fff;
|
||||
$menuHover: #e0ebf6;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 明青
|
||||
|
||||
/* 明青 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #032121;
|
||||
$menuHover: #59bfc1;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 粉红
|
||||
|
||||
/* 粉红 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #28081a;
|
||||
$menuHover: #d84493;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 酱紫
|
||||
|
||||
/* 酱紫 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #130824;
|
||||
$menuHover: #693ac9;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 火山
|
||||
|
||||
/* 火山 */
|
||||
$subMenuActiveText: #fff;
|
||||
$menuBg: #2b0e05;
|
||||
$menuHover: #e85f33;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
// 黄色
|
||||
|
||||
/* 橘黄 */
|
||||
$subMenuActiveText: #d25f00;
|
||||
$menuBg: #2b2503;
|
||||
$menuHover: #f6da4d;
|
||||
|
||||
@ -73,3 +73,9 @@ export type themeColorsType = {
|
||||
rgb: string;
|
||||
themeColor: string;
|
||||
};
|
||||
|
||||
export interface scrollbarDomType extends HTMLElement {
|
||||
wrap?: {
|
||||
offsetWidth: number;
|
||||
};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%);
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
// global transition css
|
||||
|
||||
/* fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
|
||||
@ -60,47 +60,38 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
|
||||
scss: {
|
||||
multipleScopeVars: [
|
||||
{
|
||||
// 暗雅（默认）
|
||||
scopeName: "layout-theme-default",
|
||||
path: pathResolve("src/layout/theme/default-vars.scss")
|
||||
},
|
||||
{
|
||||
// 明亮
|
||||
scopeName: "layout-theme-light",
|
||||
path: pathResolve("src/layout/theme/light-vars.scss")
|
||||
},
|
||||
{
|
||||
// 薄暮
|
||||
scopeName: "layout-theme-dusk",
|
||||
path: pathResolve("src/layout/theme/dusk-vars.scss")
|
||||
},
|
||||
{
|
||||
// 火山
|
||||
scopeName: "layout-theme-volcano",
|
||||
path: pathResolve("src/layout/theme/volcano-vars.scss")
|
||||
},
|
||||
{
|
||||
// 黄色
|
||||
scopeName: "layout-theme-yellow",
|
||||
path: pathResolve("src/layout/theme/yellow-vars.scss")
|
||||
},
|
||||
{
|
||||
// 明青
|
||||
scopeName: "layout-theme-mingQing",
|
||||
path: pathResolve("src/layout/theme/mingQing-vars.scss")
|
||||
},
|
||||
{
|
||||
// 极光绿
|
||||
scopeName: "layout-theme-auroraGreen",
|
||||
path: pathResolve("src/layout/theme/auroraGreen-vars.scss")
|
||||
},
|
||||
{
|
||||
// 粉红
|
||||
scopeName: "layout-theme-pink",
|
||||
path: pathResolve("src/layout/theme/pink-vars.scss")
|
||||
},
|
||||
{
|
||||
// 酱紫
|
||||
scopeName: "layout-theme-saucePurple",
|
||||
path: pathResolve("src/layout/theme/saucePurple-vars.scss")
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user