Skip to content

S
sim
Commit cc234c72 authored by April's avatar April
Browse files
Options

更新代码

parent 553ce25d
Pipeline #1935 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 265 additions and 217 deletions
      package-lock.json
      View file @ cc234c72
      {
      "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
      View file @ cc234c72
      ......@@ -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
      View file @ cc234c72
      <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
      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="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
      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
      // @ is an alias to /src
      export default {
      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() {
      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' });
      this.$router.push({ name: "choose" });
      },
      chooseItem(idx) {
      this.currentindex = idx
      this.currentindex = idx;
      },
      }
      }
      },
      };
      </script>
      <style scoped>
      .standby {
      .standby {
      height: 100%;
      width: 100%;
      ......@@ -66,113 +116,105 @@
      padding: 0 36px;
      box-sizing: border-box;
      }
      }
      .phone {
      .phone {
      width: 100%;
      min-height: 818px;
      background: #FFFFFF;
      background: #ffffff;
      border-radius: 14px;
      opacity: 1;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
      }
      }
      .phone_title {
      .phone_title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      }
      }
      .phone_title_item {
      .phone_title_item {
      display: flex;
      margin-right: 26px;
      align-items: center;
      }
      }
      .title_item_idx {
      .title_item_idx {
      width: 16px;
      height: 16px;
      background: #797F90;
      background: #797f90;
      border-radius: 50%;
      color: #FFFFFF;
      color: #ffffff;
      text-align: center;
      font-size: 13px;
      }
      .item_active {
      background: #437AE5 !important;
      }
      }
      .item_active_text {
      color: #437AE5 !important;
      }
      .item_active {
      background: #437ae5 !important;
      }
      .title_item {
      .item_active_text {
      color: #437ae5 !important;
      }
      color: #797F90;
      .title_item {
      color: #797f90;
      font-size: 15px;
      margin: 0 21px 0 15px;
      }
      }
      .title_item_img {
      .title_item_img {
      width: 19.24px;
      height: 4.37px;
      }
      }
      .phone_img {
      .phone_img {
      width: 44.81px;
      height: 64.16px;
      }
      }
      .phone_first {
      .phone_first {
      height: 99px;
      display: flex;
      width: 100%;
      }
      .phone_text {
      }
      .phone_text {
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      margin-left: 45%;
      }
      }
      .content_time {
      .content_time {
      width: 50px;
      height: 50px;
      background: #FFFFFF;
      background: #ffffff;
      opacity: 1;
      border: 3px solid #5A8FF6;
      border: 3px solid #5a8ff6;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      margin: 0 0 0 auto;
      }
      }
      .phone_list {
      .phone_list {
      display: flex;
      flex-wrap: wrap;
      min-height: 471px;
      align-content: start;
      }
      align-content: flex-start;
      }
      .phone_list_item {
      .phone_list_item {
      width: 166px;
      height: 56px;
      background: #F0F0F0;
      background: #f0f0f0;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      margin: 0 30px 25px 0;
      ......@@ -183,20 +225,20 @@
      font-size: 18px;
      line-height: 56px;
      cursor: pointer;
      }
      }
      .list_item_active {
      color: #FFFFFF;
      }
      .list_item_active {
      color: #ffffff;
      }
      ::v-deep .el-button {
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      }
      }
      ::v-deep .el-button--primary {
      ::v-deep .el-button--primary {
      height: 50px;
      }
      }
      </style>
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment