311 lines
9.1 KiB
Vue
311 lines
9.1 KiB
Vue
<template>
|
||
|
||
<div class="main" style="text-shadow: 0 0 20px var(--font-border);"
|
||
v-loading="loading"
|
||
element-loading-text="拼命加载中"
|
||
element-loading-spinner="el-icon-loading"
|
||
element-loading-background="var(--theme-bg-color)"
|
||
>
|
||
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
|
||
<div class="HeadSquare"></div>
|
||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
|
||
</div>
|
||
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
|
||
<div class="base-style-content" >
|
||
<div class="min-content">
|
||
<span class="min-title">Logo(浅色模式)</span>
|
||
<UploadComponent :config-name="light_logo" style="margin-top: 10px;"></UploadComponent>
|
||
</div>
|
||
<div class="min-content" style="margin-left: 50px">
|
||
<span class="min-title">Logo(深色模式)</span>
|
||
<UploadComponent :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>
|
||
</div>
|
||
<div class="min-content" style="margin-left: 50px">
|
||
<span class="min-title">Favicon</span>
|
||
<UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="color-select">-->
|
||
<!-- <span class="theme-color-select">主题色：</span>-->
|
||
<!-- <el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
|
||
<div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
|
||
<div class="HeadSquare"></div>
|
||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>背景样式</div>
|
||
</div>
|
||
<span class="title" >背景图</span>
|
||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||
<span class="min-title">浅色模式</span>
|
||
<div class="img-card">
|
||
<UploadComponent style="margin-left: 20px;" :config-name="light_bg_file"></UploadComponent>
|
||
<div class="img-url">
|
||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||
<el-input
|
||
placeholder="请输入链接"
|
||
v-model="dark_bg"
|
||
clearable
|
||
style="margin-top:10px;width: 420px"
|
||
@change="setConfig('dark_bg',dark_bg,'String')"
|
||
>
|
||
</el-input>
|
||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||
<span class="min-title">深色模式</span>
|
||
<div class="img-card">
|
||
<UploadComponent style="margin-left: 20px" :config-name="dark_bg_file"></UploadComponent>
|
||
<div class="img-url">
|
||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||
<el-input
|
||
placeholder="请输入链接"
|
||
v-model="light_bg"
|
||
clearable style="margin-top:10px;width: 420px"
|
||
@change="setConfig('dark_bg',light_bg,'String')"
|
||
>
|
||
</el-input>
|
||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ui-model" style="margin-top:20px">
|
||
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
|
||
<div class="HeadSquare"></div>
|
||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>主题偏好设置</div>
|
||
</div>
|
||
<div class="min-ui-model" style="font-family: SimHei;font-size:18px;font-weight:600;">
|
||
<div style="margin-top:50px">
|
||
<span class="min-title" >浅色模式切换：</span>
|
||
<el-switch
|
||
v-model="value"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
active-value="1"
|
||
inactive-value="0"
|
||
@change="setConfig('open_dark_light',value,'String')">
|
||
</el-switch>
|
||
</div>
|
||
<div style="width:100%;height:50px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
|
||
import UploadComponent from "@/components/setting/system/Upload.vue";
|
||
import axios from "axios";
|
||
import Vue from "vue";
|
||
|
||
export default {
|
||
name:"AppearanceSettings",
|
||
components: {UploadComponent},
|
||
data() {
|
||
return {
|
||
// color:'#409EFF',
|
||
dark_bg:null,
|
||
light_bg:null,
|
||
value:null,
|
||
favicon:"favicon",
|
||
dark_logo:'dark_logo',
|
||
light_logo:'light_logo',
|
||
dark_bg_file:'dark_bg_file',
|
||
light_bg_file:'light_bg_file',
|
||
loading:true,
|
||
}},
|
||
mounted() {
|
||
|
||
},
|
||
created() {
|
||
this.getConfig('open_dark_light');
|
||
this.getConfig('dark_bg');
|
||
this.getConfig('light_bg');
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
methods: {
|
||
|
||
|
||
setConfig(name,value,type){
|
||
let _this = this;
|
||
if (localStorage.getItem('userId')&&localStorage.getItem('Authorization')) {
|
||
if(value!==''){
|
||
axios({
|
||
method: 'post',
|
||
url: '/api//updateConfig',
|
||
params: {
|
||
name:name,
|
||
value:value,
|
||
type:type,
|
||
},
|
||
}).then(function (res) {
|
||
if(res.data!== "更新成功!"){
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "更新失败！",
|
||
offset: 0
|
||
});
|
||
}else {
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, "更新成功！"),
|
||
type: 'success',
|
||
offset: 0
|
||
});
|
||
}
|
||
|
||
}).catch((error) => {
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: error,
|
||
// offset: 0
|
||
// });
|
||
})
|
||
}else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "不能为空",
|
||
offset: 0
|
||
});
|
||
}
|
||
|
||
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: '登录状态失效，请重新登录！',
|
||
offset: 0
|
||
});
|
||
}
|
||
},
|
||
getConfig(name){
|
||
let _this=this;
|
||
if(localStorage.getItem('userRole') === '0' && localStorage.getItem('Authorization')){
|
||
if(name){
|
||
axios({
|
||
method: 'get',
|
||
url: '/api/getConfig',
|
||
params:{
|
||
name:name
|
||
}
|
||
}).then(function (res) {
|
||
if(res){
|
||
if(res.data.open_dark_light){
|
||
_this.value=res.data.open_dark_light.value;
|
||
}
|
||
if(res.data.dark_bg){
|
||
_this.dark_bg=res.data.dark_bg.value;
|
||
}
|
||
if(res.data.light_bg){
|
||
_this.light_bg=res.data.light_bg.value;
|
||
}
|
||
_this.loading=false;
|
||
}
|
||
|
||
}).catch((error) => {
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: error,
|
||
// offset: 0
|
||
// });
|
||
})
|
||
}else{
|
||
return false
|
||
}
|
||
|
||
}else{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "权限不够！",
|
||
offset: 0
|
||
});
|
||
}
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.main{
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
//align-items: center;
|
||
margin-left: 50px;
|
||
overflow: scroll;
|
||
}
|
||
.title {
|
||
font-weight: bolder;
|
||
font-size: 20px;
|
||
color: var(--theme-color);
|
||
margin-top: 10px;
|
||
//background-color: var(--theme-bg-color);
|
||
}
|
||
.base-style-content{
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
}
|
||
.min-title {
|
||
color: var(--theme-color);
|
||
//background-color: var(--theme-bg-color);
|
||
}
|
||
.min-content{
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
}
|
||
.theme-color-select{
|
||
color: var(--theme-color);
|
||
}
|
||
.color-select{
|
||
margin-top: 10px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
}
|
||
.img-card{
|
||
border: solid 5px var(--border-color);
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
border-radius: 20px;
|
||
margin-top:20px;
|
||
width: 800px;
|
||
height: 200px;
|
||
background-color: var(--theme-bg-color);
|
||
color: var(--theme-color);
|
||
}
|
||
.img-url{
|
||
margin-left: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
.min-ui-model{
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
|
||
}
|
||
|
||
::v-deep .el-input__inner{
|
||
background-color: var(--border-color);
|
||
}
|
||
::v-deep .el-textarea__inner{
|
||
background-color: var(--border-color);
|
||
}
|
||
</style> |