更新代码

package-lock.json

 {
   "name": "sim",
   "version": "0.1.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
@@ -11127,7 +11127,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -12636,7 +12637,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13068,7 +13070,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.3.0",
@@ -13127,7 +13130,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "3.2.0",
@@ -13961,7 +13965,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.8.1",
@@ -14147,7 +14152,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -15253,7 +15259,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16594,25 +16601,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "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
+      "dev": true,
+      "requires": {}
     },
     "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
+      "dev": true,
+      "requires": {}
     },
     "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
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -16717,7 +16728,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.3",
@@ -16752,7 +16764,8 @@
       "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
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -17775,15 +17788,6 @@
         "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",
@@ -18533,7 +18537,8 @@
           "version": "8.14.2",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
           "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -18655,7 +18660,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

src/views/hotels/standbuy.vue

@@ -3,7 +3,7 @@
     <div class="hotel_top">
       <div class="hotel_left">
         <img src="" />
-        <div>陆瑞酒店</div>
+        <div>四季酒店</div>
       </div>
       <div class="hotel_right">
         <div class="hotel_right_date">

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 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 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
-            },
-        }
-    }
+// @ 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;
-    }
+.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: flex-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