166 lines
4.4 KiB
Vue
166 lines
4.4 KiB
Vue
<template>
|
||
<!-- <div class="home">-->
|
||
<!-- <HomePage></HomePage>-->
|
||
<!-- </div>-->
|
||
<body translate="no">
|
||
<div class="video-bg">
|
||
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
|
||
<source src="../assets/video/background.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
<div v-if="value==='1'" class="dark-light">
|
||
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
||
stroke-linejoin="round" @click="changeStyle">
|
||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||
</svg>
|
||
</div>
|
||
<div class="app">
|
||
<SettingHeader></SettingHeader>
|
||
<!-- <router-view></router-view>-->
|
||
<div class="wrapper">
|
||
<SettingLeftSide></SettingLeftSide>
|
||
<router-view></router-view>
|
||
</div>
|
||
<div class="overlay-app"></div>
|
||
</div>
|
||
<div v-if="icp_info!==''" style="z-index: 9999;display: flex;flex-direction: row">
|
||
<el-link style="color: var(--theme-color);" :underline="false" href="https://beian.miit.gov.cn/" target="_blank">备案号： </el-link>
|
||
<el-link style="color: var(--theme-color);" :underline="false" href="https://beian.miit.gov.cn/" target="_blank"> {{icp_info}}</el-link>
|
||
</div>
|
||
</body>
|
||
</template>
|
||
|
||
<script>
|
||
// @ is an alias to /src
|
||
import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
|
||
import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
|
||
import axios from "axios";
|
||
import {mapMutations} from "vuex";
|
||
|
||
export default {
|
||
name: 'SettingsView',
|
||
components: {
|
||
SettingLeftSide,
|
||
SettingHeader,
|
||
},
|
||
data() {
|
||
return {
|
||
value:null,
|
||
isLight:false,
|
||
icp_info:null,
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
created() {
|
||
this.getConfig('open_dark_light');
|
||
this.getConfig('icp_info');
|
||
// let nowDate = new Date()
|
||
// let hour = nowDate.getHours()
|
||
// //黑夜时
|
||
// if (hour > 18 && hour <= 24 || hour < 6) {
|
||
// this.goDark()
|
||
// }
|
||
//根据本地存储状态哦按段
|
||
if (localStorage.getItem('theme') === 'dark') {
|
||
this.goDark()
|
||
}else{
|
||
this.goLight();
|
||
}
|
||
},
|
||
computed: {},
|
||
methods:{
|
||
...mapMutations(['setTheme']),
|
||
getConfig(name) {
|
||
let _this = this;
|
||
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.icp_info){
|
||
_this.icp_info=res.data.icp_info.value;
|
||
}
|
||
// if(res.data.light_bg){
|
||
// _this.light_bg=res.data.light_bg.value;
|
||
// }
|
||
// _this.loading=false;
|
||
}
|
||
|
||
}).catch((error) => {
|
||
})
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
getImageByConfig(name){
|
||
let _this=this;
|
||
if(name){
|
||
axios({
|
||
method: 'get',
|
||
url: '/api/getAttachment',
|
||
responseType: 'arraybuffer',
|
||
params: {
|
||
name:name
|
||
},
|
||
}).then(function (res) {
|
||
|
||
if(res.data){
|
||
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
|
||
}else{
|
||
return false;
|
||
}
|
||
}).catch((error) => {
|
||
|
||
})
|
||
}else{
|
||
return false;
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: "不存在！",
|
||
// offset: 0
|
||
// });
|
||
}
|
||
|
||
},
|
||
goDark() {
|
||
this.getImageByConfig('dark_bg_file');
|
||
//黑夜的
|
||
document.body.classList.remove('light-mode');
|
||
this.setTheme({theme:'dark'});
|
||
},
|
||
goLight() {
|
||
this.getImageByConfig('light_bg_file');
|
||
//白天的
|
||
document.body.classList.add('light-mode')
|
||
this.setTheme({theme:'light'});
|
||
},
|
||
changeStyle() {
|
||
this.isLight = !this.isLight
|
||
if (this.isLight !== true) {
|
||
this.goDark();
|
||
} else {
|
||
this.goLight();
|
||
}
|
||
|
||
},
|
||
// toggleDarkLight() {
|
||
// const toggleButton = document.querySelector('.dark-light');
|
||
//
|
||
// toggleButton.addEventListener('click', () => {
|
||
// document.body.classList.toggle('light-mode');
|
||
// });
|
||
// }
|
||
}
|
||
}
|
||
</script>
|