暂未开通页样式优化

zhiyangdu
1 parent 74c0321c
Showing 2 changed files with 67 additions and 34 deletions
src/pages/notYetOpened/notYetOpened.less
src/pages/notYetOpened/notYetOpened.vue
 .not_yet_opened{
-    height: 100vh;
+    height: calc(100vh-110px);
     display: flex;
     align-items: center;
     .box{
@@ -18,12 +18,12 @@
             margin-top: 10px;
         }
         .desc{
-            width:500px;
             font-size:24px;
             font-weight:400;
             color:rgba(180,180,180,1);
             line-height:33px;
             margin: 10px 0 30px 0;
+            text-align: center;
         }
         .copy{
             font-size: 26px;
 <template>
-  <div class="not_yet_opened">
-   <div class="box">
-       <img src="static/img/Computer.png" alt=""/>
-       <div class="title">
-           商城/餐厅入驻手机端尚未开通
-       </div>
-       <div class="desc">
-           请前往网家家电商平台进行入驻申请，网址:  <span :title="teamLink" class="invitLink pull-left ellipsis" v-text="teamLink" ></span>
-       </div>
-       <div   class="copy" type="primary" v-clipboard:error="onError"
-              v-clipboard:copy="teamLink"  v-clipboard:success="onCopy">
-           复制链接
-       </div>
-   </div>
-  </div>
+    <div>
+         <!-- nav -->
+            <back-box
+                :style="'padding-top: ' + $parent.top.value + 'px'"
+                @back="back"
+                :backs="backs"
+            >
+            </back-box>
+        <div class="not_yet_opened">
+            <div class="box">
+                <img src="static/img/Computer.png" alt="" />
+                <div class="title">商城/餐厅入驻手机端尚未开通</div>
+                <div class="desc">
+                    请前往网家家电商平台进行入驻申请，网址:
+                    <span
+                        :title="teamLink"
+                        class="invitLink pull-left ellipsis"
+                        v-text="teamLink"
+                    ></span>
+                </div>
+                <div
+                    class="copy"
+                    type="primary"
+                    v-clipboard:error="onError"
+                    v-clipboard:copy="teamLink"
+                    v-clipboard:success="onCopy"
+                >
+                    复制链接
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 <script>
-    // 引入组件
-    import { Toast } from "mint-ui";
-  export default {
-    name: 'notYetOpened',
-    data () {
-      return {
-          teamLink:(this.mode == "prod")?'http://seller.mall.cnlive.com':'http://wjjseller.cnlive.com/'
-      }
+// 引入组件
+import { Toast } from "mint-ui";
+import backBox from "@/components/backBox/backBox";
+export default {
+    name: "notYetOpened",
+    data() {
+        return {
+            backs: {
+                // nav导航条数据
+                title: "已关注达人动态",
+                funcs: {
+                    back: {
+                        icon: "static/img/icon_back.png"
+                    }
+                }
+            },
+            teamLink:
+                this.mode == "prod"
+                    ? "http://seller.mall.cnlive.com"
+                    : "http://wjjseller.cnlive.com/"
+        };
     },
-    created(){
-        document.title = "尚未开通"
+    components: {
+        backBox
+    },
+    created() {
+        document.title = "尚未开通";
     },
     methods: {
         // 复制成功
-        onCopy(e){
-            Toast('复制成功');
+        onCopy(e) {
+            Toast("复制成功");
         },
         // 复制失败
-        onError(e){
-            Toast('复制失败');
-        },
+        onError(e) {
+            Toast("复制失败");
+        }
     }
-  }
+};
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style rel="stylesheet/less" lang="less" scoped>
-    @import "NotYetOpened";
+@import "NotYetOpened";
 </style>