修改待机页

src/router/index.js

@@ -28,8 +28,9 @@ import Choose from "../views/sim/choose.vue";
 import Authentify2 from "../views/sim/authentify.vue";
 import AuthSuccess2 from "../views/sim/authSuccess.vue";
 import Payment from "../views/sim/register.vue";
-
-
+import Payment2 from "../views/sim/pay.vue";
+import simCard from "../views/sim/roomcard.vue";
+import simSuccess from "../views/sim/success.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -75,7 +76,7 @@ const routes = [
         name: "disreserve",
         component: Disreserve,
         meta: {
-          title: "未预约",
+          title: "访客信息",
         },
       },
       {
@@ -98,11 +99,17 @@ const routes = [
         path: "/card",
         name: "card",
         component: Card,
+        meta: {
+          title: "发放访客卡",
+        },
       },
       {
         path: "/send",
         name: "send",
         component: Send,
+        meta: {
+          title: "发放成功",
+        },
       },
     ],
   },
@@ -263,6 +270,33 @@ const routes = [
           index: 3,
         },
       },
+      {
+        path: "/sim/pay",
+        name: "payment",
+        component: Payment2,
+        meta: {
+          title: "自助办理sim卡系统",
+          index: 3,
+        },
+      },
+      {
+        path: "/sim/card",
+        name: "simCard",
+        component: simCard,
+        meta: {
+          title: "自助办理sim卡系统",
+          index: 4,
+        },
+      },
+      {
+        path: "/sim/success",
+        name: "simSuccess",
+        component: simSuccess,
+        meta: {
+          title: "自助办理sim卡系统",
+          index: 4,
+        },
+      },
     ],
   },
 ];

src/views/common.vue

@@ -39,7 +39,6 @@
             $route: {
                 // $route可以用引号，也可以不用引号  监听的对象
                 handler(to) {
-                    console.log(to.meta.title)
                     this.title = to.meta.title
                 },
             },

src/views/common2.vue

 <template>
     <div class="wrapper ">
         <div class="common">
-            <img src="@/assets/hotel/home.png" alt="" class="home">
+            <img src="@/assets/sim/home.png" alt="" class="home">
             <div class="common_btn" @click="gohome">返回主页</div>
             <div class="common_title">
                 自助办理sim卡系统
@@ -138,13 +138,13 @@
     .common {
         width: 100%;
         height: 105px;
-        background: #507DD9;
+        background: white;
         box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
         border-radius: 0px 0px 23px 23px;
         opacity: 1;
         line-height: 105px;
         display: flex;
-        color: white;
+        color: #333333;
         padding-left: 46px;
         box-sizing: border-box;
         display: flex;

src/views/sim/authSuccess.vue

@@ -47,7 +47,7 @@
                 this.$router.go(-1);
             },
             toNext() {
-                this.$router.push({ name: "card", params: { title: '发放访客卡', } });
+                this.$router.push({ name: "pay" });
 
             },
         }

src/views/sim/authentify.vue

@@ -35,7 +35,7 @@
 
                     <el-button type="primary">粤居码</el-button>
                 </div>
-
+                <button @click="toNext">下一步</button>
 
             </div>
 
@@ -59,7 +59,10 @@
             toBack() {
                 this.$router.go(-1);
             },
+            toNext() {
+                this.$router.push({ name: "realname" });
 
+            },
         }
     }
 </script>

src/views/sim/index.vue

 <template>
     <div class="standby">
 
-        <div class="sim">
+        <div class="sim" @click="comfim">
             <span class="sim_text">自助办理Sim卡</span>
             <div class="sim_center"></div>
             <img src="@/assets/sim/card.png" alt="" class="sim_img">
