refine
This commit is contained in:
Pan
parent
2bc84413e3
commit
c51c7fec5f
|
|
@ -1,6 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
|
<svg t="1492500959545" @click="toggleClick" class="svg-icon hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
|
||||||
|
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64"
|
||||||
|
height="64">
|
||||||
|
<path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
|
||||||
|
p-id="1692"></path>
|
||||||
|
<path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
|
||||||
|
p-id="1693"></path>
|
||||||
|
<path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
|
||||||
|
p-id="1694"></path>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -21,16 +30,17 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
transition: .38s;
|
transition: .38s;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
}
|
}
|
||||||
.hamburger.is-active {
|
|
||||||
transform: rotate(90deg);
|
.hamburger.is-active {
|
||||||
}
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Router from 'vue-router';
|
import Router from 'vue-router';
|
||||||
const _import = require('./_import_' + process.env.NODE_ENV);
|
const _import = require('./_import_' + process.env.NODE_ENV);
|
||||||
// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow
|
// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
|
||||||
// so only in production use Lazy Loading
|
|
||||||
|
|
||||||
/* layout */
|
/* layout */
|
||||||
import Layout from '../views/layout/Layout';
|
import Layout from '../views/layout/Layout';
|
||||||
|
|
@ -16,6 +15,7 @@ const dashboard = _import('dashboard/index');
|
||||||
/* error page */
|
/* error page */
|
||||||
const Err404 = _import('404');
|
const Err404 = _import('404');
|
||||||
|
|
||||||
|
/* demo page */
|
||||||
const Form = _import('page/form');
|
const Form = _import('page/form');
|
||||||
const Table = _import('table/index');
|
const Table = _import('table/index');
|
||||||
|
|
||||||
|
|
@ -23,10 +23,10 @@ Vue.use(Router);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* icon : the icon show in the sidebar
|
* icon : the icon show in the sidebar
|
||||||
* hidden : if hidden:true will not show in the sidebar
|
* hidden : if `hidden:true` will not show in the sidebar
|
||||||
* redirect : if redirect:noredirect will not redirct in the levelbar
|
* redirect : if `redirect:noredirect` will not redirct in the levelbar
|
||||||
* noDropdown : if noDropdown:true will not has submenu
|
* noDropdown : if `noDropdown:true` will not has submenu in the sidebar
|
||||||
* meta : { role: ['admin'] } will control the page role
|
* meta : `{ role: ['admin'] }` will control the page role
|
||||||
**/
|
**/
|
||||||
export const constantRouterMap = [
|
export const constantRouterMap = [
|
||||||
{ path: '/login', component: Login, hidden: true },
|
{ path: '/login', component: Login, hidden: true },
|
||||||
|
|
@ -35,7 +35,7 @@ export const constantRouterMap = [
|
||||||
path: '/',
|
path: '/',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: '/dashboard',
|
redirect: '/dashboard',
|
||||||
name: '首页',
|
name: 'Home',
|
||||||
hidden: true,
|
hidden: true,
|
||||||
children: [{ path: 'dashboard', component: dashboard }]
|
children: [{ path: 'dashboard', component: dashboard }]
|
||||||
}
|
}
|
||||||
|
|
@ -58,6 +58,7 @@ export const asyncRouterMap = [
|
||||||
{ path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
|
{ path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/table',
|
path: '/table',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
@ -67,5 +68,6 @@ export const asyncRouterMap = [
|
||||||
noDropdown: true,
|
noDropdown: true,
|
||||||
children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
|
children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
|
||||||
},
|
},
|
||||||
|
|
||||||
{ path: '*', redirect: '/404', hidden: true }
|
{ path: '*', redirect: '/404', hidden: true }
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -56,21 +56,6 @@ const user = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 第三方验证登录
|
|
||||||
LoginByThirdparty({ commit, state }, code) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
commit('SET_CODE', code);
|
|
||||||
loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => {
|
|
||||||
commit('SET_TOKEN', response.data.token);
|
|
||||||
Cookies.set('Admin-Token', response.data.token);
|
|
||||||
resolve();
|
|
||||||
}).catch(error => {
|
|
||||||
reject(error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// 登出
|
// 登出
|
||||||
LogOut({ commit, state }) {
|
LogOut({ commit, state }) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
|
@ -92,16 +77,6 @@ const user = {
|
||||||
Cookies.remove('Admin-Token');
|
Cookies.remove('Admin-Token');
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
// 动态修改权限
|
|
||||||
ChangeRole({ commit }, role) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
commit('SET_ROLES', [role]);
|
|
||||||
commit('SET_TOKEN', role);
|
|
||||||
Cookies.set('Admin-Token', role);
|
|
||||||
resolve();
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { Message } from 'element-ui';
|
import { Message } from 'element-ui';
|
||||||
import store from '../store';
|
import store from '../store';
|
||||||
// import router from '../router';
|
|
||||||
|
|
||||||
// 创建axios实例
|
// 创建axios实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
|
|
@ -11,9 +11,8 @@ const service = axios.create({
|
||||||
|
|
||||||
// request拦截器
|
// request拦截器
|
||||||
service.interceptors.request.use(config => {
|
service.interceptors.request.use(config => {
|
||||||
// Do something before request is sent
|
|
||||||
if (store.getters.token) {
|
if (store.getters.token) {
|
||||||
config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
|
config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||||
}
|
}
|
||||||
return config;
|
return config;
|
||||||
}, error => {
|
}, error => {
|
||||||
|
|
@ -26,8 +25,7 @@ service.interceptors.request.use(config => {
|
||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
response => {
|
response => {
|
||||||
/**
|
/**
|
||||||
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
|
* code为非20000是抛错 可结合自己业务进行修改
|
||||||
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
|
|
||||||
*/
|
*/
|
||||||
const res = response.data;
|
const res = response.data;
|
||||||
if (res.code !== 20000) {
|
if (res.code !== 20000) {
|
||||||
|
|
@ -36,6 +34,7 @@ service.interceptors.response.use(
|
||||||
type: 'error',
|
type: 'error',
|
||||||
duration: 5 * 1000
|
duration: 5 * 1000
|
||||||
});
|
});
|
||||||
|
|
||||||
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
|
||||||
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||||
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
|
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
|
||||||
|
|
|
||||||
|
|
@ -56,15 +56,3 @@
|
||||||
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
|
return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function scrollTo(element, to, duration) {
|
|
||||||
if (duration <= 0) return;
|
|
||||||
const difference = to - element.scrollTop;
|
|
||||||
const perTick = difference / duration * 10;
|
|
||||||
setTimeout(() => {
|
|
||||||
console.log(new Date())
|
|
||||||
element.scrollTop = element.scrollTop + perTick;
|
|
||||||
if (element.scrollTop === to) return;
|
|
||||||
scrollTo(element, to, duration - 10);
|
|
||||||
}, 10);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -38,191 +38,192 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.wscn-http404 {
|
.wscn-http404 {
|
||||||
|
position: relative;
|
||||||
|
width: 1200px;
|
||||||
|
margin: 20px auto 60px;
|
||||||
|
padding: 0 100px;
|
||||||
|
overflow: hidden;
|
||||||
|
.pic-404 {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 1200px;
|
float: left;
|
||||||
margin: 20px auto 60px;
|
width: 600px;
|
||||||
padding: 0 100px;
|
padding: 150px 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.pic-404 {
|
&__parent {
|
||||||
position: relative;
|
width: 100%;
|
||||||
float: left;
|
}
|
||||||
width: 600px;
|
&__child {
|
||||||
padding: 150px 0;
|
position: absolute;
|
||||||
overflow: hidden;
|
&.left {
|
||||||
&__parent {
|
width: 80px;
|
||||||
width: 100%;
|
top: 17px;
|
||||||
|
left: 220px;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: cloudLeft;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-delay: 1s;
|
||||||
}
|
}
|
||||||
&__child {
|
&.mid {
|
||||||
position: absolute;
|
width: 46px;
|
||||||
&.left {
|
top: 10px;
|
||||||
width: 80px;
|
left: 420px;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: cloudMid;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
width: 62px;
|
||||||
|
top: 100px;
|
||||||
|
left: 500px;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: cloudRight;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-delay: 1s;
|
||||||
|
}
|
||||||
|
@keyframes cloudLeft {
|
||||||
|
0% {
|
||||||
top: 17px;
|
top: 17px;
|
||||||
left: 220px;
|
left: 220px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudLeft;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
}
|
||||||
&.mid {
|
20% {
|
||||||
width: 46px;
|
top: 33px;
|
||||||
|
left: 188px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
80% {
|
||||||
|
top: 81px;
|
||||||
|
left: 92px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 97px;
|
||||||
|
left: 60px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes cloudMid {
|
||||||
|
0% {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 420px;
|
left: 420px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudMid;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1.2s;
|
|
||||||
}
|
}
|
||||||
&.right {
|
20% {
|
||||||
width: 62px;
|
top: 40px;
|
||||||
|
left: 360px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
top: 130px;
|
||||||
|
left: 180px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 160px;
|
||||||
|
left: 120px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes cloudRight {
|
||||||
|
0% {
|
||||||
top: 100px;
|
top: 100px;
|
||||||
left: 500px;
|
left: 500px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudRight;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
}
|
||||||
@keyframes cloudLeft {
|
20% {
|
||||||
0% {
|
top: 120px;
|
||||||
top: 17px;
|
left: 460px;
|
||||||
left: 220px;
|
opacity: 1;
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 33px;
|
|
||||||
left: 188px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
top: 81px;
|
|
||||||
left: 92px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 97px;
|
|
||||||
left: 60px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@keyframes cloudMid {
|
80% {
|
||||||
0% {
|
top: 180px;
|
||||||
top: 10px;
|
left: 340px;
|
||||||
left: 420px;
|
opacity: 1;
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 40px;
|
|
||||||
left: 360px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
top: 130px;
|
|
||||||
left: 180px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 160px;
|
|
||||||
left: 120px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes cloudRight {
|
|
||||||
0% {
|
|
||||||
top: 100px;
|
|
||||||
left: 500px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 120px;
|
|
||||||
left: 460px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
top: 180px;
|
|
||||||
left: 340px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 200px;
|
|
||||||
left: 300px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bullshit {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
width: 300px;
|
|
||||||
padding: 150px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
&__oops {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 40px;
|
|
||||||
color: #1482f0;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__headline {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #1482f0;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__info {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 21px;
|
|
||||||
color: grey;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__return-home {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: 110px;
|
|
||||||
height: 36px;
|
|
||||||
background: #1482f0;
|
|
||||||
border-radius: 100px;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
opacity: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 36px;
|
|
||||||
cursor: pointer;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
@keyframes slideUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(60px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0);
|
top: 200px;
|
||||||
opacity: 1;
|
left: 300px;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bullshit {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 300px;
|
||||||
|
padding: 150px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
&__oops {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #1482f0;
|
||||||
|
opacity: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
animation-name: slideUp;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
&__headline {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #1482f0;
|
||||||
|
opacity: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
animation-name: slideUp;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
&__info {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 21px;
|
||||||
|
color: grey;
|
||||||
|
opacity: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
animation-name: slideUp;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
&__return-home {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 110px;
|
||||||
|
height: 36px;
|
||||||
|
background: #1482f0;
|
||||||
|
border-radius: 100px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 36px;
|
||||||
|
cursor: pointer;
|
||||||
|
animation-name: slideUp;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-delay: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
0% {
|
||||||
|
transform: translateY(60px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main-container{
|
.main-container {
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,13 +37,13 @@
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.app-levelbar.el-breadcrumb {
|
.app-levelbar.el-breadcrumb {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
.no-redirect{
|
.no-redirect {
|
||||||
color: #97a8be;
|
color: #97a8be;
|
||||||
cursor:text;
|
cursor: text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
<el-dropdown-menu class="user-dropdown" slot="dropdown">
|
||||||
<router-link class='inlineBlock' to="/">
|
<router-link class='inlineBlock' to="/">
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
首页
|
Home
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</router-link>
|
</router-link>
|
||||||
<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
|
<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters([
|
||||||
'sidebar',
|
'sidebar',
|
||||||
'name',
|
|
||||||
'avatar'
|
'avatar'
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
|
|
@ -42,7 +41,7 @@
|
||||||
},
|
},
|
||||||
logout() {
|
logout() {
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
this.$store.dispatch('LogOut').then(() => {
|
||||||
location.reload();// 为了重新实例化vue-router对象 避免bug
|
location.reload(); // 为了重新实例化vue-router对象 避免bug
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -65,11 +64,11 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 150px;
|
right: 150px;
|
||||||
}
|
}
|
||||||
.screenfull{
|
.screenfull {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 90px;
|
right: 90px;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
.avatar-container {
|
.avatar-container {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|
@ -78,7 +77,7 @@
|
||||||
right: 35px;
|
right: 35px;
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top:5px;
|
margin-top: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.user-avatar {
|
.user-avatar {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
.el-menu {
|
.el-menu {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SidebarItem',
|
name: 'SidebarItem',
|
||||||
props: {
|
props: {
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
|
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
|
||||||
label-width="0px"
|
class="card-box login-form">
|
||||||
class="card-box login-form">
|
<h3 class="title">系统登录</h3>
|
||||||
<h3 class="title">系统登录</h3>
|
<el-form-item prop="email">
|
||||||
<el-form-item prop="email">
|
<span class="svg-container">
|
||||||
<span class="svg-container">
|
|
||||||
<icon-svg icon-class="jiedianyoujian"></icon-svg>
|
<icon-svg icon-class="jiedianyoujian"></icon-svg>
|
||||||
</span>
|
</span>
|
||||||
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
|
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
|
||||||
placeholder="邮箱"></el-input>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item prop="password">
|
||||||
<el-form-item prop="password">
|
<span class="svg-container">
|
||||||
<span class="svg-container">
|
|
||||||
<icon-svg icon-class="mima" ></icon-svg>
|
<icon-svg icon-class="mima" ></icon-svg>
|
||||||
</span>
|
</span>
|
||||||
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
||||||
autoComplete="on" placeholder="密码"></el-input>
|
placeholder="密码"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
|
||||||
登录
|
登录
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
|
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
|
||||||
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
|
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -52,7 +50,7 @@
|
||||||
return {
|
return {
|
||||||
loginForm: {
|
loginForm: {
|
||||||
email: 'admin@wallstreetcn.com',
|
email: 'admin@wallstreetcn.com',
|
||||||
password: ''
|
password: '111111'
|
||||||
},
|
},
|
||||||
loginRules: {
|
loginRules: {
|
||||||
email: [
|
email: [
|
||||||
|
|
@ -88,67 +86,62 @@
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
<style rel="stylesheet/scss" lang="scss">
|
||||||
@import "src/styles/mixin.scss";
|
@import "src/styles/mixin.scss";
|
||||||
.tips{
|
.tips {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
@include relative;
|
@include relative;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #2d3a4b;
|
background-color: #2d3a4b;
|
||||||
|
input:-webkit-autofill {
|
||||||
input:-webkit-autofill {
|
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
|
||||||
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
|
-webkit-text-fill-color: #fff !important;
|
||||||
-webkit-text-fill-color: #fff !important;
|
}
|
||||||
}
|
input {
|
||||||
input {
|
background: transparent;
|
||||||
background: transparent;
|
border: 0px;
|
||||||
border: 0px;
|
-webkit-appearance: none;
|
||||||
-webkit-appearance: none;
|
border-radius: 0px;
|
||||||
border-radius: 0px;
|
padding: 12px 5px 12px 15px;
|
||||||
padding: 12px 5px 12px 15px;
|
color: #eeeeee;
|
||||||
color: #eeeeee;
|
height: 47px;
|
||||||
height: 47px;
|
}
|
||||||
}
|
.el-input {
|
||||||
.el-input {
|
display: inline-block;
|
||||||
display: inline-block;
|
height: 47px;
|
||||||
height: 47px;
|
width: 85%;
|
||||||
width: 85%;
|
}
|
||||||
}
|
.svg-container {
|
||||||
.svg-container {
|
padding: 6px 5px 6px 15px;
|
||||||
padding: 6px 5px 6px 15px;
|
color: #889aa4;
|
||||||
color: #889aa4;
|
}
|
||||||
}
|
.title {
|
||||||
|
font-size: 26px;
|
||||||
.title {
|
font-weight: 400;
|
||||||
font-size: 26px;
|
color: #eeeeee;
|
||||||
font-weight: 400;
|
margin: 0px auto 40px auto;
|
||||||
color: #eeeeee;
|
text-align: center;
|
||||||
margin: 0px auto 40px auto;
|
font-weight: bold;
|
||||||
text-align: center;
|
}
|
||||||
font-weight: bold;
|
.login-form {
|
||||||
}
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
.login-form {
|
right: 0;
|
||||||
position: absolute;
|
width: 400px;
|
||||||
left: 0;
|
padding: 35px 35px 15px 35px;
|
||||||
right: 0;
|
margin: 120px auto;
|
||||||
width: 400px;
|
}
|
||||||
padding: 35px 35px 15px 35px;
|
.el-form-item {
|
||||||
margin: 120px auto;
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
}
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
.el-form-item {
|
color: #454545;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
}
|
||||||
background: rgba(0, 0, 0, 0.1);
|
.forget-pwd {
|
||||||
border-radius: 5px;
|
color: #fff;
|
||||||
color: #454545;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.forget-pwd {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -33,25 +33,26 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getList } from '@/api/table';
|
import { getList } from '@/api/table';
|
||||||
export default {
|
|
||||||
data() {
|
export default {
|
||||||
return {
|
data() {
|
||||||
list: null,
|
return {
|
||||||
listLoading: true
|
list: null,
|
||||||
|
listLoading: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
this.listLoading = true;
|
||||||
|
getList(this.listQuery).then(response => {
|
||||||
|
this.list = response.data.items;
|
||||||
|
this.listLoading = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
};
|
||||||
created() {
|
|
||||||
this.fetchData();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fetchData() {
|
|
||||||
this.listLoading = true;
|
|
||||||
getList(this.listQuery).then(response => {
|
|
||||||
this.list = response.data.items;
|
|
||||||
this.listLoading = false;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue