YD/YD_SmartSports.Web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update：框架修改

Browse Source
This commit is contained in:
ltx 2026-04-20 17:59:12 +08:00
parent a8ef982e9e
commit 6fefd81e4a
5 changed files with 461 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/http.js
View File

@ -14,8 +14,8 @@ let loadingStatus = false;
console.log(process.env.NODE_ENV, 'process.env.NODE_ENV') console.log(process.env.NODE_ENV, 'process.env.NODE_ENV')
if (process.env.NODE_ENV == 'development') { if (process.env.NODE_ENV == 'development') {
// axios.defaults.baseURL = 'http://101.132.164.149:9991/'; // axios.defaults.baseURL = 'http://101.132.164.149:9991/';
// axios.defaults.baseURL = 'http://8.153.108.90:9991/'; //测试 axios.defaults.baseURL = 'http://8.153.108.90:9991/'; //测试
axios.defaults.baseURL = 'https://smartsports.yuedongsports.com/'; //正式 // axios.defaults.baseURL = 'https://smartsports.yuedongsports.com/'; //正式
// axios.defaults.baseURL = 'http://192.168.0.146:9991/'; //汤龙本地 // axios.defaults.baseURL = 'http://192.168.0.146:9991/'; //汤龙本地
// axios.defaults.baseURL = 'http://47.101.60.251:9991/'; // axios.defaults.baseURL = 'http://47.101.60.251:9991/';
// axios.defaults.baseURL = 'http://localhost:9991/'; // axios.defaults.baseURL = 'http://localhost:9991/';

14
src/components/basic/VolElementMenu.vue
View File

@ -87,18 +87,18 @@ export default defineComponent({
} }
}); });
}; };
let rootTreeId = !isNaN(props.rootId) ? ~~props.rootId : props.rootId; let rootTreeId = ref(!isNaN(props.rootId) ? ~~props.rootId : props.rootId);
props.list.forEach((x) => { props.list.forEach((x) => {
if (!x.icon || x.icon.substring(0, 3) != 'el-') { if (!x.icon || x.icon.substring(0, 3) != 'el-') {
x.icon = 'el-icon-menu'; x.icon = 'el-icon-menu';
} }
x.children = []; x.children = [];
x.isRoot = x.parentId === rootTreeId; x.isRoot = x.parentId === rootTreeId.value;
}); });
const convertTree = (data) => { const convertTree = (data) => {
var root_data = []; var root_data = [];
data.forEach((x) => { data.forEach((x) => {
if (x.parentId === rootTreeId) { if (x.parentId === rootTreeId.value) {
if (!x.hasOwnProperty('enable')) x.enable = 1; if (!x.hasOwnProperty('enable')) x.enable = 1;
root_data.push(x); root_data.push(x);
getTree(x.id, x, data); getTree(x.id, x, data);
@ -106,6 +106,14 @@ export default defineComponent({
}); });
return root_data; return root_data;
}; };
// 监听 rootId 变化，重新生成树
watch(() => props.rootId, (newVal) => {
rootTreeId.value = !isNaN(newVal) ? ~~newVal : newVal;
props.list.forEach((x) => {
x.children = [];
x.isRoot = x.parentId === rootTreeId.value;
});
});
// const openedIds = reactive([props.currentMenuId]); // const openedIds = reactive([props.currentMenuId]);
// let openedIds = ref(['2', '2145', '2156', '2146', '2159']); // let openedIds = ref(['2', '2145', '2156', '2146', '2159']);
let openedIds = ref([]); let openedIds = ref([]);

6
src/components/scaleBox/index.vue
View File

@ -37,8 +37,10 @@ const getScale = () => {
// 根据缩放比例调整容器的大小，确保不超出窗口的尺寸 // 根据缩放比例调整容器的大小，确保不超出窗口的尺寸
const container = ContainerBox.value; const container = ContainerBox.value;
container.style.width = `${Math.min(width.value * scale.value, maxWidth.value)}px`; if(container) {
container.style.height = `${Math.min(height.value * scale.value, maxHeight.value)}px`; container.style.width = `${Math.min(width.value * scale.value, maxWidth.value)}px`;
container.style.height = `${Math.min(height.value * scale.value, maxHeight.value)}px`;
}
}; };
const debounce = (fn: Function, delay: number = 500) => { const debounce = (fn: Function, delay: number = 500) => {
const delays = delay || 500; const delays = delay || 500;

186
src/views/index.vue
View File

@ -1,52 +1,53 @@
<template> <template>
<div id="vol-container" :class="['vol-theme-' + theme]"> <div id="vol-container" :class="['vol-theme-' + theme]">
<div class="vol-aside" :style="{ width: menuWidth + 'px' }"> <!-- 顶部一级导航栏 -->
<div class="header" :style="{ width: menuWidth - 1 + 'px' }"> <div class="vol-top-header">
<img v-show="!isCollapse" v-bind:src="logo" /> <div class="top-logo">
<p v-show="!isCollapse">智慧系统</p> <img v-bind:src="logo" />
<!-- <i @click="toggleLeft" class="el-icon-s-fold collapse-menu" /> --> <span>跃动智慧体育平台</span>
<i class="el-icon-s-fold collapse-menu" @click="toggleLeft" v-show="!isCollapse"></i>
<i class="el-icon-s-unfold collapse-menu" @click="toggleLeft" v-show="isCollapse"></i>
</div> </div>
<div class="top-nav-menus" ref="topNavMenusRef">
<span
v-for="item in topLevelMenus"
:key="item.id"
:class="['top-nav-item', { 'is-active': activeTopMenuId == item.id }]"
@click="selectTopMenu(item)"
>{{ item.name }}</span>
</div>
<div class="header-info">
<div class="h-link">
<a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => { return c.icon; })" :key="index">
<span v-if="!item.icon"> {{ item.text }}</span>
<i v-else :class="item.icon"></i>
</a>
</div>
<div>
<img class="user-header" :src="userImg" :onerror="errorImg" />
</div>
<div class="user">
<span>{{ userName }}</span>
<br />
<span id="index-date"></span>
</div>
</div>
</div>
<!-- 侧边二级导航栏 -->
<div v-show="activeTopMenuHasChildren" class="vol-aside" :style="{ width: menuWidth + 'px' }">
<div class="vol-menu"> <div class="vol-menu">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false" <VolMenu
:isCollapse="isCollapse" :list="menuOptions"></VolMenu> :rootId="activeTopMenuId + ''"
:currentMenuId="currentMenuId"
:on-select="onSelect"
:enable="true"
:open-select="false"
:isCollapse="isCollapse"
:list="menuOptions"
></VolMenu>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
<div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }"> <div class="vol-container" :style="{ left: activeTopMenuHasChildren ? (menuWidth - 1) + 'px' : '0px' }">
<div class="vol-header">
<!-- <div class="project-name">智慧系统</div> -->
<div class="header-text">
<div class="h-link">
<a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
return !c.icon;
})" :key="index">
<span v-if="!item.icon"> {{ item.text }}</span>
<i v-else :class="item.icon"></i>
</a>
</div>
</div>
<div class="header-info">
<div class="h-link">
<a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
return c.icon;
})" :key="index">
<span v-if="!item.icon"> {{ item.text }}</span>
<i v-else :class="item.icon"></i>
</a>
</div>
<div>
<img class="user-header" :src="userImg" :onerror="errorImg" />
</div>
<div class="user">
<span>{{ userName }}</span>
<br />
<span id="index-date"></span>
</div>
</div>
</div>
<div class="vol-path"> <div class="vol-path">
<el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)" <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)"
type="border-card" class="header-navigation" v-model="selectId" :strtch="false"> type="border-card" class="header-navigation" v-model="selectId" :strtch="false">
@ -86,9 +87,9 @@
<router-view v-if="!$route.meta || <router-view v-if="!$route.meta ||
($route.meta && !$route.meta.hasOwnProperty('keepAlive')) ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
" v-slot="{ Component }"> " v-slot="{ Component }">
<keep-alive> <transition name="page-fade" mode="out-in">
<component :is="Component" /> <component :is="Component" :key="$route.path" />
</keep-alive> </transition>
</router-view> </router-view>
<router-view v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"></router-view> <router-view v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"></router-view>
</el-scrollbar> </el-scrollbar>
@ -113,6 +114,30 @@
<style lang="less" scoped> <style lang="less" scoped>
@import "./index/index.less"; @import "./index/index.less";
</style> </style>
<!-- 页面切换动画：必须非 scoped，否则无法作用于子路由组件根元素 -->
<style lang="less">
/* ====== 页面切换动画 ====== */
.page-fade-enter-active {
transition: opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: opacity, transform;
}
.page-fade-leave-active {
transition: opacity 0.15s cubic-bezier(0.55, 0, 0.55, 0.2),
transform 0.15s cubic-bezier(0.55, 0, 0.55, 0.2);
will-change: opacity, transform;
}
.page-fade-enter-from {
opacity: 0;
transform: translateY(12px);
}
.page-fade-leave-to {
opacity: 0;
transform: translateY(-6px);
}
/* ====== 页面切换动画 END ====== */
</style>
<script> <script>
import loading from "@/components/basic/RouterLoading.vue"; import loading from "@/components/basic/RouterLoading.vue";
import VolMenu from "@/components/basic/VolElementMenu.vue"; import VolMenu from "@/components/basic/VolElementMenu.vue";
@ -131,6 +156,7 @@ import {
reactive, reactive,
ref, ref,
watch, watch,
computed,
onMounted, onMounted,
getCurrentInstance, getCurrentInstance,
} from "vue"; } from "vue";
@ -161,6 +187,7 @@ export default defineComponent({
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
// 菜单导航默认宽度 // 菜单导航默认宽度
const menuWidth = ref(200); const menuWidth = ref(200);
const topNavMenusRef = ref(null);
const contextMenuVisible = ref(false); const contextMenuVisible = ref(false);
const isCollapse = ref(false); const isCollapse = ref(false);
const drawer_model = ref(false); const drawer_model = ref(false);
@ -211,6 +238,24 @@ export default defineComponent({
const logo = ref(imgUrl); const logo = ref(imgUrl);
const theme = ref("blue2"); const theme = ref("blue2");
const menuOptions = ref([]); const menuOptions = ref([]);
const activeTopMenuId = ref(0);
const topLevelMenus = computed(() => {
return menuOptions.value.filter(item => item.parentId == 0);
});
const activeTopMenuHasChildren = computed(() => {
return menuOptions.value.some(item => item.parentId == activeTopMenuId.value);
});
const findTopLevelParent = (itemId) => {
const flatList = menuOptions.value;
let current = flatList.find(x => x.id == itemId);
while (current && current.parentId != 0 && current.parentId !== undefined && current.parentId !== null) {
current = flatList.find(x => x.id == current.parentId);
}
return current ? current.id : null;
};
const selectTopMenu = (item) => {
activeTopMenuId.value = item.id;
};
const routerList = ref(JSON.parse(localStorage.getItem("routerList"))) const routerList = ref(JSON.parse(localStorage.getItem("routerList")))
const permissionInited = ref(false); const permissionInited = ref(false);
const messageList = reactive([]); const messageList = reactive([]);
@ -557,6 +602,8 @@ export default defineComponent({
/* 2020.07.31增加手动打开tabs*/ /* 2020.07.31增加手动打开tabs*/
var item = getSelectMenuName(treeId); var item = getSelectMenuName(treeId);
open(item, false); open(item, false);
const topId = findTopLevelParent(treeId);
if (topId !== null) activeTopMenuId.value = topId;
}; };
/** /**
@ -713,6 +760,11 @@ export default defineComponent({
}); });
store.dispatch("setPermission", data); store.dispatch("setPermission", data);
menuOptions.value = data; menuOptions.value = data;
// 初始化顶部导航选中项
const topItems = data.filter(x => x.parentId == 0);
if (topItems.length > 0) {
activeTopMenuId.value = topItems[0].id;
}
permissionInited.value = true; permissionInited.value = true;
//开启消息推送（main.js中设置是否开启signalR）2022.05.05 //开启消息推送（main.js中设置是否开启signalR）2022.05.05
@ -752,6 +804,11 @@ export default defineComponent({
return { return {
menuWidth, menuWidth,
isCollapse, isCollapse,
topNavMenusRef,
activeTopMenuId,
activeTopMenuHasChildren,
topLevelMenus,
selectTopMenu,
drawer_model, drawer_model,
theme_color, theme_color,
errorImg, errorImg,
@ -788,11 +845,19 @@ export default defineComponent({
*/ */
mounted() { mounted() {
let _date = showTime(); let _date = showTime();
$indexDate = document.getElementById("index-date"); // $indexDate = document.getElementById("index-date");
$indexDate.innerText = _date; // $indexDate.innerText = _date;
$interval = setInterval(function () { // $interval = setInterval(function () {
$indexDate.innerText = showTime(); // $indexDate.innerText = showTime();
}, 1000); // }, 1000);
// 顶部导航横向滚动
if (this.topNavMenusRef) {
this.topNavMenusRef.addEventListener('wheel', (e) => {
e.preventDefault();
this.topNavMenusRef.scrollLeft += e.deltaY || e.deltaX;
}, { passive: false });
}
this.bindRightClickMenu(true); this.bindRightClickMenu(true);
}, },
@ -870,33 +935,34 @@ function showTime() {
} }
.contextMenu { .contextMenu {
width: 120px; width: 130px;
margin: 0; margin: 0;
border: 1px solid #eaeaea; border: 1px solid #e8ecf2;
background: #fff; background: #fff;
z-index: 30000; z-index: 30000;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 4px;
border-radius: 4px; border-radius: 10px;
font-size: 14px; font-size: 13px;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
i, i,
button { button {
font-size: 14px !important; font-size: 13px !important;
} }
} }
.contextMenu li { .contextMenu li {
margin: 0; margin: 0;
padding: 0px 17px; padding: 2px 4px;
} }
.contextMenu li:hover { .contextMenu li:hover {
background: #fafafa; background: #f0f7ff;
cursor: pointer; cursor: pointer;
border-radius: 6px;
} }
.contextMenu li button { .contextMenu li button {
@ -907,11 +973,11 @@ function showTime() {
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child, .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) { .el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
padding: 0; padding: 0 12px !important;
} }
.header-navigation ::v-deep(.el-tabs__item.is-top) { .header-navigation ::v-deep(.el-tabs__item.is-top) {
padding: 0 15px; padding: 0 12px !important;
} }
</style> </style>
<style> <style>

353
src/views/index/index.less
View File

@ -1,12 +1,202 @@
.vol-aside { .vol-aside {
height: 100%;
position: absolute; position: absolute;
float: left; float: left;
overflow: hidden; overflow: hidden;
top: 54px;
bottom: 0;
} }
.vol-menu{ .vol-menu{
border: 0 !important; border: 0 !important;
} }
// ====== 顶部一级导航栏 ======
.vol-top-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 54px;
display: flex;
align-items: center;
z-index: 200;
background-color: #2d8cf0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.top-logo {
display: flex;
align-items: center;
padding: 0 20px;
min-width: 215px;
height: 100%;
flex-shrink: 0;
border-right: 1px solid rgba(255, 255, 255, 0.2);
img {
height: 30px;
margin-right: 10px;
}
span {
color: #fff;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
letter-spacing: 1px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
}
.top-nav-menus {
flex: 1;
display: flex;
align-items: center;
height: 100%;
padding: 0 16px;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
// 隐藏滚动条，但保留滚动功能
scrollbar-width: none; // Firefox
-ms-overflow-style: none; // IE/Edge
&::-webkit-scrollbar {
display: none; // Chrome/Safari
}
// 鼠标左右拖动提示
cursor: default;
}
.top-nav-item {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 16px;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
cursor: pointer;
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
user-select: none;
border-radius: 6px;
letter-spacing: 0.3px;
&:hover {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
&.is-active {
color: #2d8cf0;
font-weight: 600;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
}
.vol-top-header .header-info {
display: flex;
align-items: center;
padding-right: 20px;
height: 100%;
gap: 2px;
flex-shrink: 0;
> div {
float: none;
display: flex;
align-items: center;
}
}
.vol-top-header .user {
color: rgba(255, 255, 255, 0.95);
text-align: left;
padding: 4px 10px;
line-height: 18px;
cursor: pointer;
border-radius: 8px;
transition: background 0.2s;
&:hover {
background: rgba(255, 255, 255, 0.12);
}
span {
font-size: 12px;
display: block;
&:first-child {
font-size: 13px;
font-weight: 600;
}
}
}
.vol-top-header .h-link {
line-height: normal;
a {
color: rgba(255, 255, 255, 0.88);
font-size: 18px;
padding: 0 8px;
height: 36px;
display: inline-flex;
align-items: center;
border-radius: 8px;
transition: all 0.2s;
text-decoration: none;
&:hover {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
}
}
.vol-top-header .user-header {
height: 34px;
width: 34px;
top: 0;
position: relative;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
// ====== 顶部一级导航栏 END ======
// ====== 侧边栏菜单美化 ======
.vol-aside ::v-deep(.el-menu) {
border-right: none !important;
background: transparent;
padding: 6px 0;
}
.vol-aside ::v-deep(.el-menu-item) {
height: 40px;
line-height: 40px;
margin: 1px 8px 1px 0;
border-radius: 0 20px 20px 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 13.5px;
color: #4a5568;
overflow: hidden;
}
.vol-aside ::v-deep(.el-sub-menu__title) {
height: 40px;
line-height: 40px;
font-size: 13.5px;
color: #1a202c;
font-weight: 600;
transition: background 0.2s;
letter-spacing: 0.3px;
}
.vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
background-color: #ebf4ff !important;
color: #2d8cf0 !important;
}
.vol-aside ::v-deep(.el-sub-menu__title:hover) {
background-color: #f5f7fa !important;
}
.vol-aside ::v-deep(.el-menu-item.is-active) {
background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
color: #2563eb !important;
font-weight: 600;
box-shadow: inset 3px 0 0 #2d8cf0;
}
// ====== 侧边栏菜单美化 END ======
.vol-aside .tac { .vol-aside .tac {
text-align: left; text-align: left;
} }
@ -27,10 +217,11 @@
.vol-aside .vol-menu { .vol-aside .vol-menu {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 40px; top: 0;
bottom: 0; bottom: 0;
background: white; background: #fff;
border-right: 1px solid #e3e3e3; border-right: none;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06);
} }
.vol-aside .vol-menu ::v-deep(.ivu-menu) { .vol-aside .vol-menu ::v-deep(.ivu-menu) {
@ -53,14 +244,16 @@
position: absolute; position: absolute;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
height: 100%; top: 54px;
bottom: 0;
} }
.vol-container .vol-path { .vol-container .vol-path {
position: relative; position: relative;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
border-bottom: 1px solid #eee; background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
} }
.vol-container .vol-path span { .vol-container .vol-path span {
position: relative; position: relative;
@ -76,14 +269,11 @@
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.vol-main { .vol-main {
// border-left: 1px solid #eee;
position: absolute; position: absolute;
// z-index: -1;
width: 100%; width: 100%;
// height: 100%; background-color: #f0f2f5;
background-color: #F0F2F5;
bottom: 0; bottom: 0;
top: 75px; top: 38px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
@ -158,42 +348,56 @@
.header-navigation { .header-navigation {
cursor: pointer; cursor: pointer;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #eee; border-bottom: none;
height: 34px; height: 38px;
/* overflow: hidden; */
line-height: 35px;
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 5px 10px 0;
outline: 0; outline: 0;
list-style: none; list-style: none;
position: relative; position: relative;
z-index: 900; z-index: 900;
font-weight: initial; font-weight: initial;
margin-top: -1px; background: #fff;
} }
.el-tabs--border-card { .el-tabs--border-card {
border: none; border: none;
} }
.header-navigation ::v-deep(.el-tabs__nav-wrap) {
margin-bottom: -1px;
}
.header-navigation ::v-deep(.el-tabs__header) {
border-bottom: none;
margin: 0;
}
.header-navigation ::v-deep(.el-tabs__item) { .header-navigation ::v-deep(.el-tabs__item) {
height: 34px; height: 28px;
font-size: 14px; font-size: 13px;
line-height: 34px; line-height: 28px;
padding-bottom: 6px; padding: 0 12px !important;
color: #525252 !important; color: #8492a6 !important;
position: relative; position: relative;
margin: 0 4px; margin: 0 2px;
border: 1px solid #e2e2e2; border: none !important;
border-top-right-radius: 4px; border-radius: 5px !important;
border-top-left-radius: 4px; background: #f2f4f7;
// border-bottom: 0px; transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: none;
} }
.header-navigation ::v-deep(.el-tabs__item.is-active) { .header-navigation ::v-deep(.el-tabs__item.is-active) {
color: #1a81ea !important; color: #2d8cf0 !important;
background: #deeeff !important;
font-weight: 600;
box-shadow: none;
}
.header-navigation ::v-deep(.el-tabs__item:hover) {
color: #2d8cf0 !important;
background: #eaf3ff !important;
} }
.header-navigation ::v-deep(.el-tabs__nav-prev), .header-navigation ::v-deep(.el-tabs__nav-prev),
.header-navigation ::v-deep(.el-tabs__nav-next) { .header-navigation ::v-deep(.el-tabs__nav-next) {
line-height: 35px; line-height: 38px;
color: #8492a6;
padding-left: 4px; padding-left: 4px;
} }
@ -223,6 +427,9 @@ img:not([src]) {
.header { .header {
background: #101010; background: #101010;
} }
.vol-top-header {
background: #272929;
}
.header-text { .header-text {
color: white; color: white;
} }
@ -279,8 +486,14 @@ img:not([src]) {
color: #d6d6d6; color: #d6d6d6;
} }
.vol-theme-dark .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item:hover) { .vol-theme-dark .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
background: black; background: #1a1a1a !important;
color: #fff !important;
}
.vol-theme-dark .vol-aside ::v-deep(.el-menu-item.is-active) {
background: linear-gradient(90deg, #2a2a2a 0%, #222 100%) !important;
color: #7db8f7 !important;
box-shadow: inset 3px 0 0 #4d9de0;
} }
.vol-theme-dark .vol-aside ::v-deep(.el-sub-menu__title) { .vol-theme-dark .vol-aside ::v-deep(.el-sub-menu__title) {
background-color: black; background-color: black;
@ -297,6 +510,9 @@ img:not([src]) {
.vol-header { .vol-header {
background-color: rgb(237, 64, 20); background-color: rgb(237, 64, 20);
} }
.vol-top-header {
background-color: rgb(237, 64, 20);
}
.header-text { .header-text {
color: #dcdfe6; color: #dcdfe6;
} }
@ -323,11 +539,17 @@ img:not([src]) {
.header { .header {
background-color: rgb(237, 64, 20); background-color: rgb(237, 64, 20);
} }
.vol-top-header {
background-color: rgb(237, 64, 20);
}
} }
.vol-theme-red2 { .vol-theme-red2 {
.header { .header {
background-color: #a90000; background-color: #a90000;
} }
.vol-top-header {
background-color: #a90000;
}
} }
.vol-theme-orange, .vol-theme-orange,
@ -338,6 +560,9 @@ img:not([src]) {
.vol-header { .vol-header {
background-color: rgb(255, 153, 0); background-color: rgb(255, 153, 0);
} }
.vol-top-header {
background-color: rgb(255, 153, 0);
}
.h-link a:hover { .h-link a:hover {
background: #c97901; background: #c97901;
@ -360,11 +585,17 @@ img:not([src]) {
.header { .header {
background: rgb(255, 153, 0); background: rgb(255, 153, 0);
} }
.vol-top-header {
background-color: rgb(255, 153, 0);
}
} }
.vol-theme-orange2 { .vol-theme-orange2 {
.header { .header {
background-color: rgb(232, 141, 5); background-color: rgb(232, 141, 5);
} }
.vol-top-header {
background-color: rgb(232, 141, 5);
}
} }
//绿色 //绿色
@ -376,6 +607,9 @@ img:not([src]) {
.vol-header { .vol-header {
background-color: rgb(25, 190, 107); background-color: rgb(25, 190, 107);
} }
.vol-top-header {
background-color: rgb(25, 190, 107);
}
.h-link a:hover { .h-link a:hover {
background: #329103; background: #329103;
@ -399,11 +633,17 @@ img:not([src]) {
.header { .header {
background: rgb(25, 190, 107); background: rgb(25, 190, 107);
} }
.vol-top-header {
background-color: rgb(25, 190, 107);
}
} }
.vol-theme-green2 { .vol-theme-green2 {
.header { .header {
background-color: rgb(1, 158, 79); background-color: rgb(1, 158, 79);
} }
.vol-top-header {
background-color: rgb(1, 158, 79);
}
} }
//蓝色 //蓝色
@ -415,6 +655,9 @@ img:not([src]) {
.vol-header { .vol-header {
background-color: rgb(45, 140, 240); background-color: rgb(45, 140, 240);
} }
.vol-top-header {
background-color: rgb(45, 140, 240);
}
.h-link a:hover { .h-link a:hover {
background: #0170e3; background: #0170e3;
@ -437,11 +680,17 @@ img:not([src]) {
.header { .header {
background-color: rgb(45, 140, 240); background-color: rgb(45, 140, 240);
} }
.vol-top-header {
background-color: rgb(45, 140, 240);
}
} }
.vol-theme-blue2 { .vol-theme-blue2 {
.header { .header {
background-color: #2d8cf0; background-color: #2d8cf0;
} }
.vol-top-header {
background-color: #2d8cf0;
}
} }
//白色 //白色
@ -449,6 +698,9 @@ img:not([src]) {
.header { .header {
background-color: #434956; background-color: #434956;
} }
.vol-top-header {
background-color: #434956;
}
.h-link a:hover { .h-link a:hover {
background: #eeeeee; background: #eeeeee;
} }
@ -488,8 +740,14 @@ background: #353941;
color: #d6d6d6; color: #d6d6d6;
} }
.vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item:hover) { .vol-theme-white .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
background: #353941; background: #2e333b !important;
color: #fff !important;
}
.vol-theme-white .vol-aside ::v-deep(.el-menu-item.is-active) {
background: linear-gradient(90deg, #3d4552 0%, #353941 100%) !important;
color: #7db8f7 !important;
box-shadow: inset 3px 0 0 #5b9bd5;
} }
.vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title) { .vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title) {
background-color: #353941; background-color: #353941;
@ -558,9 +816,17 @@ color: #bababa;
// background-color: #19be6b; // background-color: #19be6b;
// } // }
// ====== 各主题顶部选中项颜色 ======
.vol-theme-red .top-nav-item.is-active,
.vol-theme-red2 .top-nav-item.is-active { color: #ed4014; }
.vol-theme-orange .top-nav-item.is-active,
.vol-theme-orange2 .top-nav-item.is-active { color: #ff9900; }
.vol-theme-green .top-nav-item.is-active,
.vol-theme-green2 .top-nav-item.is-active { color: #19be6b; }
.vol-theme-dark .top-nav-item.is-active { color: #272929; }
.vol-theme-white .top-nav-item.is-active { color: #333; }
.theme-selector { .theme-selector {
height: 100%;
padding-left: 16px;
.item { .item {
cursor: pointer; cursor: pointer;
width: 60px; width: 60px;
@ -582,3 +848,20 @@ color: #bababa;
right: 5px; right: 5px;
cursor: pointer; cursor: pointer;
} }
// ====== 全局滚动条美化 ======
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #f1f3f5;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c8cdd6;
border-radius: 3px;
&:hover {
background: #a0aab4;
}
}