From 0f9d654327e17e68a8742c9fc820e9ece3b9a637 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Fri, 6 Jul 2018 11:07:20 +0800
Subject: [PATCH] refine style

---
 src/components/GithubCorner/index.vue         |  2 +-
 src/styles/sidebar.scss                       |  1 +
 src/views/clipboard/index.vue                 |  2 +-
 .../admin/components/TransactionTable.vue     |  5 +-
 src/views/dashboard/admin/index.vue           |  8 ++--
 src/views/dashboard/editor/index.vue          |  2 +-
 src/views/errorPage/401.vue                   |  1 +
 src/views/errorPage/404.vue                   | 47 +++++++++++--------
 src/views/layout/components/AppMain.vue       | 14 +++++-
 9 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index 8f09e9de..c23fc912 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,6 +1,6 @@
 <template>
   <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff; position: absolute; top: 84px; border: 0; right: 0;"
+    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#40c9c6; color:#fff;"
       aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index c87dddfc..8e6db3b9 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -4,6 +4,7 @@
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
+    position: relative;
   }
   // 侧边栏
   .sidebar-container {
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index 83945235..8a7583e3 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -34,7 +34,7 @@ export default {
     },
     clipboardSuccess() {
       this.$message({
-        message: '复制成功',
+        message: 'Copy successfully',
         type: 'success',
         duration: 1500
       })
diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue
index 4efb98f0..7c79b77b 100644
--- a/src/views/dashboard/admin/components/TransactionTable.vue
+++ b/src/views/dashboard/admin/components/TransactionTable.vue
@@ -2,7 +2,7 @@
   <el-table :data="list" style="width: 100%;padding-top: 15px;">
     <el-table-column label="Order_No" min-width="200">
       <template slot-scope="scope">
-        {{scope.row.order_no}}
+        {{scope.row.order_no |  orderNoFilter}}
       </template>
     </el-table-column>
     <el-table-column label="Price" width="195" align="center">
@@ -34,6 +34,9 @@ export default {
         pending: 'danger'
       }
       return statusMap[status]
+    },
+    orderNoFilter(str) {
+      return str.substring(0, 30)
     }
   },
   created() {
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index a08543fc..8da28543 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner></github-corner>
+
+    <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
 
     <panel-group @handleSetLineChartData="handleSetLineChartData"></panel-group>
 
@@ -30,10 +31,10 @@
       <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
         <transaction-table></transaction-table>
       </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;">
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <todo-list></todo-list>
       </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 5}" style="margin-bottom:30px;" >
+      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
         <box-card></box-card>
       </el-col>
     </el-row>
@@ -41,6 +42,7 @@
   </div>
 </template>
 
+
 <script>
 import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './components/PanelGroup'
diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue
index d3eb0b0b..4c090e33 100644
--- a/src/views/dashboard/editor/index.vue
+++ b/src/views/dashboard/editor/index.vue
@@ -4,7 +4,7 @@
       <pan-thumb style="float: left" :image="avatar"> Your roles:
         <span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
       </pan-thumb>
-      <github-corner></github-corner>
+      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;"></github-corner>
       <div class="info-container">
         <span class="display_name">{{name}}</span>
         <span style="font-size:20px;padding-top:20px;display:inline-block;">editor : dashboard</span>
diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue
index 99eea062..b8bbb013 100644
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -57,6 +57,7 @@ export default {
     .pan-back-btn {
       background: #008489;
       color: #fff;
+      border: none!important;
     }
     .pan-gif {
       margin: 0 auto;
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index b42730d0..8a748299 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -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,18 +37,23 @@ export default {
   },
   computed: {
     message() {
-      return '特朗普说这个页面你不能进......'
+      return '网管说这个页面你不能进......'
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
 .wscn-http404 {
   position: relative;
   width: 1200px;
-  margin: 20px auto 60px;
-  padding: 0 100px;
+  padding: 0 50px;
   overflow: hidden;
   .pic-404 {
     position: relative;
@@ -179,7 +187,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;
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 770ab432..ea1217d7 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main" style="min-height: 100%">
+  <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key"></router-view>
@@ -21,3 +21,15 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.app-main {
+  position: absolute;
+  top: 84px; /* navbar + tags-view = 50 +34 */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+</style>
+