Skip to content

W
web-monitor
Commit c51c7fec authored by Pan's avatar Pan
Browse files
Options

refine

parent 2bc84413
Hide whitespace changes
Inline Side-by-side
Showing with 315 additions and 347 deletions
src/components/Hamburger/index.vue
View file @ c51c7fec
<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 @@ ...@@ -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>
src/router/index.js
View file @ c51c7fec
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'); ...@@ -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); ...@@ -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 = [ ...@@ -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 = [ ...@@ -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 = [ ...@@ -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 }
]; ];
src/store/modules/user.js
View file @ c51c7fec
...@@ -56,21 +56,6 @@ const user = { ...@@ -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 = { ...@@ -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();
})
} }
} }
}; };
......
src/utils/fetch.js
View file @ c51c7fec
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({ ...@@ -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 => { ...@@ -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( ...@@ -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('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
......
src/utils/index.js
View file @ c51c7fec
...@@ -56,15 +56,3 @@ ...@@ -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);
}
src/views/404.vue
View file @ c51c7fec
...@@ -38,191 +38,192 @@ ...@@ -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 { 100% {
0% { top: 200px;
top: 100px; left: 300px;
left: 500px; opacity: 0;
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; .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; float: left;
width: 300px; width: 110px;
padding: 150px 0; height: 36px;
overflow: hidden; background: #1482f0;
&__oops { border-radius: 100px;
font-size: 32px; text-align: center;
font-weight: bold; color: #ffffff;
line-height: 40px; opacity: 0;
color: #1482f0; font-size: 14px;
opacity: 0; line-height: 36px;
margin-bottom: 20px; cursor: pointer;
animation-name: slideUp; animation-name: slideUp;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-fill-mode: forwards; animation-delay: 0.3s;
} animation-fill-mode: forwards;
&__headline { }
font-size: 20px; @keyframes slideUp {
line-height: 24px; 0% {
color: #1482f0; transform: translateY(60px);
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; 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 { 100% {
0% { transform: translateY(0);
transform: translateY(60px); opacity: 1;
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
} }
} }
} }
}
</style> </style>
src/views/layout/Layout.vue
View file @ c51c7fec
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
} }
} }
} }
.main-container{ .main-container {
margin-left: 40px; margin-left: 40px;
} }
} }
......
src/views/layout/Levelbar.vue
View file @ c51c7fec
...@@ -37,13 +37,13 @@ ...@@ -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>
src/views/layout/Navbar.vue
View file @ c51c7fec
...@@ -10,7 +10,7 @@ ...@@ -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 @@ ...@@ -32,7 +32,6 @@
computed: { computed: {
...mapGetters([ ...mapGetters([
'sidebar', 'sidebar',
'name',
'avatar' 'avatar'
]) ])
}, },
...@@ -42,7 +41,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
......
src/views/layout/Sidebar.vue
View file @ c51c7fec
...@@ -18,7 +18,8 @@ ...@@ -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>
src/views/layout/SidebarItem.vue
View file @ c51c7fec
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SidebarItem', name: 'SidebarItem',
props: { props: {
......
src/views/login/index.vue
View file @ c51c7fec
<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 @@ ...@@ -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 @@ ...@@ -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 {
@include relative;
height: 100vh;
background-color: #2d3a4b;
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important;
}
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: #eeeeee;
height: 47px;
}
.el-input {
display: inline-block;
height: 47px;
width: 85%;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #889aa4;
}
.title {
font-size: 26px;
font-weight: 400;
color: #eeeeee;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.login-form {
position: absolute;
left: 0;
right: 0;
width: 400px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
.forget-pwd { .login-container {
color: #fff; @include relative;
} height: 100vh;
background-color: #2d3a4b;
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important;
}
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: #eeeeee;
height: 47px;
}
.el-input {
display: inline-block;
height: 47px;
width: 85%;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #889aa4;
}
.title {
font-size: 26px;
font-weight: 400;
color: #eeeeee;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.login-form {
position: absolute;
left: 0;
right: 0;
width: 400px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
.forget-pwd {
color: #fff;
}
} }
</style> </style>
src/views/table/index.vue
View file @ c51c7fec
...@@ -33,25 +33,26 @@ ...@@ -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(); created() {
}, this.fetchData();
methods: { },
fetchData() { methods: {
this.listLoading = true; fetchData() {
getList(this.listQuery).then(response => { this.listLoading = true;
this.list = response.data.items; getList(this.listQuery).then(response => {
this.listLoading = false; this.list = response.data.items;
}) this.listLoading = false;
})
}
} }
} };
};
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment