3

src/App.vue

@@ -5,18 +5,20 @@
 </template>
 
 <style>
-html,
-body {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
 
-#app {
-  width: 100%;
-}
-.el-progress-circle{
-  width: 75px !important;
-  height: 75px !important; /* 自定义高度 */
-}
+  #app {
+    width: 100%;
+  }
+
+  .el-progress-circle {
+    width: 75px !important;
+    height: 75px !important;
+    /* 自定义高度 */
+  }
 </style>
\ No newline at end of file

src/router/index.js

@@ -4,6 +4,7 @@ import HomeView from "../views/HomeView.vue";
 import Visitor from "../views/visitor/standby.vue";
 import Reserved from "../views/visitor/reserved.vue";
 import Comment from "../views/common.vue";
+import Comment2 from "../views/common2.vue";
 import Hotel from "../views/hotels/standbuy.vue";
 import hotelCommon from "../views/hotels/common.vue";
 import hotelReservation from "../views/hotels/bookroom.vue";
@@ -19,6 +20,7 @@ import AuthSuccess from "../views/visitor/authSuccess.vue";
 import Card from "../views/visitor/card.vue";
 import Send from "../views/visitor/send.vue";
 import Sim from "../views/sim/index.vue";
+import Phone from "../views/sim/phone.vue";
 
 Vue.use(VueRouter);
 
@@ -44,7 +46,7 @@ const routes = [
   },
   {
     path: "/sim",
-    name: "vissimitor",
+    name: "sim",
     component: Sim,
   },
   {
@@ -174,6 +176,21 @@ const routes = [
     name: "send",
     component: Send,
   },
+  {
+    path: "/comment2",
+    redirect: "/phone",
+    component: Comment2,
+    children: [
+      {
+        path: "/phone",
+        name: "phone",
+        component: Phone,
+        meta: {
+          title: "已预约",
+        },
+      },
+    ],
+  },
 ];
 
 const router = new VueRouter({

src/views/common.vue

 <template>
     <div class="wrapper ">
         <div class="common">
+            <img src="@/assets/sim/home.png" alt="" class="home">
+
             <div class="common_btn">返回主页</div>
             <div class="common_title">
                 {{title}}
@@ -48,6 +50,12 @@
         box-sizing: border-box;
     }
 
+    .home {
+        width: 18.52px;
+        height: 20px;
+        margin-top: 25px;
+    }
+
     .common {
         width: 100%;
         height: 70px;
@@ -58,6 +66,8 @@
         line-height: 70px;
         display: flex;
         color: white;
+        padding-left: 31px;
+
     }
 
     .common_btn {

src/views/common2.vue

+<template>
+    <div class="wrapper ">
+        <div class="common">
+            <img src="@/assets/sim/home.png" alt="" class="home">
+            <div class="common_btn">返回主页</div>
+            <div class="common_title">
+                {{title}}
+            </div>
+
+        </div>
+        <div class="content_view">
+            <router-view />
+        </div>
+    </div>
+
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                title: ""
+            }
+        }, watch: {
+            $route: {
+                // $route可以用引号，也可以不用引号  监听的对象
+                handler(to) {
+                    this.title = to.params.title
+                },
+            },
+
+        },
+        created() {
+
+        },
+
+        methods: {
+
+        }
+    }
+</script>
+<style scoped>
+    .wrapper {
+        background: #F0F2F8;
+        /* height: 1018px; */
+
+        box-sizing: border-box;
+    }
+
+    .home {
+        width: 18.52px;
+        height: 20px;
+        margin-top: 25px;
+    }
+
+    .common {
+        width: 100%;
+        height: 70px;
+        background: #507DD9;
+        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
+        border-radius: 0px 0px 15px 15px;
+        opacity: 1;
+        line-height: 70px;
+        display: flex;
+        color: white;
+        padding-left: 31px;
+    }
+
+    .common_btn {
+        margin-left: 31px;
+        margin-right: auto;
+    }
+
+
+    .common_title {
+        margin-right: 50%;
+        margin-left: auto;
+
+    }
+
+    .content_view {
+
+        flex: 1;
+    }
+</style>
\ No newline at end of file

src/views/sim/index.vue

@@ -2,7 +2,7 @@
     <div class="standby">
 
         <div class="sim">
-            <span>自助办理Sim卡</span>
+            <span class="sim_text">自助办理Sim卡</span>
             <div class="sim_center"></div>
             <img src="@/assets/sim/card.png" alt="" class="sim_img">
         </div>
@@ -52,7 +52,7 @@
 </script>
 <style scoped>
     .standby {
-        height: 100%;
+        height: 100vh;
         width: 100%;
         background: url("~@/assets/sim/background.png") no-repeat;
         background-size: 100%;
@@ -72,14 +72,29 @@
         position: absolute;
         left: 147px;
         top: 80%;
+        display: flex;
+        padding: 0 32px;
+        box-sizing: border-box;
+        align-items: center;
     }
 
     .sim_center {
         width: 3px;
         height: 32px;
         background: #713DB0;
+        margin-left: 20px;
+        margin-right: 32px;
+    }
+
+    .sim_img {
+        width: 44.81px;
+        height: 64.16px;
 
     }
 
-    .sim_img {}
+    .sim_text {
+
+        color: #713DB0;
+        font-size: 34px;
+    }
 </style>
\ No newline at end of file