wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化深色模式

Browse Source
This commit is contained in:
不做码农 2022-05-01 19:17:07 +08:00
parent 14546c1d30
commit 62f42993fb
7 changed files with 152 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -20,7 +20,7 @@
## 🍿在线体验 ## 🍿在线体验
- 官方文档：http://www.izhaorui.cn/doc - 官方文档：http://www.izhaorui.cn/doc
- 体验地址：http://www.izhaorui.cn/vue3 - 体验地址：http://www.izhaorui.cn/vue-next-admin
- 管理员：admin - 管理员：admin
- 密 码：123456 - 密 码：123456

224
index.html
View File

@ -25,188 +25,112 @@
padding: 0.2em 0; padding: 0.2em 0;
} }
#loader-wrapper { .first-loading-wrp {
position: fixed; display: flex;
top: 0; flex-direction: column;
left: 0; align-items: center;
width: 100%; justify-content: center;
height: 100%; height: 90vh;
z-index: 999999; min-height: 90vh;
} }
#loader { .first-loading-wrp>h1 {
display: block; font-size: 30px;
font-weight: bolder;
}
.first-loading-wrp .loading-wrp {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
.dot {
position: relative; position: relative;
left: 50%; box-sizing: border-box;
top: 50%; display: inline-block;
width: 150px; width: 45px;
height: 150px; height: 45px;
margin: -75px 0 0 -75px; font-size: 64px;
border-radius: 50%; transform: rotate(45deg);
border: 3px solid transparent; animation: antRotate 1.2s infinite linear;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
} }
#loader:before { .dot i {
content: "";
position: absolute; position: absolute;
top: 5px; display: block;
left: 5px; width: 16px;
right: 5px; height: 16px;
bottom: 5px; background-color: #1890ff;
border-radius: 50%; border-radius: 100%;
border: 3px solid transparent; opacity: 0.3;
border-top-color: #FFF; transform: scale(0.75);
-webkit-animation: spin 3s linear infinite; transform-origin: 50% 50%;
-moz-animation: spin 3s linear infinite; animation: antSpinMove 1s infinite linear alternate;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
} }
#loader:after { .dot i:nth-child(1) {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0; top: 0;
width: 51%;
height: 100%;
background: #7171C6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0; left: 0;
} }
#loader-wrapper .loader-section.section-right { .dot i:nth-child(2) {
top: 0;
right: 0; right: 0;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
} }
.dot i:nth-child(3) {
.loaded #loader-wrapper .loader-section.section-left { right: 0;
-webkit-transform: translateX(-100%); bottom: 0;
-ms-transform: translateX(-100%); -webkit-animation-delay: 0.8s;
transform: translateX(-100%); animation-delay: 0.8s;
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader-wrapper .loader-section.section-right { .dot i:nth-child(4) {
-webkit-transform: translateX(100%); bottom: 0;
-ms-transform: translateX(100%); left: 0;
transform: translateX(100%); -webkit-animation-delay: 1.2s;
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); animation-delay: 1.2s;
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader { @keyframes antRotate {
opacity: 0; to {
-webkit-transition: all 0.3s ease-out; -webkit-transform: rotate(405deg);
transition: all 0.3s ease-out; transform: rotate(405deg);
}
} }
.loaded #loader-wrapper { @-webkit-keyframes antRotate {
visibility: hidden; to {
-webkit-transform: translateY(-100%); -webkit-transform: rotate(405deg);
-ms-transform: translateY(-100%); transform: rotate(405deg);
transform: translateY(-100%); }
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
} }
.no-js #loader-wrapper { @keyframes antSpinMove {
display: none; to {
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1; opacity: 1;
line-height: 30px; }
} }
#loader-wrapper .load_title span { @-webkit-keyframes antSpinMove {
font-weight: normal; to {
font-style: italic; opacity: 1;
font-size: 13px; }
color: #FFF;
opacity: 0.5;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div class="first-loading-wrp">
<div id="loader"></div> <div class="loading-wrp">
<div class="loader-section section-left"></div> <span class="dot dot-spin"> <i></i> <i></i> <i></i> <i></i> </span>
<div class="loader-section section-right"></div> </div>
<div class="load_title">正在加载系统资源，请耐心等待</div> <h2>ZRAdmin.NET</h2>
</div> </div>
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>

34
src/assets/styles/black.scss
View File

