优化深色模式
This commit is contained in:
不做码农
parent
14546c1d30
commit
62f42993fb
@ -20,7 +20,7 @@
|
||||
|
||||
## 🍿在线体验
|
||||
- 官方文档：http://www.izhaorui.cn/doc
|
||||
- 体验地址：http://www.izhaorui.cn/vue3
|
||||
- 体验地址：http://www.izhaorui.cn/vue-next-admin
|
||||
- 管理员：admin
|
||||
- 密 码：123456
|
||||
|
||||
|
||||
224
index.html
224
index.html
@ -25,188 +25,112 @@
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
#loader-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
.first-loading-wrp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 90vh;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: block;
|
||||
.first-loading-wrp>h1 {
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.first-loading-wrp .loading-wrp {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 64px;
|
||||
transform: rotate(45deg);
|
||||
animation: antRotate 1.2s infinite linear;
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
.dot i {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #FFF;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 100%;
|
||||
opacity: 0.3;
|
||||
transform: scale(0.75);
|
||||
transform-origin: 50% 50%;
|
||||
animation: antSpinMove 1s infinite linear alternate;
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
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;
|
||||
.dot i:nth-child(1) {
|
||||
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;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
.dot i:nth-child(2) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-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);
|
||||
.dot i:nth-child(3) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-webkit-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-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);
|
||||
.dot i:nth-child(4) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
@keyframes antRotate {
|
||||
to {
|
||||
-webkit-transform: rotate(405deg);
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
-webkit-transition: all 0.3s 1s ease-out;
|
||||
transition: all 0.3s 1s ease-out;
|
||||
@-webkit-keyframes antRotate {
|
||||
to {
|
||||
-webkit-transform: rotate(405deg);
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
}
|
||||
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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%;
|
||||
@keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #FFF;
|
||||
opacity: 0.5;
|
||||
@-webkit-keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader"></div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||
<div class="first-loading-wrp">
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin"> <i></i> <i></i> <i></i> <i></i> </span>
|
||||
</div>
|
||||
<h2>ZRAdmin.NET</h2>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
// 黑夜模式
|
||||
[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;
|
||||
// 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-sub-menu-hover: #000;
|
||||
@ -16,7 +16,6 @@
|
||||
--next-color-white: #ffffff;
|
||||
--next-color-disabled: #304156;
|
||||
--next-color-bar: #dadada;
|
||||
--next-color-primary: #304156;
|
||||
--next-border-color: #424242;
|
||||
--next-border-black: #333333;
|
||||
--next-text-color-regular: #9b9da1;
|
||||
@ -35,10 +34,10 @@
|
||||
--el-border-color-light: var(--next-border-black) !important;
|
||||
--el-text-color-regular: var(--next-text-color-regular) !important;
|
||||
--el-bg-color: var(--base-bg-main) !important;
|
||||
--el-color-success-lighter: var(--next-color-primary) !important;
|
||||
--el-color-warning-lighter: var(--next-color-primary) !important;
|
||||
--el-color-danger-lighter: var(--next-color-primary) !important;
|
||||
--el-color-primary-lighter: var(--next-color-primary) !important;
|
||||
--el-color-success-lighter: var(--base-color) !important;
|
||||
--el-color-warning-lighter: var(--base-color) !important;
|
||||
--el-color-danger-lighter: var(--base-color) !important;
|
||||
--el-color-primary-lighter: var(--base-color) !important;
|
||||
--el-color-primary-light-9: var(--next-color-hover) !important;
|
||||
--el-text-color-disabled-base: var(--el-color-primary) !important;
|
||||
--el-border-color-lighter: var(--next-border-black) !important;
|
||||
@ -87,7 +86,7 @@
|
||||
background-color: var(--el-color-white) !important;
|
||||
}
|
||||
.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
|
||||
@ -136,4 +135,11 @@
|
||||
background-color: var(--base-color) !important;
|
||||
// border-color: var(--base-color) !important;
|
||||
}
|
||||
|
||||
// md 编辑器、图片加载错误、
|
||||
.md,
|
||||
.el-upload--picture-card,
|
||||
.el-image__error {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,7 +52,6 @@ function onGoToGiteeClick() {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-navbars-breadcrumb-user-news {
|
||||
.head-box {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
@ -116,5 +115,4 @@ function onGoToGiteeClick() {
|
||||
:deep(.el-empty__description p) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="sort" @click="toggleExpandAll">展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
|
||||
@ -584,7 +584,7 @@ proxy.getDicts('sys_normal_disable').then((response) => {
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #e5e6e7;
|
||||
background: #ffffff none;
|
||||
background: var(--base-bg-main) none;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ import { codeGenerator, listTable, delTable, previewTable, synchDb } from '@/api
|
||||
import { useRouter } from 'vue-router'
|
||||
import importTable from './importTable'
|
||||
import hljs from 'highlight.js'
|
||||
import 'highlight.js/styles/idea.css' // 这里有多个样式，自己可以根据需要切换
|
||||
import 'highlight.js/styles/dark.css' // 这里有多个样式，自己可以根据需要切换
|
||||
|
||||
// const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user