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-15 16:33:45 +08:00
parent 1241561ecf
commit 421c7b6a60
3 changed files with 43 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

11
src/assets/styles/variables.module.scss
View File

@ -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;

131
src/views/index_v1.vue
View File

@ -65,19 +65,20 @@
<template #header>
<div>
<span>在线用户</span>
<el-button class="home-card-more" type="text" @click="onOpenGitee">更多</el-button>
<el-button class="home-card-more" text @click="onOpenGitee">更多</el-button>
</div>
</template>
<div class="info">
<!-- <vue3-seamless-scroll :list="onlineUsers" class="info-scroll" :step="0.2" :limitScrollNum="1"> -->
<div class="info-scroll">
<ul class="info-ul">
<li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
<div class="info-item-left" v-text="v.name"></div>
<div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
</li>
</ul>
</div>
<el-scrollbar wrap-class="scrollbar-wrapper">
<div class="info-scroll">
<ul class="info-ul">
<li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
<div class="info-item-left" v-text="v.name"></div>
<div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
</li>
</ul></div
></el-scrollbar>
<!-- </vue3-seamless-scroll> -->
</div>
</el-card>
@ -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;