update
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<LeftSide :category="category"></LeftSide>
|
||||
<div class="DefinedPage" >
|
||||
<div class="LeftPart" style="overflow: auto">
|
||||
<div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
|
||||
@@ -139,7 +141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HotRecomment from "@/components/detail/HotRecomment.vue";
|
||||
@@ -149,13 +151,15 @@ import UserComment from "@/components/detail/UserComment.vue";
|
||||
import Vue from "vue";
|
||||
import * as echarts from 'echarts'
|
||||
import axios from "axios";
|
||||
import LeftSide from "@/components/home/LeftSide.vue";
|
||||
Vue.prototype.$echarts = echarts;
|
||||
export default {
|
||||
name:"NavDetail",
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
components: {HotRecomment,NewRecomment,RandomRecomment,UserComment},
|
||||
components: {LeftSide, HotRecomment,NewRecomment,RandomRecomment,UserComment},
|
||||
data() {
|
||||
return {
|
||||
category:[],
|
||||
visible: false,
|
||||
//返回数据：时间列表
|
||||
TimeList:[],
|
||||
@@ -177,6 +181,7 @@ export default {
|
||||
this.GetNav(this.UrlId);
|
||||
this.getFormatDate();
|
||||
this.initEchart();
|
||||
this.getCategories();
|
||||
|
||||
},
|
||||
created() {
|
||||
@@ -186,6 +191,28 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getCategories() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson',
|
||||
}).then(function (res) {
|
||||
// console.log(res);
|
||||
if (res.data.data) {
|
||||
_this.category = res.data.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
// 时间转换：
|
||||
getFormatDate() {
|
||||
var that = this;
|
||||
|
||||
@@ -17,13 +17,24 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="upload-div">
|
||||
<i class="upload el-icon-upload"></i>
|
||||
</div>
|
||||
|
||||
<el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
|
||||
<div class="upload-div" @click="upload">
|
||||
<i class="upload el-icon-upload"></i>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div v-show="isLogin" class="login-div">
|
||||
<i @click="openLoginDialog" class="login el-icon-s-custom"></i>
|
||||
</div>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<div class="avatar-div"
|
||||
style="border-radius: 50px;width: 44px;height: 44px;margin-left: 20px;cursor: pointer" v-show="!isLogin">
|
||||
<el-avatar> user</el-avatar>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="setting">书签设置</el-dropdown-item>
|
||||
<el-dropdown-item command="signOut">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<!--登录弹窗-->
|
||||
<el-dialog
|
||||
@@ -242,11 +253,14 @@ import $ from 'jquery'
|
||||
import Vue from "vue";
|
||||
import axios from "axios";
|
||||
import {mapMutations} from "vuex";
|
||||
// import {getUserIP} from '@/utils/getIp'
|
||||
|
||||
export default {
|
||||
name: "HomeHeader",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
TabsValue: '1',
|
||||
tabList: [
|
||||
{path: '/home', libel: '首页'},
|
||||
@@ -304,7 +318,8 @@ export default {
|
||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
userToken: '',
|
||||
isLogin:true,
|
||||
isLogin: true,
|
||||
ip:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -314,17 +329,74 @@ export default {
|
||||
this.changeImg();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...mapMutations(['changeLogin']),
|
||||
...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
|
||||
|
||||
upload(){
|
||||
if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
|
||||
this.$router.push({
|
||||
path:'/importExport',
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "登录状态失效，请重新登录！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
handleCommand(cmditem) {
|
||||
if (!cmditem) {
|
||||
this.$message("菜单选项缺少command属性");
|
||||
return;
|
||||
}
|
||||
switch (cmditem) {
|
||||
case "signOut":
|
||||
this.signOut();
|
||||
break;
|
||||
case "setting":
|
||||
this.goToSetting();
|
||||
break;
|
||||
}
|
||||
},
|
||||
goToSetting(){
|
||||
if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
|
||||
this.$router.push({
|
||||
path:'/admin',
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "登录状态失效，请重新登录！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
signOut(){
|
||||
localStorage.removeItem("Authorization")
|
||||
localStorage.removeItem("userId")
|
||||
localStorage.removeItem("userRole")
|
||||
this.$router.push({
|
||||
path:'/home',
|
||||
})
|
||||
setTimeout(()=>{
|
||||
window.location.reload()
|
||||
},1000)
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
//切换到找回密码
|
||||
toRePassword() {
|
||||
this.TabsValue = '3';
|
||||
},
|
||||
closeLoginDialog() {
|
||||
this.loginDialogVisible=false;
|
||||
this.loginDialogVisible = false;
|
||||
},
|
||||
// 打开登陆注册
|
||||
openLoginDialog() {
|
||||
@@ -371,45 +443,50 @@ export default {
|
||||
},
|
||||
// 登录提交
|
||||
submitLoginForm(formName) {
|
||||
let _this=this;
|
||||
let _this = this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/login',
|
||||
params: this.loginForm
|
||||
}).then(function (res) {
|
||||
if(res.data.code!==200){
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 0
|
||||
});
|
||||
}else{
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, "登录成功！"),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
// _this.userToken = 'Bearer ' + res.data.token;
|
||||
_this.userToken = res.data.token;
|
||||
_this.changeLogin({ Authorization: _this.userToken });
|
||||
_this.closeLoginDialog();
|
||||
setTimeout(()=>{
|
||||
window.location.reload();
|
||||
},2000)
|
||||
|
||||
}
|
||||
|
||||
}).catch((error)=>{
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/login',
|
||||
params: this.loginForm
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error===null?'':error,
|
||||
message: res.data.msg,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, "登录成功！"),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
|
||||
// console.log(res);
|
||||
// _this.userToken = 'Bearer ' + res.data.token;
|
||||
_this.userToken = res.data.token;
|
||||
_this.changeLogin({Authorization: _this.userToken});
|
||||
_this.setUserId({userId: res.data.Id});
|
||||
_this.setUserRole({userRole: res.data.roleId});
|
||||
_this.closeLoginDialog();
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error === null ? '' : error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请填写完整信息！",
|
||||
@@ -422,7 +499,7 @@ export default {
|
||||
submitRegisterForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.registerFrom.userPassword===this.registerFrom.repassword){
|
||||
if (this.registerFrom.userPassword === this.registerFrom.repassword) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/register',
|
||||
@@ -435,21 +512,21 @@ export default {
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
}).catch((error)=>{
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "密码不一致",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请填写完整信息！",
|
||||
@@ -459,25 +536,25 @@ export default {
|
||||
})
|
||||
},
|
||||
// 找回密码
|
||||
submitRePasswordForm(formName){
|
||||
let _this=this;
|
||||
submitRePasswordForm(formName) {
|
||||
let _this = this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.repasswordForm.userPassword===this.repasswordForm.repassword){
|
||||
if (this.repasswordForm.userPassword === this.repasswordForm.repassword) {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/findThePassword',
|
||||
params: this.repasswordForm
|
||||
}).then(function (res) {
|
||||
if(res.data.msg==="重置成功"){
|
||||
if (res.data.msg === "重置成功") {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
_this.TabsValue='1';
|
||||
}else{
|
||||
_this.TabsValue = '1';
|
||||
} else {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
@@ -486,21 +563,21 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error)=>{
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "密码不一致",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请填写完整信息！",
|
||||
@@ -515,53 +592,53 @@ export default {
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendRegisterEmail() {
|
||||
let _this=this;
|
||||
if (this.registerFrom.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/sendActiveCode',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!_this.timer) {
|
||||
_this.sendTime = TIME_COUNT;
|
||||
_this.showTime = false;
|
||||
_this.timer = setInterval(() => {
|
||||
if (_this.sendTime > 0 && _this.sendTime <= TIME_COUNT) {
|
||||
_this.sendTime--;
|
||||
} else {
|
||||
_this.showTime = true;
|
||||
clearInterval(_this.timer); // 清除定时器
|
||||
_this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: '请填写邮箱！',
|
||||
let _this = this;
|
||||
if (this.registerFrom.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/sendActiveCode',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!_this.timer) {
|
||||
_this.sendTime = TIME_COUNT;
|
||||
_this.showTime = false;
|
||||
_this.timer = setInterval(() => {
|
||||
if (_this.sendTime > 0 && _this.sendTime <= TIME_COUNT) {
|
||||
_this.sendTime--;
|
||||
} else {
|
||||
_this.showTime = true;
|
||||
clearInterval(_this.timer); // 清除定时器
|
||||
_this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: '请填写邮箱！',
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendRePasswordEmail() {
|
||||
let _this=this;
|
||||
let _this = this;
|
||||
if (this.repasswordForm.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
@@ -588,7 +665,7 @@ export default {
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
@@ -596,7 +673,7 @@ export default {
|
||||
});
|
||||
})
|
||||
|
||||
}else {
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: '请填写邮箱！',
|
||||
@@ -605,10 +682,10 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
changeImg(){
|
||||
setTimeout(()=>{
|
||||
changeImg() {
|
||||
setTimeout(() => {
|
||||
this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime();
|
||||
},30000)
|
||||
}, 30000)
|
||||
},
|
||||
//点击图片更换验证码
|
||||
resetImg() {
|
||||
@@ -632,12 +709,14 @@ export default {
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.login{
|
||||
|
||||
.login {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.login-div{
|
||||
|
||||
.login-div {
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -646,17 +725,20 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-div:hover{
|
||||
|
||||
.login-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload{
|
||||
|
||||
.upload {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
|
||||
}
|
||||
.upload-div{
|
||||
|
||||
.upload-div {
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -665,16 +747,19 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.upload-div:hover{
|
||||
|
||||
.upload-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.notice{
|
||||
|
||||
.notice {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.notice-div{
|
||||
|
||||
.notice-div {
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -682,8 +767,13 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.notice-div:hover{
|
||||
|
||||
.notice-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<CarouselComponent></CarouselComponent>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<LeftSide :category="category"></LeftSide>
|
||||
<div class="main-container">
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<CarouselComponent></CarouselComponent>
|
||||
</div>
|
||||
<NoticeComponent></NoticeComponent>
|
||||
<div v-for="(item,index) in navList" :key="index" class="content-section">
|
||||
<div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
|
||||
<div :id="item.name" 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-unfold"></i>{{item.name}}</div>
|
||||
</div>
|
||||
@@ -16,6 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -25,17 +28,26 @@ import NavList from "@/components/home/NavList.vue";
|
||||
import NoticeComponent from "@/components/home/Notice.vue";
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
import LeftSide from "@/components/home/LeftSide.vue";
|
||||
|
||||
export default {
|
||||
name:"HomePage",
|
||||
components:{
|
||||
name: "HomePage",
|
||||
components: {
|
||||
LeftSide,
|
||||
NoticeComponent,
|
||||
NavList,
|
||||
CarouselComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navList:[],
|
||||
}},
|
||||
navList: [],
|
||||
category: [],
|
||||
}
|
||||
},
|
||||
// 监听,当路由发生变化的时候执行
|
||||
watch: {
|
||||
'$route': 'getPath'
|
||||
},
|
||||
mounted() {
|
||||
this.fun1();
|
||||
this.fun2();
|
||||
@@ -43,36 +55,62 @@ export default {
|
||||
this.fun4();
|
||||
this.dropdownFun();
|
||||
this.getNavList();
|
||||
this.getCategories();
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getCategories() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson',
|
||||
}).then(function (res) {
|
||||
// console.log(res);
|
||||
if (res.data.data) {
|
||||
_this.category = res.data.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
getPath() {
|
||||
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
||||
},
|
||||
|
||||
// 获取导航详情列表
|
||||
getNavList() {
|
||||
let _this=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJsonNew',
|
||||
}).then(function (res) {
|
||||
if(res.data){
|
||||
_this.navList=res.data;
|
||||
}
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error===null?'':error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJsonNew',
|
||||
}).then(function (res) {
|
||||
if (res.data) {
|
||||
_this.navList = res.data;
|
||||
}
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error === null ? '' : error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
|
||||
fun1(){
|
||||
fun1() {
|
||||
$(document).click(function (e) {
|
||||
var container = $(".status-button");
|
||||
var dd = $(".dropdown");
|
||||
@@ -81,7 +119,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
fun2(){
|
||||
fun2() {
|
||||
$(".status-button:not(.open)").on("click", function () {
|
||||
$(".overlay-app").addClass("is-active");
|
||||
});
|
||||
@@ -89,17 +127,17 @@ export default {
|
||||
$(".overlay-app").removeClass("is-active");
|
||||
});
|
||||
},
|
||||
fun3(){
|
||||
fun3() {
|
||||
$(".status-button:not(.open)").click(function () {
|
||||
$(".pop-up").addClass("visible");
|
||||
});
|
||||
},
|
||||
fun4(){
|
||||
fun4() {
|
||||
$(".pop-up .close").click(function () {
|
||||
$(".pop-up").removeClass("visible");
|
||||
});
|
||||
},
|
||||
dropdownFun(){
|
||||
dropdownFun() {
|
||||
const dropdowns = document.querySelectorAll(".dropdown");
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.addEventListener("click", e => {
|
||||
@@ -110,6 +148,5 @@ export default {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -1,71 +1,25 @@
|
||||
<template>
|
||||
<div class="left-side">
|
||||
<!-- <div class="side-wrapper">-->
|
||||
<!-- <div class="side-title">Apps</div>-->
|
||||
<!-- <div class="side-menu">-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512">-->
|
||||
<!-- <g xmlns="http://www.w3.org/2000/svg" fill="currentColor">-->
|
||||
<!-- <path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>-->
|
||||
<!-- </g>-->
|
||||
<!-- <path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff"></path>-->
|
||||
<!-- <path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- All Apps-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 488.932 488.932" fill="currentColor">-->
|
||||
<!-- <path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Updates-->
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="HeadLine" style="margin-top:10px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-home"></i>快速导航</div>
|
||||
</div>
|
||||
<el-tree :data="category" :props="defaultProps" style="width:200px;margin-top:30px;" >
|
||||
<el-tree :data="category"
|
||||
:props="defaultProps"
|
||||
style="width:200px;margin-top:30px;"
|
||||
@node-click="handleTreeNodeClick"
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-tree{
|
||||
background-color: rgb(255 255 255 / 31%);
|
||||
border-radius:8px;
|
||||
font-family: SimHei;
|
||||
font-size:15px;
|
||||
font-weight:600;
|
||||
color: #3d3d3d;
|
||||
border-color:var(--border-color);
|
||||
border-width: 5px;
|
||||
}
|
||||
::v-deep .el-tree-node__content{
|
||||
height:50px;
|
||||
border-radius:8px;
|
||||
border-bottom: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree .el-icon-caret-right:before{
|
||||
content: url("../../assets/img/arrowRight.svg");
|
||||
}
|
||||
::v-deep .el-tree-node:focus>.el-tree-node__content{
|
||||
background-color: #8fd3ff !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"LeftSide",
|
||||
props:{
|
||||
category:Array
|
||||
name: "LeftSide",
|
||||
props: {
|
||||
category: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -73,19 +27,96 @@ export default {
|
||||
children: 'childUC',
|
||||
label: 'name'
|
||||
}
|
||||
}},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleTreeNodeClick(node) {
|
||||
if(this.$route.path==='/home'){
|
||||
if (node.name) {
|
||||
this.$router.push({
|
||||
path: '/home',
|
||||
query: {
|
||||
name: `#${node.name}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}else if(this.$route.path==='/myNav'){
|
||||
if (node.name) {
|
||||
this.$router.push({
|
||||
path: '/myNav',
|
||||
query: {
|
||||
name: `#${node.name}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}else if(this.$route.path==='/news') {
|
||||
if (node.name) {
|
||||
this.$router.push({
|
||||
path: '/home',
|
||||
query: {
|
||||
name: `#${node.name}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}else if(this.$route.path==='/nav'){
|
||||
if (node.name) {
|
||||
this.$router.push({
|
||||
path: '/home',
|
||||
query: {
|
||||
name: `#${node.name}`,
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-tree {
|
||||
background-color: rgb(255 255 255 / 31%);
|
||||
border-radius: 8px;
|
||||
font-family: SimHei;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #3d3d3d;
|
||||
border-color: var(--border-color);
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content {
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
border-bottom: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree .el-icon-caret-right:before {
|
||||
content: url("../../assets/img/arrowRight.svg");
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: #8fd3ff !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -4,32 +4,34 @@
|
||||
<el-image v-if="nav.icon" :src="nav.icon" style="width: 40px;height: 40px"></el-image>
|
||||
<div class="content-card">
|
||||
|
||||
<el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
|
||||
<span v-if="nav.name" class="content-title">{{ nav.name}}</span>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
|
||||
<span v-if="nav.name" class="content-title">{{ nav.name }}</span>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="nav.desc" class="item" effect="dark" :content="nav.desc" placement="bottom">
|
||||
<span v-if="nav.desc" class="content-desc">{{ nav.desc.substr(0, 8) + '...' }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip class="item" effect="dark" content="详情" placement="right" @click="goToNavDetail()">
|
||||
<i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
|
||||
<i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- <div class="app-card__subtext">{{nav.desc}}</div>-->
|
||||
<div class="dividing-line"></div>
|
||||
<div class="app-card-buttons">
|
||||
<el-tooltip class="item" effect="dark" content="访问需要代理" 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>
|
||||
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
|
||||
<el-tooltip placement="bottom" width="150"
|
||||
trigger="hover"
|
||||
effect="dark" close-delay="2000">
|
||||
<el-tooltip placement="bottom" width="150"
|
||||
trigger="hover"
|
||||
effect="dark" close-delay="2000">
|
||||
<div class="MyPopover" slot="content">
|
||||
<span style="font-size:12px !important;">【{{nav.name}}】手机二维码</span><br/><br/>
|
||||
<div style="width:100% ;text-align: center"><img style="width:150px" :src="'data:image/jpg;base64,'+getQR(nav.urlId,nav.icon)" /></div>
|
||||
<span style="font-size:12px !important;">【{{ nav.name }}】手机二维码</span><br/><br/>
|
||||
<div style="width:100% ;text-align: center"><img style="width:150px"
|
||||
:src="getQR(nav.urlId,nav.icon)"/>
|
||||
</div>
|
||||
</div>
|
||||
<i class="qr el-icon-s-grid"></i>
|
||||
<i class="qr el-icon-s-grid"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,50 +48,51 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imageCode:'',
|
||||
imageCode: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getQR(1,'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a9f967d58_1703324152309_20231223.webp');
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// getQR(url_id,icon_url) {
|
||||
// let _this=this;
|
||||
// axios({
|
||||
// method: 'post',
|
||||
// url: '/api/qrcode/qrc_return',
|
||||
// params:{
|
||||
// url_id:url_id,
|
||||
// icon_url:icon_url
|
||||
// }
|
||||
// }).then(function (res) {
|
||||
// if(res.data){
|
||||
// _this.navList=res.data;
|
||||
// }
|
||||
// }).catch((error)=>{
|
||||
// Vue.prototype.$notify.error({
|
||||
// title: '错误',
|
||||
// message: error===null?'':error,
|
||||
// offset: 0
|
||||
// });
|
||||
// })
|
||||
//
|
||||
// },
|
||||
goToNavDetail(){
|
||||
if(this.nav.urlId){
|
||||
getQR(url_id, icon_url) {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/qrcode/qrc_return',
|
||||
data: {
|
||||
url_id: url_id,
|
||||
icon_url: icon_url
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res.data) {
|
||||
_this.imageCode = "data:image/jpg;base64," + res.data;
|
||||
}
|
||||
return false;
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error === null ? '' : error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
return this.imageCode
|
||||
},
|
||||
goToNavDetail() {
|
||||
if (this.nav.urlId) {
|
||||
let pathInfo = this.$router.resolve({
|
||||
path: '/nav',
|
||||
query:{
|
||||
uid:this.nav.urlId,
|
||||
refresh:true,
|
||||
query: {
|
||||
uid: this.nav.urlId,
|
||||
refresh: true,
|
||||
}
|
||||
})
|
||||
window.open(pathInfo.href, '_self');
|
||||
}else{
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -117,7 +120,7 @@ export default {
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
color: var(--theme-color);
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
}
|
||||
|
||||
.content-desc {
|
||||
@@ -129,17 +132,20 @@ export default {
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
}
|
||||
.card-icon{
|
||||
|
||||
.card-icon {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.card-icon:hover{
|
||||
|
||||
.card-icon:hover {
|
||||
color: #5ddcff;
|
||||
}
|
||||
.qr:hover{
|
||||
|
||||
.qr:hover {
|
||||
color: #5ddcff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,59 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<NewsCard :loading="loading" :news="baidu"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="douying"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="weibo"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="zhihu"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="bili"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="toutiao"></NewsCard>
|
||||
<div class="wrapper">
|
||||
<LeftSide :category="category"></LeftSide>
|
||||
<div class="main">
|
||||
<NewsCard :loading="loading" :news="baidu"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="douying"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="weibo"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="zhihu"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="bili"></NewsCard>
|
||||
<NewsCard :loading="loading" :news="toutiao"></NewsCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import NewsCard from "@/components/hotNews/NewsCard.vue";
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
import LeftSide from "@/components/home/LeftSide.vue";
|
||||
|
||||
export default {
|
||||
name: "HotNews",
|
||||
components: {NewsCard},
|
||||
components: {LeftSide, NewsCard},
|
||||
data() {
|
||||
return {
|
||||
loading:true,
|
||||
baidu:{
|
||||
title:"百度热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a2ba0bd25_1703322296568_20231223.webp',
|
||||
loading: true,
|
||||
category:[],
|
||||
baidu: {
|
||||
title: "百度热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a2ba0bd25_1703322296568_20231223.webp',
|
||||
},
|
||||
douying:{
|
||||
title:"抖音热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a50348009_1703322881030_20231223.webp',
|
||||
douying: {
|
||||
title: "抖音热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a50348009_1703322881030_20231223.webp',
|
||||
},
|
||||
weibo:{
|
||||
title:"微博热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a7fe6bebd_1703323645679_20231223.webp',
|
||||
weibo: {
|
||||
title: "微博热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a7fe6bebd_1703323645679_20231223.webp',
|
||||
},
|
||||
zhihu:{
|
||||
title:"知乎热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a93b167e7_1703323961912_20231223.webp',
|
||||
zhihu: {
|
||||
title: "知乎热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a93b167e7_1703323961912_20231223.webp',
|
||||
},
|
||||
bili:{
|
||||
title:"哔哩哔哩热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a9f967d58_1703324152309_20231223.webp',
|
||||
bili: {
|
||||
title: "哔哩哔哩热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a9f967d58_1703324152309_20231223.webp',
|
||||
},
|
||||
toutiao:{
|
||||
title:"今日头条热搜榜",
|
||||
hot:[],
|
||||
icon:'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586aa87a24ab_1703324293242_20231223.webp',
|
||||
toutiao: {
|
||||
title: "今日头条热搜榜",
|
||||
hot: [],
|
||||
icon: 'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586aa87a24ab_1703324293242_20231223.webp',
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -58,12 +64,35 @@ export default {
|
||||
this.getZhiHuHot();
|
||||
this.getBiliHot();
|
||||
this.getTouTiaoHot();
|
||||
this.getCategories();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
|
||||
getCategories() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson',
|
||||
}).then(function (res) {
|
||||
// console.log(res);
|
||||
if (res.data.data) {
|
||||
_this.category = res.data.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getBaiDuHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
@@ -77,8 +106,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.loading=false;
|
||||
_this.baidu.hot=res.data.data;
|
||||
_this.loading = false;
|
||||
_this.baidu.hot = res.data.data;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@@ -102,8 +131,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.douying.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
_this.douying.hot = res.data.data;
|
||||
_this.loading = false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@@ -127,8 +156,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.weibo.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
_this.weibo.hot = res.data.data;
|
||||
_this.loading = false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@@ -152,8 +181,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.zhihu.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
_this.zhihu.hot = res.data.data;
|
||||
_this.loading = false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@@ -177,8 +206,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.bili.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
_this.bili.hot = res.data.data;
|
||||
_this.loading = false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
@@ -202,8 +231,8 @@ export default {
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.toutiao.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
_this.toutiao.hot = res.data.data;
|
||||
_this.loading = false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
|
||||
@@ -1,56 +1,12 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-section">
|
||||
<div class="content-section-title">Apps in your plan</div>
|
||||
<div class="apps-card">
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
|
||||
</g>
|
||||
</svg>
|
||||
Premiere Pro
|
||||
</span>
|
||||
<div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
|
||||
<path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
|
||||
</g>
|
||||
</svg>
|
||||
InDesign
|
||||
</span>
|
||||
<div class="app-card__subtext">Design and publish great projects & mockups</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
||||
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
||||
</g>
|
||||
</svg>
|
||||
After Effects
|
||||
</span>
|
||||
<div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<LeftSide :category="category"></LeftSide>
|
||||
<div class="main-container">
|
||||
<div class="content-wrapper">
|
||||
<div v-for="(item,index) in userNavList" :key="index" class="content-section">
|
||||
<div :id="item.name" class="content-section-title">{{ item.name }}</div>
|
||||
<div class="apps-card">
|
||||
<NavList v-if="item.childUC" v-for="(item,index2) in item.childUC" :key="index2" :nav="item"></NavList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,31 +16,112 @@
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import NavList from "@/components/home/NavList.vue";
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
import LeftSide from "@/components/home/LeftSide.vue";
|
||||
|
||||
export default {
|
||||
name:"MyNav",
|
||||
components:{
|
||||
name: "MyNav",
|
||||
components: {
|
||||
LeftSide,
|
||||
NavList
|
||||
// MainHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}},
|
||||
userNavList: [],
|
||||
category: [],
|
||||
}
|
||||
},
|
||||
// 监听,当路由发生变化的时候执行
|
||||
watch: {
|
||||
'$route': 'getPath'
|
||||
},
|
||||
mounted() {
|
||||
this.Fun1();
|
||||
this.Fun2();
|
||||
this.Fun3();
|
||||
this.Fun4();
|
||||
this.dropdownFun();
|
||||
this.getUserNav();
|
||||
this.getCategoriesByUser();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
Fun1(){
|
||||
getCategoriesByUser(){
|
||||
let _this = this;
|
||||
if(localStorage.getItem('userId')&&localStorage.getItem('Authorization')){
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkToJsonByUserId',
|
||||
params:{
|
||||
userId:localStorage.getItem('userId')
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res.data.data) {
|
||||
_this.category = res.data.data;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "登录信息失效，请重新登录",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getPath() {
|
||||
document.querySelector(this.$route.query.name).scrollIntoView(true)
|
||||
},
|
||||
|
||||
getUserNav() {
|
||||
let _this = this;
|
||||
if (localStorage.getItem("userId")) {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/UrlAndCate/disposeBookmarkToJson',
|
||||
params: {
|
||||
userId: localStorage.getItem("userId"),
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res.data) {
|
||||
_this.userNavList = res.data;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error === null ? '' : error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请先登录！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
Fun1() {
|
||||
$(document).click(function (e) {
|
||||
var container = $(".status-button");
|
||||
var dd = $(".dropdown");
|
||||
@@ -93,7 +130,7 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
Fun2(){
|
||||
Fun2() {
|
||||
$(".status-button:not(.open)").on("click", function () {
|
||||
$(".overlay-app").addClass("is-active");
|
||||
});
|
||||
@@ -101,17 +138,17 @@ export default {
|
||||
$(".overlay-app").removeClass("is-active");
|
||||
});
|
||||
},
|
||||
Fun3(){
|
||||
Fun3() {
|
||||
$(".status-button:not(.open)").click(function () {
|
||||
$(".pop-up").addClass("visible");
|
||||
});
|
||||
},
|
||||
Fun4(){
|
||||
Fun4() {
|
||||
$(".pop-up .close").click(function () {
|
||||
$(".pop-up").removeClass("visible");
|
||||
});
|
||||
},
|
||||
dropdownFun(){
|
||||
dropdownFun() {
|
||||
const dropdowns = document.querySelectorAll(".dropdown");
|
||||
dropdowns.forEach(dropdown => {
|
||||
dropdown.addEventListener("click", e => {
|
||||
@@ -120,7 +157,7 @@ export default {
|
||||
dropdown.classList.add("is-active");
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
263
src/components/setting/home/HomeEChart.vue
Normal file
263
src/components/setting/home/HomeEChart.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import Vue from "vue";
|
||||
Vue.prototype.$echarts = echarts;
|
||||
|
||||
export default {
|
||||
name: "HomeEChart",
|
||||
data() {
|
||||
return {
|
||||
dataList :
|
||||
[{
|
||||
name: "南海诸岛",
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '北京',
|
||||
value: 54
|
||||
},
|
||||
{
|
||||
name: '天津',
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
value: 40
|
||||
},
|
||||
{
|
||||
name: '重庆',
|
||||
value: 75
|
||||
},
|
||||
{
|
||||
name: '河北',
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
name: '河南',
|
||||
value: 83
|
||||
},
|
||||
{
|
||||
name: '云南',
|
||||
value: 11
|
||||
},
|
||||
{
|
||||
name: '辽宁',
|
||||
value: 19
|
||||
},
|
||||
{
|
||||
name: '黑龙江',
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
name: '湖南',
|
||||
value: 69
|
||||
},
|
||||
{
|
||||
name: '安徽',
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
name: '山东',
|
||||
value: 39
|
||||
},
|
||||
{
|
||||
name: '新疆',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '江苏',
|
||||
value: 31
|
||||
},
|
||||
{
|
||||
name: '浙江',
|
||||
value: 104
|
||||
},
|
||||
{
|
||||
name: '江西',
|
||||
value: 36
|
||||
},
|
||||
{
|
||||
name: '湖北',
|
||||
value: 1052
|
||||
},
|
||||
{
|
||||
name: '广西',
|
||||
value: 33
|
||||
},
|
||||
{
|
||||
name: '甘肃',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
name: '山西',
|
||||
value: 9
|
||||
},
|
||||
{
|
||||
name: '内蒙古',
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
name: '陕西',
|
||||
value: 22
|
||||
},
|
||||
{
|
||||
name: '吉林',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '福建',
|
||||
value: 18
|
||||
},
|
||||
{
|
||||
name: '贵州',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '广东',
|
||||
value: 98
|
||||
},
|
||||
{
|
||||
name: '青海',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: '西藏',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '四川',
|
||||
value: 44
|
||||
},
|
||||
{
|
||||
name: '宁夏',
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
name: '海南',
|
||||
value: 22
|
||||
},
|
||||
{
|
||||
name: '台湾',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
name: '香港',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '澳门',
|
||||
value: 5
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.eChartChina();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
eChartChina(){
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
triggerOn: "click",
|
||||
formatter: function(e, t, n) {
|
||||
return .5 == e.value ? e.name + "：登录次数" : e.seriesName + "<br />" + e.name + "：" + e.value
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
top: 10,
|
||||
// left: 26,
|
||||
// bottom: 40,
|
||||
showLabel: !0,
|
||||
text: ["高", "低"],
|
||||
pieces: [{
|
||||
gt: 100,
|
||||
label: "> 100 次",
|
||||
color: "#7f1100"
|
||||
}, {
|
||||
gte: 10,
|
||||
lte: 100,
|
||||
label: "10 - 100 次",
|
||||
color: "#ff5428"
|
||||
}, {
|
||||
gte: 1,
|
||||
lt: 10,
|
||||
label: "1 - 9 次",
|
||||
color: "#ff8c71"
|
||||
}, {
|
||||
value: 0,
|
||||
color: "#ffffff"
|
||||
}],
|
||||
show: !0
|
||||
},
|
||||
geo: {
|
||||
map: "china",
|
||||
roam: !1,
|
||||
scaleLimit: {
|
||||
min: 1,
|
||||
max: 2
|
||||
},
|
||||
zoom: 1,
|
||||
top: 50,
|
||||
label: {
|
||||
normal: {
|
||||
show: !0,
|
||||
fontSize: "14",
|
||||
color: "rgba(0,0,0,0.7)"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//shadowBlur: 50,
|
||||
//shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||||
borderColor: "rgba(0, 0, 0, 0.2)"
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#f2d5ad",
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "登录次数",
|
||||
type: "map",
|
||||
geoIndex: 0,
|
||||
data: this.dataList
|
||||
}]
|
||||
};
|
||||
|
||||
myChart.clear();
|
||||
myChart.setOption(option, true);
|
||||
//图表大小变动从新渲染，动态自适应
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
myChart.resize({
|
||||
width: 600,
|
||||
height: 500
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main{
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
64
src/components/setting/home/InfoCard.vue
Normal file
64
src/components/setting/home/InfoCard.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="info-card">
|
||||
<div class="icon">
|
||||
<img style="width: 70px;height: 70px;margin-left: 10px" src="@/assets/img/bookmark.png">
|
||||
</div>
|
||||
<div class="content">
|
||||
<span class="content-info">4655 /个</span>
|
||||
<span class="content-tag">书签个数</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "InfoCard",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.info-card{
|
||||
justify-content: space-between;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
border: 1px solid;
|
||||
border-color:var(--border-color);
|
||||
background-color: var(--theme-bg-color);
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.icon{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.content-info{
|
||||
font-weight: bolder;
|
||||
font-size: 30px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.content-tag{
|
||||
text-align: end;
|
||||
font-size: 18px;
|
||||
color: var(--theme-color);
|
||||
font-weight: bolder;
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,46 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<PersonalInfoCard></PersonalInfoCard>
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<PersonalInfoCard></PersonalInfoCard>
|
||||
</div>
|
||||
<div style="flex-direction: column;display: flex">
|
||||
<div style="display: flex;flex-direction: row;margin-left: 40px;margin-top: 10px">
|
||||
<InfoCard></InfoCard>
|
||||
<InfoCard style="margin-left: 10px"></InfoCard>
|
||||
</div>
|
||||
<HomeEChart style="margin-left: 40px"></HomeEChart>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PersonalInfoCard from "@/components/setting/home/PersonalInfoCard.vue";
|
||||
import InfoCard from "@/components/setting/home/InfoCard.vue";
|
||||
import HomeEChart from "@/components/setting/home/HomeEChart.vue";
|
||||
|
||||
export default {
|
||||
name: "PersonalHomePage",
|
||||
components: {PersonalInfoCard},
|
||||
components: {HomeEChart, InfoCard, PersonalInfoCard},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
|
||||
}
|
||||
methods: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
.main {
|
||||
//display: flex; //align-items: center; //flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
@@ -2,10 +2,6 @@
|
||||
<div class="header">
|
||||
<div class="menu-circle"></div>
|
||||
<div class="header-menu">
|
||||
<!-- <router-link to="/home"><a class="menu-link is-active" >ALL</a></router-link>-->
|
||||
<!-- <router-link to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>-->
|
||||
<!-- <router-link to="/navDetail"><a class="menu-link">Discover</a></router-link>-->
|
||||
<!-- <a class="menu-link notify" href="#">Market</a>-->
|
||||
</div>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search">
|
||||
@@ -13,19 +9,31 @@
|
||||
<div class="header-profile">
|
||||
<div class="notification">
|
||||
<span class="notification-number">3</span>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
|
||||
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"></path>
|
||||
</svg>
|
||||
<div class="notice-div">
|
||||
<i class="notice el-icon-message-solid"></i>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 512 512" fill="currentColor">
|
||||
<path d="M448.773 235.551A135.893 135.893 0 00451 211c0-74.443-60.557-135-135-135-47.52 0-91.567 25.313-115.766 65.537-32.666-10.59-66.182-6.049-93.794 12.979-27.612 19.013-44.092 49.116-45.425 82.031C24.716 253.788 0 290.497 0 331c0 7.031 1.703 13.887 3.006 20.537l.015.015C12.719 400.492 56.034 436 106 436h300c57.891 0 106-47.109 106-105 0-40.942-25.053-77.798-63.227-95.449z"></path>
|
||||
</svg>
|
||||
<img @click="openLoginDialog" class="profile-img" src="https://images.unsplash.com/photo-1600353068440-6361ef3a86e8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
|
||||
<el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
|
||||
<div class="upload-div" @click="upload">
|
||||
<i class="upload el-icon-upload"></i>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<div class="avatar-div"
|
||||
style="border-radius: 50px;width: 44px;height: 44px;margin-left: 20px;cursor: pointer">
|
||||
<el-avatar> user</el-avatar>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="home">返回首页</el-dropdown-item>
|
||||
<el-dropdown-item command="signOut">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
name:"SettingHeader",
|
||||
components:{
|
||||
@@ -46,10 +54,55 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
openLoginDialog(){
|
||||
this.loginDialogVisible=true;
|
||||
handleCommand(cmditem) {
|
||||
if (!cmditem) {
|
||||
this.$message("菜单选项缺少command属性");
|
||||
return;
|
||||
}
|
||||
switch (cmditem) {
|
||||
case "signOut":
|
||||
this.signOut();
|
||||
break;
|
||||
case "home":
|
||||
this.goToHome();
|
||||
break;
|
||||
}
|
||||
},
|
||||
goToHome(){
|
||||
this.$router.push({
|
||||
path:'/home',
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
|
||||
signOut(){
|
||||
localStorage.removeItem("Authorization")
|
||||
localStorage.removeItem("userId")
|
||||
localStorage.removeItem("userRole")
|
||||
this.$router.push({
|
||||
path:'/home',
|
||||
})
|
||||
// setTimeout(()=>{
|
||||
// window.location.reload()
|
||||
// },1000)
|
||||
|
||||
|
||||
},
|
||||
|
||||
upload(){
|
||||
if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
|
||||
this.$router.push({
|
||||
path:'/importExport',
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "登录状态失效，请重新登录！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
toggleActive(){
|
||||
$(function () {
|
||||
$(".menu-link").click(function () {
|
||||
@@ -58,19 +111,51 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
// reacherBarFun(){
|
||||
// $(".search-bar input").
|
||||
// focus(function () {
|
||||
// $(".header").addClass("wide");
|
||||
// }).
|
||||
// blur(function () {
|
||||
// $(".header").removeClass("wide");
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.upload {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
|
||||
}
|
||||
.notice {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.upload-div {
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.notice-div {
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.notice-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-div:hover {
|
||||
border: 2px solid var(--theme-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user