zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Squashed commit of the following: 

commit 82e77d074363a6535066726773d66a99d1277946
Author: sakuya <81883387@qq.com>
Date:   Mon Aug 16 23:05:07 2021 +0800

    FIX 默认值

commit 9052ee5554bec25e812820bf04efbc77f68f6f2a
Author: sakuya <81883387@qq.com>
Date:   Mon Aug 16 23:00:43 2021 +0800

    ADD 主题颜色设置
This commit is contained in:
sc 2021-08-17 09:18:46 +08:00
parent 117008902e
commit a6c08c2c5a
8 changed files with 98 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -5,8 +5,20 @@
</template>
<script>
import colorTool from '@/utils/color'
export default {
name: 'App'
name: 'App',
created() {
//设置主题颜色
const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
if(app_color){
document.documentElement.style.setProperty('--el-color-primary', app_color);
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
}
}
}
}
</script>

3
src/config/index.js
View File

@ -29,6 +29,9 @@ const DEFAULT_CONFIG = {
//语言
LANG: 'zh-cn',
//主题颜色
COLOR: '',
//控制台首页默认布局
DEFAULT_GRID: {

17
src/layout/components/setting.vue
View File

@ -13,6 +13,10 @@
</el-select>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="主题颜色">
<el-color-picker v-model="colorPrimary" :predefine="colorList">></el-color-picker>
</el-form-item>
<el-divider></el-divider>
<el-form-item label="框架布局">
<el-select v-model="layout" placeholder="请选择">
<el-option label="默认" value="default"></el-option>
@ -32,6 +36,8 @@
</template>
<script>
import colorTool from '@/utils/color'
export default {
data(){
return {
@ -39,7 +45,9 @@
menuIsCollapse: this.$store.state.global.menuIsCollapse,
layoutTags: this.$store.state.global.layoutTags,
lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
theme: this.$TOOL.data.get('APP_THEME') || 'default'
theme: this.$TOOL.data.get('APP_THEME') || 'default',
colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
}
},
watch: {
@ -59,6 +67,13 @@
lang(val){
this.$i18n.locale = val
this.$TOOL.data.set("APP_LANG", val);
},
colorPrimary(val){
document.documentElement.style.setProperty('--el-color-primary', val);
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
}
this.$TOOL.data.set("APP_COLOR", val);
}
}
}

21
src/style/fix.scss
View File

@ -38,6 +38,27 @@
.el-button--small.is-circle {padding:9px;}
.el-button--mini.is-circle {padding:7px;}
/* 动态值 */
.el-button:active {border-color: var(--el-color-primary);color: var(--el-color-primary);}
.el-button--primary {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
.el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);}
.el-button--primary:active {background-color: var(--el-color-primary);border-color: var(--el-color-primary);color: #fff;}
.el-button--primary.is-plain {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-1);color: var(--el-color-primary);}
.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
.el-button--primary.is-plain:active {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary-light-4);}
.el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}
.el-tag {background-color: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary);}
.el-menu-item.is-active {background: var(--el-color-primary-light-9);color: var(--el-color-primary)!important;}
.adminui-header {background-color: var(--el-color-primary);}
.aminui-side-split li.active {background-color: var(--el-color-primary);}
.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
.adminui-tags li.active {background-color: var(--el-color-primary)!important;}
.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;}
.data-box .item-background {background-color: var(--el-color-primary)!important;}
.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;}
/* 覆盖tinymce样式 */
.sceditor .tox-tinymce {border: 1px solid #DCDFE6;}
.sceditor .tox .tox-statusbar {border-top: 1px solid #DCDFE6;}

1
src/style/theme/dark.scss
View File

@ -33,7 +33,6 @@
/* 登录 */
.login_bg {background: $--background !important;}
.login-form {background: $--card-background !important;}
.login-sidebox {background: #224f7e !important;}
.login-logo h2 {color: $--text-color !important;}
@media (max-width: 1000px){
.login_bg {background: $--card-background !important;}

29
src/utils/color.js Normal file
View File

@ -0,0 +1,29 @@
export default {
//hex颜色转rgb颜色
HexToRgb(str) {
str = str.replace("#", "")
var hxs = str.match(/../g)
for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16)
return hxs
},
//rgb颜色转hex颜色
RgbToHex(a, b, c) {
var hexs = [a.toString(16), b.toString(16), c.toString(16)]
for (var i = 0; i < 3; i++) {
if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]
}
return "#" + hexs.join("");
},
//加深
darken(color, level) {
var rgbc = this.HexToRgb(color)
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
},
//变淡
lighten(color, level) {
var rgbc = this.HexToRgb(color)
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
}
}

16
src/views/userCenter/index.vue
View File

@ -77,6 +77,9 @@
<el-switch v-model="config.theme" active-value="dark" inactive-value="default"></el-switch>
<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
</el-form-item>
<el-form-item label="主题颜色">
<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
</el-form-item>
<el-form-item :label="$t('user.language')">
<el-select v-model="config.lang">
<el-option label="简体中文" value="zh-cn"></el-option>
@ -95,6 +98,8 @@
</template>
<script>
import colorTool from '@/utils/color'
export default {
name: 'userCenter',
data() {
@ -149,9 +154,11 @@
sex: "1",
about: "正所谓富贵险中求"
},
colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
config: {
lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
theme: this.$TOOL.data.get('APP_THEME') || 'default'
theme: this.$TOOL.data.get('APP_THEME') || 'default',
colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
}
}
},
@ -163,6 +170,13 @@
'config.lang'(val){
this.$i18n.locale = val
this.$TOOL.data.set("APP_LANG", val);
},
'config.colorPrimary'(val){
document.documentElement.style.setProperty('--el-color-primary', val);
for (let i = 1; i <= 9; i++) {
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
}
this.$TOOL.data.set("APP_COLOR", val);
}
},
methods: {

2
src/views/userCenter/login.vue
View File

@ -86,7 +86,7 @@
.login_bg {position: absolute;top:0px;left:0px;right:0px;bottom:0px;}
.login_container {position: absolute;top:50%;left:50%;width: 1100px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
.login-sidebox {width: 50%;padding: 60px;color: #fff;background:#3887e5;position: relative;overflow: hidden;}
.login-sidebox {width: 50%;padding: 60px;color: #fff;background:var(--el-color-primary);position: relative;overflow: hidden;}
.login-sidebox__title h2 {font-size: 30px;}
.login-sidebox__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
.login-sidebox__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}