mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
feat: add global night mode; 🌟
新增：全局夜晚模式；
This commit is contained in:
iczer
parent
98e02874ed
commit
4063a4f08a
@ -33,9 +33,15 @@ export default {
|
||||
lang(val) {
|
||||
this.setLanguage(val)
|
||||
},
|
||||
theme(val) {
|
||||
let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
|
||||
themeUtil.changeThemeColor(this.themeColor, val).then(() => {
|
||||
setTimeout(closeMessage, 1000)
|
||||
})
|
||||
},
|
||||
themeColor(val) {
|
||||
let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
|
||||
themeUtil.changeThemeColor(val).then(() => {
|
||||
themeUtil.changeThemeColor(val, this.theme).then(() => {
|
||||
setTimeout(closeMessage, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.chart-card-header{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -52,7 +52,6 @@ export default {
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
font-size: 30px;
|
||||
|
||||
@ -30,12 +30,12 @@ export default {
|
||||
li {
|
||||
margin-top: 16px;
|
||||
span {
|
||||
color: rgba(0,0,0,.65);
|
||||
color: @text-color-second;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
span:first-child {
|
||||
background-color: #f5f5f5;
|
||||
background-color: @bg-color;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
@ -47,8 +47,8 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
span.active {
|
||||
background-color: #314659;
|
||||
color: #fff;
|
||||
background-color: #314659 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
span:last-child {
|
||||
float: right;
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
background-color: @base-bg-color;
|
||||
.img{
|
||||
padding-right: 52px;
|
||||
zoom: 1;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
|
||||
<a-layout-sider :theme="sideTheme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
|
||||
<div :class="['logo', theme]">
|
||||
<router-link to="/dashboard/workplace">
|
||||
<img src="@/assets/img/logo.png">
|
||||
@ -39,6 +39,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sideTheme() {
|
||||
return this.theme == 'light' ? this.theme : 'dark'
|
||||
},
|
||||
...mapState('setting', ['isMobile', 'systemName'])
|
||||
},
|
||||
methods: {
|
||||
@ -51,41 +54,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.shadow{
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
}
|
||||
.side-menu{
|
||||
min-height: 100%;
|
||||
z-index: 10;
|
||||
.logo{
|
||||
height: 64px;
|
||||
position: relative;
|
||||
line-height: 64px;
|
||||
padding-left: 24px;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
background-color: @layout-trigger-background;
|
||||
&.light{
|
||||
background-color: #fff;
|
||||
h1{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin: 0 0 0 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
padding: 16px 0;
|
||||
}
|
||||
@import "index";
|
||||
</style>
|
||||
|
||||
37
src/components/menu/index.less
Normal file
37
src/components/menu/index.less
Normal file
@ -0,0 +1,37 @@
|
||||
.shadow{
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
}
|
||||
.side-menu{
|
||||
min-height: 100%;
|
||||
z-index: 10;
|
||||
.logo{
|
||||
height: 64px;
|
||||
position: relative;
|
||||
line-height: 64px;
|
||||
padding-left: 24px;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
background-color: @layout-trigger-background;
|
||||
&.light{
|
||||
background-color: #fff;
|
||||
h1{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
color: @menu-dark-highlight-color;
|
||||
font-size: 20px;
|
||||
margin: 0 0 0 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
padding: 16px 0;
|
||||
}
|
||||
@ -73,6 +73,9 @@ export default {
|
||||
keys.push(item.path)
|
||||
})
|
||||
return keys
|
||||
},
|
||||
menuTheme() {
|
||||
return this.theme == 'light' ? this.theme : 'dark'
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
@ -212,7 +215,7 @@ export default {
|
||||
Menu,
|
||||
{
|
||||
props: {
|
||||
theme: this.$props.theme,
|
||||
theme: this.menuTheme,
|
||||
mode: this.$props.mode,
|
||||
openKeys: this.openKeys,
|
||||
selectedKeys: this.selectedKeys
|
||||
|
||||
@ -57,46 +57,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-header{
|
||||
background: #fff;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
.page-header-wide{
|
||||
&.head{
|
||||
margin: auto;
|
||||
max-width: 1400px;
|
||||
}
|
||||
&.side{
|
||||
}
|
||||
.breadcrumb{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.avatar {
|
||||
margin:0 24px 0 0;
|
||||
}
|
||||
.main{
|
||||
width: 100%;
|
||||
.title{
|
||||
font-size: 20px;
|
||||
color: rgba(0,0,0,.85);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.extra{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "index";
|
||||
</style>
|
||||
42
src/components/page/header/index.less
Normal file
42
src/components/page/header/index.less
Normal file
@ -0,0 +1,42 @@
|
||||
.page-header{
|
||||
background: @base-bg-color;
|
||||
padding: 16px 24px;
|
||||
.page-header-wide{
|
||||
&.head{
|
||||
margin: auto;
|
||||
max-width: 1400px;
|
||||
}
|
||||
&.side{
|
||||
}
|
||||
.breadcrumb{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.avatar {
|
||||
margin:0 24px 0 0;
|
||||
}
|
||||
.main{
|
||||
width: 100%;
|
||||
.title{
|
||||
font-size: 20px;
|
||||
color: @title-color;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: @text-color-second;
|
||||
}
|
||||
.extra{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,11 +35,11 @@ export default {
|
||||
color: @success-color;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
color: @error-color;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-bottom: 16px;
|
||||
@ -47,11 +47,11 @@ export default {
|
||||
.desc{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
color: @text-color-second;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.content{
|
||||
background: #fafafa;
|
||||
background-color: @background-color-light;
|
||||
padding: 24px 40px;
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<img-checkbox-group @change="values => setTheme(values[0])" :default-values="[theme]">
|
||||
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
|
||||
<img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
|
||||
<img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
|
||||
</img-checkbox-group>
|
||||
</setting-item>
|
||||
<setting-item :title="$t('theme.color')">
|
||||
@ -136,7 +137,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.side-setting{
|
||||
min-height: 100%;
|
||||
background-color: #fff;
|
||||
background-color: @base-bg-color;
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
|
||||
@ -5,6 +5,7 @@ module.exports = {
|
||||
title: '整体风格设置',
|
||||
light: '亮色菜单风格',
|
||||
dark: '暗色菜单风格',
|
||||
night: '深夜模式',
|
||||
color: '主题色'
|
||||
},
|
||||
navigate: {
|
||||
@ -36,6 +37,7 @@ module.exports = {
|
||||
title: '整體風格設置',
|
||||
light: '亮色菜單風格',
|
||||
dark: '暗色菜單風格',
|
||||
night: '深夜模式',
|
||||
color: '主題色'
|
||||
},
|
||||
navigate: {
|
||||
@ -67,6 +69,7 @@ module.exports = {
|
||||
title: 'Page Style Setting',
|
||||
light: 'Light Style',
|
||||
dark: 'Dark Style',
|
||||
night: 'Night Style',
|
||||
color: 'Theme Color'
|
||||
},
|
||||
navigate: {
|
||||
|
||||
@ -49,9 +49,9 @@ export default {
|
||||
.task-group{
|
||||
width: 33.33%;
|
||||
padding: 8px 8px;
|
||||
background-color: #e1e4e8;
|
||||
background-color: @background-color-light;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d1d4d8;
|
||||
border: 1px solid @shadow-color;
|
||||
.task-head{
|
||||
margin-bottom: 8px;
|
||||
.title{
|
||||
|
||||
@ -16,7 +16,6 @@ export default {
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 1px rgba(27,31,35,0.1);
|
||||
border-radius: 6px;
|
||||
color: #24292e;
|
||||
& :hover{
|
||||
cursor: move;
|
||||
box-shadow: 0 1px 1px rgba(27,31,35,0.15);
|
||||
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
.detail-list{
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
line-height: 20px;
|
||||
padding-bottom: 16px;
|
||||
margin-right: 8px;
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
white-space: nowrap;
|
||||
display: table-cell;
|
||||
&:after {
|
||||
@ -125,13 +125,13 @@ export default {
|
||||
line-height: 22px;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
color: rgba(0,0,0,.65);
|
||||
color: @text-color;
|
||||
display: table-cell;
|
||||
}
|
||||
&.small{
|
||||
.title{
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.65);
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: @shadow-color;
|
||||
transition: all 0.5s;
|
||||
z-index: 100;
|
||||
&.open{
|
||||
@ -133,9 +133,9 @@ export default {
|
||||
.handler {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: #fff;
|
||||
background-color: @base-bg-color;
|
||||
font-size: 26px;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 8px @shadow-color;
|
||||
line-height: 40px;
|
||||
}
|
||||
&.left{
|
||||
|
||||
@ -22,8 +22,8 @@ export default {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
|
||||
background: #fff;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
background: @base-bg-color;
|
||||
border-top: 1px solid @border-color-split;
|
||||
padding: 12px 24px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
@ -20,13 +20,13 @@ export default {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
span{
|
||||
color: rgba(0,0,0,.45);
|
||||
color: @text-color-second;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p{
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @text-color;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
// 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
|
||||
module.exports = {
|
||||
themeColor: '#13c2c2',
|
||||
theme: 'night'
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const animates = require('./animates')
|
||||
const setting = require('./setting')
|
||||
const theme = require('./theme')
|
||||
|
||||
module.exports = {setting, animates}
|
||||
module.exports = {setting, animates, theme}
|
||||
|
||||
64
src/config/default/theme.js
Normal file
64
src/config/default/theme.js
Normal file
@ -0,0 +1,64 @@
|
||||
// 亮色模式
|
||||
const light = {
|
||||
'layout-body-background': '#f0f2f5',
|
||||
'body-background': '#fff',
|
||||
'component-background': '#fff',
|
||||
'heading-color': 'rgba(0, 0, 0, 0.85)',
|
||||
'text-color': 'rgba(0, 0, 0, 0.65)',
|
||||
'text-color-inverse': '#fff',
|
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
|
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)',
|
||||
'border-color-split': '#f0f0f0',
|
||||
'background-color-light': '#fafafa',
|
||||
'table-selected-row-bg': '#fafafa',
|
||||
'checkbox-check-color': '#fff',
|
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)',
|
||||
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#fff',
|
||||
}
|
||||
|
||||
// 暗色模式
|
||||
const dark = {
|
||||
'layout-body-background': '#f0f2f5',
|
||||
'body-background': '#fff',
|
||||
'component-background': '#fff',
|
||||
'heading-color': 'rgba(0, 0, 0, 0.85)',
|
||||
'text-color': 'rgba(0, 0, 0, 0.65)',
|
||||
'text-color-inverse': '#fff',
|
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
|
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)',
|
||||
'border-color-split': '#f0f0f0',
|
||||
'background-color-light': '#fafafa',
|
||||
'table-selected-row-bg': '#fafafa',
|
||||
'checkbox-check-color': '#fff',
|
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)',
|
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#fff',
|
||||
}
|
||||
|
||||
// 黑夜模式
|
||||
const night = {
|
||||
'layout-body-background': '#000',
|
||||
'body-background': '#141414',
|
||||
'component-background': '#141414',
|
||||
'heading-color': 'rgba(255, 255, 255, 0.85)',
|
||||
'text-color': 'rgba(255, 255, 255, 0.85)',
|
||||
'text-color-inverse': '#141414',
|
||||
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
|
||||
'shadow-color': 'rgba(255, 255, 255, 0.15)',
|
||||
'border-color-split': '#303030',
|
||||
'background-color-light': '#404040',
|
||||
'table-selected-row-bg': '#404040',
|
||||
'checkbox-check-color': '#141414',
|
||||
'disabled-color': 'rgba(255, 255, 255, 0.25)',
|
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#141414',
|
||||
}
|
||||
|
||||
module.exports = {light, dark, night}
|
||||
@ -24,12 +24,17 @@ export default {
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
|
||||
background-color: @layout-body-background;
|
||||
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: 110px;
|
||||
background-size: 100%;
|
||||
.content{
|
||||
padding: 32px 0;
|
||||
flex: 1;
|
||||
@media (min-width: 768px){
|
||||
|
||||
padding: 112px 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '../components/page/PageHeader'
|
||||
import PageHeader from '@/components/page/header/PageHeader'
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name: 'PageLayout',
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.page-header{
|
||||
margin: -24px -24px 0;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<a-divider v-if="isMobile" type="vertical" />
|
||||
<a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
|
||||
<div v-if="layout == 'head' && !isMobile" class="admin-header-menu">
|
||||
<i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
|
||||
<i-menu class="head-menu" style="height: 64px; line-height: 64px;box-shadow: none" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
|
||||
</div>
|
||||
<div :class="['admin-header-right', headerTheme]">
|
||||
<header-search class="header-item" />
|
||||
@ -56,7 +56,11 @@ export default {
|
||||
computed: {
|
||||
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
|
||||
headerTheme () {
|
||||
return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
|
||||
if (this.layout == 'side' && this.theme == 'dark' && !this.isMobile) {
|
||||
return 'light'
|
||||
}
|
||||
return this.theme
|
||||
// return (this.layout == 'side' && !this.isMobile && this.theme != 'night') ? 'light' : this.theme
|
||||
},
|
||||
langAlias() {
|
||||
let lang = this.langList.find(item => item.key == this.lang)
|
||||
@ -76,89 +80,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.trigger {
|
||||
font-size: 20px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
.admin-header{
|
||||
padding: 0;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
&.light{
|
||||
background: #fff;
|
||||
}
|
||||
&.dark{
|
||||
.trigger{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.admin-header-wide{
|
||||
&.head{
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
}
|
||||
&.side{
|
||||
padding-right: 12px;
|
||||
}
|
||||
.logo {
|
||||
height: 64px;
|
||||
line-height: 58px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0 12px 0 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
&.pc{
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
h1{
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
&.dark h1{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.admin-header-menu{
|
||||
display: inline-block;
|
||||
}
|
||||
.admin-header-right{
|
||||
float: right;
|
||||
display: flex;
|
||||
&.dark{
|
||||
color: #fff;
|
||||
a, i{
|
||||
color: #fff !important;
|
||||
}
|
||||
.header-item:hover{
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
.header-item{
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
&:hover{
|
||||
background-color: @gray-3;
|
||||
}
|
||||
i{
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "index";
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<a-dropdown :trigger="['click']" v-model="show">
|
||||
<div slot="overlay">
|
||||
<a-spin :spinning="loading">
|
||||
<a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{backgroundColor: 'white', width: '297px'}">
|
||||
<a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
|
||||
<a-tab-pane tab="通知" key="1">
|
||||
<a-list class="tab-pane">
|
||||
<a-list-item>
|
||||
@ -32,7 +32,7 @@
|
||||
</a-spin>
|
||||
</div>
|
||||
<span @click="fetchNotice" class="header-notice">
|
||||
<a-badge count="12">
|
||||
<a-badge class="notice-badge" count="12">
|
||||
<a-icon :class="['header-notice-icon']" type="bell" />
|
||||
</a-badge>
|
||||
</span>
|
||||
@ -65,20 +65,24 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
.header-notice-icon{
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
.notice-badge{
|
||||
color: inherit;
|
||||
.header-notice-icon{
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-tabs{
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
background-color: @base-bg-color;
|
||||
box-shadow: 0 2px 8px @shadow-color;
|
||||
border-radius: 4px;
|
||||
.tab-pane{
|
||||
padding: 0 24px 12px;
|
||||
|
||||
84
src/layouts/header/index.less
Normal file
84
src/layouts/header/index.less
Normal file
@ -0,0 +1,84 @@
|
||||
.admin-header{
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
box-shadow: @shadow-down;
|
||||
position: relative;
|
||||
background: @base-bg-color;
|
||||
&.dark{
|
||||
background: @header-bg-color-dark;
|
||||
color: white;
|
||||
}
|
||||
&.night{
|
||||
.head-menu{
|
||||
background: @base-bg-color;
|
||||
}
|
||||
}
|
||||
.admin-header-wide{
|
||||
&.head{
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
}
|
||||
&.side{
|
||||
padding-right: 12px;
|
||||
}
|
||||
.logo {
|
||||
height: 64px;
|
||||
line-height: 58px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0 12px 0 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: inherit;
|
||||
&.pc{
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
h1{
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.trigger {
|
||||
font-size: 20px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
.admin-header-menu{
|
||||
display: inline-block;
|
||||
}
|
||||
.admin-header-right{
|
||||
float: right;
|
||||
display: flex;
|
||||
color: inherit;
|
||||
.header-item{
|
||||
color: inherit;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
a{
|
||||
color: inherit;
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
each(@theme-list, {
|
||||
&.@{value} .header-item{
|
||||
&:hover{
|
||||
@class: ~'hover-bg-color-@{value}';
|
||||
background-color: @@class;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
.num-info{
|
||||
.title{
|
||||
color: rgba(0,0,0,.45);
|
||||
color: @text-color-second;
|
||||
font-size: 14px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
}
|
||||
.value{
|
||||
.total{
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
margin-right: 32px;
|
||||
}
|
||||
.subtotal{
|
||||
color: rgba(0,0,0,.45);
|
||||
color: @text-color-second;
|
||||
font-size: 16px;
|
||||
vertical-align: top;
|
||||
margin-right: 0;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<head-info class="split-right" :title="$t('ranking')" content="8/24"/>
|
||||
<head-info class="split-right" :title="$t('visit')" content="2,223"/>
|
||||
</template>
|
||||
<div>
|
||||
<template>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
|
||||
<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')" :body-style="{padding: 0}">
|
||||
@ -20,11 +20,11 @@
|
||||
<a-card-meta :description="item.desc">
|
||||
<div slot="title" class="card-title">
|
||||
<a-avatar size="small" :src="item.logo" />
|
||||
<a>Alipay</a>
|
||||
<span>Alipay</span>
|
||||
</div>
|
||||
</a-card-meta>
|
||||
<div class="project-item">
|
||||
<a href="/#/">科学搬砖组</a>
|
||||
<a class="group" href="/#/">科学搬砖组</a>
|
||||
<span class="datetime">9小时前</span>
|
||||
</div>
|
||||
</a-card>
|
||||
@ -74,7 +74,7 @@
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
@ -146,82 +146,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.project-list {
|
||||
.card-title {
|
||||
font-size: 0;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-left: 12px;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: inline-block;
|
||||
flex: 1 1 0;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
flex: 0 0 auto;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.item-group{
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
a{
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 13px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
.member {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.65);
|
||||
line-height: 24px;
|
||||
max-width: 100px;
|
||||
vertical-align: top;
|
||||
margin-left: 12px;
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "index";
|
||||
</style>
|
||||
|
||||
59
src/pages/dashboard/workplace/index.less
Normal file
59
src/pages/dashboard/workplace/index.less
Normal file
@ -0,0 +1,59 @@
|
||||
.project-list {
|
||||
.card-title {
|
||||
span{
|
||||
vertical-align: middle;
|
||||
&:last-child{
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
color: inherit;
|
||||
.group{
|
||||
color: @text-color;
|
||||
flex: 1 1 0;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
.datetime {
|
||||
color: @text-color-second;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
.ant-card-meta-description {
|
||||
height: 44px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.item-group{
|
||||
padding: 20px 0 8px 24px;
|
||||
font-size: 0;
|
||||
a{
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 13px;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.members {
|
||||
a {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
color: @text-color;
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
.member {
|
||||
vertical-align: middle;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -199,7 +199,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.title {
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import RepositoryForm from './RepositoryForm'
|
||||
import TaskForm from './TaskForm'
|
||||
import UserForm from './UserForm'
|
||||
import FooterToolBar from '../../../components/tool/FooterToolBar'
|
||||
import FooterToolBar from '@/components/tool/FooterToolBar'
|
||||
|
||||
export default {
|
||||
name: 'AdvancedForm',
|
||||
|
||||
@ -63,7 +63,6 @@ export default {
|
||||
border-radius: 48px;
|
||||
}
|
||||
.new-btn{
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 187px;
|
||||
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list-content-item{
|
||||
color: rgba(0,0,0,.45);
|
||||
color: @text-color-second;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div class="search-head">
|
||||
<div class="search-input">
|
||||
<a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
|
||||
<a-input-search class="search-ipt" style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
|
||||
</div>
|
||||
<div style="padding: 0 24px">
|
||||
<a-tabs :tabBarStyle="{margin: 0}" @change="navigate" :activeKey="activeKey">
|
||||
@ -57,7 +57,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search-head{
|
||||
background-color: #fff;
|
||||
background-color: @base-bg-color;
|
||||
margin: -25px -24px -24px;
|
||||
.search-input{
|
||||
text-align: center;
|
||||
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
}
|
||||
.title {
|
||||
font-size: 33px;
|
||||
color: rgba(0,0,0,.85);
|
||||
color: @title-color;
|
||||
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
}
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.45);
|
||||
color: @text-color-second;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@ -157,7 +157,7 @@ export default {
|
||||
}
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
color: @text-color-second;
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<a-button type="primary" >返回修改</a-button>
|
||||
</template>
|
||||
<div>
|
||||
<div style="fontSize: 16px; color: rgba(0, 0, 0, 0.85); fontWeight: 500; marginBottom: 16px">
|
||||
<div style="fontSize: 16px; fontWeight: 500; marginBottom: 16px">
|
||||
您提交的内容有如下错误：
|
||||
</div>
|
||||
<div style="margin-bottom: 16px">
|
||||
|
||||
@ -14,3 +14,21 @@
|
||||
@gray-11: #1f1f1f;
|
||||
@gray-12: #141414;
|
||||
@gray-13: #000000;
|
||||
|
||||
@title-color: @heading-color;
|
||||
@text-color: @text-color;
|
||||
@text-color-second: @text-color-secondary;
|
||||
@base-bg-color: @body-background;
|
||||
@bg-color: @layout-body-background;
|
||||
@hover-bg-color: rgba(0, 0, 0, 0.025);
|
||||
@hover-bg-color-light: @hover-bg-color;
|
||||
@hover-bg-color-dark: @primary-7;
|
||||
@hover-bg-color-night: rgba(255, 255, 255, 0.025);
|
||||
@header-bg-color-dark: @layout-header-background;
|
||||
|
||||
@shadow-down: @shadow-1-down;
|
||||
@shadow-up: @shadow-1-up;
|
||||
@shadow-left: @shadow-1-left;
|
||||
@shadow-right: @shadow-1-right;
|
||||
|
||||
@theme-list: light, dark, night;
|
||||
|
||||
@ -3,8 +3,13 @@ const varyColor = require('webpack-theme-color-replacer/client/varyColor')
|
||||
const antPrimaryColor = '#1890ff'
|
||||
// ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
|
||||
const antDarkColors = ['#000c17', '#001529', '#002140']
|
||||
const nightColors = ['#151515', '#1f1f1f', '#1f1f1f']
|
||||
|
||||
function getDarkColors(color) {
|
||||
|
||||
function getDarkColors(color, theme) {
|
||||
if (theme == 'night') {
|
||||
return nightColors
|
||||
}
|
||||
if (color == antPrimaryColor) {
|
||||
return antDarkColors
|
||||
}
|
||||
@ -13,4 +18,37 @@ function getDarkColors(color) {
|
||||
return darkColors
|
||||
}
|
||||
|
||||
module.exports = {getDarkColors}
|
||||
function getBgColors(theme) {
|
||||
return theme == 'light' ? ['#f0f2f5', '#ffffff'] : ['#000000', '#141414']
|
||||
}
|
||||
|
||||
function toNum3(color) {
|
||||
if (isHex(color)) {
|
||||
return varyColor.toNum3(color)
|
||||
}
|
||||
let colorStr = ''
|
||||
if (isRgb(color)) {
|
||||
colorStr = color.slice(5, color.length)
|
||||
} else if (isRgba(color)) {
|
||||
colorStr = color.slice(6, color.lastIndexOf(','))
|
||||
}
|
||||
let rgb = colorStr.split(',')
|
||||
const r = parseInt(rgb[0])
|
||||
const g = parseInt(rgb[1])
|
||||
const b = parseInt(rgb[2])
|
||||
return [r, g, b]
|
||||
}
|
||||
|
||||
function isHex(color) {
|
||||
return color.length >= 4 && color[0] == '#'
|
||||
}
|
||||
|
||||
function isRgb(color) {
|
||||
return color.length >= 10 && color.slice(0, 3) == 'rgb'
|
||||
}
|
||||
|
||||
function isRgba(color) {
|
||||
return color.length >= 13 && color.slice(0, 4) == 'rgba'
|
||||
}
|
||||
|
||||
module.exports = {getDarkColors, getBgColors, isHex, isRgb, isRgba, toNum3}
|
||||
|
||||
@ -1,39 +1,44 @@
|
||||
// const varyColor = require('webpack-theme-color-replacer/client/varyColor')
|
||||
const client = require('webpack-theme-color-replacer/client')
|
||||
const generate = require('@ant-design/colors/lib/generate').default
|
||||
const themeColor = require('../config').themeColor
|
||||
const getDarkColors = require('../utils/colors').getDarkColors
|
||||
const {theme, themeColor} = require('../config')
|
||||
const {getDarkColors, isHex, toNum3} = require('../utils/colors')
|
||||
const themeCfg = require('../config/default').theme
|
||||
|
||||
module.exports = {
|
||||
primaryColor: themeColor,
|
||||
getThemeColors(color) {
|
||||
const palettes = generate(color)
|
||||
const darkBgColors = getDarkColors(color)
|
||||
return palettes.concat(darkBgColors)
|
||||
getThemeColors(color, $theme) {
|
||||
let _theme = $theme || theme
|
||||
let opts = (_theme == 'night') ? {theme: 'dark'} : undefined
|
||||
let palettes = generate(color, opts)
|
||||
const primary = palettes[5]
|
||||
palettes = palettes.concat(generate(primary))
|
||||
console.log(palettes)
|
||||
const darkBgColors = getDarkColors(color, _theme)
|
||||
const _themeCfg = themeCfg[_theme]
|
||||
const bgColors = Object.keys(_themeCfg)
|
||||
.map(key => _themeCfg[key])
|
||||
.map(color => isHex(color) ? color : toNum3(color).join(','))
|
||||
let rgb = toNum3(primary).join(',')
|
||||
return palettes.concat(darkBgColors).concat(bgColors).concat(rgb)
|
||||
},
|
||||
changeThemeColor (newColor) {
|
||||
let lastColor = this.lastColor || this.primaryColor
|
||||
changeThemeColor (newColor, $theme) {
|
||||
let options = {
|
||||
oldColors: this.getThemeColors(lastColor),
|
||||
newColors: this.getThemeColors(newColor)
|
||||
newColors: this.getThemeColors(newColor, $theme)
|
||||
}
|
||||
let promise = client.changer.changeColor(options)
|
||||
this.lastColor = lastColor
|
||||
return promise
|
||||
},
|
||||
changeSelector (selector) {
|
||||
switch (selector) {
|
||||
case '.ant-layout-sider':
|
||||
return '.ant-layout-sider-dark'
|
||||
case '.ant-calendar-today .ant-calendar-date':
|
||||
return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
|
||||
case '.ant-btn:focus,.ant-btn:hover':
|
||||
return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
|
||||
case '.ant-btn.active,.ant-btn:active':
|
||||
return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
|
||||
case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
|
||||
case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
|
||||
return ':not(.ant-steps-item-process)' + selector
|
||||
case '.ant-menu-dark .ant-menu-inline.ant-menu-sub':
|
||||
return '.ant-menu-dark .ant-menu-inline:not(.ant-menu-sub)'
|
||||
case '.ant-checkbox-checked .ant-checkbox-inner::after':
|
||||
return '.ant-checkbox-checked :not(.ant-checkbox-inner)::after'
|
||||
case '.side-menu .logo h1':
|
||||
return '.side-menu .logo :not(h1)'
|
||||
case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
|
||||
case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
|
||||
return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
|
||||
@ -48,14 +53,29 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
modifyVars(color) {
|
||||
let darkColors = getDarkColors(color)
|
||||
let opts = (theme == 'night') ? {theme: 'dark'} : undefined
|
||||
const darkColors = getDarkColors(color, theme)
|
||||
const palettes = generate(color, opts)
|
||||
return {
|
||||
'primary-color': color,
|
||||
'info-color': color,
|
||||
'processing-color': color,
|
||||
'primary-color': palettes[5],
|
||||
'primary-1': palettes[0],
|
||||
'primary-2': palettes[1],
|
||||
'primary-3': palettes[2],
|
||||
'primary-4': palettes[3],
|
||||
'primary-5': palettes[4],
|
||||
'primary-6': palettes[5],
|
||||
'primary-7': palettes[6],
|
||||
'primary-8': palettes[7],
|
||||
'primary-9': palettes[8],
|
||||
'primary-10': palettes[9],
|
||||
'info-color': palettes[5],
|
||||
'alert-info-bg-color': palettes[0],
|
||||
'alert-info-border-color': palettes[3],
|
||||
'processing-color': palettes[5],
|
||||
'menu-dark-submenu-bg': darkColors[0],
|
||||
'layout-header-background': darkColors[1],
|
||||
'layout-trigger-background': darkColors[2]
|
||||
'layout-trigger-background': darkColors[2],
|
||||
...themeCfg[theme]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user