success news hot
This commit is contained in:
parent
46905ed6f1
commit
2faf2db922
BIN
src/assets/img/baidu.png
Normal file
BIN
src/assets/img/baidu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/img/bilibili.png
Normal file
BIN
src/assets/img/bilibili.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/img/blibli.png
Normal file
BIN
src/assets/img/blibli.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/assets/img/douying.png
Normal file
BIN
src/assets/img/douying.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/img/login.png
Normal file
BIN
src/assets/img/login.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/img/toutiao.png
Normal file
BIN
src/assets/img/toutiao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/img/toutiaosearch.png
Normal file
BIN
src/assets/img/toutiaosearch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/assets/img/weibo.png
Normal file
BIN
src/assets/img/weibo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/assets/img/zhihu.png
Normal file
BIN
src/assets/img/zhihu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@ -6,30 +6,24 @@
|
||||
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
|
||||
</router-link>
|
||||
</div>
|
||||
<!-- <el-menu class="header-menu" :default-active="$route.path" router background-color="#0C0F194C">-->
|
||||
<!-- <el-menu-item class="menu-link is-active" index="/home">ALL</el-menu-item>-->
|
||||
<!-- <el-menu-item class="menu-link notify" index="/news">HotNews</el-menu-item>-->
|
||||
<!-- <el-menu-item class="menu-link" index="/navDetail">Discover</el-menu-item>-->
|
||||
<!-- <el-menu-item class="menu-link notify" index="#">Market</el-menu-item>-->
|
||||
<!-- </el-menu>-->
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search">
|
||||
</div>
|
||||
<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>
|
||||
<div class="upload-div">
|
||||
<i class="upload el-icon-upload"></i>
|
||||
</div>
|
||||
|
||||
<div class="login-div">
|
||||
<i @click="openLoginDialog" class="login el-icon-s-custom"></i>
|
||||
</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="">
|
||||
</div>
|
||||
<!--登录弹窗-->
|
||||
<el-dialog
|
||||
@ -45,20 +39,20 @@
|
||||
<el-tab-pane name="1">
|
||||
<span slot="label"><i class="el-icon-user-solid"></i>登录</span>
|
||||
<el-form :model="loginForm" :rules="rules" ref="loginForm" class="form">
|
||||
<el-form-item prop="username">
|
||||
<el-form-item prop="userLogin">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
v-model="loginForm.userLogin"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="用户名/邮箱"
|
||||
auto-complete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-form-item prop="userPassword">
|
||||
<!-- type：密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="loginForm.password"
|
||||
v-model="loginForm.userPassword"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
@ -138,7 +132,7 @@
|
||||
placeholder="确认密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
<i slot="suffix" :class="icon" @click="showRePass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
@ -155,7 +149,7 @@
|
||||
auto-complete="false"
|
||||
style=""
|
||||
></el-input>
|
||||
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
||||
<el-button style="margin-left: 5px" @click="sendRegisterEmail" type="success" :disabled="!showTime">
|
||||
获取验证码
|
||||
<span v-show="!showTime" class="count">({{ sendTime }}s)</span>
|
||||
</el-button>
|
||||
@ -164,10 +158,11 @@
|
||||
|
||||
</el-form-item>
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button @click="resetForm('registerFrom')">重置</el-button>
|
||||
<el-button type="primary" @click="submitRegisterForm('registerFrom')">注册
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('registerFrom')">重置</el-button>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
@ -175,27 +170,27 @@
|
||||
<el-tab-pane name="3">
|
||||
<span slot="label"><i class="el-icon-edit"></i> 找回密码</span>
|
||||
<el-form :model="repasswordForm" :rules="repasswordRelus" ref="repasswordForm" class="form">
|
||||
<el-form-item prop="email">
|
||||
<el-form-item prop="userEmail">
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="repasswordForm.email"
|
||||
v-model="repasswordForm.userEmail"
|
||||
placeholder="邮箱"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="captcha"
|
||||
<el-form-item prop="activeCode"
|
||||
style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
|
||||
<div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-evenly">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
placeholder="验证码"
|
||||
v-model="repasswordForm.captcha"
|
||||
v-model="repasswordForm.activeCode"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style=""
|
||||
></el-input>
|
||||
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
||||
<el-button style="margin-left: 5px" @click="sendRePasswordEmail" type="success" :disabled="!showTime">
|
||||
获取验证码
|
||||
<span v-show="!showTime" class="count">({{ sendTime }}s)</span>
|
||||
</el-button>
|
||||
@ -203,12 +198,12 @@
|
||||
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-form-item prop="userPassword">
|
||||
<!-- type：密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="repasswordForm.password"
|
||||
v-model="repasswordForm.userPassword"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
@ -224,15 +219,16 @@
|
||||
placeholder="确认密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
<i slot="suffix" :class="icon" @click="showRePass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button type="primary" @click="submitRegisterForm('repasswordForm')">确认
|
||||
<el-button @click="resetForm('repasswordForm')">重置</el-button>
|
||||
<el-button type="primary" @click="submitRePasswordForm('repasswordForm')">确认
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('repasswordForm')">重置</el-button>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
@ -245,6 +241,7 @@
|
||||
import $ from 'jquery'
|
||||
import Vue from "vue";
|
||||
import axios from "axios";
|
||||
import {mapMutations} from "vuex";
|
||||
export default {
|
||||
name: "HomeHeader",
|
||||
components: {},
|
||||
@ -265,8 +262,8 @@ export default {
|
||||
timer: null,
|
||||
codeUrl: 'http://localhost:8080/verifyCode',
|
||||
loginForm: {
|
||||
username: null,
|
||||
password: null,
|
||||
userLogin: null,
|
||||
userPassword: null,
|
||||
code: null,
|
||||
remember: null
|
||||
},
|
||||
@ -278,17 +275,17 @@ export default {
|
||||
repassword: null,
|
||||
},
|
||||
repasswordForm: {
|
||||
email: null,
|
||||
captcha: null,
|
||||
password: null,
|
||||
userEmail: null,
|
||||
activeCode: null,
|
||||
userPassword: null,
|
||||
repassword: null,
|
||||
},
|
||||
rules: {
|
||||
username: [
|
||||
userLogin: [
|
||||
// required：规则，o：失去焦点触发
|
||||
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||
],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
userPassword: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
registerRules: {
|
||||
@ -301,27 +298,32 @@ export default {
|
||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
repasswordRelus: {
|
||||
email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
userEmail: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||
userPassword: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
}
|
||||
},
|
||||
userToken: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.toggleActive();
|
||||
this.reacherBarFun();
|
||||
this.changeImg();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...mapMutations(['changeLogin']),
|
||||
//切换到找回密码
|
||||
toRePassword() {
|
||||
this.TabsValue = '3';
|
||||
},
|
||||
|
||||
closeLoginDialog() {
|
||||
this.loginDialogVisible=false;
|
||||
},
|
||||
// 打开登陆注册
|
||||
openLoginDialog() {
|
||||
this.loginDialogVisible = true;
|
||||
@ -354,26 +356,54 @@ export default {
|
||||
this.icon = "el-icon-lock";
|
||||
}
|
||||
},
|
||||
// 显示确认密码
|
||||
showRePass() {
|
||||
if (this.passwordVisible === "text") {
|
||||
this.passwordVisible = "password";
|
||||
//更换图标
|
||||
this.icon = "el-icon-view";
|
||||
} else {
|
||||
this.passwordVisible = "text";
|
||||
this.icon = "el-icon-lock";
|
||||
}
|
||||
},
|
||||
// 登录提交
|
||||
submitLoginForm() {
|
||||
submitLoginForm(formName) {
|
||||
let _this=this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/login',
|
||||
params: this.registerFrom
|
||||
params: this.loginForm
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
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.$store.state.isLogin='1';
|
||||
// _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)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
message: error===null?'':error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
@ -396,7 +426,7 @@ export default {
|
||||
url: '/api/register',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
@ -426,13 +456,64 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
// 找回密码
|
||||
submitRePasswordForm(formName){
|
||||
let _this=this;
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.repasswordForm.userPassword===this.repasswordForm.repassword){
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/findThePassword',
|
||||
params: this.repasswordForm
|
||||
}).then(function (res) {
|
||||
if(res.data.msg==="重置成功"){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
_this.TabsValue='1';
|
||||
}else{
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "密码不一致",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请填写完整信息！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendEmail() {
|
||||
var _this=this;
|
||||
sendRegisterEmail() {
|
||||
let _this=this;
|
||||
if (this.registerFrom.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
@ -476,6 +557,57 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendRePasswordEmail() {
|
||||
let _this=this;
|
||||
if (this.repasswordForm.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/sendActiveCode',
|
||||
params: this.repasswordForm
|
||||
}).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
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
changeImg(){
|
||||
setTimeout(()=>{
|
||||
this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime();
|
||||
},30000)
|
||||
},
|
||||
//点击图片更换验证码
|
||||
resetImg() {
|
||||
this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime();
|
||||
@ -498,6 +630,58 @@ export default {
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.login{
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.login-div{
|
||||
border-radius: 50px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.login-div:hover{
|
||||
border: 2px solid var(--theme-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.upload{
|
||||
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{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,36 +1,229 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<NewsCard></NewsCard>
|
||||
<NewsCard></NewsCard>
|
||||
<NewsCard></NewsCard>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
import NewsCard from "@/components/hotNews/NewsCard.vue";
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: "HotNews",
|
||||
components: {NewsCard},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
loading:true,
|
||||
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',
|
||||
},
|
||||
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',
|
||||
},
|
||||
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',
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getNews();
|
||||
this.getBaiDuHot();
|
||||
this.getDouyingHot();
|
||||
this.getWeiBoHot();
|
||||
this.getZhiHuHot();
|
||||
this.getBiliHot();
|
||||
this.getTouTiaoHot();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getBaiDuHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/baiduhot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "百度热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.loading=false;
|
||||
_this.baidu.hot=res.data.data;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getDouyingHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/douyinhot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "抖音热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.douying.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getWeiBoHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/weibohot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "微博热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.weibo.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getZhiHuHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/zhihuhot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "知乎热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.zhihu.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getBiliHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/bilihot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "哔哩哔哩热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.bili.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
getTouTiaoHot() {
|
||||
let _this = this;
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/dev/toutiaohot',
|
||||
}).then(function (res) {
|
||||
if (res.data.code !== 200) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "今日头条热搜榜请求错误！",
|
||||
offset: 0
|
||||
});
|
||||
} else {
|
||||
_this.toutiao.hot=res.data.data;
|
||||
_this.loading=false;
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main{
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +1,23 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="widget">
|
||||
<div>
|
||||
<div class="thin-bar">
|
||||
<div class="nav">
|
||||
<div class="nav__button nav__button-red">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ff605c"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-yellow">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#ffbf45"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav__button nav__button-green">
|
||||
<svg height="30" width="30">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
||||
</svg>
|
||||
<p class="nav__title">baidu</p>
|
||||
</div>
|
||||
<img v-if="news.icon" :src="news.icon" style="width: 30px;height: 30px;margin-left: 15px">
|
||||
<p class="nav__title">{{news.title}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-1">1</span>
|
||||
<span class="news-content"><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-2">2</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-3">3</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
|
||||
</div>
|
||||
<div class="widget__section">
|
||||
<span class="hot-rank-4">4</span>
|
||||
<span class="news-content" ><a>为加快建设农业强国而努力为加快建设农业强国而努力</a></span>
|
||||
|
||||
<div style="overflow: scroll;height:475px "
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" >
|
||||
<div v-if="news.hot" class="widget__section" v-for="(item,index) in news.hot" :key="index">
|
||||
<span v-if="index===0" class="hot-rank-1">{{index+1}}</span>
|
||||
<span v-if="index===1" class="hot-rank-2">{{index+1}}</span>
|
||||
<span v-if="index===2" class="hot-rank-3">{{index+1}}</span>
|
||||
<span v-if="index>=3" class="hot-rank-4">{{index+1}}</span>
|
||||
<span class="news-content"><el-link v-if="item.name" :underline="false" target="_blank" class="news-url" :href="item.url">{{item.name}}</el-link></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: end;margin-right: 10px">
|
||||
@ -51,7 +30,8 @@
|
||||
export default {
|
||||
name:"NewsCard",
|
||||
props:{
|
||||
news:Object
|
||||
news:Object,
|
||||
loading:Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -80,7 +60,6 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.widget,
|
||||
.widget__section {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@ -95,9 +74,6 @@ export default {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -116,33 +92,20 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
|
||||
.news-url{
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.nav__button {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
.nav__button-red {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.nav__button-yellow {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.nav__button-green {
|
||||
left: 3.5rem;
|
||||
}
|
||||
|
||||
.nav__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
left: 6em;
|
||||
top: -0.5em;
|
||||
top: -0.1em;
|
||||
}
|
||||
|
||||
.nav__title
|
||||
@ -192,17 +155,19 @@ export default {
|
||||
}
|
||||
.hot-rank-1 ,.hot-rank-2, .hot-rank-3, .hot-rank-4{
|
||||
margin-left: 15px;
|
||||
width: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.news-content{
|
||||
margin-left:10px;
|
||||
height: 20px;
|
||||
width: 260px;
|
||||
margin-right: 10px;
|
||||
overflow: scroll;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover{
|
||||
color: coral;
|
||||
color: var(--theme-color);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -3,149 +3,26 @@
|
||||
<div class="side-wrapper">
|
||||
<!-- <div class="side-title">Apps</div>-->
|
||||
<div class="side-menu">
|
||||
<router-link to="/admin">
|
||||
<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>
|
||||
首页
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
</router-link>
|
||||
<router-link to="/system">
|
||||
<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>
|
||||
系统设置
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
</router-link>
|
||||
<router-link to="/website">
|
||||
<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>
|
||||
网站管理
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
</router-link>
|
||||
<router-link to="/onSite">
|
||||
<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>
|
||||
站内设置
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
<router-link v-for="(item,index) in authList" :key="index" :to='item.routeUrl'>
|
||||
<i :class="item.icon" style="font-size: 20px;margin-right: 8px"></i>
|
||||
{{item.name}}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="side-wrapper">-->
|
||||
<!-- <div class="side-title">Categories</div>-->
|
||||
<!-- <div class="side-menu">-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 488.455 488.455" fill="currentColor">-->
|
||||
<!-- <path d="M287.396 216.317c23.845 23.845 23.845 62.505 0 86.35s-62.505 23.845-86.35 0-23.845-62.505 0-86.35 62.505-23.845 86.35 0"></path>-->
|
||||
<!-- <path d="M427.397 91.581H385.21l-30.544-61.059H133.76l-30.515 61.089-42.127.075C27.533 91.746.193 119.115.164 152.715L0 396.86c0 33.675 27.384 61.074 61.059 61.074h366.338c33.675 0 61.059-27.384 61.059-61.059V152.639c-.001-33.674-27.385-61.058-61.059-61.058zM244.22 381.61c-67.335 0-122.118-54.783-122.118-122.118s54.783-122.118 122.118-122.118 122.118 54.783 122.118 122.118S311.555 381.61 244.22 381.61z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Photography-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <circle cx="295.099" cy="327.254" r="110.96" transform="rotate(-45 295.062 327.332)"></circle>-->
|
||||
<!-- <path d="M471.854 338.281V163.146H296.72v41.169a123.1 123.1 0 01121.339 122.939c0 3.717-.176 7.393-.5 11.027zM172.14 327.254a123.16 123.16 0 01100.59-120.915L195.082 73.786 40.146 338.281H172.64c-.325-3.634-.5-7.31-.5-11.027z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Graphic Design-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 58 58" fill="currentColor">-->
|
||||
<!-- <path d="M57 6H1a1 1 0 00-1 1v44a1 1 0 001 1h56a1 1 0 001-1V7a1 1 0 00-1-1zM10 50H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2v-9h8v9zm0-11H2V8h8v9zm26.537 12.844l-11 7a1.007 1.007 0 01-1.018.033A1.001 1.001 0 0124 36V22a1.001 1.001 0 011.538-.844l11 7a1.003 1.003 0 01-.001 1.688zM56 50h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8v-9h8v9zm0-11h-8V8h8v9z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Video-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M499.377 46.402c-8.014-8.006-18.662-12.485-29.985-12.613a41.13 41.13 0 00-.496-.003c-11.142 0-21.698 4.229-29.771 11.945L198.872 275.458c25.716 6.555 47.683 23.057 62.044 47.196a113.544 113.544 0 0110.453 23.179L500.06 106.661C507.759 98.604 512 88.031 512 76.89c0-11.507-4.478-22.33-12.623-30.488zM176.588 302.344a86.035 86.035 0 00-3.626-.076c-20.273 0-40.381 7.05-56.784 18.851-19.772 14.225-27.656 34.656-42.174 53.27C55.8 397.728 27.795 409.14 0 416.923c16.187 42.781 76.32 60.297 115.752 61.24 1.416.034 2.839.051 4.273.051 44.646 0 97.233-16.594 118.755-60.522 23.628-48.224-5.496-112.975-62.192-115.348z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Illustrations-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M497 151H316c-8.401 0-15 6.599-15 15v300c0 8.401 6.599 15 15 15h181c8.401 0 15-6.599 15-15V166c0-8.401-6.599-15-15-15zm-76 270h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15zm0-180h-30c-8.401 0-15-6.599-15-15s6.599-15 15-15h30c8.401 0 15 6.599 15 15s-6.599 15-15 15z"></path>-->
|
||||
<!-- <path d="M15 331h196v60h-75c-8.291 0-15 6.709-15 15s6.709 15 15 15h135v-30h-30v-60h30V166c0-24.814 20.186-45 45-45h135V46c0-8.284-6.716-15-15-15H15C6.716 31 0 37.716 0 46v270c0 8.284 6.716 15 15 15z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- UI/UX-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M0 331v112.295a14.996 14.996 0 007.559 13.023L106 512V391L0 331zM136 391v121l105-60V331zM271 331v121l105 60V391zM406 391v121l98.441-55.682A14.995 14.995 0 00512 443.296V331l-106 60zM391 241l-115.754 57.876L391 365.026l116.754-66.15zM262.709 1.583a15.006 15.006 0 00-13.418 0L140.246 57.876 256 124.026l115.754-66.151L262.709 1.583zM136 90v124.955l105 52.5V150zM121 241L4.246 298.876 121 365.026l115.754-66.15zM271 150v117.455l105-52.5V90z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- 3D/AR-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="side-wrapper">-->
|
||||
<!-- <div class="side-title">Fonts</div>-->
|
||||
<!-- <div class="side-menu">-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 332 332" fill="currentColor">-->
|
||||
<!-- <path d="M282.341 8.283C275.765 2.705 266.211 0 253.103 0c-18.951 0-36.359 5.634-51.756 16.743-14.972 10.794-29.274 28.637-42.482 53.028-4.358 7.993-7.428 11.041-8.973 12.179h-26.255c-10.84 0-19.626 8.786-19.626 19.626 0 8.989 6.077 16.486 14.323 18.809l-.05.165h.589c1.531.385 3.109.651 4.757.651h18.833l-32.688 128.001c-7.208 27.848-10.323 37.782-11.666 41.24-1.445 3.711-3.266 7.062-5.542 10.135-.42-5.39-2.637-10.143-6.508-13.854-4.264-4.079-10.109-6.136-17.364-6.136-8.227 0-15.08 2.433-20.37 7.229-5.416 4.93-8.283 11.193-8.283 18.134 0 5.157 1.701 12.712 9.828 19.348 6.139 4.97 14.845 7.382 26.621 7.382 17.096 0 32.541-4.568 45.891-13.577 13.112-8.845 24.612-22.489 34.166-40.522 9.391-17.678 18.696-45.124 28.427-83.9l18.598-73.479h30.016c10.841 0 19.625-8.785 19.625-19.625s-8.784-19.626-19.625-19.626h-19.628c6.34-21.62 14.175-37.948 23.443-48.578 2.284-2.695 5.246-5.692 8.412-7.678-1.543 3.392-2.325 6.767-2.325 10.055 0 6.164 2.409 11.714 6.909 16.03 4.484 4.336 10.167 6.54 16.888 6.54 7.085 0 13.373-2.667 18.17-7.716 4.76-5.005 7.185-11.633 7.185-19.703.017-9.079-3.554-16.899-10.302-22.618z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Manage Fonts-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="side-wrapper">-->
|
||||
<!-- <div class="side-title">Resource Links</div>-->
|
||||
<!-- <div class="side-menu">-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM181 241c41.353 0 75 33.647 75 75s-33.647 75-75 75-75-33.647-75-75c0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45zm180 120h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-24.814 0-45-20.186-45-45V211h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-8.291 6.709-15 15-15s15 6.709 15 15v45h45c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.276 6.724 15 15 15z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Stock-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 511.441 511.441" fill="currentColor">-->
|
||||
<!-- <path d="M255.721 347.484L90.22 266.751v106.57l165.51 73.503 165.509-73.503V266.742z"></path>-->
|
||||
<!-- <path d="M511.441 189.361L255.721 64.617 0 189.361l255.721 124.744 195.522-95.378v111.032h30V204.092z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Tutorials-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M196 151h-75v90h75c24.814 0 45-20.186 45-45s-20.186-45-45-45z"></path>-->
|
||||
<!-- <path d="M467 0H45C20.186 0 0 20.186 0 45v422c0 24.814 20.186 45 45 45h422c24.814 0 45-20.186 45-45V45c0-24.814-20.186-45-45-45zM196 271h-75v105c0 8.291-6.709 15-15 15s-15-6.709-15-15V136c0-8.291 6.709-15 15-15h90c41.353 0 75 33.647 75 75s-33.647 75-75 75zm210-60c8.291 0 15 6.709 15 15s-6.709 15-15 15h-45v135c0 8.291-6.709 15-15 15s-15-6.709-15-15V241h-15c-8.291 0-15-6.709-15-15s6.709-15 15-15h15v-45c0-24.814 20.186-45 45-45h30c8.291 0 15 6.709 15 15s-6.709 15-15 15h-30c-8.276 0-15 6.724-15 15v45h45z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Portfolio-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M181 181h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M181 271h-60v60h60c16.54 0 30-13.46 30-30s-13.46-30-30-30zm0 0M346 241c-19.555 0-36.238 12.54-42.438 30h84.875c-6.199-17.46-22.882-30-42.437-30zm0 0"></path>-->
|
||||
<!-- <path d="M436 0H75C33.648 0 0 33.648 0 75v362c0 41.352 33.648 75 75 75h361c41.352 0 76-33.648 76-75V75c0-41.352-34.648-75-76-75zM286 151h120v30H286zm-45 150c0 33.09-26.91 60-60 60H91V151h90c33.09 0 60 26.91 60 60 0 18.008-8.133 33.996-20.73 45 12.597 11.004 20.73 26.992 20.73 45zm180 0H303.562c6.196 17.46 22.883 30 42.438 30 16.012 0 30.953-8.629 38.992-22.516l25.957 15.032C397.58 346.629 372.687 361 346 361c-41.352 0-75-33.648-75-75s33.648-75 75-75 75 33.648 75 75zm0 0"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Behance-->
|
||||
<!-- </a>-->
|
||||
<!-- <a href="#">-->
|
||||
<!-- <svg viewBox="0 0 512 512" fill="currentColor">-->
|
||||
<!-- <path d="M352 0H64C28.704 0 0 28.704 0 64v320a16.02 16.02 0 009.216 14.496A16.232 16.232 0 0016 400c3.68 0 7.328-1.248 10.24-3.712L117.792 320H352c35.296 0 64-28.704 64-64V64c0-35.296-28.704-64-64-64z"></path>-->
|
||||
<!-- <path d="M464 128h-16v128c0 52.928-43.072 96-96 96H129.376L128 353.152V400c0 26.464 21.536 48 48 48h234.368l75.616 60.512A16.158 16.158 0 00496 512c2.336 0 4.704-.544 6.944-1.6A15.968 15.968 0 00512 496V176c0-26.464-21.536-48-48-48z"></path>-->
|
||||
<!-- </svg>-->
|
||||
<!-- Social Forum-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name:"SettingLeftSide",
|
||||
data() {
|
||||
return {
|
||||
|
||||
authList:[],
|
||||
}},
|
||||
mounted() {
|
||||
|
||||
this.getAuth();
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -154,7 +31,30 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getAuth(){
|
||||
let _this=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
url: '/api/Auth/retAllAuth',
|
||||
}).then(function (res) {
|
||||
if(res.data.code!==200){
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "Auth Get ERROR!",
|
||||
offset: 0
|
||||
});
|
||||
}else{
|
||||
_this.authList=res.data.data;
|
||||
}
|
||||
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
30
src/main.js
30
src/main.js
@ -6,6 +6,36 @@ import axios from "axios";
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.prototype.axios = axios;
|
||||
// 请求拦截器, 每次请求都会在请求头中携带token
|
||||
axios.interceptors.request.use((config) => {
|
||||
if(localStorage.getItem('Authorization')) {
|
||||
config.headers.Authorization = localStorage.getItem('Authorization')
|
||||
}
|
||||
return config;
|
||||
}, (error) => {
|
||||
return Promise.reject(error);
|
||||
})
|
||||
|
||||
//http reponse响应拦截器
|
||||
axios.interceptors.response.use(
|
||||
response =>{
|
||||
return response;
|
||||
},
|
||||
error=>{
|
||||
if(error.response){
|
||||
switch(error.response.status){
|
||||
case 401:
|
||||
localStorage.removeItem('Authorization');
|
||||
router.replace({
|
||||
path: '/home',
|
||||
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
|
||||
}).then( r =>{
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// home-style
|
||||
import './assets/css/home-style.css'
|
||||
const $ = require('jquery');
|
||||
|
||||
@ -63,7 +63,7 @@ const routes = [
|
||||
{
|
||||
path: '/admin',
|
||||
name: '/admin',
|
||||
component: personalHomePage
|
||||
component: personalHomePage,
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
@ -138,5 +138,40 @@ const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes
|
||||
})
|
||||
|
||||
// // 导航守卫：使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// if (to.path === '/home') {
|
||||
// next();
|
||||
// } else {
|
||||
// let token = localStorage.getItem('Authorization');
|
||||
// if (token === null || token === '') {
|
||||
// next('/home');
|
||||
// } else {
|
||||
// next();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// 全局路由构造函数，判断是否登录和要跳转到页面
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.matched.some(m => m.meta.requiresAuth)) { // 需要登录
|
||||
if(window.localStorage.Authorization && window.localStorage.isLogin === '1'){
|
||||
next()
|
||||
} else if (to.path !== '/home') {
|
||||
let token = localStorage.getItem('Authorization');
|
||||
if (token === 'null' || token === '' || token === undefined){
|
||||
next({path: '/home'})
|
||||
// Toast({ message: '检测到您还未登录,请登录后操作！', duration: 1500 })
|
||||
Vue.prototype.$notify.error({
|
||||
title: '权限不够',
|
||||
message: "请先登录！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
} else { // 不需要登录
|
||||
next()
|
||||
}
|
||||
})
|
||||
export default router
|
||||
|
||||
@ -6,14 +6,29 @@ Vue.use(Vuex)
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
theme:'dark',
|
||||
// 存储token
|
||||
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',
|
||||
isLogin:'0',
|
||||
},
|
||||
getters: {
|
||||
getStorage(state){ // 获取本地存储的登录信息
|
||||
if(!state.Authorization){
|
||||
state.Authorization =JSON.parse(localStorage.getItem(key))
|
||||
}
|
||||
return state.Authorization
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
SET_THEME:(state,data)=>{
|
||||
state.theme=data;
|
||||
window.sessionStorage.setItem('theme',data);
|
||||
},
|
||||
changeLogin (state, user) {
|
||||
state.Authorization = user.Authorization;
|
||||
localStorage.setItem('Authorization', user.Authorization);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
|
||||
@ -35,14 +35,16 @@ module.exports = defineConfig({
|
||||
|
||||
'/dev': {
|
||||
//后端接口的baseurl
|
||||
target: 'https://open.tophub.today',
|
||||
target: 'https://tenapi.cn/v2',
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
// ws: true, //是否代理 websockets
|
||||
// secure: true,
|
||||
// 'secure': true,
|
||||
headers: {
|
||||
Connection: "kepp-alive"
|
||||
Connection: "kepp-alive",
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
"Content-Type": "application/json;charset=utf-8"
|
||||
},
|
||||
pathRewrite: {
|
||||
//这里的作用是使用去掉api
|
||||
|
||||
Loading…
Reference in New Issue
Block a user