keep in sync with vue-element-admin

This commit is contained in:
Pan 2018-07-13 14:45:13 +08:00
parent dd37f247f8
commit 3fd9a8465e
5 changed files with 32 additions and 10 deletions

View File

@ -4,6 +4,7 @@
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: 180px; margin-left: 180px;
position: relative;
} }
// 侧边栏 // 侧边栏
.sidebar-container { .sidebar-container {

View File

@ -1,5 +1,5 @@
<template> <template>
<div style="background:#f0f2f5;margin-top: -20px;"> <div class="wscn-http404-container">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="img_404" alt="404"> <img class="pic-404__parent" :src="img_404" alt="404">
@ -9,7 +9,9 @@
</div> </div>
<div class="bullshit"> <div class="bullshit">
<div class="bullshit__oops">OOPS!</div> <div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div> <div class="bullshit__info">版权所有
<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
</div>
<div class="bullshit__headline">{{ message }}</div> <div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确请点击以下按钮返回主页或者发送错误报告</div> <div class="bullshit__info">请检查您输入的网址是否正确请点击以下按钮返回主页或者发送错误报告</div>
<a href="" class="bullshit__return-home">返回首页</a> <a href="" class="bullshit__return-home">返回首页</a>
@ -23,6 +25,7 @@ import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png' import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default { export default {
name: 'page404',
data() { data() {
return { return {
img_404, img_404,
@ -31,24 +34,28 @@ export default {
}, },
computed: { computed: {
message() { message() {
return '特朗普说这个页面你不能进......' return '网管说这个页面你不能进......'
} }
} }
} }
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 { .wscn-http404 {
position: relative; position: relative;
width: 1200px; width: 1200px;
margin: 20px auto 60px; padding: 0 50px;
padding: 0 100px;
overflow: hidden; overflow: hidden;
.pic-404 { .pic-404 {
position: relative; position: relative;
float: left; float: left;
width: 600px; width: 600px;
padding: 150px 0;
overflow: hidden; overflow: hidden;
&__parent { &__parent {
width: 100%; width: 100%;
@ -160,7 +167,7 @@ export default {
position: relative; position: relative;
float: left; float: left;
width: 300px; width: 300px;
padding: 150px 0; padding: 30px 0;
overflow: hidden; overflow: hidden;
&__oops { &__oops {
font-size: 32px; font-size: 32px;
@ -176,7 +183,8 @@ export default {
&__headline { &__headline {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
color: #1482f0; color: #222;
font-weight: bold;
opacity: 0; opacity: 0;
margin-bottom: 10px; margin-bottom: 10px;
animation-name: slideUp; animation-name: slideUp;
@ -225,5 +233,4 @@ export default {
} }
} }
} }
</style> </style>

View File

@ -31,6 +31,7 @@ export default {
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile' mobile: this.device === 'mobile'
} }
@ -51,6 +52,10 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
&.mobile.openSidebar{
position: fixed;
top: 0;
}
} }
.drawer-bg { .drawer-bg {
background: #000; background: #000;

View File

@ -17,3 +17,12 @@ export default {
} }
} }
</script> </script>
<style scoped>
.app-main {
/*50 = navbar */
min-height: calc(100vh - 50px);
position: relative;
overflow: hidden;
}
</style>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row> <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95"> <el-table-column align="center" label='ID' width="95">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.$index}} {{scope.$index}}