From 62f42993fb9840ffbc68cda615744b844d24f941 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com> Date: Sun, 1 May 2022 19:17:07 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B7=B1=E8=89=B2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- index.html | 226 +++++++++++--------------------- src/assets/styles/black.scss | 34 +++-- src/components/Notice/Index.vue | 108 ++++++++------- src/views/system/dept/index.vue | 2 +- src/views/system/role/index.vue | 2 +- src/views/tool/gen/index.vue | 2 +- 7 files changed, 152 insertions(+), 224 deletions(-) diff --git a/README.md b/README.md index 60abf38..ae3f434 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ ## 🍿在线体验 - 官方文档：http://www.izhaorui.cn/doc -- 体验地址：http://www.izhaorui.cn/vue3 +- 体验地址：http://www.izhaorui.cn/vue-next-admin - 管理员：admin - 密 码：123456 diff --git a/index.html b/index.html index db62c6a..85e0823 100644 --- a/index.html +++ b/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; + @keyframes antSpinMove { + to { + opacity: 1; + } } - .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; - 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; + } }
-
-
-
-
-
正在加载系统资源，请耐心等待
+
+
+ +
+

ZRAdmin.NET

diff --git a/src/assets/styles/black.scss b/src/assets/styles/black.scss index e458ec7..7e1628b 100644 --- a/src/assets/styles/black.scss +++ b/src/assets/styles/black.scss @@ -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; + } } diff --git a/src/components/Notice/Index.vue b/src/components/Notice/Index.vue index a2636e7..0aa92ff 100644 --- a/src/components/Notice/Index.vue +++ b/src/components/Notice/Index.vue @@ -52,69 +52,67 @@ function onGoToGiteeClick() { diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index af5fb95..9df7bf1 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -23,7 +23,7 @@ 展开/折叠 - + { .tree-border { margin-top: 5px; border: 1px solid #e5e6e7; - background: #ffffff none; + background: var(--base-bg-main) none; border-radius: 4px; width: 100%; } diff --git a/src/views/tool/gen/index.vue b/src/views/tool/gen/index.vue index f1cf6f1..2647dfc 100644 --- a/src/views/tool/gen/index.vue +++ b/src/views/tool/gen/index.vue @@ -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()