404页面

components/mobile/brand/ComponentDetail.vue

@@ -10,7 +10,8 @@
         <span>{{component.brand.nameCn}}</span>
       </div>
       <div class="base-detail-item attach" @click="goAttach(component.attach)">
-        <span>规格书：<img src="/images/mobile/@2x/productDetail/pdf.png" alt=""><span>查看</span></span>
+        <span v-if="component.attach && component.attach != '1'">规格书：<img src="/images/mobile/@2x/productDetail/pdf.png" alt=""><span>查看</span></span>
+        <span v-else>规格书：-</span>
       </div>
       <div class="base-detail-item product-description" v-if="component.description">
         <span class="description">产品描述：{{component.description}}</span>

layouts/error.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="error">
-    <div class="section">
+    <div class="section" :class="{'mobile-page': isMobile}">
       <div class="container">
         <div class="btn-click">
           <a href="/"><i class="fa fa-home" style="margin-right:5px;"></i>返回首页</a>
@@ -13,7 +13,18 @@
 
 <script>
   export default {
-    props: ['error']
+    props: ['error'],
+    layout (context) {
+      return context.store.state.option.isMobile ? 'login' : 'default'
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+//      background () {
+//        return this.isMobile ? '#ebfdff url("/images/404-mobile.png")no-repeat center center' : '#ebfdff url("/images/404.png")no-repeat center center'
+//      }
+    }
   }
 </script>
 
@@ -22,24 +33,46 @@
     background: #ebfdff url('/images/404.png')no-repeat center center;
     height:900px;
     position:relative;
-  }
-  .section .btn-click{
-    position:absolute;
-    top:54%;
-    left:50%;
-    margin-left:-150px;
-  }
-  .section .btn-click a{
-    display:inline-block;
-    width:130px;
-    height:33px;
-    font-size: 16px;
-    line-height: 33px;
-    color:#fff;
-    background: #f87c29;
-    text-align: center;
-    margin:0 10px;
-    border-radius: 2px;
-    text-decoration: none;
+    .btn-click{
+      position:absolute;
+      top:54%;
+      left:50%;
+      margin-left:-150px;
+      a{
+        display:inline-block;
+        width:130px;
+        height:33px;
+        font-size: 16px;
+        line-height: 33px;
+        color:#fff;
+        background: #f87c29;
+        text-align: center;
+        margin:0 10px;
+        border-radius: 2px;
+        text-decoration: none;
+      }
+    }
+    &.mobile-page {
+      background: #ebfdff url("/images/404-mobile.png")no-repeat center center;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: auto;
+      .btn-click{
+        top: 66%;
+        left: 1.2rem;
+        margin-left: 0;
+        a{
+          width: 2.3rem;
+          height: .63rem;
+          font-size: .32rem;
+          line-height: .63rem;
+          margin: 0 .1rem;
+          border-radius: .04rem;
+        }
+      }
+    }
   }
 </style>

layouts/errorPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="error">
-    <div class="section">
+    <div class="section" :class="{'mobile-page': isMobile}">
       <div class="container">
         <div class="btn-click">
           <a href="/"><i class="fa fa-home" style="margin-right:5px;"></i>返回首页</a>
@@ -13,7 +13,18 @@
 
 <script>
   export default {
-    props: ['error']
+    props: ['error'],
+    layout (context) {
+      return context.store.state.option.isMobile ? 'login' : 'default'
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+//      background () {
+//        return this.isMobile ? '#ebfdff url("/images/404-mobile.png")no-repeat center center' : '#ebfdff url("/images/404.png")no-repeat center center'
+//      }
+    }
   }
 </script>
 
@@ -22,24 +33,46 @@
     background: #ebfdff url('/images/404.png')no-repeat center center;
     height:900px;
     position:relative;
-  }
-  .section .btn-click{
-    position:absolute;
-    top:54%;
-    left:50%;
-    margin-left:-150px;
-  }
-  .section .btn-click a{
-    display:inline-block;
-    width:130px;
-    height:33px;
-    font-size: 16px;
-    line-height: 33px;
-    color:#fff;
-    background: #f87c29;
-    text-align: center;
-    margin:0 10px;
-    border-radius: 2px;
-    text-decoration: none;
+    .btn-click{
+      position:absolute;
+      top:54%;
+      left:50%;
+      margin-left:-150px;
+      a{
+        display:inline-block;
+        width:130px;
+        height:33px;
+        font-size: 16px;
+        line-height: 33px;
+        color:#fff;
+        background: #f87c29;
+        text-align: center;
+        margin:0 10px;
+        border-radius: 2px;
+        text-decoration: none;
+      }
+    }
+    &.mobile-page {
+      background: #ebfdff url("/images/404-mobile.png")no-repeat center center;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: auto;
+      .btn-click{
+        top: 66%;
+        left: 1.2rem;
+        margin-left: 0;
+        a{
+          width: 2.3rem;
+          height: .63rem;
+          font-size: .32rem;
+          line-height: .63rem;
+          margin: 0 .1rem;
+          border-radius: .04rem;
+        }
+      }
+    }
   }
 </style>