@ -1,14 +1,14 @@
// 黑夜模式 // 黑夜模式
[data-theme='theme-black'] { [data-theme='theme-black'] {
// root
--base-menu-color: #304156;
--base-menu-color-active: #f4f4f5;
--base-bg-main: #304156;
--base-menu-background: #304156;
--base-logo-title-color: #ffffff;
--base-topBar-background: #304156 !important;
--base-topBar-color: #fff;
--base-color: #304156; --base-color: #304156;
// root
--base-menu-color: var(--base-color);
--base-menu-color-active: #f4f4f5;
--base-bg-main: var(--base-color);
--base-menu-background: var(--base-color);
--base-logo-title-color: #ffffff;
--base-topBar-background: var(--base-color) !important;
--base-topBar-color: #fff;
// --base-tags-bg-border: #304156 !important; // --base-tags-bg-border: #304156 !important;
//缩小状态下子菜单选中颜色 //缩小状态下子菜单选中颜色
// --base-sub-menu-hover: #000; // --base-sub-menu-hover: #000;
@ -16,7 +16,6 @@
--next-color-white: #ffffff; --next-color-white: #ffffff;
--next-color-disabled: #304156; --next-color-disabled: #304156;
--next-color-bar: #dadada; --next-color-bar: #dadada;
--next-color-primary: #304156;
--next-border-color: #424242; --next-border-color: #424242;
--next-border-black: #333333; --next-border-black: #333333;
--next-text-color-regular: #9b9da1; --next-text-color-regular: #9b9da1;
@ -35,10 +34,10 @@
--el-border-color-light: var(--next-border-black) !important; --el-border-color-light: var(--next-border-black) !important;
--el-text-color-regular: var(--next-text-color-regular) !important; --el-text-color-regular: var(--next-text-color-regular) !important;
--el-bg-color: var(--base-bg-main) !important; --el-bg-color: var(--base-bg-main) !important;
--el-color-success-lighter: var(--next-color-primary) !important; --el-color-success-lighter: var(--base-color) !important;
--el-color-warning-lighter: var(--next-color-primary) !important; --el-color-warning-lighter: var(--base-color) !important;
--el-color-danger-lighter: var(--next-color-primary) !important; --el-color-danger-lighter: var(--base-color) !important;
--el-color-primary-lighter: var(--next-color-primary) !important; --el-color-primary-lighter: var(--base-color) !important;
--el-color-primary-light-9: var(--next-color-hover) !important; --el-color-primary-light-9: var(--next-color-hover) !important;
--el-text-color-disabled-base: var(--el-color-primary) !important; --el-text-color-disabled-base: var(--el-color-primary) !important;
--el-border-color-lighter: var(--next-border-black) !important; --el-border-color-lighter: var(--next-border-black) !important;
@ -87,7 +86,7 @@
background-color: var(--el-color-white) !important; background-color: var(--el-color-white) !important;
} }
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
background: var(--next-color-primary) !important; background: var(--base-color) !important;
} }
// alert / notice-bar // alert / notice-bar
@ -136,4 +135,11 @@
background-color: var(--base-color) !important; background-color: var(--base-color) !important;
// border-color: var(--base-color) !important; // border-color: var(--base-color) !important;
} }
// md 编辑器、图片加载错误、
.md,
.el-upload--picture-card,
.el-image__error {
background: none !important;
}
} }

2
src/components/Notice/Index.vue
View File

@ -52,7 +52,6 @@ function onGoToGiteeClick() {
</script> </script>
<style lang="scss"> <style lang="scss">
.layout-navbars-breadcrumb-user-news {
.head-box { .head-box {
display: flex; display: flex;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
@ -116,5 +115,4 @@ function onGoToGiteeClick() {
:deep(.el-empty__description p) { :deep(.el-empty__description p) {
font-size: 13px; font-size: 13px;
} }
}
</style> </style>

2
src/views/system/dept/index.vue
View File

@ -23,7 +23,7 @@
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="info" plain icon="sort" @click="toggleExpandAll">展开/折叠</el-button> <el-button type="info" plain icon="sort" @click="toggleExpandAll">展开/折叠</el-button>
</el-col> </el-col>
<right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table <el-table

2
src/views/system/role/index.vue
View File

@ -584,7 +584,7 @@ proxy.getDicts('sys_normal_disable').then((response) => {
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #ffffff none; background: var(--base-bg-main) none;
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
} }

2
src/views/tool/gen/index.vue
View File

@ -61,7 +61,7 @@ import { codeGenerator, listTable, delTable, previewTable, synchDb } from '@/api
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import importTable from './importTable' import importTable from './importTable'
import hljs from 'highlight.js' import hljs from 'highlight.js'
import 'highlight.js/styles/idea.css' // 这里有多个样式，自己可以根据需要切换 import 'highlight.js/styles/dark.css' // 这里有多个样式，自己可以根据需要切换
// const route = useRoute() // const route = useRoute()
const router = useRouter() const router = useRouter()