update：整体样式
This commit is contained in:
ltx
parent
d257673173
commit
c8ffd7d3b1
@ -1,14 +1,16 @@
|
||||
<template>
|
||||
<div class="router-loading" style="background: #eeeeee5c;">
|
||||
<div class="spanner">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<div class="router-loading">
|
||||
<div class="loading-panel" aria-label="页面加载中">
|
||||
<div class="loader-mark">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="loading-copy">
|
||||
<p>加载中</p>
|
||||
<span>请稍候</span>
|
||||
</div>
|
||||
<div class="loading-bar">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,79 +29,129 @@ export default {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 100px;
|
||||
text-align: center;
|
||||
padding-top: 200px;
|
||||
color: #808080;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #17233d;
|
||||
background: rgba(247, 250, 255, 0.88);
|
||||
z-index: 9999;
|
||||
animation: loading-fade-in 0.16s ease both;
|
||||
}
|
||||
.spanner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
.loading-panel {
|
||||
width: 160px;
|
||||
min-height: 142px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 22px 18px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e6eef8;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 28px rgba(29, 68, 130, 0.1);
|
||||
animation: panel-in 0.24s ease-out both;
|
||||
}
|
||||
|
||||
.loader-mark {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.router-loading span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #66b1ff;
|
||||
position: absolute;
|
||||
animation: r_load 1.04s ease infinite;
|
||||
border: 3px solid #dce9fb;
|
||||
border-top-color: #2487f0;
|
||||
animation: loader-spin 0.78s linear infinite;
|
||||
}
|
||||
@keyframes r_load {
|
||||
0% {
|
||||
transform: scale(1.2);
|
||||
|
||||
.loader-mark span {
|
||||
position: absolute;
|
||||
inset: 8px;
|
||||
border-radius: inherit;
|
||||
border: 2px solid #eef5ff;
|
||||
border-bottom-color: #7db5f5;
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
margin-top: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-copy p {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.loading-copy span {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #8a96a8;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
width: 96px;
|
||||
height: 3px;
|
||||
margin-top: 14px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: #edf3fb;
|
||||
}
|
||||
|
||||
.loading-bar span {
|
||||
display: block;
|
||||
width: 38%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: #2487f0;
|
||||
animation: loading-sweep 1.05s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.3);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 6px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.router-loading span:nth-child(1) {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
animation-delay: 0.13s;
|
||||
|
||||
@keyframes loader-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.router-loading span:nth-child(2) {
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
animation-delay: 0.26s;
|
||||
|
||||
@keyframes loading-sweep {
|
||||
0% {
|
||||
transform: translateX(-105%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(270%);
|
||||
}
|
||||
}
|
||||
.router-loading span:nth-child(3) {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -10px;
|
||||
animation-delay: 0.39s;
|
||||
}
|
||||
.router-loading span:nth-child(4) {
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
animation-delay: 0.52s;
|
||||
}
|
||||
.router-loading span:nth-child(5) {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
animation-delay: 0.65s;
|
||||
}
|
||||
.router-loading span:nth-child(6) {
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
animation-delay: 0.78s;
|
||||
}
|
||||
.router-loading span:nth-child(7) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
animation-delay: 0.91s;
|
||||
}
|
||||
.router-loading span:nth-child(8) {
|
||||
bottom: 14px;
|
||||
left: 14px;
|
||||
animation-delay: 1.04s;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.router-loading,
|
||||
.loading-panel,
|
||||
.loader-mark,
|
||||
.loading-bar span {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,13 +7,248 @@
|
||||
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.commonManage{
|
||||
width: calc(100% - 34px);
|
||||
height: calc(100vh - 130px) !important;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
.commonManage {
|
||||
width: calc(100% - 32px);
|
||||
min-height: calc(100vh - 136px) !important;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid rgba(222, 230, 242, 0.9);
|
||||
border-radius: 12px;
|
||||
margin: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 30px rgba(31, 52, 88, 0.08);
|
||||
}
|
||||
|
||||
.commonManage :deep(.head) {
|
||||
width: 100% !important;
|
||||
min-height: 76px;
|
||||
height: auto !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 16px;
|
||||
padding: 16px 18px 14px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
border-bottom: 1px solid #edf1f7;
|
||||
}
|
||||
|
||||
.commonManage :deep(.head .left) {
|
||||
width: auto !important;
|
||||
height: 36px !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.head .desctipt) {
|
||||
width: auto !important;
|
||||
min-width: max-content;
|
||||
margin: 0 8px 0 0 !important;
|
||||
color: #344054 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.head .m-2),
|
||||
.commonManage :deep(.head .el-select),
|
||||
.commonManage :deep(.head .el-input),
|
||||
.commonManage :deep(.head .el-cascader) {
|
||||
width: 190px !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.right),
|
||||
.commonManage :deep(.rightBtn) {
|
||||
width: auto !important;
|
||||
min-height: 48px;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: flex-end !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 0 18px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
.commonManage :deep(.head .right) {
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.commonManage :deep(.Search),
|
||||
.commonManage :deep(.Add),
|
||||
.commonManage :deep(.addTeacher),
|
||||
.commonManage :deep(.Import),
|
||||
.commonManage :deep(.Export),
|
||||
.commonManage :deep(.Audit),
|
||||
.commonManage :deep(.Upload) {
|
||||
min-width: 82px !important;
|
||||
width: auto !important;
|
||||
height: 34px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 16px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid transparent !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 34px !important;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.commonManage :deep(.Search),
|
||||
.commonManage :deep(.Add),
|
||||
.commonManage :deep(.addTeacher),
|
||||
.commonManage :deep(.Import),
|
||||
.commonManage :deep(.Export) {
|
||||
color: #fff !important;
|
||||
background: linear-gradient(135deg, #2f8dff 0%, #176be7 100%) !important;
|
||||
box-shadow: 0 6px 14px rgba(47, 141, 255, 0.2);
|
||||
}
|
||||
|
||||
.commonManage :deep(.Audit),
|
||||
.commonManage :deep(.Upload) {
|
||||
color: #475467 !important;
|
||||
background: #fff !important;
|
||||
border-color: #d9e1ee !important;
|
||||
box-shadow: 0 4px 10px rgba(31, 52, 88, 0.05);
|
||||
}
|
||||
|
||||
.commonManage :deep(.Search:hover),
|
||||
.commonManage :deep(.Add:hover),
|
||||
.commonManage :deep(.addTeacher:hover),
|
||||
.commonManage :deep(.Import:hover),
|
||||
.commonManage :deep(.Export:hover),
|
||||
.commonManage :deep(.Audit:hover),
|
||||
.commonManage :deep(.Upload:hover) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 18px rgba(47, 141, 255, 0.24);
|
||||
}
|
||||
|
||||
.commonManage :deep(.cont) {
|
||||
padding: 0 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-input__wrapper),
|
||||
.commonManage :deep(.el-select__wrapper) {
|
||||
min-height: 34px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 1px #dce4f0 inset;
|
||||
transition: box-shadow 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-input__wrapper:hover),
|
||||
.commonManage :deep(.el-select__wrapper:hover),
|
||||
.commonManage :deep(.el-input__wrapper.is-focus),
|
||||
.commonManage :deep(.el-select__wrapper.is-focused) {
|
||||
box-shadow: 0 0 0 1px #2f8dff inset, 0 0 0 3px rgba(47, 141, 255, 0.1);
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-table) {
|
||||
width: calc(100% - 36px) !important;
|
||||
margin: 16px 18px 0 !important;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #edf1f7;
|
||||
box-shadow: 0 8px 20px rgba(31, 52, 88, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-table::before),
|
||||
.commonManage :deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-table th.el-table__cell) {
|
||||
height: 46px !important;
|
||||
padding: 0 !important;
|
||||
background: #f6f9fd !important;
|
||||
color: #344054 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-table td.el-table__cell) {
|
||||
height: 46px !important;
|
||||
padding: 6px 0 !important;
|
||||
color: #475467 !important;
|
||||
border-bottom-color: #edf1f7 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-table__row:hover > td.el-table__cell) {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.el-pagination) {
|
||||
margin: 14px 18px 0 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate) {
|
||||
min-height: 24px !important;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .edit),
|
||||
.commonManage :deep(.operate .view),
|
||||
.commonManage :deep(.operate .delete),
|
||||
.commonManage :deep(.operate .toView),
|
||||
.commonManage :deep(.operate .editPassWord) {
|
||||
width: auto !important;
|
||||
min-width: 42px !important;
|
||||
height: 24px !important;
|
||||
padding: 0 8px !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 6px;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 24px !important;
|
||||
transition: background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .edit),
|
||||
.commonManage :deep(.operate .view),
|
||||
.commonManage :deep(.operate .toView) {
|
||||
color: #176be7 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .delete) {
|
||||
color: #f04438 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .editPassWord) {
|
||||
color: #12a87f !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .edit:hover),
|
||||
.commonManage :deep(.operate .view:hover),
|
||||
.commonManage :deep(.operate .toView:hover) {
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
.commonManage :deep(.operate .delete:hover) {
|
||||
background: #fff1f0;
|
||||
}
|
||||
|
||||
.commonManage :deep(.addTeacherDrawer .title) {
|
||||
color: #1d2939 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.commonManage :deep(.footer .cancle),
|
||||
.commonManage :deep(.footer .confirm) {
|
||||
height: 38px !important;
|
||||
border-radius: 8px !important;
|
||||
line-height: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="commonTable">
|
||||
<el-table :data="propsChannel" highlight-current-row
|
||||
<el-table :data="propsChannel" highlight-current-row stripe
|
||||
style="width: calc(100% - 40px) ;height: calc(100vh - 250px); margin:0 20px ;" fit="true"
|
||||
@selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }"
|
||||
@ -92,16 +92,47 @@ function goUp(row) {
|
||||
|
||||
.commonTable {
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
width: calc(100% - 36px) !important;
|
||||
height: calc(100vh - 270px) !important;
|
||||
margin: 16px 18px 0 !important;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #edf1f7;
|
||||
box-shadow: 0 8px 20px rgba(31, 52, 88, 0.05);
|
||||
}
|
||||
|
||||
:deep(.el-table::before),
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-table th.el-table__cell) {
|
||||
height: 46px !important;
|
||||
padding: 0 !important;
|
||||
background: #f6f9fd !important;
|
||||
color: #344054 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell) {
|
||||
height: 46px !important;
|
||||
padding: 6px 0 !important;
|
||||
color: #475467;
|
||||
border-bottom-color: #edf1f7;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover > td.el-table__cell) {
|
||||
background: #f4f8ff !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__body .el-table__row) {
|
||||
// height: 36.55px;
|
||||
/* 设置行高 */
|
||||
transition: background 0.18s ease;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
@ -122,63 +153,69 @@ function goUp(row) {
|
||||
}
|
||||
|
||||
:deep(.el-pagination) {
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
margin-left: 20px;
|
||||
min-height: 32px;
|
||||
margin: 14px 18px 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .btn-prev),
|
||||
:deep(.el-pagination .btn-next),
|
||||
:deep(.el-pagination .el-pager li) {
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.operate {
|
||||
height: 20px;
|
||||
min-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.edit {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
.edit,
|
||||
.delete,
|
||||
.toView,
|
||||
.editPassWord {
|
||||
width: auto;
|
||||
min-width: 42px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #1890FF;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.edit,
|
||||
.toView {
|
||||
color: #176be7;
|
||||
}
|
||||
|
||||
.delete {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #FE4C04;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toView {
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #1890FF;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
color: #f04438;
|
||||
}
|
||||
|
||||
.editPassWord {
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #28CC96;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
color: #12a87f;
|
||||
}
|
||||
</style>
|
||||
|
||||
.edit:hover,
|
||||
.toView:hover {
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
.delete:hover {
|
||||
background: #fff1f0;
|
||||
}
|
||||
|
||||
.editPassWord:hover {
|
||||
background: #eafaf5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -82,15 +82,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="vol-main" id="vol-main">
|
||||
<el-scrollbar style="height: 100%" v-if="permissionInited">
|
||||
<el-scrollbar :key="$route.fullPath" class="page-glide-shell" style="height: 100%" v-if="permissionInited">
|
||||
<loading v-show="$store.getters.isLoading()"></loading>
|
||||
<router-view v-if="!$route.meta ||
|
||||
($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
|
||||
" v-slot="{ Component }">
|
||||
<transition name="page-fade" mode="out-in">
|
||||
<component :is="Component" :key="$route.path" />
|
||||
</transition>
|
||||
</router-view>
|
||||
"></router-view>
|
||||
<router-view v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"></router-view>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@ -120,23 +116,36 @@
|
||||
<!-- 页面切换动画：必须非 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-glide-shell {
|
||||
min-height: 100%;
|
||||
animation: page-glide-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
will-change: opacity, transform, filter;
|
||||
transform-origin: 50% 28px;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
.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;
|
||||
|
||||
@keyframes page-glide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: blur(8px) saturate(1.08);
|
||||
transform: translate3d(0, 18px, 0) scale(0.985);
|
||||
}
|
||||
|
||||
55% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: blur(0) saturate(1);
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
.page-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
.page-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.page-glide-shell {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
/* ====== 页面切换动画 END ====== */
|
||||
</style>
|
||||
@ -1106,12 +1115,12 @@ function showTime() {
|
||||
}
|
||||
.top-nav-overflow-item:hover {
|
||||
background: #f0f7ff;
|
||||
color: #2d8cf0;
|
||||
color: #176be7;
|
||||
}
|
||||
.top-nav-overflow-item.is-active {
|
||||
color: #2d8cf0;
|
||||
color: #176be7;
|
||||
font-weight: 600;
|
||||
background: #e8f4ff;
|
||||
background: #eef6ff;
|
||||
}
|
||||
.top-nav-more-fade-enter-active,
|
||||
.top-nav-more-fade-leave-active {
|
||||
@ -1125,34 +1134,87 @@ function showTime() {
|
||||
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item .is-icon-close{
|
||||
margin-left: 8px;
|
||||
color: #000;
|
||||
color: #98a2b3;
|
||||
}
|
||||
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item .is-icon-close:hover{
|
||||
color: #fff;
|
||||
color: #176be7;
|
||||
}
|
||||
|
||||
/* ── 标签栏 Chrome 风格激活色（全局高优先级，压过 EP border-card 内置样式） ── */
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item {
|
||||
color: #5f6368;
|
||||
color: #667085;
|
||||
background: transparent;
|
||||
border: none !important;
|
||||
border-radius: 8px 8px 0 0 !important;
|
||||
border-radius: 9px !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||
color: #2d8cf0 !important;
|
||||
background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
|
||||
font-weight: normal;
|
||||
color: #176be7 !important;
|
||||
background: #eef6ff !important;
|
||||
font-weight: 600;
|
||||
border: none !important;
|
||||
}
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-active):hover {
|
||||
color: #2d8cf0 !important;
|
||||
background: #ebf4ff !important;
|
||||
border-radius: 8px !important;
|
||||
color: #176be7 !important;
|
||||
background: #f4f8ff !important;
|
||||
border-radius: 9px !important;
|
||||
}
|
||||
.header-navigation.el-tabs--border-card > .el-tabs__header {
|
||||
background: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .el-drawer {
|
||||
border-radius: 14px 0 0 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .el-drawer__header {
|
||||
padding: 18px 22px 14px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #edf1f7;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .el-drawer__body {
|
||||
padding: 22px;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .el-drawer__footer {
|
||||
padding: 14px 22px 18px;
|
||||
border-top: 1px solid #edf1f7;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .title {
|
||||
color: #1d2939 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .footer .cancle,
|
||||
.addTeacherDrawer .footer .confirm {
|
||||
height: 38px !important;
|
||||
border-radius: 8px !important;
|
||||
line-height: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .footer .confirm {
|
||||
background: linear-gradient(135deg, #2f8dff 0%, #176be7 100%) !important;
|
||||
box-shadow: 0 6px 14px rgba(47, 141, 255, 0.2);
|
||||
}
|
||||
|
||||
.addTeacherDrawer .footer .cancle {
|
||||
background: #fff !important;
|
||||
border-color: #d9e1ee !important;
|
||||
color: #475467 !important;
|
||||
}
|
||||
|
||||
.addTeacherDrawer .footer .cancle:hover,
|
||||
.addTeacherDrawer .footer .confirm:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
overflow: hidden;
|
||||
top: 54px;
|
||||
bottom: 0;
|
||||
border-right: 1px solid #e4e4e7;
|
||||
border-right: 1px solid #e7edf6;
|
||||
background: #fff;
|
||||
}
|
||||
.vol-menu{
|
||||
border: 0 !important;
|
||||
@ -19,31 +20,32 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 200;
|
||||
background-color: #2d8cf0;
|
||||
// box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
|
||||
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 10px;
|
||||
padding: 0 18px 0 16px;
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
border-radius: 10px;
|
||||
// border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.18);
|
||||
img {
|
||||
height: 30px;
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
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: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0;
|
||||
text-shadow: 0 1px 3px rgba(58, 40, 40, 0.15);
|
||||
font-family: "PingFangSC", sans-serif;
|
||||
}
|
||||
@ -54,8 +56,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 8px 0 16px;
|
||||
gap: 6px;
|
||||
padding: 0 10px 0 18px;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
min-width: 0;
|
||||
@ -113,36 +115,37 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
height: 34px;
|
||||
padding: 0 15px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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: 6px;
|
||||
letter-spacing: 0.3px;
|
||||
border-radius: 9px;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #2d8cf0;
|
||||
color: #176be7;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
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: 20px;
|
||||
padding-right: 18px;
|
||||
height: 100%;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
@ -159,7 +162,7 @@
|
||||
padding: 4px 10px;
|
||||
line-height: 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
border-radius: 9px;
|
||||
transition: background 0.2s;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
@ -183,7 +186,7 @@
|
||||
height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 9px;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
@ -200,7 +203,7 @@
|
||||
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);
|
||||
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
// ====== 顶部一级导航栏 END ======
|
||||
|
||||
@ -208,39 +211,41 @@
|
||||
.vol-aside ::v-deep(.el-menu) {
|
||||
border-right: none !important;
|
||||
background: transparent;
|
||||
padding: 6px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.vol-aside ::v-deep(.el-menu-item) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 2px 8px 2px 0;
|
||||
border-radius: 0 20px 20px 0;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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: #4a5568;
|
||||
color: #475467;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vol-aside ::v-deep(.el-sub-menu__title) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
margin: 3px 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 13.5px;
|
||||
color: #1a202c;
|
||||
// font-weight: 600;
|
||||
color: #344054;
|
||||
transition: background 0.2s;
|
||||
letter-spacing: 0.3px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.vol-aside ::v-deep(.el-menu-item:not(.is-active):hover) {
|
||||
background-color: #ebf4ff !important;
|
||||
color: #2d8cf0 !important;
|
||||
background-color: #f2f7ff !important;
|
||||
color: #176be7 !important;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
.vol-aside ::v-deep(.el-sub-menu__title:hover) {
|
||||
background-color: #f5f7fa !important;
|
||||
background-color: #f6f9fd !important;
|
||||
}
|
||||
.vol-aside ::v-deep(.el-menu-item.is-active) {
|
||||
background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
|
||||
color: #2d8cf0 !important;
|
||||
// font-weight: 600;
|
||||
box-shadow: inset 3px 0 0 #2d8cf0;
|
||||
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 ======
|
||||
|
||||
@ -267,8 +272,8 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e4e4e7 !important;
|
||||
box-shadow: none;
|
||||
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) {
|
||||
@ -300,7 +305,8 @@
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
border-bottom: 1px solid #e7edf6;
|
||||
box-shadow: 0 2px 10px rgba(31, 52, 88, 0.04);
|
||||
}
|
||||
.vol-container .vol-path span {
|
||||
position: relative;
|
||||
@ -318,7 +324,8 @@
|
||||
.vol-main {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #f1f3f6;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(244, 248, 255, 0.92) 0%, rgba(239, 244, 250, 0.96) 100%);
|
||||
bottom: 0;
|
||||
top: 38px;
|
||||
margin: 0;
|
||||
@ -397,10 +404,10 @@
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
height: 38px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0px 8px 0;
|
||||
padding: 0 10px;
|
||||
outline: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
@ -410,7 +417,7 @@
|
||||
}
|
||||
.el-tabs--border-card {
|
||||
border: none;
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
border-bottom: 1px solid #e7edf6;
|
||||
}
|
||||
.header-navigation ::v-deep(.el-tabs__nav-wrap) {
|
||||
margin-bottom: 0;
|
||||
@ -428,55 +435,47 @@
|
||||
overflow: visible;
|
||||
}
|
||||
.header-navigation ::v-deep(.el-tabs__item) {
|
||||
height: 37px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
line-height: 36px;
|
||||
padding: 0 14px !important;
|
||||
color: #000 !important;
|
||||
color: #667085 !important;
|
||||
position: relative;
|
||||
margin: 0 1px;
|
||||
border: none !important;
|
||||
border-radius: 8px 8px 0 0 !important;
|
||||
border-radius: 9px !important;
|
||||
background: transparent;
|
||||
transition: background 0.15s ease;
|
||||
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: #2d8cf0 !important;
|
||||
background: linear-gradient(90deg, #dbeeff 0%, #f0f8ff 100%) !important;
|
||||
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) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
border-bottom-right-radius: 8px;
|
||||
box-shadow: 3px 0 0 0 #dbeeff;
|
||||
display: none;
|
||||
}
|
||||
.header-navigation ::v-deep(.el-tabs__item.is-active::after) {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: -8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
border-bottom-left-radius: 8px;
|
||||
box-shadow: -3px 0 0 0 #f0f8ff;
|
||||
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: #2d8cf0 !important;
|
||||
background: #ebf4ff !important;
|
||||
border-radius: 8px !important;
|
||||
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) {
|
||||
@ -910,6 +909,34 @@ color: #bababa;
|
||||
.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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user