邮箱验证失效页面

components/mobile/validation/phoneValidationFail.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="validation">
-    <div class="container">
-      <div class="content">
-        <div class="content-bottom">
-          <p class="passed"><img src="/images/all/times.png" alt=""/>链接已失效</p>
-          <span class="close-tip">邮箱链接因超时未点击或其他原因已失效，请重新验证！</span>
-          <div class="close-btn" @click="goCloudCenter">返回云中心</div>
-        </div>
+    <div class="content">
+      <div class="content-bottom">
+        <p class="passed"><img src="/images/all/times.png" alt=""/>链接已失效</p>
+        <span class="close-tip">邮箱链接因超时未点击或其他原因已失效，请重新验证！</span>
+        <div class="close-btn" @click="goCloudCenter">返回云中心</div>
       </div>
     </div>
   </div>
@@ -28,18 +26,10 @@
     margin: 0 auto;
     width: 100%;
     background: #eee;
-
-  .container {
-    padding-top: .5rem;
-    margin: 0 auto;
-    width: .98rem;
-    text-align: center;
-
   .content {
     padding: 0 .5rem;
     margin: .5rem auto 0;
     width: 100%;
-    /*height: 540px;*/
     text-align: center;
     background: #fff;
 
@@ -83,20 +73,21 @@
   }
   span {
     display: inline-block;
-    font-size: 14px;
+    text-align: left;
+    font-size: .2rem;
     color: #8b8b8b;
   }
 
   span.close-tip {
-    margin: .15rem 0 1.4rem 0;
+    margin: .25rem 0 1rem 0;
   }
 
   .close-btn {
     margin: 0 auto;
-    width: 2rem;
-    height: .36rem;
-    line-height: .36rem;
-    font-size: .2rem;
+    width: 1.7rem;
+    height: .38rem;
+    line-height: .38rem;
+    font-size: .18rem;
     text-align: center;
     color: #323232;
     border: 1px solid #d2d2d2;
@@ -107,5 +98,4 @@
   }
   }
   }
-  }
 </style>

pages/validation/validFail.vue

@@ -1,17 +1,44 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <validation-fail/>
+    <template v-if="this.mobile">
+      <phone-validationFail/>
+    </template>
+    <template v-if="this.pc">
+      <accountCenter-header/>
+      <validation-fail/>
+    </template>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import ValidationFail from '~components/validation/ValidationFail.vue'
+  import phoneValidationFail from '~components/mobile/validation/phoneValidationFail.vue'
   export default {
-    layout: 'default',
+    layout (context) {
+      return context.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    data () {
+      return {
+        mobile: false,
+        pc: false
+      }
+    },
     components: {
       AccountCenterHeader,
-      ValidationFail
+      ValidationFail,
+      phoneValidationFail
+    },
+    computed: {
+      // isMobile () {
+      //   return this.$store.state.option.isMobile
+      // }
+    },
+    mounted () {
+      if (this.$store.state.option.isMobile) {
+        this.mobile = true
+      } else {
+        this.pc = true
+      }
     }
   }
 </script>