zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refine style (#843)

Browse Source 
* refine style

* refine 404 style

* refine
This commit is contained in:
花裤衩
2018-07-06 11:19:53 +08:00
committed by GitHub
parent a575670cef
commit d98c5032f8
9 changed files with 57 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/errorPage/404.vue
View File

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