Merge branch 'master' of http://120.77.240.215:9701/limeimei/sim

package-lock.json

 {
   "name": "sim",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -11127,8 +11127,7 @@
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -12637,8 +12636,7 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13070,8 +13068,7 @@
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
       "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "8.3.0",
@@ -13130,8 +13127,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ansi-escapes": {
       "version": "3.2.0",
@@ -13965,8 +13961,7 @@
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
       "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-loader": {
       "version": "6.8.1",
@@ -14152,8 +14147,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -15259,8 +15253,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16601,29 +16594,25 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -16728,8 +16717,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.3",
@@ -16764,8 +16752,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -17788,6 +17775,15 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -18537,8 +18533,7 @@
           "version": "8.14.2",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
           "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -18660,8 +18655,7 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",

src/App.vue

@@ -5,18 +5,20 @@
 </template>
 
 <style>
-html,
-body {
+  html,
+  body {
     padding: 0;
     margin: 0;
     width: 100%;
-}
+  }
 
-#app {
+  #app {
     width: 100%;
-}
-.el-progress-circle{
+  }
+
+  .el-progress-circle {
     width: 75px !important;
-  height: 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";
@@ -22,6 +23,10 @@ import Sim from "../views/sim/index.vue";
 import hotelOrderCheck from "../views/hotels/order/check.vue";
 import hotelRegistration from "../views/hotels/registration.vue";
 import hotelIdcardCheck from "../views/hotels/real/check.vue";
+import Phone from "../views/sim/phone.vue";
+import Choose from "../views/sim/choose.vue";
+import Authentify2 from "../views/sim/authentify.vue";
+import AuthSuccess2 from "../views/sim/authSuccess.vue";
 
 Vue.use(VueRouter);
 
@@ -47,7 +52,7 @@ const routes = [
   },
   {
     path: "/sim",
-    name: "vissimitor",
+    name: "sim",
     component: Sim,
   },
   {
@@ -204,6 +209,45 @@ const routes = [
     name: "send",
     component: Send,
   },
+  {
+    path: "/comment2",
+    redirect: "/phone",
+    component: Comment2,
+    children: [
+      {
+        path: "/phone",
+        name: "phone",
+        component: Phone,
+        meta: {
+          title: "自助办理sim卡系统",
+        },
+      },
+      {
+        path: "/choose",
+        name: "choose",
+        component: Choose,
+        meta: {
+          title: "自助办理sim卡系统",
+        },
+      },
+      {
+        path: "/auth",
+        name: "auth",
+        component: Authentify2,
+        meta: {
+          title: "自助办理sim卡系统",
+        },
+      },
+      {
+        path: "/realname",
+        name: "realname",
+        component: AuthSuccess2,
+        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,11 +66,16 @@
         line-height: 70px;
         display: flex;
         color: white;
+        padding-left: 31px;
+
     }
 
     .common_btn {
         margin-left: 31px;
         margin-right: auto;
+
+        font-size: 16px;
+
     }
 
 
@@ -70,6 +83,8 @@
         margin-right: 50%;
         margin-left: auto;
 
+        font-size: 22px;
+
     }
 
     .content_view {

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.meta.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;
+        box-sizing: border-box;
+    }
+
+    .common_btn {
+        margin-left: 31px;
+        margin-right: auto;
+
+        font-size: 16px;
+    }
+
+
+    .common_title {
+        margin-right: 50%;
+        margin-left: auto;
+
+        font-size: 22px;
+    }
+
+    .content_view {
+
+        flex: 1;
+    }
+</style>
\ No newline at end of file

src/views/sim/authSuccess.vue

+<template>
+    <div class="reserved">
+        <div class="phone_title">
+            <div v-for="(item,index) in navList" :key="index" class="phone_title_item">
+                <div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
+                <span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
+                <img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
+            </div>
+        </div>
+        <div class="auth_content">
+            <div class="auth_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+                <div class="content_time">118s</div>
+            </div>
+            <div class="auth_title">实名认证成功</div>
+            <div class="auth_body">
+                <div>
+
+                    <div class="auth_center">
+                        <img src="@/assets/visitor/camera.png" class="auth_img">
+                        <div class="auth_right">
+                            <div>姓名：<span style="color: #666666;">王大锤</span></div>
+                            <div>性别：<span style="color: #666666;">女</span></div>
+                            <div>民族：<span style="color: #666666;">汉</span></div>
+                            <div>出生：<span style="color: #666666;">1994年10月10日</span></div>
+                            <div>住址：<span style="color: #666666;">广东省广州市黄浦区黄埔大道129号</span></div>
+                            <div>身份证号码：<span style="color: #666666;">362421********5627</span></div>
+                        </div>
+                    </div>
+                    <div><el-button type="primary" @click="toNext">下一步</el-button>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+
+            }
+        },
+
+        created() {
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: "card", params: { title: '发放访客卡', } });
+
+            },
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 0 36px;
+
+        /* height: calc(100vh - 150px); */
+        box-sizing: border-box;
+
+    }
+
+    .auth_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 835px;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .auth_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between !important;
+    }
+
+    .auth_title {
+
+        color: #000000;
+
+        font-size: 28px;
+        width: 100%;
+        text-align: center;
+    }
+
+    .auth_body {
+        width: 100%;
+        height: 90%;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .auth_center {
+        display: flex;
+    }
+
+    .auth_img {
+        width: 167px;
+        height: 194px;
+    }
+
+    .auth_right {
+        display: flex;
+        flex-direction: column;
+        margin-left: 40px;
+        line-height: 40px;
+        text-align: left;
+        font-size: 20px;
+        margin-top: -20px;
+    }
+
+    .auth_img_left {
+        width: 64px;
+        height: 12px;
+        margin-right: 9px;
+        margin-top: 7px;
+    }
+
+    .auth_right {
+        display: flex;
+        margin-bottom: 62px;
+    }
+
+    .auth_span {
+
+        font-size: 20px;
+
+    }
+
+    .auth_span_a {
+
+        color: #666666;
+        line-height: 18px;
+        font-size: 16px;
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+
+
+    .phone_title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+    }
+
+    .phone_title_item {
+        display: flex;
+        margin-right: 26px;
+        align-items: center;
+    }
+
+    .title_item_idx {
+        width: 16px;
+        height: 16px;
+        background: #797F90;
+        border-radius: 50%;
+        color: #FFFFFF;
+        text-align: center;
+
+        font-size: 13px;
+    }
+
+    .item_active {
+        background: #437AE5 !important;
+    }
+
+    .item_active_text {
+        color: #437AE5 !important;
+    }
+
+    .title_item {
+
+        color: #797F90;
+        font-size: 15px;
+        margin: 0 21px 0 15px;
+    }
+
+    .title_item_img {
+        width: 19.24px;
+        height: 4.37px;
+    }
+</style>
\ No newline at end of file

src/views/sim/authentify.vue

+<template>
+    <div class="reserved">
+        <div class="phone_title">
+            <div v-for="(item,index) in navList" :key="index" class="phone_title_item">
+                <div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
+                <span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
+                <img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
+            </div>
+        </div>
+
+        <div class="auth_content">
+            <div class="auth_top">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div>
+                <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
+                        身份证、粤居码</span>任意一种进行实名认证</div>
+                <div class="content_time">118s</div>
+            </div>
+            <div class="auth_body">
+                <div class="auth_center">
+                    <img src="@/assets/visitor/auth.png" class="auth_img">
+                    <div class="auth_center_right">
+                        <div class="auth_right">
+                            <img src="@/assets/visitor/left.png" class="auth_img_left">
+                            <div><span class="auth_span">身份证读取处</span>
+                                <div class="auth_span_a">请将您的身份证放置此区域</div>
+                            </div>
+
+                        </div>
+                        <div class="auth_right">
+                            <img src="@/assets/visitor/left.png" class="auth_img_left">
+                            <div><span class="auth_span">粤居码读取处</span>
+                                <div class="auth_span_a">请将您的粤居码放置此区域</div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                <div style="margin-top:70px;"><el-button type="primary">身份证</el-button>
+
+                    <el-button type="primary">粤居码</el-button>
+                </div>
+
+
+            </div>
+
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+            }
+        },
+
+        created() {
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+
+        }
+    }
+</script>
+<style scoped>
+    .reserved {
+
+        width: 100%;
+        padding: 0 36px;
+
+        /* height: 1018px; */
+        box-sizing: border-box;
+
+    }
+
+    .auth_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        height: 835px;
+        padding: 30px;
+        box-sizing: border-box;
+
+    }
+
+    .auth_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        align-items: center;
+        justify-content: space-between !important;
+    }
+
+    .auth_title {
+
+        color: #666666;
+        font-size: 18px;
+    }
+
+    .auth_body {
+        width: 100%;
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .auth_center {
+        display: flex;
+    }
+
+    .auth_img {
+        width: 386.54px;
+        height: 287.18px;
+    }
+
+    .auth_center_right {
+        display: flex;
+        flex-direction: column;
+        margin-top: 38px;
+    }
+
+    .auth_img_left {
+        width: 64px;
+        height: 12px;
+        margin-right: 9px;
+        margin-top: 7px;
+    }
+
+    .auth_right {
+        display: flex;
+        margin-bottom: 62px;
+    }
+
+    .auth_span {
+
+        font-size: 20px;
+
+    }
+
+    .auth_span_a {
+
+        color: #666666;
+        line-height: 18px;
+        font-size: 16px;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+
+    .phone_title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+    }
+
+    .phone_title_item {
+        display: flex;
+        margin-right: 26px;
+        align-items: center;
+    }
+
+    .title_item_idx {
+        width: 16px;
+        height: 16px;
+        background: #797F90;
+        border-radius: 50%;
+        color: #FFFFFF;
+        text-align: center;
+
+        font-size: 13px;
+    }
+
+    .item_active {
+        background: #437AE5 !important;
+    }
+
+    .item_active_text {
+        color: #437AE5 !important;
+    }
+
+    .title_item {
+
+        color: #797F90;
+        font-size: 15px;
+        margin: 0 21px 0 15px;
+    }
+
+    .title_item_img {
+        width: 19.24px;
+        height: 4.37px;
+    }
+</style>
\ No newline at end of file

src/views/sim/choose.vue

+<template>
+    <div class="standby">
+        <div class="phone_title">
+            <div v-for="(item,index) in navList" :key="index" class="phone_title_item">
+                <div :class="[index<2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
+                <span :class="[index<2?'item_active_text title_item ':'title_item ']">{{item}}</span>
+                <img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
+            </div>
+        </div>
+
+        <div class="phone">
+
+            <div class="phone_first">
+                <div><el-button @click="toBack">返回上一步</el-button>
+                </div><span class="phone_text">选择套餐</span>
+                <div class="content_time">118s</div>
+            </div>
+            <div class="phone_list">
+                <div v-for="item in phoneList" :key="item.value" class=" phone_list_item">
+                    <img src="@/assets/sim/check.png" class="no_check" @click="chooseItem(item.value)"
+                        v-if="currentindex==item.value">
+                    <img src="@/assets/sim/nocheck.png" class="no_check" @click="chooseItem(item.value)" v-else>
+                    <img :src="require('@/assets/sim/'+item.label)" class="list_item_img">
+                </div>
+            </div>
+            <el-button type="primary" @click="toNext">下一步</el-button>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                currentindex: null,
+                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+                phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" },
+                { value: 4, label: "card4.png" },]
+            }
+        },
+        created() {
+        },
+        methods: {
+            toBack() {
+                this.$router.go(-1);
+            },
+            toNext() {
+                this.$router.push({ name: 'auth' });
+            },
+            chooseItem(idx) {
+                this.currentindex = idx
+            },
+        }
+    }
+</script>
+<style scoped>
+    .standby {
+        height: 100%;
+        width: 100%;
+
+        position: relative;
+
+        padding: 0 36px;
+        box-sizing: border-box;
+    }
+
+
+
+    .phone {
+        width: 100%;
+        min-height: 818px;
+        background: #FFFFFF;
+        border-radius: 14px;
+        opacity: 1;
+
+        padding: 30px;
+        box-sizing: border-box;
+        text-align: center;
+
+    }
+
+    .phone_title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+    }
+
+    .phone_title_item {
+        display: flex;
+        margin-right: 26px;
+        align-items: center;
+    }
+
+    .title_item_idx {
+        width: 16px;
+        height: 16px;
+        background: #797F90;
+        border-radius: 50%;
+        color: #FFFFFF;
+        text-align: center;
+
+        font-size: 13px;
+    }
+
+    .item_active {
+        background: #437AE5 !important;
+    }
+
+    .item_active_text {
+        color: #437AE5 !important;
+    }
+
+    .title_item {
+
+        color: #797F90;
+        font-size: 15px;
+        margin: 0 21px 0 15px;
+    }
+
+    .title_item_img {
+        width: 19.24px;
+        height: 4.37px;
+    }
+
+
+    .phone_img {
+        width: 44.81px;
+        height: 64.16px;
+
+    }
+
+    .phone_first {
+        height: 99px;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .phone_text {
+
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+    }
+
+    .phone_list {
+        display: flex;
+        flex-wrap: wrap;
+        min-height: 471px;
+        justify-content: space-between;
+        box-sizing: border-box;
+        /* align-content: space-between; */
+
+    }
+
+    .phone_list_item {
+
+        align-items: center;
+
+        margin: 0 100px 60px 0;
+        display: flex;
+
+
+    }
+
+    .list_item_img {
+        width: 454px;
+        height: 140px;
+        margin-left: 30px;
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+
+    .no_check {
+        width: 30px;
+        height: 30px;
+    }
+</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,12 +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_text {
 
+        color: #713DB0;
+        font-size: 34px;
     }
 </style>
\ No newline at end of file

src/views/sim/phone.vue

+<template>
+    <div class="standby">
+        <div class="phone_title">
+            <div v-for="(item,index) in navList" :key="index" class="phone_title_item">
+                <div :class="[index==0?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
+                <span :class="[index==0?'item_active_text title_item ':'title_item ']">{{item}}</span>
+                <img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
+            </div>
+        </div>
+
+        <div class="phone">
+            <div class="phone_first"><span class="phone_text">选择号码</span>
+                <div class="content_time">118s</div>
+            </div>
+            <div class="phone_list">
+                <div v-for="(item,index) in phoneList" :key="index"
+                    :class=" [index==currentindex?'item_active list_item_active phone_list_item':'phone_list_item']"
+                    @click="chooseItem(index)">{{item.label}}</div>
+            </div>
+            <el-button type="primary" @click="toNext">下一步</el-button>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    // @ is an alias to /src
+
+    export default {
+        data() {
+            return {
+                currentindex: null,
+                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+                phoneList: [{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
+                { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },]
+            }
+        },
+        created() {
+        },
+        methods: {
+            toNext(name, type) {
+                this.$router.push({ name: 'choose' });
+            },
+            chooseItem(idx) {
+                this.currentindex = idx
+            },
+        }
+    }
+</script>
+<style scoped>
+    .standby {
+        height: 100%;
+        width: 100%;
+
+        position: relative;
+
+        padding: 0 36px;
+        box-sizing: border-box;
+    }
+
+
+
+    .phone {
+        width: 100%;
+        min-height: 818px;
+        background: #FFFFFF;
+        border-radius: 14px;
+        opacity: 1;
+
+        padding: 30px;
+        box-sizing: border-box;
+        text-align: center;
+
+    }
+
+    .phone_title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 80px;
+    }
+
+    .phone_title_item {
+        display: flex;
+        margin-right: 26px;
+        align-items: center;
+    }
+
+    .title_item_idx {
+        width: 16px;
+        height: 16px;
+        background: #797F90;
+        border-radius: 50%;
+        color: #FFFFFF;
+        text-align: center;
+
+        font-size: 13px;
+    }
+
+    .item_active {
+        background: #437AE5 !important;
+    }
+
+    .item_active_text {
+        color: #437AE5 !important;
+    }
+
+    .title_item {
+
+        color: #797F90;
+        font-size: 15px;
+        margin: 0 21px 0 15px;
+    }
+
+    .title_item_img {
+        width: 19.24px;
+        height: 4.37px;
+    }
+
+
+    .phone_img {
+        width: 44.81px;
+        height: 64.16px;
+
+    }
+
+    .phone_first {
+        height: 99px;
+        display: flex;
+        width: 100%;
+    }
+
+    .phone_text {
+
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+        margin-left: 45%;
+    }
+
+    .content_time {
+        width: 50px;
+        height: 50px;
+        background: #FFFFFF;
+        opacity: 1;
+        border: 3px solid #5A8FF6;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 50px;
+        margin: 0 0 0 auto;
+
+    }
+
+    .phone_list {
+        display: flex;
+        flex-wrap: wrap;
+        min-height: 471px;
+        align-content: start;
+    }
+
+    .phone_list_item {
+        width: 166px;
+        height: 56px;
+
+        background: #F0F0F0;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        margin: 0 30px 25px 0;
+        text-align: center;
+        font-weight: 500;
+        color: #666666;
+
+        font-size: 18px;
+        line-height: 56px;
+        cursor: pointer;
+    }
+
+    .list_item_active {
+        color: #FFFFFF;
+    }
+
+    ::v-deep .el-button {
+        width: 94px;
+        height: 34px;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    ::v-deep .el-button--primary {
+        height: 50px;
+    }
+</style>
\ No newline at end of file

src/views/visitor/authentify.vue

@@ -36,56 +36,29 @@
 
             </div>
 
-            <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
         </div>
     </div>
     </div>
 </template>
 
 <script>
-export default {
+
+    export default {
         data() {
             return {
-      type: 1,
-      phone: "",
-      vform: {},
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
-    };
+
+            }
         },
 
         created() {
-    this.type = this.$route.params.type;
         },
         methods: {
             toBack() {
                 this.$router.go(-1);
             },
-    toNext() {
-      this.$router.push({ name: "authentify", params: { title: "实名认证" } });
-    },
-  },
-};
+
+        }
+    }
 </script>
 <style scoped>
 .reserved {