chore: sync Exception style #186

vueComponent · Apr 10, 2019 · c8e96e2 · c8e96e2
1 parent 9025539
commit c8e96e2
Showing 1 changed file with 85 additions and 43 deletions.
diff --git a/src/components/Exception/ExceptionPage.vue b/src/components/Exception/ExceptionPage.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="exception">
-    <div class="img">
-      <img :src="config[type].img"/>
+    <div class="imgBlock">
+      <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
+      </div>
     </div>
     <div class="content">
       <h1>{{ config[type].title }}</h1>
       <div class="desc">{{ config[type].desc }}</div>
-      <div class="action">
+      <div class="actions">
         <a-button type="primary" @click="handleToHome">返回首页</a-button>
       </div>
     </div>
@@ -36,53 +37,94 @@ export default {
   }
 }
 </script>
+<style lang="less">
+@import "~ant-design-vue/lib/style/index";
 
-<style lang="less" scoped>
-  .exception {
-    min-height: 500px;
-    height: 80%;
-    align-items: center;
-    text-align: center;
-    margin-top: 150px;
-    .img {
-      display: inline-block;
-      padding-right: 52px;
-      zoom: 1;
-      img {
-        height: 360px;
-        max-width: 430px;
-      }
+.exception {
+  display: flex;
+  align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  .imgBlock {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 152px;
+    zoom: 1;
+    &::before,
+    &::after {
+      content: ' ';
+      display: table;
     }
-    .content {
-      display: inline-block;
-      flex: auto;
-      h1 {
-        color: #434e59;
-        font-size: 72px;
-        font-weight: 600;
-        line-height: 72px;
-        margin-bottom: 24px;
-      }
-      .desc {
-        color: rgba(0, 0, 0, .45);
-        font-size: 20px;
-        line-height: 28px;
-        margin-bottom: 16px;
-      }
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
     }
   }
 
-  .mobile {
-    .exception {
-      margin-top: 30px;
-      .img {
-        padding-right: unset;
+  .imgEle {
+    float: right;
+    width: 100%;
+    max-width: 430px;
+    height: 360px;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: contain;
+  }
 
-        img {
-          height: 40%;
-          max-width: 80%;
-        }
+  .content {
+    flex: auto;
+
+    h1 {
+      margin-bottom: 24px;
+      color: #434e59;
+      font-weight: 600;
+      font-size: 72px;
+      line-height: 72px;
+    }
+
+    .desc {
+      margin-bottom: 16px;
+      color: @text-color-secondary;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .actions {
+      button:not(:last-child) {
+        margin-right: 8px;
       }
     }
   }
+}
+
+@media screen and (max-width: @screen-xl) {
+  .exception {
+    .imgBlock {
+      padding-right: 88px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .exception {
+    display: block;
+    text-align: center;
+    .imgBlock {
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-xs) {
+  .exception {
+    .imgBlock {
+      margin-bottom: -24px;
+      overflow: hidden;
+    }
+  }
+}
 </style>