From 421c7b6a60dd6447d34a00d5039fe2a8bb270ef7 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, 15 May 2022 16:33:45 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=BB=91=E8=89=B2=E4=B8=BB?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/black.scss | 58 +++++------ src/assets/styles/variables.module.scss | 11 +- src/views/index_v1.vue | 131 +++--------------------- 3 files changed, 43 insertions(+), 157 deletions(-) diff --git a/src/assets/styles/black.scss b/src/assets/styles/black.scss index c27553b..e0420e5 100644 --- a/src/assets/styles/black.scss +++ b/src/assets/styles/black.scss @@ -1,48 +1,46 @@ // 黑夜模式 [data-theme='theme-black'] { - --base-color: #304156; + --base-color: #22272e; // #304156; --base-color-rgba: rgba(48, 65, 86, 0.3); + --base-color-white: #ffffff; + // 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-logo-title-color: var(--base-color-white); --base-topBar-background: var(--base-color) !important; - --base-topBar-color: #fff; + --base-topBar-color: var(--base-color-white); - --base-color-white: #ffffff; - --next-color-bar: #dadada; - --next-border-color: #424242; - --next-border-black: #333333; - --next-text-color-regular: #9b9da1; - --next-text-color-placeholder: #7a7a7a; - --next-color-hover: #3c3c3c; - --next-color-hover-rgba: rgba(0, 0, 0, 0.3); + --base-color-bar: #dadada; + --base-border-color: #424242; + --base-border-black: #333333; + --base-text-color-regular: #9b9da1; + --base-text-color-placeholder: #7a7a7a; + --base-color-hover: #3c3c3c; // el-ement ui 设置 - --el-fill-color-light: var(--next-color-hover-rgba) !important; + --el-fill-color-light: var(--base-color-rgba) !important; --el-fill-color-blank: var(--base-bg-main) !important; - // element plus - --el-table-bg-color: var(--el-fill-color-blank); + // --el-table-bg-color: var(--el-fill-color-blank); --el-color-white: var(--base-color) !important; - --el-text-color-primary: var(--next-color-bar) !important; - --el-border-color-base: 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-primary: var(--base-color-bar) !important; + --el-border-color-base: var(--base-border-black) !important; + --el-border-color-light: var(--base-border-black) !important; + --el-text-color-regular: var(--base-text-color-regular) !important; --el-bg-color: var(--base-bg-main) !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-color-primary-light-9: var(--base-color-hover) !important; --el-text-color-disabled-base: var(--el-color-primary) !important; - --el-border-color-lighter: var(--next-border-black) !important; - --el-text-color-placeholder: var(--next-text-color-placeholder) !important; - --el-disabled-bg-color: var(--base-color) !important; + --el-border-color-lighter: var(--base-border-black) !important; + // --el-text-color-placeholder: var(--base-text-color-placeholder) !important; + // --el-disabled-bg-color: var(--base-color) !important; --el-fill-base: var(--base-color-white) !important; // el-date-picker bg --el-bg-color-overlay: var(--base-bg-main) !important; + --el-disabled-text-color: var(--base-bg-main) !important; // drawer .drawer-item, .drawer-title { @@ -82,11 +80,11 @@ // alert / notice-bar .home-card-item { - border: 1px solid var(--next-border-color-light) !important; + border: 1px solid var(--base-border-color-light) !important; } .el-alert, .notice-bar { - border: 1px solid var(--next-border-color) !important; + border: 1px solid var(--base-border-color) !important; background-color: var(--base-color) !important; } @@ -95,16 +93,16 @@ background: unset !important; } .el-color-picker__trigger { - border: 1px solid var(--next-border-color-light) !important; + border: 1px solid var(--base-border-color-light) !important; } // popper / dropdown .el-popper { - border: 1px solid var(--next-border-color) !important; + border: 1px solid var(--base-border-color) !important; color: var(--el-text-color-primary) !important; .el-popper__arrow:before { background: var(--el-color-white) !important; - border: 1px solid var(--next-border-color); + border: 1px solid var(--base-border-color); } a { color: var(--el-text-color-primary) !important; @@ -133,7 +131,7 @@ .el-image__error { background: none !important; } - //el table loading mask + //el table loading mask .el-loading-mask { background-color: var(--base-color-rgba) !important; } diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index 421bb6e..797b330 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -10,32 +10,23 @@ $panGreen: #30b08f; // 默认菜单主题风格 :root { - --base-menu-color: #bfcbd9; - --base-menu-color-active: #f4f4f5; --base-menu-background: #ffffff; --base-logo-title-color: #ffffff; --base-topBar-background: #ffffff; - --base-topBar-color: #5a5e66; + --base-topBar-color: #5a5e66; --base-sidebar-width: 210px; - - --base-tags-bg-border: #d8dce5; } /***默认主题颜色配置***/ [data-theme='theme-light'] { - --base-menu-color: #bfcbd9; - --base-menu-color-active: #f4f4f5; // 菜单背景 --base-menu-background: #ffffff; // logo部分文字颜色 --base-logo-title-color: #001529; // 顶部导航栏背景色 --base-topBar-background: #ffffff; - } /***深色主题颜色配置***/ [data-theme='theme-dark'] { - --base-menu-color: #bfcbd9; - --base-menu-color-active: #f4f4f5; --base-menu-background: #304156; --base-logo-title-color: #ffffff; --base-topBar-background: #ffffff; diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue index 6ff7980..582c27b 100644 --- a/src/views/index_v1.vue +++ b/src/views/index_v1.vue @@ -65,19 +65,20 @@
-
- -
+ +
+
    +
  • +
    +
    +
    • +
