979 lines
20 KiB
Plaintext
979 lines
20 KiB
Plaintext
.vol-aside {
|
||
position: absolute;
|
||
float: left;
|
||
overflow: hidden;
|
||
top: 54px;
|
||
bottom: 0;
|
||
border-right: 1px solid #e7edf6;
|
||
background: #fff;
|
||
}
|
||
.vol-menu{
|
||
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: linear-gradient(135deg, #176be7 0%, #2f8dff 52%, #28b4ff 100%);
|
||
box-shadow: 0 8px 24px rgba(23, 107, 231, 0.22);
|
||
}
|
||
|
||
.top-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 18px 0 16px;
|
||
min-width: 200px;
|
||
height: 100%;
|
||
flex-shrink: 0;
|
||
border-radius: 0;
|
||
border-right: 1px solid rgba(255, 255, 255, 0.18);
|
||
img {
|
||
height: 32px;
|
||
margin-right: 10px;
|
||
border-radius: 9px;
|
||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||
}
|
||
span {
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
letter-spacing: 0;
|
||
text-shadow: 0 1px 3px rgba(58, 40, 40, 0.15);
|
||
font-family: "PingFangSC", sans-serif;
|
||
}
|
||
}
|
||
|
||
.top-nav-menus {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 0 10px 0 18px;
|
||
gap: 8px;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
min-width: 0;
|
||
// 隐藏滚动条但保留滚动功能
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
// 测量容器（全部菜单项不可见渲染，用于获取宽度）
|
||
.top-nav-measure {
|
||
position: absolute;
|
||
top: -9999px;
|
||
left: 0;
|
||
display: flex;
|
||
gap: 6px;
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
white-space: nowrap;
|
||
z-index: -1;
|
||
}
|
||
|
||
// 溢出更多按钮外层容器
|
||
.top-nav-more-wrapper {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// ··· 按钮样式
|
||
.top-nav-more-btn {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
letter-spacing: 3px;
|
||
padding: 0 14px !important;
|
||
}
|
||
|
||
// 下拉面板（position 由 JS 内联样式控制）
|
||
.top-nav-overflow-panel {
|
||
min-width: 160px;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
padding: 5px;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
// 下拉面板视觉样式已迁移至 index.vue 全局 <style> 块（Teleport 场景）
|
||
|
||
.top-nav-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
height: 34px;
|
||
padding: 0 15px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||
white-space: nowrap;
|
||
user-select: none;
|
||
border-radius: 9px;
|
||
letter-spacing: 0;
|
||
|
||
&:hover {
|
||
color: #fff;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
&.is-active {
|
||
color: #176be7;
|
||
font-weight: 600;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 9px;
|
||
box-shadow: 0 8px 18px rgba(12, 64, 145, 0.22);
|
||
}
|
||
}
|
||
|
||
.vol-top-header .header-info {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 18px;
|
||
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: 9px;
|
||
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: 9px;
|
||
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 5px 14px rgba(0, 0, 0, 0.16);
|
||
}
|
||
// ====== 顶部一级导航栏 END ======
|
||
|
||
// ====== 侧边栏菜单美化 ======
|
||
.vol-aside ::v-deep(.el-menu) {
|
||
border-right: none !important;
|
||
background: transparent;
|
||
padding: 10px 0;
|
||
}
|
||
.vol-aside ::v-deep(.el-menu-item) {
|
||
height: 42px;
|
||
line-height: 42px;
|
||
margin: 3px 10px;
|
||
border-radius: 10px;
|
||
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||
font-size: 13.5px;
|
||
color: #475467;
|
||
overflow: hidden;
|
||
}
|
||
.vol-aside ::v-deep(.el-sub-menu__title) {
|
||
height: 42px;
|
||
line-height: 42px;
|
||
margin: 3px 10px;
|
||
border-radius: 10px;
|
||
font-size: 13.5px;
|
||
color: #344054;
|
||
transition: background 0.2s;
|
||
letter-spacing: 0;
|
||
}
|
||
.vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
|
||
background-color: #f2f7ff !important;
|
||
color: #176be7 !important;
|
||
transform: translateX(2px);
|
||
}
|
||
.vol-aside ::v-deep(.el-sub-menu__title:hover) {
|
||
background-color: #f6f9fd !important;
|
||
}
|
||
.vol-aside ::v-deep(.el-menu-item.is-active) {
|
||
background: linear-gradient(135deg, #eaf3ff 0%, #f6fbff 100%) !important;
|
||
color: #176be7 !important;
|
||
font-weight: 600;
|
||
box-shadow: inset 3px 0 0 #2f8dff, 0 6px 14px rgba(47, 141, 255, 0.1);
|
||
}
|
||
// ====== 侧边栏菜单美化 END ======
|
||
|
||
.vol-aside .tac {
|
||
text-align: left;
|
||
}
|
||
|
||
.vol-aside .header {
|
||
text-align: left;
|
||
position: absolute;
|
||
height: 40px;
|
||
position: relative;
|
||
line-height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.vol-aside .header p {
|
||
margin-left: -15px;
|
||
color: #fff;
|
||
}
|
||
.vol-aside .vol-menu {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
border-right: 1px solid #e7edf6 !important;
|
||
box-shadow: 8px 0 20px rgba(31, 52, 88, 0.04);
|
||
}
|
||
|
||
.vol-aside .vol-menu ::v-deep(.ivu-menu) {
|
||
text-align: left;
|
||
position: unset;
|
||
width: 100% !important;
|
||
}
|
||
.vol-aside .vol-menu ::v-deep(.is-horizontal) {
|
||
display: none !important;
|
||
}
|
||
.vol-aside .vol-menu ::v-deep(.is-vertical) {
|
||
width: 2px;
|
||
right: -1px;
|
||
}
|
||
|
||
.vol-container {
|
||
min-width: 800px;
|
||
right: 0;
|
||
display: inline-block;
|
||
position: absolute;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
top: 60px;
|
||
bottom: 0;
|
||
}
|
||
|
||
.vol-container .vol-path {
|
||
position: relative;
|
||
width: 100%;
|
||
display: inline-block;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e7edf6;
|
||
box-shadow: 0 2px 10px rgba(31, 52, 88, 0.04);
|
||
}
|
||
.vol-container .vol-path span {
|
||
position: relative;
|
||
margin-right: 10px;
|
||
color: #969696;
|
||
}
|
||
|
||
.vol-header {
|
||
height: 41px;
|
||
width: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.vol-main {
|
||
position: absolute;
|
||
width: 100%;
|
||
background:
|
||
linear-gradient(180deg, rgba(244, 248, 255, 0.92) 0%, rgba(239, 244, 250, 0.96) 100%);
|
||
bottom: 0;
|
||
top: 38px;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
// padding: 4px;
|
||
}
|
||
|
||
.header {
|
||
padding: 5px;
|
||
}
|
||
.header img {
|
||
height: 100%;
|
||
margin-right: 25px;
|
||
}
|
||
.header-info {
|
||
padding-right: 20px;
|
||
display: inline-block;
|
||
// position: absolute;
|
||
height: 100%;
|
||
}
|
||
.header-info > div {
|
||
float: left;
|
||
height: 100%;
|
||
}
|
||
.user-header {
|
||
background: white;
|
||
height: 30px;
|
||
width: 30px;
|
||
border-radius: 50%;
|
||
margin-right: 0px;
|
||
top: 4px;
|
||
// left: 7px;
|
||
position: relative;
|
||
border: 1px solid #dfdfdf;
|
||
}
|
||
.project-name {
|
||
line-height: 60px;
|
||
padding: 0 50px 0 20px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.header-text {
|
||
vertical-align: middle;
|
||
height: 100%;
|
||
// position: absolute;
|
||
flex: 1;
|
||
text-align: left;
|
||
font-size: 15px;
|
||
left: 21px;
|
||
line-height: 60px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.vol-header .user {
|
||
text-align: left;
|
||
padding: 12px;
|
||
position: relative;
|
||
display: inline-block;
|
||
line-height: 15px;
|
||
height: 100%;
|
||
span:last-child {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.vol-header .settings {
|
||
padding-top: 10px;
|
||
color: #d4d2d2;
|
||
}
|
||
.vol-header .user span {
|
||
position: relative;
|
||
top: -8px;
|
||
}
|
||
.header-info:hover {
|
||
cursor: pointer;
|
||
}
|
||
.header-navigation {
|
||
cursor: pointer;
|
||
box-shadow: none;
|
||
border-bottom: none;
|
||
height: 40px;
|
||
display: block;
|
||
margin: 0;
|
||
padding: 0 10px;
|
||
outline: 0;
|
||
list-style: none;
|
||
position: relative;
|
||
z-index: 900;
|
||
font-weight: initial;
|
||
background: #fff;
|
||
}
|
||
.el-tabs--border-card {
|
||
border: none;
|
||
border-bottom: 1px solid #e7edf6;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__nav-wrap) {
|
||
margin-bottom: 0;
|
||
overflow: visible !important;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__nav-scroll) {
|
||
overflow: visible !important;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__nav) {
|
||
overflow: visible !important;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__header) {
|
||
border-bottom: none;
|
||
margin: 0;
|
||
overflow: visible;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__item) {
|
||
height: 36px;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
padding: 0 14px !important;
|
||
color: #667085 !important;
|
||
position: relative;
|
||
margin: 0 1px;
|
||
border: none !important;
|
||
border-radius: 9px !important;
|
||
background: transparent;
|
||
transition: color 0.18s ease, background 0.18s ease;
|
||
box-shadow: none;
|
||
overflow: visible !important;
|
||
z-index: 1;
|
||
margin-right: 3px;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__item.is-active) {
|
||
color: #176be7 !important;
|
||
background: #eef6ff !important;
|
||
font-weight: 600;
|
||
box-shadow: none;
|
||
z-index: 2;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__item.is-active::before) {
|
||
display: none;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__item.is-active::after) {
|
||
content: "";
|
||
position: absolute;
|
||
left: 12px;
|
||
right: 12px;
|
||
bottom: 3px;
|
||
height: 2px;
|
||
border-radius: 2px;
|
||
background: #2f8dff;
|
||
box-shadow: none;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__item:not(.is-active):hover) {
|
||
color: #176be7 !important;
|
||
background: #f4f8ff !important;
|
||
border-radius: 9px !important;
|
||
}
|
||
.header-navigation ::v-deep(.el-tabs__nav-prev),
|
||
.header-navigation ::v-deep(.el-tabs__nav-next) {
|
||
line-height: 38px;
|
||
color: #5f6368;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
.vol-header .user span:first-child {
|
||
font-size: 12px;
|
||
font-weight: bolder;
|
||
// margin-bottom: -10px;
|
||
}
|
||
.h-link {
|
||
line-height: 40px;
|
||
}
|
||
.h-link a {
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
padding: 0px 15px;
|
||
/* height: 60px; */
|
||
display: inline-block;
|
||
}
|
||
|
||
img[src=''],
|
||
img:not([src]) {
|
||
opacity: 0;
|
||
}
|
||
|
||
//黑色
|
||
.vol-theme-dark {
|
||
.header {
|
||
background: #101010;
|
||
}
|
||
.vol-top-header {
|
||
background: #272929;
|
||
}
|
||
.header-text {
|
||
color: white;
|
||
}
|
||
.vol-header {
|
||
background-color: #272929;
|
||
}
|
||
.h-link a:hover {
|
||
background: #0c0202;
|
||
}
|
||
a {
|
||
color: #f2f2f2;
|
||
}
|
||
.h-link a:hover {
|
||
color: #dfdfdf;
|
||
}
|
||
.h-link .actived {
|
||
border-bottom: 2px solid white;
|
||
}
|
||
.h-link .actived a {
|
||
color: white !important;
|
||
}
|
||
.vol-header .user {
|
||
color: #ececec;
|
||
}
|
||
.vol-header .settings {
|
||
color: #d4d2d2;
|
||
}
|
||
.vol-aside .vol-menu {
|
||
background: black;
|
||
}
|
||
}
|
||
|
||
.vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item) {
|
||
background: #2e333b;
|
||
color: white;
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.vol-menu .el-submenu) {
|
||
background: black;
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.vol-menu .el-sub-menu__title *) {
|
||
color: #d6d6d6;
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item) {
|
||
color: #eee;
|
||
background: #1f1f1f;
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item.is-active),
|
||
.vol-theme-dark .vol-aside ::v-deep(.menu-item-lv1) {
|
||
background: black;
|
||
}
|
||
|
||
.vol-theme-dark .vol-aside ::v-deep(.menu-item-lv1) {
|
||
background: black;
|
||
color: #d6d6d6;
|
||
}
|
||
|
||
.vol-theme-dark .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
|
||
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) {
|
||
background-color: black;
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.el-sub-menu__title:hover) {
|
||
background-color: rgb(25, 25, 25);
|
||
}
|
||
.vol-theme-dark .vol-aside ::v-deep(.el-sub-menu__title:hover *) {
|
||
color: white;
|
||
}
|
||
|
||
.vol-theme-red,
|
||
.vol-theme-red2 {
|
||
.vol-header {
|
||
background-color: rgb(237, 64, 20);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(237, 64, 20);
|
||
}
|
||
.header-text {
|
||
color: #dcdfe6;
|
||
}
|
||
.h-link a:hover {
|
||
background: #d71212;
|
||
}
|
||
.h-link .actived {
|
||
border-bottom: 2px solid white;
|
||
}
|
||
|
||
.h-link a,
|
||
.h-link .actived a,
|
||
.vol-header .settings,
|
||
.vol-header .user {
|
||
color: white;
|
||
}
|
||
|
||
.vol-header .header-text {
|
||
color: #fbfbfb;
|
||
}
|
||
}
|
||
|
||
.vol-theme-red {
|
||
.header {
|
||
background-color: rgb(237, 64, 20);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(237, 64, 20);
|
||
}
|
||
}
|
||
.vol-theme-red2 {
|
||
.header {
|
||
background-color: #a90000;
|
||
}
|
||
.vol-top-header {
|
||
background-color: #a90000;
|
||
}
|
||
}
|
||
|
||
.vol-theme-orange,
|
||
.vol-theme-orange2 {
|
||
.header-text {
|
||
color: #dcdfe6;
|
||
}
|
||
.vol-header {
|
||
background-color: rgb(255, 153, 0);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(255, 153, 0);
|
||
}
|
||
|
||
.h-link a:hover {
|
||
background: #c97901;
|
||
}
|
||
.h-link .actived {
|
||
border-bottom: 2px solid white;
|
||
}
|
||
|
||
.h-link a,
|
||
.h-link .actived a,
|
||
.vol-header .settings,
|
||
.vol-header .user {
|
||
color: white;
|
||
}
|
||
.vol-header .header-text {
|
||
color: #fbfbfb;
|
||
}
|
||
}
|
||
.vol-theme-orange {
|
||
.header {
|
||
background: rgb(255, 153, 0);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(255, 153, 0);
|
||
}
|
||
}
|
||
.vol-theme-orange2 {
|
||
.header {
|
||
background-color: rgb(232, 141, 5);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(232, 141, 5);
|
||
}
|
||
}
|
||
|
||
//绿色
|
||
.vol-theme-green,
|
||
.vol-theme-green2 {
|
||
.header-text {
|
||
color: #dcdfe6;
|
||
}
|
||
.vol-header {
|
||
background-color: rgb(25, 190, 107);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(25, 190, 107);
|
||
}
|
||
|
||
.h-link a:hover {
|
||
background: #329103;
|
||
}
|
||
.h-link .actived {
|
||
border-bottom: 2px solid white;
|
||
}
|
||
|
||
.h-link a,
|
||
.h-link .actived a,
|
||
.vol-header .settings,
|
||
.vol-header .user {
|
||
color: white;
|
||
}
|
||
|
||
.vol-header .header-text {
|
||
color: #fbfbfb;
|
||
}
|
||
}
|
||
.vol-theme-green {
|
||
.header {
|
||
background: rgb(25, 190, 107);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(25, 190, 107);
|
||
}
|
||
}
|
||
.vol-theme-green2 {
|
||
.header {
|
||
background-color: rgb(1, 158, 79);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(1, 158, 79);
|
||
}
|
||
}
|
||
|
||
//蓝色
|
||
.vol-theme-blue,
|
||
.vol-theme-blue2 {
|
||
.header-text {
|
||
color: #dcdfe6;
|
||
}
|
||
.vol-header {
|
||
background-color: rgb(45, 140, 240);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(45, 140, 240);
|
||
}
|
||
|
||
.h-link a:hover {
|
||
background: #0170e3;
|
||
}
|
||
.h-link .actived {
|
||
border-bottom: 2px solid white;
|
||
}
|
||
|
||
.h-link a,
|
||
.h-link .actived a,
|
||
.vol-header .settings,
|
||
.vol-header .user {
|
||
color: white;
|
||
}
|
||
.vol-header .header-text {
|
||
color: #fbfbfb;
|
||
}
|
||
}
|
||
.vol-theme-blue {
|
||
.header {
|
||
background-color: rgb(45, 140, 240);
|
||
}
|
||
.vol-top-header {
|
||
background-color: rgb(45, 140, 240);
|
||
}
|
||
}
|
||
.vol-theme-blue2 {
|
||
.header {
|
||
background-color: #2d8cf0;
|
||
}
|
||
.vol-top-header {
|
||
background-color: #2d8cf0;
|
||
}
|
||
}
|
||
|
||
//白色
|
||
.vol-theme-white {
|
||
.header {
|
||
background-color: #434956;
|
||
}
|
||
.vol-top-header {
|
||
background-color: #434956;
|
||
}
|
||
.h-link a:hover {
|
||
background: #eeeeee;
|
||
}
|
||
.h-link a {
|
||
color: #211f1f;
|
||
}
|
||
|
||
.header-navigation {
|
||
// box-shadow: -7px 11px 10px -13px #678aa7;
|
||
border-bottom: 1px solid #eee;
|
||
height: 32px;
|
||
overflow: hidden;
|
||
line-height: 32px;
|
||
display: block;
|
||
margin: 0;
|
||
padding: 0;
|
||
outline: 0;
|
||
list-style: none;
|
||
position: relative;
|
||
z-index: 900;
|
||
font-weight: 400;
|
||
}
|
||
|
||
}
|
||
.vol-theme-white .project-name{
|
||
color: #505050;
|
||
}
|
||
.vol-theme-white
|
||
.vol-aside
|
||
::v-deep(.vol-el-menu-item .el-menu-item.is-active),
|
||
.vol-theme-white .vol-aside ::v-deep(.menu-item-lv1) {
|
||
background: #353941;
|
||
}
|
||
|
||
.vol-theme-white .vol-aside ::v-deep(.menu-item-lv1) {
|
||
background: #353941;
|
||
color: #d6d6d6;
|
||
}
|
||
|
||
.vol-theme-white .vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
|
||
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) {
|
||
background-color: #353941;
|
||
}
|
||
.vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title:hover) {
|
||
background-color: rgb(47, 46, 46);
|
||
}
|
||
.vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title),
|
||
.vol-theme-white .vol-aside ::v-deep(.el-menu-item),
|
||
.vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title:hover *) {
|
||
color: #bababa;
|
||
}
|
||
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item) {
|
||
// background: #363e4f;
|
||
// color: white;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-menu .el-submenu),
|
||
// .vol-theme-white .vol-aside ::v-deep(.menu-item-lv1) {
|
||
// background: #515a6e;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-menu) {
|
||
// background: #515a6e;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-menu .el-sub-menu__title *),
|
||
// .vol-theme-white .vol-aside ::v-deep(.menu-item-lv1 *) {
|
||
// color: #d6d6d6;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item) {
|
||
// color: #eee;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item.is-active),
|
||
// .vol-theme-white .vol-aside ::v-deep(.menu-item-lv1.is-active) {
|
||
// background: #59647b;
|
||
// color: #fff;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.vol-el-menu-item .el-menu-item:hover) {
|
||
// background: #6a758c;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title:hover) {
|
||
// background-color: #525865;
|
||
// }
|
||
// .vol-theme-white .vol-aside ::v-deep(.el-sub-menu__title:hover *) {
|
||
// color: white;
|
||
// }
|
||
|
||
// .vol-theme-red ::v-deep(.el-menu-item.is-active),
|
||
// .vol-theme-red2 ::v-deep(.el-menu-item.is-active)
|
||
// {
|
||
// background-color: #d71212;
|
||
// }
|
||
// .vol-theme-blue ::v-deep(.el-menu-item.is-active),
|
||
// .vol-theme-blue2 ::v-deep(.el-menu-item.is-active)
|
||
// {
|
||
// background-color: #2d8cf0;
|
||
// }
|
||
// .vol-theme-orange ::v-deep(.el-menu-item.is-active),
|
||
// .vol-theme-orange2 ::v-deep(.el-menu-item.is-active)
|
||
// {
|
||
// background-color: #ff9900;
|
||
// }
|
||
|
||
// .vol-theme-green ::v-deep(.el-menu-item.is-active),
|
||
// .vol-theme-green2 ::v-deep(.el-menu-item.is-active)
|
||
// {
|
||
// 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; }
|
||
|
||
.vol-theme-blue .vol-top-header,
|
||
.vol-theme-blue2 .vol-top-header {
|
||
background: linear-gradient(135deg, #176be7 0%, #2f8dff 52%, #28b4ff 100%);
|
||
}
|
||
|
||
.vol-theme-red .vol-top-header,
|
||
.vol-theme-red2 .vol-top-header {
|
||
background: linear-gradient(135deg, #c92a2a 0%, #ed4014 58%, #ff7a45 100%);
|
||
}
|
||
|
||
.vol-theme-orange .vol-top-header,
|
||
.vol-theme-orange2 .vol-top-header {
|
||
background: linear-gradient(135deg, #d46b08 0%, #ff9900 58%, #ffc069 100%);
|
||
}
|
||
|
||
.vol-theme-green .vol-top-header,
|
||
.vol-theme-green2 .vol-top-header {
|
||
background: linear-gradient(135deg, #099268 0%, #19be6b 58%, #63e6be 100%);
|
||
}
|
||
|
||
.vol-theme-dark .vol-top-header {
|
||
background: linear-gradient(135deg, #111827 0%, #272929 62%, #475467 100%);
|
||
}
|
||
|
||
.vol-theme-white .vol-top-header {
|
||
background: linear-gradient(135deg, #353941 0%, #434956 62%, #667085 100%);
|
||
}
|
||
|
||
.theme-selector {
|
||
.item {
|
||
cursor: pointer;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 5px;
|
||
margin-bottom: 17px;
|
||
border: 1px solid #d4d2d2;
|
||
float: left;
|
||
margin-right: 13px;
|
||
}
|
||
}
|
||
|
||
.collapse-menu {
|
||
font-size: 21px;
|
||
color: #fff;
|
||
line-height: 40px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 5px;
|
||
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;
|
||
}
|
||
}
|