@@ -25,6 +25,11 @@
             this.getTime()
         },
         methods: {
+            comfim() {
+                this.$router.push({
+                    name: "phone",
+                });
+            },
             Reserved(name, type) {
                 this.$router.push({ name: name, params: { title: '访客信息', type: type } });
             },
@@ -53,11 +58,11 @@
 <style scoped>
     .standby {
         height: 100vh;
-        width: 100%;
+        width: 100vw;
         background: url("~@/assets/sim/background.png") no-repeat;
-        background-size: 100%;
-        position: relative;
-
+        background-size: 100% 100%;
+        background-attachment: fixed;
+        /* background-attachment: fixed; */
     }
 
 
@@ -71,8 +76,8 @@
         opacity: 1;
         position: absolute;
         margin-left: 221px;
-        top: auto;
-        bottom: 55px;
+        margin-top: auto;
+        bottom: 85px;
         display: flex;
         padding: 0 50px;
         box-sizing: border-box;

src/views/sim/pay.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="goback" @click="goback">返回上一步</div>
+      <div class="order_title">订单支付</div>
+    </div>
+    <div class="collection">
+      <div class="price_title">支付金额</div>
+      <div class="price">¥<span>99</span></div>
+      <div class="price_type">
+        <div class="price_wechat">
+          <img src="" class="price_img" />
+          <div class="price_tips">使用<span>微信</span>扫一扫进行支付</div>
+        </div>
+        <div class="price_alipay">
+          <img src="" class="price_img" />
+          <div class="price_tips">使用<span>支付宝</span>扫一扫进行支付</div>
+        </div>
+      </div>
+      <button @click="comfim">下一步</button>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      goback() {
+        this.$router.go(-1);
+      },
+
+      comfim() {
+        this.$router.push({
+          name: "simCard",
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .order {
+    width: 100%;
+    height: 100%;
+    padding: 0 45px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 21px;
+  }
+
+  .order_top {
+    height: 132px;
+    width: 100%;
+    position: relative;
+  }
+
+  .goback {
+    width: 141px;
+    height: 51px;
+    position: absolute;
+    top: 45px;
+    left: 0;
+    cursor: pointer;
+    font-size: 21px;
+    color: #666666;
+    background: #ffffff;
+    border-radius: 6px 6px 6px 6px;
+    border: 2px solid #707070;
+    text-align: center;
+    line-height: 51px;
+  }
+
+  .order_title {
+    font-size: 42px;
+    color: #000000;
+    width: 100%;
+    text-align: center;
+    line-height: 132px;
+  }
+
+  .collection {
+    width: 100%;
+    background: white;
+    height: 729px;
+    padding-top: 60px;
+    box-sizing: border-box;
+  }
+
+  .price_title {
+    font-size: 24px;
+    color: #666666;
+    text-align: center;
+  }
+
+  .price {
+    color: #333333;
+    font-size: 33px;
+    margin-top: 27px;
+    text-align: center;
+  }
+
+  .price span {
+    font-size: 72px;
+  }
+
+  .price_type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 44px;
+  }
+
+  .price_img {
+    width: 342px;
+    height: 342px;
+  }
+
+  .price_wechat {
+    margin-right: 210px;
+  }
+
+  .price_tips {
+    font-size: 24px;
+    color: #999999;
+    text-align: center;
+  }
+
+  .price_tips span {
+    color: #eb9c4e;
+  }
+</style>
\ No newline at end of file

src/views/sim/register.vue

@@ -72,7 +72,7 @@
     methods: {
       pay() {
         this.$router.push({
-          name: "hotelInfoPay",
+          name: "payment",
         });
       },
       goback() {

src/views/sim/roomcard.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="order_title">发放房卡</div>
+    </div>
+    <div class="collection">
+      <img src="@/assets/sim/simCard.png" class="grant" />
+      <div class="waiting">房卡发放中，请耐心等待...</div>
+      <el-progress :show-text="false" color="#61ABEC" :percentage="50" class="progress"
+        :stroke-width="21"></el-progress>
+      <div class="progress_schedule">40%</div>
+    </div>
+    <button @click="comfim">成功</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      comfim() {
+        this.$router.push({
+          name: "simSuccess",
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .order {
+    width: 100%;
+    height: 100%;
+    padding: 0 45px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 21px;
+  }
+
+  .order_top {
+    height: 132px;
+    width: 100%;
+    position: relative;
+  }
+
+  .order_title {
+    font-size: 42px;
+    color: #000000;
+    width: 100%;
+    text-align: center;
+    line-height: 132px;
+  }
+
+  .collection {
+    width: 100%;
+    background: white;
+    height: 729px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .grant {
+    width: 168px;
+    height: 137px;
+  }
+
+  .waiting {
+    font-size: 39px;
+    color: #333333;
+    margin: 80px 0 45px;
+  }
+
+  .progress {
+    width: 827px;
+    margin-bottom: 26px;
+  }
+
+  .progress_schedule {
+    font-size: 33px;
+    color: #333333;
+  }
+</style>
\ No newline at end of file

src/views/sim/success.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="order_title">制卡成功</div>
+    </div>
+    <div class="collection">
+      <img src="@/assets/hotel/success2.png" class="success_icon" />
+      <div class="success_text">房卡发放成功，请拿好您的房卡</div>
+      <div class="success_text">感谢您的使用</div>
+      <div class="success_back" @click="goback">回到首页</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {};
+    },
+    methods: {
+      // 回到首页
+      goback() {
+        this.$router.replace({
+          name: "sim",
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .order {
+    width: 100%;
+    height: 100%;
+    padding: 0 45px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 21px;
+  }
+
+  .order_top {
+    height: 132px;
+    width: 100%;
+    position: relative;
+  }
+
+  .order_title {
+    font-size: 42px;
+    color: #000000;
+    width: 100%;
+    text-align: center;
+    line-height: 132px;
+  }
+
+  .collection {
+    width: 100%;
+    background: white;
+    height: 729px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .success_icon {
+    width: 119px;
+    height: 119px;
+    margin-bottom: 69px;
+  }
+
+  .success_text {
+    font-size: 39px;
+    color: #333333;
+  }
+
+  .success_back {
+    width: 312px;
+    height: 105px;
+    background: #437AE5;
+    text-align: center;
+    line-height: 105px;
+    color: white;
+    font-size: 36px;
+    cursor: pointer;
+    border-radius: 6px 6px 6px 6px;
+    margin-top: 98px;
+  }
+</style>
\ No newline at end of file

src/views/visitor/authentify.vue

@@ -31,7 +31,7 @@
 
                     <el-button type="primary">粤居码</el-button>
                 </div>
-
+                <button @click="toNext">下一步</button>
 
             </div>
 
@@ -55,7 +55,10 @@
             toBack() {
                 this.$router.go(-1);
             },
+            toNext() {
+                this.$router.push({ name: "success" });
 
+            },
         }
     }
 </script>

src/views/visitor/card.vue

@@ -57,7 +57,7 @@
                 this.$router.go(-1);
             },
             toNext() {
-                this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
+                this.$router.push({ name: "visitor" });
 
             },
         }
@@ -97,7 +97,7 @@
 
     .card_body {
         width: 100%;
-        height: 90%;
+        height: 729px;
         display: flex;
         flex-direction: column;
         align-items: center;

src/views/visitor/disreserve.vue

@@ -82,7 +82,7 @@
 <style scoped>
     .return_btn {
         /* margin-top: 45px; */
-        position: absolute;
+        /* position: absolute; */
         height: 51px;
     }
 
@@ -135,7 +135,7 @@
         color: #333333;
 
         font-size: 30px;
-        margin-right: 10px;
+        width: 150px;
     }
 
 

src/views/visitor/send.vue

@@ -9,12 +9,13 @@
             <div class="card_body">
                 <img src="@/assets/visitor/card.png" class="card_img_left">
                 <div class="card_body_text">访客卡发放中，请耐心等待</div>
-                <el-progress :percentage="50"></el-progress>
-
+                <el-progress :show-text="false" color="#61ABEC" :percentage="50" class="progress"
+                    :stroke-width="21"></el-progress>
+                <div class="progress_schedule">40%</div>
 
 
             </div>
-
+            <button @click="toNext">成功</button>
             <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
         </div>
     </div>
@@ -56,7 +57,7 @@
                 this.$router.go(-1);
             },
             toNext() {
-                this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
+                this.$router.push({ name: "card" });
 
             },
         }
@@ -73,7 +74,6 @@
         width: 100%;
         background: #FFFFFF;
         border-radius: 21px;
-        height: calc(100vh - 225px);
         padding: 45px;
         box-sizing: border-box;
 
@@ -95,7 +95,7 @@
 
     .card_body {
         width: 100%;
-        height: 90%;
+        height: 729px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -116,7 +116,7 @@
         height: 127px;
     }
 
-    ::v-deep .el-progress-bar {
+    /* ::v-deep .el-progress-bar {
         width: 520px;
         height: 8px;
     }
@@ -130,6 +130,16 @@
     ::v-deep .el-progress__text {
         margin-top: 10px;
         margin-left: 45%;
+    } */
+
+    .progress {
+        width: 827px;
+        margin-bottom: 26px;
+    }
+
+    .progress_schedule {
+        font-size: 33px;
+        color: #333333;
     }
 
     .content_time {
@@ -145,12 +155,16 @@
     }
 
     ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
+        width: 141px;
+
+        height: 51px;
+        font-size: 21px;
+        border-radius: 6px;
+
+        border: 2px solid #707070;
     }
 
+
     ::v-deep .el-button--primary {
         height: 50px;
     }