@@ -119,8 +120,8 @@ import LineChart from './dashboard/LineChart' import RaddarChart from './dashboard/RaddarChart' import PieChart from './dashboard/PieChart' import BarChart from './dashboard/BarChart' -import { Vue3SeamlessScroll } from 'vue3-seamless-scroll' -import { listNewArticle } from '@/api/article/article.js' +// import { Vue3SeamlessScroll } from 'vue3-seamless-scroll' + import dayjs from 'dayjs' const data = { @@ -151,11 +152,7 @@ const currentTime = computed(() => { const onlineUsers = computed(() => { return proxy.$store.getters.onlineUsers }) -let newArticleList = reactive([]) -listNewArticle().then((res) => { - newArticleList = res.data -}) let lineChartData = reactive([]) const dataType = ref(null) function handleSetLineChartData(type) { @@ -175,12 +172,7 @@ function onOpenGitee() {} padding: 3px 0; font-size: 13px; } - .home-card-time { - float: right; - font-size: 13px; - width: 130px; - margin-top: -4px; - } + .user-item { height: 198px; display: flex; @@ -219,7 +211,7 @@ function onOpenGitee() {} // overflow-y: scroll; .info-scroll { height: 100%; - overflow-y: scroll; + overflow: auto; .info-ul { list-style: none; padding: 0; @@ -250,101 +242,6 @@ function onOpenGitee() {} } } } - .home-recommend-row { - .home-recommend { - position: relative; - height: 100px; - color: #ffffff; - border-radius: 4px; - overflow: hidden; - cursor: pointer; - - &:hover { - i { - right: 0px !important; - bottom: 0px !important; - transition: all ease 0.3s; - } - } - - i { - position: absolute; - right: -10px; - bottom: -10px; - font-size: 70px; - transform: rotate(-30deg); - transition: all ease 0.3s; - } - - .home-recommend-auto { - padding: 15px; - position: absolute; - left: 0; - top: 5%; - .home-recommend-msg { - font-size: 12px; - margin-top: 10px; - } - } - } - } - .charts { - width: 100%; - height: 282.6px; - display: flex; - padding: 12px 15px; - .charts-left { - flex: 1; - height: 100%; - } - .charts-right { - flex: 1; - height: 100%; - } - } - .home-charts { - height: 282.6px; - .home-charts-item { - background-color: #f5f5f5; - padding: 19px 15px; - border-radius: 2px; - display: flex; - align-items: center; - margin-bottom: 12px; - cursor: pointer; - - &:last-of-type { - margin-bottom: 0; - } - - &:hover { - .home-charts-item-right { - i { - transform: rotate(45deg); - transition: all ease 0.3s; - } - } - } - .home-charts-item-left { - flex: 1; - .home-charts-item-title { - font-size: 13px; - } - .home-charts-item-num { - font-size: 20px; - margin-top: 5px; - } - } - .home-charts-item-right { - i { - font-size: 20px; - padding: 8px; - border-radius: 100%; - transition: all ease 0.3s; - } - } - } - } } .dashboard-editor-container { padding: 18px;