update
This commit is contained in:
parent
76907fb95c
commit
7d9186d31c
@ -208,6 +208,9 @@ body.light-mode .video-bg:before {
|
|||||||
.notify {
|
.notify {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
.notify2 {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
.notify:before {
|
.notify:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -224,6 +227,21 @@ body.light-mode .video-bg:before {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notify2:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-color: #3af06e;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
right: 20px;
|
||||||
|
top: 16px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1055px) {
|
||||||
|
.notify2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.menu-circle {
|
.menu-circle {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
@ -618,7 +636,7 @@ body.light-mode .video-bg:before {
|
|||||||
|
|
||||||
.status {
|
.status {
|
||||||
/*margin-left: auto;*/
|
/*margin-left: auto;*/
|
||||||
width: 140px;
|
width: 700px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -789,6 +807,7 @@ body.light-mode .video-bg:before {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.checkbox-wrapper + .checkbox-wrapper {
|
.checkbox-wrapper + .checkbox-wrapper {
|
||||||
margin: 20px 0 40px;
|
margin: 20px 0 40px;
|
||||||
|
BIN
src/assets/img/NAV.png
Normal file
BIN
src/assets/img/NAV.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
@ -48,8 +48,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="网站信息" class="NavInfo" style="margin-top:35px;margin-left:50px;width:220px;">
|
<div id="网站信息" class="NavInfo" style="margin-top:35px;margin-left:50px;width:220px;">
|
||||||
<span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
|
<el-tooltip placement="top"
|
||||||
<div class="NavInfo">
|
trigger="hover"
|
||||||
|
effect="dark"
|
||||||
|
v-if="UrlObj.name"
|
||||||
|
:content="UrlObj.name"
|
||||||
|
>
|
||||||
|
<span style="font-size:30px;font-family: STHupo;overflow-x: scroll;white-space: nowrap;height: 50px"><marquee behavior="scroll" direction="left">{{ UrlObj.name }}</marquee></span><br/>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="NavInfo">
|
||||||
<span style="width:200px">创建时间:{{ Cdate }}</span><br/>
|
<span style="width:200px">创建时间:{{ Cdate }}</span><br/>
|
||||||
<span style="width:200px">所属标签:{{BelongTo}}</span><br/>
|
<span style="width:200px">所属标签:{{BelongTo}}</span><br/>
|
||||||
<div style="display: flex;flex-direction: row">
|
<div style="display: flex;flex-direction: row">
|
||||||
@ -135,7 +142,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--用户评论-->
|
<!--用户评论-->
|
||||||
<div v-show="update" id="用户评论" class="JustBack" style="width:670px;
|
<div id="用户评论" v-show="update" class="JustBack" style="width:670px;
|
||||||
height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
|
height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
|
||||||
<div style="width:670px;height:auto;display:flex;
|
<div style="width:670px;height:auto;display:flex;
|
||||||
flex-direction: column; flex-wrap: nowrap;">
|
flex-direction: column; flex-wrap: nowrap;">
|
||||||
@ -234,8 +241,8 @@
|
|||||||
{{dateFormat('YYYY-mm-dd',item2.commentTime)}}
|
{{dateFormat('YYYY-mm-dd',item2.commentTime)}}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;flex-direction: row-reverse;width:100%;height:42px;margin-top:6px">
|
<div style="display: flex;flex-direction: row-reverse;width:100%;height:42px;margin-top:6px">
|
||||||
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:5px;margin-left:10px;">{{item.likeCount}}</span>
|
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:5px;margin-left:10px;">{{item2.likeCount}}</span>
|
||||||
<el-button type="danger" class="el-icon-thumb" size="medium" plain circle style="margin-top:6px;margin-left:20px;" >
|
<el-button type="danger" class="el-icon-thumb" @click="LikeMe(item2.id)" size="medium" plain circle style="margin-top:6px;margin-left:20px;" >
|
||||||
</el-button>
|
</el-button>
|
||||||
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:10px">回复</span>
|
<span style="font-size:18px;font-family: STHupo;line-height:40px;margin-left:10px">回复</span>
|
||||||
<el-button type="success" class="el-icon-chat-dot-square" size="medium"
|
<el-button type="success" class="el-icon-chat-dot-square" size="medium"
|
||||||
@ -356,18 +363,18 @@ export default {
|
|||||||
// 弹出页:
|
// 弹出页:
|
||||||
openAddCategory:false,
|
openAddCategory:false,
|
||||||
// 回复谁?
|
// 回复谁?
|
||||||
rootid:'',
|
rootid:null,
|
||||||
// 所属标签:
|
// 所属标签:
|
||||||
BelongTo:'',
|
BelongTo:null,
|
||||||
// 总星级:
|
// 总星级:
|
||||||
SumStar:'',
|
SumStar:null,
|
||||||
// 表单:
|
// 表单:
|
||||||
form:{
|
form:{
|
||||||
urlId:'',
|
urlId:null,
|
||||||
userId:'',
|
userId:null,
|
||||||
content:'',
|
content:null,
|
||||||
rootCommentId:'',
|
rootCommentId:null,
|
||||||
rating:'',
|
rating:null,
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
rating: [{ required: 'true', message: '请输入评分!', trigger: 'blur' }],
|
rating: [{ required: 'true', message: '请输入评分!', trigger: 'blur' }],
|
||||||
@ -384,6 +391,7 @@ export default {
|
|||||||
this.GetAllCate();
|
this.GetAllCate();
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.addViewByTime();
|
||||||
this.UrlId = this.$route.query.uid;
|
this.UrlId = this.$route.query.uid;
|
||||||
this.GetNav(this.UrlId);
|
this.GetNav(this.UrlId);
|
||||||
|
|
||||||
@ -402,11 +410,11 @@ export default {
|
|||||||
this.reload();
|
this.reload();
|
||||||
//表单重置
|
//表单重置
|
||||||
that.form = {
|
that.form = {
|
||||||
urlId:'',
|
urlId:null,
|
||||||
userId:'',
|
userId:null,
|
||||||
content:'',
|
content:null,
|
||||||
rootCommentId:'',
|
rootCommentId:null,
|
||||||
rating:'',
|
rating:null,
|
||||||
}
|
}
|
||||||
// 后关闭
|
// 后关闭
|
||||||
this.openAddCategory=false;
|
this.openAddCategory=false;
|
||||||
@ -433,7 +441,7 @@ export default {
|
|||||||
var _this = this;
|
var _this = this;
|
||||||
_this.form.rating = 0;
|
_this.form.rating = 0;
|
||||||
_this.form.rootCommentId = _this.rootid;
|
_this.form.rootCommentId = _this.rootid;
|
||||||
console.log(this.form);
|
// console.log(this.form);
|
||||||
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
|
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
|
||||||
_this.$refs[rulelist].validate((valid)=>{
|
_this.$refs[rulelist].validate((valid)=>{
|
||||||
if(valid){
|
if(valid){
|
||||||
@ -465,11 +473,11 @@ export default {
|
|||||||
});
|
});
|
||||||
this.closeDialog();
|
this.closeDialog();
|
||||||
this.form = {
|
this.form = {
|
||||||
urlId:'',
|
urlId:null,
|
||||||
userId:'',
|
userId:null,
|
||||||
content:'',
|
content:null,
|
||||||
rootCommentId:'',
|
rootCommentId:null,
|
||||||
rating:'',
|
rating:null,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -488,11 +496,11 @@ export default {
|
|||||||
//提交评论:
|
//提交评论:
|
||||||
submitComment(rulelist){
|
submitComment(rulelist){
|
||||||
var _this = this;
|
var _this = this;
|
||||||
console.log(this.form);
|
// console.log(this.form);
|
||||||
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
|
if(localStorage.getItem("Authorization") && localStorage.getItem("userId")){
|
||||||
_this.$refs[rulelist].validate((valid)=>{
|
_this.$refs[rulelist].validate((valid)=>{
|
||||||
if(valid){
|
if(valid){
|
||||||
console.log(this.form);
|
// console.log(this.form);
|
||||||
axios({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
// 请求的地址
|
// 请求的地址
|
||||||
@ -521,11 +529,11 @@ export default {
|
|||||||
});
|
});
|
||||||
this.closeDialog();
|
this.closeDialog();
|
||||||
this.form = {
|
this.form = {
|
||||||
urlId:'',
|
urlId:null,
|
||||||
userId:'',
|
userId:null,
|
||||||
content:'',
|
content:null,
|
||||||
rootCommentId:'',
|
rootCommentId:null,
|
||||||
rating:'',
|
rating:null,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -612,7 +620,7 @@ export default {
|
|||||||
var that = this;
|
var that = this;
|
||||||
if(comment.nextNodes.length != 0){
|
if(comment.nextNodes.length != 0){
|
||||||
var rootUser = comment.user.userLogin;
|
var rootUser = comment.user.userLogin;
|
||||||
console.log(comment.user.userLogin);
|
// console.log(comment.user.userLogin);
|
||||||
that.rootId_AllComment[String(rootId)] = that.rootId_AllComment[String(rootId)].concat(comment.nextNodes);
|
that.rootId_AllComment[String(rootId)] = that.rootId_AllComment[String(rootId)].concat(comment.nextNodes);
|
||||||
Object.keys(comment.nextNodes).forEach(key => {
|
Object.keys(comment.nextNodes).forEach(key => {
|
||||||
that.$set(comment.nextNodes[key],'RootUser',rootUser);
|
that.$set(comment.nextNodes[key],'RootUser',rootUser);
|
||||||
@ -658,7 +666,14 @@ export default {
|
|||||||
_this.func0(res.data[key],res.data[key].id);
|
_this.func0(res.data[key],res.data[key].id);
|
||||||
})
|
})
|
||||||
_this.SumStar = sum / _this.allcomment.length;
|
_this.SumStar = sum / _this.allcomment.length;
|
||||||
console.log(_this.SumStar);
|
// console.log(_this.SumStar);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addViewByTime(){
|
||||||
|
axios.get('/api/addUrlAccessViews', {
|
||||||
|
params: {
|
||||||
|
urlId: this.$route.query.uid,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 日访问:
|
// 日访问:
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-carousel :interval="5000" trigger="click" type="card" height="200px">
|
<el-carousel :interval="5000" trigger="click" type="card" height="200px">
|
||||||
<el-carousel-item v-for="item in urls" :key="item">
|
<el-carousel-item v-if="banner" v-for="(item,index) in banner" :key="index">
|
||||||
<el-image :src="item" fit="scale-down" @click="goToLink('https://landaiqing.space')">
|
<el-image v-if="item.imgUrl && item.url" :src="item.imgUrl" fit="scale-down" @click="goToLink(item.url)">
|
||||||
<div slot="error" class="image-slot">
|
<div slot="error" class="image-slot">
|
||||||
<i class="el-icon-picture-outline"></i>
|
<i class="el-icon-picture-outline"></i>
|
||||||
</div>
|
</div>
|
||||||
@ -10,30 +10,43 @@
|
|||||||
</el-carousel>
|
</el-carousel>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"CarouselComponent",
|
name:"CarouselComponent",
|
||||||
components:{
|
components:{
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
urls: [
|
banner:[],
|
||||||
'https://pic.imgdb.cn/item/65622651c458853aef5576d1.jpg',
|
|
||||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
|
||||||
]
|
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getBanners();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
getBanners(){
|
||||||
|
var that=this;
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
// 请求的地址
|
||||||
|
url: '/api/banners/view_banner',
|
||||||
|
// URL 中的查询参数
|
||||||
|
}).then((res)=>{
|
||||||
|
that.banner=res.data;
|
||||||
|
}).catch((error)=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
goToLink(url){
|
goToLink(url){
|
||||||
window.open(url,'_blank')
|
window.open(url,'_blank')
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
|
<el-image v-if="imageUrl" style="width: 50px;height:auto;margin-right: 20px" :src="'data:image/jpg;base64,'+imageUrl">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
<div class="menu-circle"></div>
|
<div class="menu-circle"></div>
|
||||||
<div class="header-menu">
|
<div class="header-menu">
|
||||||
<router-link class="menu-link notify" active-class="is-active" v-for="(item,index) in tabList"
|
<router-link class="menu-link notify2" active-class="is-active" v-for="(item,index) in tabList"
|
||||||
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
|
v-if="tabList.length>0" :key="index" :to="item.path">{{ item.libel }}
|
||||||
</router-link>
|
</router-link>
|
||||||
|
<a class="menu-link notify" style="cursor: pointer" v-for="(item2,index2) in otherNav"
|
||||||
|
v-if="otherNav" target="_blank" :key="item2.index2" :href="item2.url">{{ item2.navName }}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="search-bar">-->
|
<!-- <div class="search-bar">-->
|
||||||
<!-- <input type="text" placeholder="Search">-->
|
<!-- <input type="text" placeholder="Search">-->
|
||||||
@ -336,9 +344,10 @@ export default {
|
|||||||
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
||||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||||
},
|
},
|
||||||
userToken: '',
|
|
||||||
isLogin: true,
|
isLogin: true,
|
||||||
searchDialog:false,
|
searchDialog:false,
|
||||||
|
otherNav:[],
|
||||||
|
imageUrl:null,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -347,19 +356,70 @@ export default {
|
|||||||
this.toggleActive();
|
this.toggleActive();
|
||||||
// this.reacherBarFun();
|
// this.reacherBarFun();
|
||||||
this.changeImg();
|
this.changeImg();
|
||||||
|
this.getOtherNav();
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getImageByConfig('logo');
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
|
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getOtherNav() {
|
||||||
|
let _this = this;
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
url: '/api/selectAllNav',
|
||||||
|
}).then(function (res) {
|
||||||
|
if(res.data){
|
||||||
|
_this.otherNav=res.data;
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch((error) => {
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: error,
|
||||||
|
// offset: 0
|
||||||
|
// });
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
openSearchDialog(){
|
openSearchDialog(){
|
||||||
if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
|
if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
|
||||||
this.searchDialog=true;
|
this.searchDialog=true;
|
||||||
}else{
|
}else{
|
||||||
Vue.prototype.$notify.info({
|
Vue.prototype.$notify.info({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
message: "登录状态失效,请重新登录!",
|
message: "请登录后搜索!",
|
||||||
offset: 0
|
offset: 0
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -499,10 +559,9 @@ export default {
|
|||||||
offset: 0
|
offset: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
// console.log(res);
|
|
||||||
// _this.userToken = 'Bearer ' + res.data.token;
|
// _this.userToken = 'Bearer ' + res.data.token;
|
||||||
_this.userToken = res.data.token;
|
_this.changeLogin({Authorization: res.data.token});
|
||||||
_this.changeLogin({Authorization: _this.userToken});
|
|
||||||
_this.setUserId({userId: res.data.Id});
|
_this.setUserId({userId: res.data.Id});
|
||||||
_this.setUserRole({userRole: res.data.roleId});
|
_this.setUserRole({userRole: res.data.roleId});
|
||||||
_this.closeLoginDialog();
|
_this.closeLoginDialog();
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
<!-- <div class="app-card__subtext">{{nav.desc}}</div>-->
|
<!-- <div class="app-card__subtext">{{nav.desc}}</div>-->
|
||||||
<div class="dividing-line"></div>
|
<div class="dividing-line"></div>
|
||||||
<div class="app-card-buttons">
|
<div class="app-card-buttons">
|
||||||
<el-tooltip class="item" effect="dark" content="访问需要代理" placement="bottom">
|
<el-tooltip v-if="nav.agentHint" class="item" effect="dark" :content="nav.agentHint" placement="bottom">
|
||||||
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
|
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
|
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
|
||||||
|
@ -11,9 +11,12 @@
|
|||||||
|
|
||||||
<span class="status">
|
<span class="status">
|
||||||
<!-- <span class="status-circle"></span>-->
|
<!-- <span class="status-circle"></span>-->
|
||||||
<span>测试公告!!!!!</span>
|
<marquee behavior="scroll" direction="left" width="">
|
||||||
<span>测试公告!!!!!</span>
|
<span v-if="notice" v-for="(item,index) in notice" :key="index" style="margin-left: 20px">
|
||||||
<span>测试公告!!!!!</span>
|
{{ index+1+': '+item.title}}
|
||||||
|
</span>
|
||||||
|
</marquee>
|
||||||
|
<!-- <span>测试公告!!!!!</span>-->
|
||||||
</span>
|
</span>
|
||||||
<div class="button-wrapper">
|
<div class="button-wrapper">
|
||||||
<button class="content-button status-button">查看详情</button>
|
<button class="content-button status-button">查看详情</button>
|
||||||
@ -24,18 +27,15 @@
|
|||||||
<path d="M15 9l-6 6M9 9l6 6"></path>
|
<path d="M15 9l-6 6M9 9l6 6"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
|
<!-- <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>-->
|
||||||
<div class="checkbox-wrapper">
|
<div v-if="notice" class="checkbox-wrapper" v-for="(item,index) in notice" :key="index">
|
||||||
<input type="checkbox" id="check1" class="checkbox">
|
<input type="checkbox" :id="index" class="checkbox">
|
||||||
<label for="check1">Import previous settings and preferences</label>
|
<label v-if="item.content" :for="index"><el-link v-if="item.url" :underline="false" :href="item.url" target="_blank"> {{index+1+':'+item.content}} </el-link></label>
|
||||||
</div>
|
|
||||||
<div class="checkbox-wrapper">
|
|
||||||
<input type="checkbox" id="check2" class="checkbox">
|
|
||||||
<label for="check2">Remove old versions</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content-button-wrapper">
|
<div class="content-button-wrapper">
|
||||||
<button class="content-button status-button open close">取消</button>
|
<!-- <button class="content-button status-button open close">取消</button>-->
|
||||||
<button class="content-button status-button">确定</button>
|
<button class="content-button status-button open close">确定</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<i @click="closeNotice" style="margin-left: 10px;" class="close-notice el-icon-circle-close"></i>
|
<i @click="closeNotice" style="margin-left: 10px;" class="close-notice el-icon-circle-close"></i>
|
||||||
@ -45,22 +45,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"NoticeComponent",
|
name:"NoticeComponent",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShow:true,
|
isShow:true,
|
||||||
|
notice:[],
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getNotice();
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
getNotice(){
|
||||||
|
var that=this;
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
// 请求的地址
|
||||||
|
url: '/api/notice/select',
|
||||||
|
// URL 中的查询参数
|
||||||
|
}).then((res)=>{
|
||||||
|
that.notice=res.data;
|
||||||
|
}).catch((error)=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
closeNotice(){
|
closeNotice(){
|
||||||
this.isShow=false;
|
this.isShow=false;
|
||||||
}
|
}
|
||||||
|
@ -4,8 +4,11 @@
|
|||||||
<div class="card-cover"
|
<div class="card-cover"
|
||||||
style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
|
style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
|
||||||
<!-- <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
|
<!-- <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
|
||||||
<el-avatar v-if="user.avatar===null" class="card-avatar" alt="avatar"> {{user.userLogin}}</el-avatar>
|
<el-image v-if="user.avatar" class="card-avatar" :src="user.avatar" alt="avatar">
|
||||||
<el-avatar v-if="user.avatar!==null" class="card-avatar" :src="user.avatar" alt="avatar"></el-avatar>
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
<h1 v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
|
<h1 v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
|
||||||
<h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
|
<h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
|
||||||
<h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
|
<h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
|
||||||
@ -217,6 +220,7 @@ export default {
|
|||||||
message: "修改成功!",
|
message: "修改成功!",
|
||||||
offset: 0
|
offset: 0
|
||||||
});
|
});
|
||||||
|
_this.resetForm('updateForm');
|
||||||
_this.getUserAllInfo();
|
_this.getUserAllInfo();
|
||||||
}
|
}
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
|
@ -1,11 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
|
<el-image v-if="imageUrl" style="width: 50px;height:auto;margin-right: 20px" :src="'data:image/jpg;base64,'+imageUrl">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 100%;margin-top: 5px" :src="require('@/assets/img/NAV.png')" alt="图标">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
<div class="menu-circle"></div>
|
<div class="menu-circle"></div>
|
||||||
<div class="header-menu">
|
<div class="header-menu">
|
||||||
</div>
|
</div>
|
||||||
<div class="search-bar">
|
<!-- <div class="search-bar">-->
|
||||||
<input type="text" placeholder="Search">
|
<!-- <input type="text" placeholder="Search">-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
<div class="header-profile">
|
<div class="header-profile">
|
||||||
<div class="notification">
|
<div class="notification">
|
||||||
<span class="notification-number">3</span>
|
<span class="notification-number">3</span>
|
||||||
@ -34,6 +39,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
import axios from "axios";
|
||||||
export default {
|
export default {
|
||||||
name:"SettingHeader",
|
name:"SettingHeader",
|
||||||
components:{
|
components:{
|
||||||
@ -42,18 +48,66 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loginDialogVisible:false,
|
loginDialogVisible:false,
|
||||||
|
imageUrl:null,
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.toggleActive();
|
this.toggleActive();
|
||||||
// this.reacherBarFun();
|
// this.reacherBarFun();
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getImageByConfig('logo');
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
getImageByConfig(name){
|
||||||
|
let _this=this;
|
||||||
|
if (localStorage.getItem('userId') && localStorage.getItem('Authorization')) {
|
||||||
|
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) => {
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: error,
|
||||||
|
// offset: 0
|
||||||
|
// });
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
// Vue.prototype.$notify.error({
|
||||||
|
// title: '错误',
|
||||||
|
// message: "不存在!",
|
||||||
|
// offset: 0
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
Vue.prototype.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: '登录状态失效,请重新登录!',
|
||||||
|
offset: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
handleCommand(cmditem) {
|
handleCommand(cmditem) {
|
||||||
if (!cmditem) {
|
if (!cmditem) {
|
||||||
this.$message("菜单选项缺少command属性");
|
this.$message("菜单选项缺少command属性");
|
||||||
|
@ -13,16 +13,20 @@
|
|||||||
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
|
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
|
||||||
<div class="base-style-content" >
|
<div class="base-style-content" >
|
||||||
<div class="min-content">
|
<div class="min-content">
|
||||||
<span class="min-title">Logo(浅色模式)</span>
|
<span class="min-title">Logo</span>
|
||||||
<UploadComponent :config-name="light_logo" style="margin-top: 10px;"></UploadComponent>
|
<div class="img-card">
|
||||||
</div>
|
<UploadComponent :config-name="logo" style="margin-top: 10px;"></UploadComponent>
|
||||||
<div class="min-content" style="margin-left: 50px">
|
</div>
|
||||||
<span class="min-title">Logo(深色模式)</span>
|
|
||||||
<UploadComponent :config-name="dark_logo" style="margin-top: 10px;"></UploadComponent>
|
|
||||||
</div>
|
</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">
|
<div class="min-content" style="margin-left: 50px">
|
||||||
<span class="min-title">Favicon</span>
|
<span class="min-title">Favicon</span>
|
||||||
|
<div class="img-card">
|
||||||
<UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
|
<UploadComponent style="margin-top: 10px;" :config-name="favicon"></UploadComponent>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="color-select">-->
|
<!-- <div class="color-select">-->
|
||||||
@ -39,37 +43,37 @@
|
|||||||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||||||
<span class="min-title">浅色模式</span>
|
<span class="min-title">浅色模式</span>
|
||||||
<div class="img-card">
|
<div class="img-card">
|
||||||
<UploadComponent style="margin-left: 20px;" :config-name="light_bg_file"></UploadComponent>
|
<UploadComponent :config-name="light_bg_file"></UploadComponent>
|
||||||
<div class="img-url">
|
<!-- <div class="img-url">-->
|
||||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
<!-- <span class="min-title"><i class="el-icon-link"></i>图片链接</span>-->
|
||||||
<el-input
|
<!-- <el-input-->
|
||||||
placeholder="请输入链接"
|
<!-- placeholder="请输入链接"-->
|
||||||
v-model="dark_bg"
|
<!-- v-model="dark_bg"-->
|
||||||
clearable
|
<!-- clearable-->
|
||||||
style="margin-top:10px;width: 420px"
|
<!-- style="margin-top:10px;width: 420px"-->
|
||||||
@change="setConfig('dark_bg',dark_bg,'String')"
|
<!-- @change="setConfig('dark_bg',dark_bg,'String')"-->
|
||||||
>
|
<!-- >-->
|
||||||
</el-input>
|
<!-- </el-input>-->
|
||||||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
<!-- <span class="min-title" style="margin-top:20px">支持随机图链接</span>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||||||
<span class="min-title">深色模式</span>
|
<span class="min-title">深色模式</span>
|
||||||
<div class="img-card">
|
<div class="img-card">
|
||||||
<UploadComponent style="margin-left: 20px" :config-name="dark_bg_file"></UploadComponent>
|
<UploadComponent :config-name="dark_bg_file"></UploadComponent>
|
||||||
<div class="img-url">
|
<!-- <div class="img-url">-->
|
||||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
<!-- <span class="min-title"><i class="el-icon-link"></i>图片链接</span>-->
|
||||||
<el-input
|
<!-- <el-input-->
|
||||||
placeholder="请输入链接"
|
<!-- placeholder="请输入链接"-->
|
||||||
v-model="light_bg"
|
<!-- v-model="light_bg"-->
|
||||||
clearable style="margin-top:10px;width: 420px"
|
<!-- clearable style="margin-top:10px;width: 420px"-->
|
||||||
@change="setConfig('dark_bg',light_bg,'String')"
|
<!-- @change="setConfig('dark_bg',light_bg,'String')"-->
|
||||||
>
|
<!-- >-->
|
||||||
</el-input>
|
<!-- </el-input>-->
|
||||||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
<!-- <span class="min-title" style="margin-top:20px">支持随机图链接</span>-->
|
||||||
</div>
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -112,8 +116,7 @@ export default {
|
|||||||
light_bg:null,
|
light_bg:null,
|
||||||
value:null,
|
value:null,
|
||||||
favicon:"favicon",
|
favicon:"favicon",
|
||||||
dark_logo:'dark_logo',
|
logo:'logo',
|
||||||
light_logo:'light_logo',
|
|
||||||
dark_bg_file:'dark_bg_file',
|
dark_bg_file:'dark_bg_file',
|
||||||
light_bg_file:'light_bg_file',
|
light_bg_file:'light_bg_file',
|
||||||
loading:true,
|
loading:true,
|
||||||
@ -123,8 +126,7 @@ export default {
|
|||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getConfig('open_dark_light');
|
this.getConfig('open_dark_light');
|
||||||
this.getConfig('dark_bg');
|
|
||||||
this.getConfig('light_bg');
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
@ -138,7 +140,7 @@ export default {
|
|||||||
if(value!==''){
|
if(value!==''){
|
||||||
axios({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
url: '/api//updateConfig',
|
url: '/api/updateConfig',
|
||||||
params: {
|
params: {
|
||||||
name:name,
|
name:name,
|
||||||
value:value,
|
value:value,
|
||||||
@ -280,9 +282,10 @@ export default {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
width: 800px;
|
width: 250px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
background-color: var(--theme-bg-color);
|
background-color: var(--theme-bg-color);
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
|
@ -9,7 +9,11 @@
|
|||||||
name="multipartFile"
|
name="multipartFile"
|
||||||
|
|
||||||
>
|
>
|
||||||
<img v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" />
|
<el-image v-if="imageUrl" width="200px" height="200px" :src="'data:image/jpg;base64,'+imageUrl" class="avatar" >
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 100%" :src="require('@/assets/img/null.png')" alt="图标">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
</template>
|
</template>
|
||||||
@ -103,7 +107,7 @@ export default {
|
|||||||
name:name
|
name:name
|
||||||
},
|
},
|
||||||
}).then(function (res) {
|
}).then(function (res) {
|
||||||
if(res!==undefined){
|
if(res.data){
|
||||||
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
|
_this.imageUrl=btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')), 'base64';
|
||||||
}else{
|
}else{
|
||||||
return false;
|
return false;
|
||||||
@ -137,9 +141,9 @@ export default {
|
|||||||
const isJPG = file.type === "image/jpeg";
|
const isJPG = file.type === "image/jpeg";
|
||||||
const isJPG2 = file.type === "image/jpg";
|
const isJPG2 = file.type === "image/jpg";
|
||||||
const isPNG = file.type === "image/png";
|
const isPNG = file.type === "image/png";
|
||||||
// const isGif = file.type === "image/gif";
|
const isIcon = file.type === "image/x-icon";
|
||||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isJPG && !isJPG2 && !isPNG) {
|
if (!isJPG && !isJPG2 && !isPNG && !isIcon) {
|
||||||
this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
|
this.$message.warning("只支持jpg,png,jpeg,gif格式图片");
|
||||||
}
|
}
|
||||||
if (!isLt5M) {
|
if (!isLt5M) {
|
||||||
|
@ -177,7 +177,7 @@ const router = new VueRouter({
|
|||||||
})
|
})
|
||||||
// // 导航守卫:使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
|
// // 导航守卫:使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, from, next) => {
|
||||||
if (to.path === '/home' || to.path === '/news') {
|
if (to.path === '/home' || to.path === '/news' || to.path === '/nav') {
|
||||||
next();
|
next();
|
||||||
} else {
|
} else {
|
||||||
let token = localStorage.getItem('Authorization');
|
let token = localStorage.getItem('Authorization');
|
||||||
|
@ -5,7 +5,7 @@ Vue.use(Vuex)
|
|||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
theme:'dark',
|
theme:localStorage.getItem('theme') ? localStorage.getItem('theme') : '',
|
||||||
userId:localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
|
userId:localStorage.getItem('userId') ? localStorage.getItem('userId') : '',
|
||||||
userRole:localStorage.getItem('userRole') ? localStorage.getItem('userRole') : '',
|
userRole:localStorage.getItem('userRole') ? localStorage.getItem('userRole') : '',
|
||||||
// 存储token
|
// 存储token
|
||||||
@ -14,9 +14,9 @@ export default new Vuex.Store({
|
|||||||
getters: {
|
getters: {
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_THEME:(state,data)=>{
|
setTheme:(state,data)=>{
|
||||||
state.theme=data;
|
state.theme=data.theme;
|
||||||
window.sessionStorage.setItem('theme',data);
|
localStorage.setItem('theme',data.theme);
|
||||||
},
|
},
|
||||||
changeLogin (state, user) {
|
changeLogin (state, user) {
|
||||||
state.Authorization = user.Authorization;
|
state.Authorization = user.Authorization;
|
||||||
|
@ -4,12 +4,17 @@
|
|||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<body translate="no">
|
<body translate="no">
|
||||||
<div class="video-bg">
|
<div class="video-bg">
|
||||||
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
|
<el-image v-if="imageUrl" style="width: 100%;height: 100%" :src="'data:image/jpg;base64,'+imageUrl">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<img style="width: 100%" :src="require('@/assets/img/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg')" alt="背景">
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
<video v-else width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
|
||||||
<source src="../assets/video/background.mp4" type="video/mp4">
|
<source src="../assets/video/background.mp4" type="video/mp4">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div class="dark-light" @click="changeStyle">
|
<div v-if="value==='1'" class="dark-light" @click="changeStyle">
|
||||||
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
||||||
stroke-linejoin="round">
|
stroke-linejoin="round">
|
||||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||||||
@ -32,6 +37,7 @@ import HomeHeader from "@/components/home/HomeHeader.vue";
|
|||||||
import LeftSide from "@/components/home/LeftSide.vue";
|
import LeftSide from "@/components/home/LeftSide.vue";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
import {mapMutations} from "vuex";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -43,15 +49,14 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isLight: false,
|
isLight: false,
|
||||||
darkMode: window.sessionStorage.getItem('theme'),
|
|
||||||
folderTrue: [],
|
folderTrue: [],
|
||||||
folderFalse: [],
|
folderFalse: [],
|
||||||
|
value:null,
|
||||||
|
imageUrl:null,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
|
||||||
let nowDate = new Date()
|
let nowDate = new Date()
|
||||||
let hour = nowDate.getHours()
|
let hour = nowDate.getHours()
|
||||||
//黑夜时
|
//黑夜时
|
||||||
@ -59,25 +64,92 @@ export default {
|
|||||||
this.goDark()
|
this.goDark()
|
||||||
}
|
}
|
||||||
//根据本地存储状态哦按段
|
//根据本地存储状态哦按段
|
||||||
if (this.darkMode === 'dark') {
|
if (localStorage.getItem('theme') === 'dark') {
|
||||||
this.goDark()
|
this.goDark()
|
||||||
|
}else{
|
||||||
|
this.goLight();
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getConfig('open_dark_light');
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|
||||||
methods: {
|
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.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) => {
|
||||||
|
})
|
||||||
|
} 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() {
|
goDark() {
|
||||||
|
this.getImageByConfig('dark_bg_file');
|
||||||
//黑夜的
|
//黑夜的
|
||||||
document.body.classList.remove('light-mode')
|
document.body.classList.remove('light-mode')
|
||||||
window.sessionStorage.setItem('theme', 'dark')
|
this.setTheme({theme:'dark'})
|
||||||
},
|
},
|
||||||
goLight() {
|
goLight() {
|
||||||
|
this.getImageByConfig('light_bg_file');
|
||||||
//白天的
|
//白天的
|
||||||
document.body.classList.add('light-mode')
|
document.body.classList.add('light-mode')
|
||||||
window.sessionStorage.setItem('theme', 'light')
|
this.setTheme({theme:'light'});
|
||||||
},
|
},
|
||||||
changeStyle() {
|
changeStyle() {
|
||||||
this.isLight = !this.isLight
|
this.isLight = !this.isLight
|
||||||
@ -94,9 +166,6 @@ export default {
|
|||||||
// document.body.classList.toggle('light-mode');
|
// document.body.classList.toggle('light-mode');
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -3,15 +3,15 @@
|
|||||||
<!-- <HomePage></HomePage>-->
|
<!-- <HomePage></HomePage>-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<body translate="no">
|
<body translate="no">
|
||||||
<div class="video-bg">
|
<div class="video-bg">
|
||||||
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
|
<video width="320" height="240" autoplay="" loop="" muted="" __idm_id__="1581057">
|
||||||
<source src="../assets/video/background.mp4" type="video/mp4">
|
<source src="../assets/video/background.mp4" type="video/mp4">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div class="dark-light">
|
<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"
|
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
||||||
stroke-linejoin="round">
|
stroke-linejoin="round" @click="changeStyle">
|
||||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
@ -31,7 +31,8 @@
|
|||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
|
import SettingHeader from "@/components/setting/layout/SettingHeader.vue";
|
||||||
import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
|
import SettingLeftSide from "@/components/setting/layout/SettingLeftSide.vue";
|
||||||
|
import axios from "axios";
|
||||||
|
import {mapMutations} from "vuex";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SettingsView',
|
name: 'SettingsView',
|
||||||
@ -40,23 +41,106 @@ export default {
|
|||||||
SettingHeader,
|
SettingHeader,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
value:null,
|
||||||
|
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.toggleDarkLight();
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
this.getConfig('open_dark_light');
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods:{
|
methods:{
|
||||||
toggleDarkLight() {
|
...mapMutations(['setTheme']),
|
||||||
const toggleButton = document.querySelector('.dark-light');
|
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.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;
|
||||||
|
}
|
||||||
|
|
||||||
toggleButton.addEventListener('click', () => {
|
}).catch((error) => {
|
||||||
document.body.classList.toggle('light-mode');
|
})
|
||||||
});
|
} 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>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user