Skip to content

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

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

parents 688e51cb 3b945d48
Pipeline #1972 canceled with stages
      Expand all Show whitespace changes
      Inline Side-by-side
      Showing with 2502 additions and 12479 deletions
      package-lock.json
      View file @ 08752d4c
      This diff is collapsed.
      src/App.vue
      View file @ 08752d4c
      ......@@ -21,4 +21,8 @@
      height: 50px !important;
      /* 自定义高度 */
      }
      .el-progress__text {
      font-size: 13px !important;
      }
      </style>
      \ No newline at end of file
      src/router/index.js
      View file @ 08752d4c
      ......@@ -29,6 +29,10 @@ import Authentify2 from "../views/sim/authentify.vue";
      import AuthSuccess2 from "../views/sim/authSuccess.vue";
      import hotelIdcardPhotograph from "../views/hotels/real/photograph.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 = [
      ......@@ -66,7 +70,47 @@ const routes = [
      name: "reserved",
      component: Reserved,
      meta: {
      title: "已预约",
      title: "预约验证",
      },
      },
      {
      path: "/disreserve",
      name: "disreserve",
      component: Disreserve,
      meta: {
      title: "访客信息",
      },
      },
      {
      path: "/authentify",
      name: "authentify",
      component: Authentify,
      meta: {
      title: "实名认证",
      },
      },
      {
      path: "/success",
      name: "success",
      component: AuthSuccess,
      meta: {
      title: "实名认证",
      },
      },
      {
      path: "/card",
      name: "card",
      component: Card,
      meta: {
      title: "发放成功",
      },
      },
      {
      path: "/send",
      name: "send",
      component: Send,
      meta: {
      title: "发放访客卡",
      },
      },
      ],
      ......@@ -184,41 +228,9 @@ const routes = [
      },
      ],
      },
      {
      path: "/disreserve",
      name: "disreserve",
      component: Disreserve,
      meta: {
      title: "未预约",
      },
      },
      {
      path: "/authentify",
      name: "authentify",
      component: Authentify,
      meta: {
      title: "实名认证",
      },
      },
      {
      path: "/success",
      name: "success",
      component: AuthSuccess,
      meta: {
      title: "实名认证",
      },
      },
      {
      path: "/card",
      name: "card",
      component: Card,
      },
      {
      path: "/send",
      name: "send",
      component: Send,
      },
      {
      path: "/comment2",
      redirect: "/phone",
      ......@@ -230,6 +242,7 @@ const routes = [
      component: Phone,
      meta: {
      title: "自助办理sim卡系统",
      index: 0,
      },
      },
      {
      ......@@ -238,6 +251,7 @@ const routes = [
      component: Choose,
      meta: {
      title: "自助办理sim卡系统",
      index: 1,
      },
      },
      {
      ......@@ -246,6 +260,7 @@ const routes = [
      component: Authentify2,
      meta: {
      title: "自助办理sim卡系统",
      index: 2,
      },
      },
      {
      ......@@ -253,7 +268,44 @@ const routes = [
      name: "realname",
      component: AuthSuccess2,
      meta: {
      title: "实名认证",
      title: "自助办理sim卡系统",
      index: 2,
      },
      },
      {
      path: "/pay",
      name: "pay",
      component: Payment,
      meta: {
      title: "自助办理sim卡系统",
      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
      View file @ 08752d4c
      <template>
      <div class="wrapper ">
      <div class="common">
      <img src="@/assets/sim/home.png" alt="" class="home">
      <img src="@/assets/visitor/home.png" alt="" class="home">
      <div class="common_btn">返回主页</div>
      <div class="common_btn" @click="gohome">返回主页</div>
      <div class="common_title">
      {{title}}
      </div>
      </div>
      <div class="content_view">
      <div class="hotel_content">
      <div class="hotel_content_frame">
      <el-progress type="circle" color="#5A8FF6" :format="format" :percentage="percentage"
      class="hotel_content_frame_countdown">
      </el-progress>
      <router-view />
      </div>
      </div>
      </div>
      </div>
      </template>
      ......@@ -22,22 +29,67 @@
      export default {
      data() {
      return {
      title: ""
      title: "",
      percentage: 100,
      currentIndex: "", //当前移动到的路径
      time: 120, //时间设定为360
      timer: null, //定时器
      }
      }, watch: {
      },
      watch: {
      $route: {
      // $route可以用引号，也可以不用引号 监听的对象
      handler(to) {
      this.title = to.params.title
      this.title = to.meta.title
      this.time = 120;
      },
      },
      },
      created() {
      this.decrease();
      },
      methods: {
      // 自定义进度条
      format(percentage) {
      return `${this.time}s`;
      },
      // 倒计时
      decrease() {
      // return
      // this.timer && clearInterval(this.timer);
      var that = this;
      that.timer = setInterval(() => {
      that.time--;
      // console.log(123)
      // 计算进度百分比
      that.percentage = (that.time / 120) * 100;
      // 检查是否倒计时结束
      if (that.time <= 0) {
      that.gohome();
      }
      }, 1000); // 每1000毫秒（1秒）更新一次
      },
      // 返回主页
      gohome() {
      clearInterval(this.timer);
      this.$router.replace({
      name: "visitor",
      });
      },
      },
      beforeDestroy() {
      // 销毁定时器
      clearInterval(this.timer);
      this.timer = null;
      }
      }
      ......@@ -45,36 +97,37 @@
      <style scoped>
      .wrapper {
      background: #F0F2F8;
      /* height: 1018px; */
      box-sizing: border-box;
      }
      .home {
      width: 18.52px;
      width: 18px;
      height: 20px;
      margin-top: 25px;
      margin-right: 7px;
      }
      .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;
      padding-left: 31px;
      display: flex;
      color: white;
      padding-left: 31px;
      align-items: center;
      }
      .common_btn {
      margin-left: 31px;
      margin-left: 7px;
      margin-right: auto;
      font-size: 16px;
      font-size:
      16px;
      }
      ......@@ -91,4 +144,25 @@
      flex: 1;
      }
      .hotel_content {
      width: 1280px;
      padding: 30px;
      box-sizing: border-box;
      }
      .hotel_content_frame {
      position: relative;
      border-radius: 14px;
      background: white;
      z-index: 999;
      }
      .hotel_content_frame_countdown {
      position: absolute;
      top: 24px;
      right: 30px;
      z-index: 999;
      }
      </style>
      \ No newline at end of file
      src/views/common2.vue
      View file @ 08752d4c
      ......@@ -2,16 +2,33 @@
      <div class="wrapper ">
      <div class="common">
      <img src="@/assets/sim/home.png" alt="" class="home">
      <div class="common_btn">返回主页</div>
      <div class="common_btn" @click="gohome">返回主页</div>
      <div class="common_title">
      {{title}}
      自助办理sim卡系统
      </div>
      </div>
      <div class="content_view">
      <div class="phone_title">
      <div v-for="(item,index) in navList" :key="index" class="phone_title_item">
      <div :class="[index<=currentIndex?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}
      </div>
      <span
      :class="[index<=currentIndex?'item_active_text title_item ':'title_item ']">{{item.name}}</span>
      <img src="@/assets/sim/right.png" class="title_item_img" v-if="currentIndex >= index&&item.next ">
      <img src="@/assets/sim/right2.png" class="title_item_img" v-else-if="item.next">
      </div>
      </div>
      <div class="hotel_content">
      <div class="hotel_content_frame">
      <el-progress type="circle" color="#5A8FF6" :format="format" :percentage="percentage"
      class="hotel_content_frame_countdown">
      </el-progress>
      <router-view />
      </div>
      </div>
      </div>
      </div>
      </template>
      ......@@ -21,22 +38,95 @@
      export default {
      data() {
      return {
      title: ""
      title: "",
      navList: [
      {
      name: "选择号码",
      path: "hotelOrderCheck",
      next: true,
      },
      {
      name: "选择套餐",
      path: "hotelOrderComfim",
      next: true,
      },
      {
      name: "实名认证",
      next: true,
      },
      {
      name: "订单支付",
      path: "hotelInfo",
      next: true,
      },
      {
      name: "发放SIM卡",
      path: "hotelInfoPay",
      next: false,
      },
      ],
      percentage: 100,
      currentIndex: "", //当前移动到的路径
      time: 120, //时间设定为360
      timer: null, //定时器
      }
      }, watch: {
      $route: {
      // $route可以用引号，也可以不用引号 监听的对象
      handler(to) {
      this.title = to.meta.title
      this.currentIndex = to.meta.index;
      this.time = 120;
      },
      },
      },
      created() {
      this.decrease();
      this.currentIndex = this.$route.meta.index;
      },
      methods: {
      // 自定义进度条
      format(percentage) {
      return `${this.time}s`;
      },
      // 倒计时
      decrease() {
      // return
      // this.timer && clearInterval(this.timer);
      var that = this;
      that.timer = setInterval(() => {
      that.time--;
      // 计算进度百分比
      that.percentage = (that.time / 120) * 100;
      // 检查是否倒计时结束
      if (that.time <= 0) {
      that.gohome();
      }
      }, 1000); // 每1000毫秒（1秒）更新一次
      },
      // 返回主页
      gohome() {
      clearInterval(this.timer);
      this.$router.replace({
      name: "sim",
      });
      },
      },
      beforeDestroy() {
      // 销毁定时器
      clearInterval(this.timer);
      this.timer = null;
      }
      }
      ......@@ -44,36 +134,37 @@
      <style scoped>
      .wrapper {
      background: #F0F2F8;
      height: 1018px;
      height: 800px;
      box-sizing: border-box;
      }
      .home {
      width: 18.52px;
      width: 18px;
      height: 20px;
      margin-top: 25px;
      margin-right: 7px;
      }
      .common {
      width: 100%;
      width: 1280px;
      height: 70px;
      background: #507DD9;
      background: white;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
      border-radius: 0px 0px 15px 15px;
      border-radius: 0px 0px 23px 23px;
      opacity: 1;
      line-height: 70px;
      display: flex;
      color: white;
      color: #333333;
      padding-left: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      }
      .common_btn {
      margin-left: 31px;
      margin-right: auto;
      font-size: 16px;
      cursor: pointer;
      }
      ......@@ -88,4 +179,72 @@
      flex: 1;
      }
      .phone_title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      width: 1280px;
      }
      .phone_title_item {
      display: flex;
      margin-right: 21px;
      align-items: center;
      }
      .title_item_idx {
      width: 16px;
      height: 16px;
      background: #797F90;
      border-radius: 50%;
      color: #FFFFFF;
      text-align: center;
      line-height: 16px;
      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 10px;
      }
      .title_item_img {
      width: 19.24px;
      height: 4.37px;
      }
      .hotel_content {
      height: 620px;
      width: 1280px;
      padding: 0 30px;
      box-sizing: border-box;
      }
      .hotel_content_frame {
      /* width: 1280px; */
      position: relative;
      border-radius: 14px;
      background: white;
      z-index: 999;
      }
      .hotel_content_frame_countdown {
      position: absolute;
      top: 24px;
      right: 30px;
      z-index: 999;
      }
      </style>
      \ No newline at end of file
      src/views/hotels/order/check.vue
      View file @ 08752d4c
      ......@@ -4,25 +4,20 @@
      <div class="content_card">
      <div class="card_left">
      <div class="card_tip">请输入手机号查询订单</div>
      <el-input :value="phone" disabled
      ><template slot="prepend">
      <el-input :value="phone" disabled><template slot="prepend">
      <div style="display: flex; align-items: center">
      <span class="card_pre">+86</span>
      <div class="card_center"></div>
      </div> </template
      ></el-input>
      </div>
      </template></el-input>
      <div class="card_btn">
      <div @click="clickBtn(11)" type="info" class="reset">重置</div>
      <div @click="comfirm" type="primary" class="comfin">确认</div>
      </div>
      </div>
      <div class="card_right">
      <el-button
      v-for="item in numList"
      :key="item.value"
      @click="clickBtn(item.value)"
      >{{ item.label }}</el-button
      >
      <el-button v-for="item in numList" :key="item.value" @click="clickBtn(item.value)">{{ item.label
      }}</el-button>
      </div>
      </div>
      </div>
      ......@@ -30,9 +25,9 @@
      </template>
      <script>
      // @ is an alias to /src
      // @ is an alias to /src
      export default {
      export default {
      data() {
      return {
      phone: "",
      ......@@ -68,7 +63,7 @@ export default {
      });
      },
      },
      };
      };
      </script>
      <style scoped>
      .reserved {
      ......
      src/views/sim/authSuccess.vue
      View file @ 08752d4c
      <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>
      <div class="auth_body">
      <div>
      ......@@ -43,7 +36,6 @@
      export default {
      data() {
      return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      }
      },
      ......@@ -55,7 +47,7 @@
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "card", params: { title: '发放访客卡', } });
      this.$router.push({ name: "pay" });
      },
      }
      ......@@ -65,9 +57,8 @@
      .reserved {
      width: 100%;
      padding: 0 36px;
      /* height: 650px; */
      /* height: calc(100vh - 150px); */
      box-sizing: border-box;
      }
      ......@@ -76,7 +67,7 @@
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 835px;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      ......@@ -85,9 +76,10 @@
      .auth_top {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between !important;
      height: 75px;
      position: relative;
      justify-content: center;
      margin-bottom: 55px;
      }
      .auth_title {
      ......@@ -101,7 +93,7 @@
      .auth_body {
      width: 100%;
      height: 90%;
      /* height: 650px; */
      text-align: center;
      display: flex;
      align-items: center;
      ......@@ -125,32 +117,12 @@
      text-align: left;
      font-size: 20px;
      margin-top: -20px;
      margin-bottom: 104px;
      }
      .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;
      ......@@ -159,52 +131,22 @@
      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;
      }
      ::v-deep .auth_top .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      .item_active_text {
      color: #437AE5 !important;
      border: 1px solid #707070;
      }
      .title_item {
      color: #797F90;
      font-size: 15px;
      margin: 0 21px 0 15px;
      }
      .title_item_img {
      width: 19.24px;
      height: 4.37px;
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      background: #437AE5;
      font-size: 18px;
      border: none;
      }
      </style>
      \ No newline at end of file
      src/views/sim/authentify.vue
      View file @ 08752d4c
      <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;">
      <div class="auth_title">
      <div class="auth_title_a">实名认证
      </div>
      <div>您可通过刷<span style="color: #5A8FF6;">
      身份证、粤居码</span>任意一种进行实名认证</div>
      <div class="content_time">118s</div>
      </div>
      </div>
      <div class="auth_body">
      <div class="auth_center">
      ......@@ -40,10 +35,11 @@
      <el-button type="primary">粤居码</el-button>
      </div>
      <button @click="toNext">下一步</button>
      </div>
      </div>
      </div>
      </div>
      ......@@ -54,7 +50,6 @@
      export default {
      data() {
      return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      }
      },
      ......@@ -64,7 +59,10 @@
      toBack() {
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "realname" });
      },
      }
      }
      </script>
      ......@@ -72,9 +70,8 @@
      .reserved {
      width: 100%;
      padding: 0 36px;
      /* height: 1018px; */
      /* height: auto; */
      box-sizing: border-box;
      }
      ......@@ -83,7 +80,7 @@
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 835px;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      ......@@ -92,24 +89,35 @@
      .auth_top {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between !important;
      /* height: 50px; */
      /* align-items: center; */
      position: relative;
      justify-content: center;
      }
      .auth_title_a {
      font-weight: 500;
      color: #000000;
      font-size: 28px;
      margin-bottom: 34px;
      }
      .auth_title {
      color: #666666;
      font-size: 18px;
      text-align: center;
      }
      .auth_body {
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 66px;
      }
      .auth_center {
      ......@@ -124,7 +132,7 @@
      .auth_center_right {
      display: flex;
      flex-direction: column;
      margin-top: 38px;
      margin-top: 40px;
      }
      .auth_img_left {
      ......@@ -152,17 +160,6 @@
      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;
      ......@@ -171,51 +168,22 @@
      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;
      }
      ::v-deep .auth_top .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      .item_active_text {
      color: #437AE5 !important;
      border: 1px solid #707070;
      }
      .title_item {
      color: #797F90;
      font-size: 15px;
      margin: 0 21px 0 15px;
      }
      .title_item_img {
      width: 19.24px;
      height: 4.37px;
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      background: #437AE5;
      font-size: 18px;
      border: none;
      }
      </style>
      \ No newline at end of file
      src/views/sim/choose.vue
      View file @ 08752d4c
      <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 class="list_item_img"
      :style="{'background-image': 'url('+require('@/assets/sim/'+item.label)+')'}">
      <div class="item_top">{{item.title}}GB<span class="item_top_a">流量</span></div>
      <div class="item_right"><span class="item_right_a">¥</span><span>{{item.price}}</span><span
      class="item_right_b">/月</span></div>
      <div class="item_center">本地语音通话和短信任用</div>
      <div style="display: flex;align-items: center;">
      <div class="item_tottom">赠</div>{{item.min}}分钟中国内地及香港地区漫游语音通话
      </div>
      </div>
      <!-- <img :src="require('@/assets/sim/'+item.label)" class="list_item_img"> -->
      </div>
      </div>
      <el-button type="primary" @click="toNext">下一步</el-button>
      ......@@ -36,9 +39,8 @@
      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" },]
      phoneList: [{ value: 1, title: '40', price: "45", min: '2000', label: "card1.png" }, { title: '60', price: "55", min: '2000', value: 2, label: "card2.png" }, { title: '80', price: "65", min: '200', value: 3, label: "card3.png" },
      { title: '100', price: "75", min: '200', value: 4, label: "card4.png" },]
      }
      },
      created() {
      ......@@ -63,7 +65,6 @@
      position: relative;
      padding: 0 36px;
      box-sizing: border-box;
      }
      ......@@ -71,7 +72,7 @@
      .phone {
      width: 100%;
      min-height: 818px;
      height: 620px;
      background: #FFFFFF;
      border-radius: 14px;
      opacity: 1;
      ......@@ -82,49 +83,6 @@
      }
      .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 {
      ......@@ -134,10 +92,12 @@
      }
      .phone_first {
      height: 99px;
      /* height: 149px; */
      display: flex;
      width: 100%;
      justify-content: space-between;
      position: relative;
      justify-content: center;
      margin-bottom: 42px;
      }
      .phone_text {
      ......@@ -145,23 +105,15 @@
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      }
      /* margin-left: 35%; */
      .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;
      /* min-height: 471px; */
      justify-content: space-between;
      box-sizing: border-box;
      /* align-content: space-between; */
      ......@@ -171,8 +123,8 @@
      .phone_list_item {
      align-items: center;
      margin: 0 100px 60px 0;
      margin-bottom: 60px;
      /* margin: 0 100px 90px 0; */
      display: flex;
      ......@@ -180,8 +132,58 @@
      .list_item_img {
      width: 454px;
      height: 140px;
      height: 140.22px;
      margin-left: 30px;
      /* background: #437AE5; */
      color: white;
      position: relative;
      ;
      padding: 20px;
      box-sizing: border-box;
      text-align: left;
      background-size: 454px 140.22px;
      }
      .item_top_a {
      font-size: 16px;
      }
      .item_top {
      font-size: 24px;
      font-weight: 500;
      }
      .item_right {
      position: absolute;
      top: 22px;
      right: 22px;
      color: #000000;
      font-size: 24px;
      }
      .item_right_a {
      font-size: 14px;
      }
      .item_right_b {
      font-size: 16px;
      }
      .item_center {
      font-size: 16px;
      margin: 10px 0 18px 0;
      }
      .item_tottom {
      width: 17px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      background: #BF1E2D;
      font-size: 11px;
      border-radius: 50%;
      margin-right: 8px;
      }
      ::v-deep .el-button {
      ......@@ -191,8 +193,27 @@
      font-size: 14px;
      }
      ::v-deep .phone_first .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      border: 1px solid #707070;
      }
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      background: #437AE5;
      font-size: 18px;
      }
      .no_check {
      ......
      src/views/sim/index.vue
      View file @ 08752d4c
      <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 } });
      },
      ......@@ -52,35 +57,37 @@
      </script>
      <style scoped>
      .standby {
      height: 100vh;
      width: 100%;
      height: 800px;
      width: 1280px;
      background: url("~@/assets/sim/background.png") no-repeat;
      background-size: 100%;
      background-size: 1280px 800px;
      background-attachment: fixed;
      position: relative;
      /* background-attachment: fixed; */
      }
      .sim {
      width: 396px;
      width: 426px;
      height: 113px;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3), inset 0px 0px 14px 1px #958888;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      position: absolute;
      left: 147px;
      top: 80%;
      margin-left: 147px;
      margin-top: auto;
      bottom: 143px;
      display: flex;
      padding: 0 32px;
      padding: 0 33px;
      box-sizing: border-box;
      align-items: center;
      cursor: pointer;
      }
      .sim_center {
      width: 3px;
      height: 32px;
      width: 5px;
      height: 50px;
      background: #713DB0;
      margin-left: 20px;
      margin-right: 32px;
      ......@@ -94,6 +101,7 @@
      .sim_text {
      font-weight: bold;
      color: #713DB0;
      font-size: 34px;
      }
      ......
      src/views/sim/pay.vue 0 → 100644
      View file @ 08752d4c
      <template>
      <div class="order">
      <div class="order_top">
      <div class="goback" @click="gobak">返回上一步</div>
      <div class="order_title">订单支付</div>
      </div>
      <div class="collection">
      <div class="price_title">支付金额</div>
      <div class="price">¥<span>95</span></div>
      <div class="price_type">
      <div class="price_wechat">
      <img class="price_img" />
      <div class="price_tips">使用<span>微信</span>扫一扫进行支付</div>
      </div>
      <div class="price_alipay">
      <img class="price_img" />
      <div class="price_tips">使用<span>支付宝</span>扫一扫进行支付</div>
      </div>
      </div>
      <button @click="comfim">下一步</button>
      </div>
      </div>
      </template>
      <script>
      export default {
      methods: {
      gobak() {
      this.$router.go(-1);
      },
      comfim() {
      this.$router.push({
      name: "simCard",
      });
      },
      },
      };
      </script>
      <style scoped>
      .order {
      width: 100%;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      background: white;
      border-radius: 14px;
      }
      .order_top {
      width: 100%;
      position: relative;
      }
      .goback {
      position: absolute;
      width: 94px;
      height: 34px;
      cursor: pointer;
      font-size: 16px;
      color: #666666;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #707070;
      text-align: center;
      line-height: 34px;
      }
      .order_title {
      font-size: 28px;
      color: #000000;
      width: 100%;
      text-align: center;
      }
      .collection {
      width: 100%;
      background: white;
      padding-top: 70px;
      box-sizing: border-box;
      }
      .price_title {
      font-size: 16px;
      color: #666666;
      text-align: center;
      }
      .price {
      color: #333333;
      font-size: 22px;
      margin-top: 27px;
      text-align: center;
      }
      .price span {
      font-size: 48px;
      }
      .price_type {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 44px;
      }
      .price_img {
      width: 228px;
      height: 228px;
      }
      .price_wechat {
      margin-right: 140px;
      }
      .price_tips {
      font-size: 16px;
      color: #999999;
      text-align: center;
      }
      .price_tips span {
      color: #999999;
      }
      </style>
      \ No newline at end of file
      src/views/sim/phone.vue
      View file @ 08752d4c
      <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 class="phone_first"><span class="phone_text">选择号码</span>
      </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" },
      ],
      };
      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" },
      ]
      }
      },
      created() {
      },
      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 {
      height: 100%;
      .standby {
      height: 620px;
      width: 100%;
      position: relative;
      padding: 0 36px;
      /* padding: 0 0px; */
      box-sizing: border-box;
      }
      }
      .phone {
      .phone {
      width: 100%;
      min-height: 818px;
      background: #ffffff;
      /* min-height: 620px; */
      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;
      .phone_first {
      /* height: 149px; */
      display: flex;
      width: 100%;
      }
      margin-bottom: 41px;
      }
      .phone_text {
      .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 {
      .phone_list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      min-height: 471px;
      /* min-height: 471px; */
      align-content: flex-start;
      }
      /* justify-content: space-between; */
      }
      .phone_list_item {
      .phone_list_item {
      width: 166px;
      height: 56px;
      background: #f0f0f0;
      border-radius: 4px 4px 4px 4px;
      background: #F0F0F0;
      border-radius: 4px;
      opacity: 1;
      margin: 0 30px 25px 0;
      margin: 0 27px 25px 0;
      text-align: center;
      font-weight: 500;
      color: #666666;
      ......@@ -225,20 +118,22 @@ export default {
      font-size: 18px;
      line-height: 56px;
      cursor: pointer;
      }
      }
      .list_item_active {
      color: #ffffff;
      }
      .list_item_active {
      color: #FFFFFF;
      }
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      }
      .item_active {
      background: #437AE5;
      }
      ::v-deep .el-button--primary {
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      }
      background: #437AE5;
      font-size: 18px;
      border: none;
      margin-top: 10px;
      }
      </style>
      \ No newline at end of file
      src/views/sim/register.vue 0 → 100644
      View file @ 08752d4c
      <template>
      <div class="order">
      <div class="order_top">
      <div class="gobak" @click="gobak">返回上一步</div>
      <div class="order_title">确认订单</div>
      </div>
      <div class="collection">
      <div class="roomcheck">
      <div class="roominfo">
      </div>
      <div>
      <div class="roomcheck_sin roomcheck_sin_a">
      <div class="roomcheck_sin_name">机主信息</div>
      <div class="roomcheck_sin_people">王大锤</div>
      </div>
      <div class="roomcheck_sin">
      <div class="roomcheck_sin_name">您的号码</div>
      <div class="roomcheck_sin_people">172-0728-2374</div>
      </div>
      <div class="roomcheck_sin_bottom">
      <div class="roomcheck_sin_name">您的套餐
      <div class="roomcheck_sin_right">
      <span class="roomprice_num roomprice_num_a">
      ¥</span><span class="roomprice_num_text">45</span><span class="roomprice_num_text2">/月</span>
      </div>
      </div>
      <div class="roomcheck_sin_time_a roomcheck_sin_time_title">
      套餐内容：
      </div>
      <div class="roomcheck_sin_time_a">
      40GB流量
      </div>
      <div class="roomcheck_sin_time_a">
      本地语音通话和短信任用
      </div>
      <div class="roomcheck_sin_time_a">
      2000分钟中国内地及香港地区漫游语音通话
      </div>
      </div>
      </div>
      </div>
      <div class="shu"></div>
      <div class="roomprice">
      <div class="roomprice_title">支付金额</div>
      <div class="roomprice_num">¥<span>95</span></div>
      <div class="roomprice_tips">
      <div class="heng"></div>
      <div>费用明细</div>
      <div class="heng"></div>
      </div>
      <div class="roomprice_specific">
      <div class="roomprice_specific_name">SIM卡费用</div>
      <div class="roomprice_specific_num">¥50</div>
      </div>
      <div class="roomprice_specific">
      <div class="roomprice_specific_name">套餐费用</div>
      <div class="roomprice_specific_num">¥45</div>
      </div>
      <div class="roomprice_bto" @click="pay">确认支付</div>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      data() {
      return {};
      },
      methods: {
      pay() {
      this.$router.push({
      name: "payment",
      });
      },
      gobak() {
      this.$router.go(-1);
      },
      },
      };
      </script>
      <style scoped>
      .order {
      width: 100%;
      height: 620px;
      padding: 30px 82px 30px 30px;
      box-sizing: border-box;
      background: white;
      border-radius: 14px;
      /* padding-bottom: 75px; */
      }
      .order_top {
      /* height: 132px; */
      width: 100%;
      position: relative;
      }
      .gobak {
      width: 94px;
      height: 34px;
      position: absolute;
      left: 0;
      cursor: pointer;
      font-size: 14px;
      color: #666666;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #707070;
      text-align: center;
      line-height: 34px;
      }
      .order_title {
      font-size: 28px;
      color: #000000;
      width: 100%;
      text-align: center;
      /* line-height: 132px; */
      }
      .collection {
      /* width: 100%; */
      background: white;
      /* height: 550px; */
      display: flex;
      /* align-items: center; */
      box-sizing: border-box;
      margin-top: 44px;
      }
      .roomcheck {
      /* width: 70%; */
      /* height: 100%; */
      /* padding: 0 60px 0 30px; */
      box-sizing: border-box;
      display: flex;
      /* margin-top: 44px; */
      }
      .roominfo {
      width: 302px;
      height: 449px;
      /* padding: 51px 0 0 53px; */
      box-sizing: border-box;
      background: url("~@/assets/sim/card5.png");
      background-size: 100% 100%;
      margin-right: 39px;
      }
      .roomcheck_sin {
      width: 354px;
      height: 98px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e0e0e0;
      }
      .roomcheck_sin_a {
      height: auto !important;
      padding-bottom: 40px;
      padding-top: 23px;
      }
      .roomcheck_sin_name {
      font-size: 16px;
      color: #666666;
      }
      .roomcheck_sin_people {
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      }
      .roomcheck_sin_time {
      font-size: 24px;
      margin-top: 30px;
      color: #000000;
      }
      .roomcheck_sin_time_title {
      margin-top: 30px !important;
      color: #666666 !important;
      }
      .roomcheck_sin_time_a {
      font-size: 16px;
      margin-top: 12px;
      color: #000000;
      }
      .roomprice_num_a {
      font-size: 18px !important;
      }
      .roomcheck_sin_right {
      display: inline-block;
      float: right;
      color: #333333;
      }
      .roomprice_num_text {
      font-weight: bold;
      font-size: 36px;
      }
      .roomprice_num_text2 {
      font-size: 14px;
      }
      .roomcheck_sin_bottom {
      margin-top: 30px;
      }
      .shu {
      width: 1px;
      height: 326px;
      background: #e0e0e0;
      margin: 63px 51px 0 40px;
      }
      .roomprice {
      flex: 1;
      /* height: 100%; */
      /* padding: 60px 77px 0; */
      box-sizing: content-box;
      padding-top: 23px;
      }
      .roomprice_tips {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      }
      .heng {
      width: 100px;
      height: 1px;
      background: #e0e0e0;
      }
      .roomprice_title {
      font-size: 16px;
      color: #666666;
      text-align: center;
      }
      .roomprice_num {
      color: #000000;
      font-size: 22px;
      text-align: center;
      margin: 18px 0 64px;
      font-weight: bold;
      }
      .roomprice_num span {
      font-size: 48px;
      }
      .roomprice_specific {
      display: flex;
      margin-top: 11px;
      justify-content: space-between;
      }
      .roomprice_specific_name {
      font-size: 16px;
      color: #666666;
      }
      .roomprice_specific_num {
      color: #000000;
      font-size: 20px;
      }
      .roomprice_bto {
      width: 132px;
      height: 50px;
      background: #437AE5;
      border-radius: 4px 4px 4px 4px;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      cursor: pointer;
      color: #ffffff;
      margin: 100px auto 0;
      }
      </style>
      \ No newline at end of file
      src/views/sim/roomcard.vue 0 → 100644
      View file @ 08752d4c
      <template>
      <div class="order">
      <div class="order_top">
      <div class="order_title">发放SIM卡</div>
      </div>
      <div class="collection">
      <img src="@/assets/sim/simCard.png" class="grant" />
      <div class="waiting">SIM卡发放中，请耐心等待...</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: 30px;
      box-sizing: border-box;
      background: white;
      border-radius: 14px;
      height: 620px;
      }
      .order_top {
      /* height: 132px; */
      width: 100%;
      position: relative;
      }
      .order_title {
      font-size: 28px;
      color: #000000;
      width: 100%;
      text-align: center;
      font-weight: 500;
      }
      .collection {
      width: 100%;
      background: white;
      /* height: 729px; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      margin-top: 110px;
      }
      .grant {
      width: 120px;
      height: 120px;
      }
      .waiting {
      font-size: 26px;
      color: #333333;
      margin: 33px 0 30px;
      }
      .progress {
      width: 551px;
      margin-bottom: 17px;
      }
      .progress_schedule {
      font-size: 22px;
      color: #333333;
      }
      </style>
      \ No newline at end of file
      src/views/sim/success.vue 0 → 100644
      View file @ 08752d4c
      <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">SIM发放成功，请拿好您的SIM</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: 30px;
      box-sizing: border-box;
      background: white;
      border-radius: 21px;
      height: 620px;
      }
      .order_top {
      width: 100%;
      position: relative;
      }
      .order_title {
      font-size: 28px;
      color: #000000;
      width: 100%;
      text-align: center;
      font-weight: 500;
      }
      .collection {
      width: 100%;
      background: white;
      /* height: 729px; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      margin-top: 110px;
      }
      .success_icon {
      width: 79.06px;
      height: 79.06px;
      margin-bottom: 46px;
      }
      .success_text {
      font-size: 26px;
      color: #333333;
      }
      .success_back {
      width: 208px;
      height: 70px;
      background: #437AE5;
      border-radius: 4px 4px 4px 4px;
      text-align: center;
      line-height: 70px;
      color: white;
      font-size: 24px;
      cursor: pointer;
      margin-top: 65px;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/authSuccess.vue
      View file @ 08752d4c
      ......@@ -4,7 +4,6 @@
      <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">
      ......@@ -66,7 +65,7 @@
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "card", params: { title: '发放访客卡', } });
      this.$router.push({ name: "send" });
      },
      }
      ......@@ -76,9 +75,8 @@
      .reserved {
      width: 100%;
      padding: 36px;
      /* height: 650px; */
      height: calc(100vh - 70px);
      box-sizing: border-box;
      }
      ......@@ -87,7 +85,7 @@
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 100%;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      ......@@ -96,9 +94,10 @@
      .auth_top {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between !important;
      /* height: 75px; */
      position: relative;
      justify-content: center;
      margin-bottom: 55px;
      }
      .auth_title {
      ......@@ -112,11 +111,12 @@
      .auth_body {
      width: 100%;
      height: 90%;
      /* height: 500px; */
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 80px;
      }
      .auth_center {
      ......@@ -135,33 +135,13 @@
      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;
      /* margin-top: -20px; */
      margin-bottom: 84px;
      }
      .auth_span {
      font-size: 20px;
      }
      .auth_span_a {
      color: #666666;
      line-height: 18px;
      font-size: 16px;
      }
      ::v-deep .el-button {
      width: 94px;
      ......@@ -170,7 +150,22 @@
      font-size: 14px;
      }
      ::v-deep .auth_top .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      border: 1px solid #707070;
      }
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      background: #437AE5;
      font-size: 18px;
      border: none;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/authentify.vue
      View file @ 08752d4c
      ......@@ -6,7 +6,6 @@
      </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">
      ......@@ -32,10 +31,11 @@
      <el-button type="primary">粤居码</el-button>
      </div>
      <button @click="toNext">下一步</button>
      </div>
      </div>
      </div>
      </div>
      ......@@ -46,7 +46,6 @@
      export default {
      data() {
      return {
      }
      },
      ......@@ -56,106 +55,131 @@
      toBack() {
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "success" });
      },
      }
      }
      </script>
      <style scoped>
      .reserved {
      .reserved {
      width: 100%;
      padding: 36px;
      height: calc(100vh - 70px);
      /* height: auto; */
      box-sizing: border-box;
      }
      .auth_content {
      }
      .auth_content {
      width: 100%;
      background: #ffffff;
      background: #FFFFFF;
      border-radius: 14px;
      height: 100%;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      }
      .auth_top {
      }
      .auth_top {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between !important;
      }
      /* height: 50px; */
      /* align-items: center; */
      position: relative;
      justify-content: center;
      }
      .auth_title_a {
      font-weight: 500;
      color: #000000;
      font-size: 28px;
      margin-bottom: 34px;
      }
      .auth_title {
      .auth_title {
      color: #666666;
      font-size: 18px;
      }
      text-align: center;
      }
      .auth_body {
      .auth_body {
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      }
      margin-top: 66px;
      .auth_center {
      }
      .auth_center {
      display: flex;
      }
      }
      .auth_img {
      .auth_img {
      width: 386.54px;
      height: 287.18px;
      }
      }
      .auth_center_right {
      .auth_center_right {
      display: flex;
      flex-direction: column;
      margin-top: 38px;
      }
      margin-top: 40px;
      }
      .auth_img_left {
      .auth_img_left {
      width: 64px;
      height: 12px;
      margin-right: 9px;
      margin-top: 7px;
      }
      }
      .auth_right {
      .auth_right {
      display: flex;
      margin-bottom: 62px;
      }
      }
      .auth_span {
      .auth_span {
      font-size: 20px;
      }
      .auth_span_a {
      }
      .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 {
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      }
      }
      ::v-deep .auth_top .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      ::v-deep .el-button--primary {
      border: 1px solid #707070;
      }
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      }
      background: #437AE5;
      font-size: 18px;
      border: none;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/card.vue
      View file @ 08752d4c
      ......@@ -5,10 +5,9 @@
      <div><el-button @click="toBack">返回上一步</el-button>
      </div>
      <div class="content_time">118s</div>
      </div>
      <div class="card_body">
      <i class="el-icon-success"></i>
      <img src="@/assets/hotel/success2.png" class="success_icon" />
      <div class="card_body_text">访客卡发放成功，可在门禁处刷卡通行<br>感谢您的使用</div>
      <el-button type="primary" @click="toNext">回到首页</el-button>
      ......@@ -58,7 +57,7 @@
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
      this.$router.push({ name: "visitor" });
      },
      }
      ......@@ -68,9 +67,6 @@
      .reserved {
      width: 100%;
      padding: 36px;
      height: calc(100vh - 70px);
      box-sizing: border-box;
      }
      ......@@ -79,7 +75,7 @@
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 100%;
      height: 620px;
      padding: 30px;
      box-sizing: border-box;
      ......@@ -88,20 +84,15 @@
      .card_top {
      width: 100%;
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between !important;
      }
      .card_title {
      color: #666666;
      font-size: 18px;
      }
      .card_body {
      width: 100%;
      height: 90%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      ......@@ -122,33 +113,30 @@
      display: flex;
      }
      .success_icon {
      width: 79.06px;
      height: 79.06px;
      }
      ::v-deep .el-icon-success:before {
      font-size: 60px;
      color: #25CC18;
      }
      .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;
      border-radius: 4px;
      border: 1px solid #707070;
      }
      ::v-deep .el-button--primary {
      height: 50px;
      width: 208px;
      height: 70px;
      border: none;
      background: #437AE5;
      font-size: 24px;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/disreserve.vue
      View file @ 08752d4c
      ......@@ -2,11 +2,9 @@
      <div class="reserved">
      <div class="content">
      <div class="card_left">
      <div style="margin-top: 30px;height: 34px;"><el-button v-show="this.type==0"
      @click="toBack">返回上一步</el-button></div>
      <div class="return_btn"><el-button v-show="this.type==0" @click="toBack">返回上一步</el-button></div>
      <div class="card_left_c"><img src="@/assets/visitor/camera.png" alt=""
      style="width: 58.15px;height: 45.4px;margin:35%;">
      <div class="card_left_c"><img src="@/assets/visitor/camera.png" alt="" class="card_left_img">
      </div>
      <div class="card_item"><span class="card_item_span">姓名：</span>
      <el-input v-model="vform.name"></el-input>
      ......@@ -27,14 +25,14 @@
      </div>
      <div class="card_center"></div>
      <div class="card_right">
      <div class="content_time">118s</div>
      <div class="card_item"><span class="card_item_span">公司名称：</span>
      <el-input v-model="vform.name" placeholder="必填"></el-input>
      </div>
      <div class="card_item"><span class="card_item_span">到访人数：</span>
      <el-input v-model="vform.name" placeholder="必填"></el-input>
      </div>
      <el-button type="primary" @click="toNext">下一步</el-button>
      <div class="card_item_next"><el-button type="primary" @click="toNext">下一步</el-button></div>
      </div>
      </div>
      </div>
      ......@@ -82,12 +80,18 @@
      }
      </script>
      <style scoped>
      .return_btn {
      /* margin-top: 45px; */
      /* position: absolute; */
      height: 34px;
      }
      .reserved {
      width: 100%;
      padding: 36px;
      padding: 30px;
      height: 670px;
      box-sizing: border-box;
      }
      ......@@ -96,51 +100,46 @@
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 880px;
      padding: 0 30px;
      /* padding: 0 45px; */
      box-sizing: border-box;
      display: flex;
      }
      .card_left_img {
      width: 58.15px;
      height: 45.4px;
      margin: 35%;
      }
      .card_left_c {
      width: 193px;
      height: 193px;
      background: #F4F4F4;
      border-radius: 10px 10px 10px 10px;
      border-radius: 15px;
      opacity: 1;
      margin: 14px 0 54px 156px;
      margin: 0 207px 53px 175px;
      text-align: center;
      }
      .card_item {
      display: flex;
      height: 46px;
      margin-bottom: 30px;
      margin-left: 20px;
      margin-left: 30px;
      }
      .card_item_span {
      line-height: 46px;
      width: 120px;
      color: #333333;
      font-size: 20px;
      width: 120px;
      }
      .content_time {
      width: 50px;
      height: 50px;
      background: #FFFFFF;
      opacity: 1;
      border: 3px solid #5A8FF6;
      margin: 24px 0 26px auto;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      }
      ......@@ -150,11 +149,12 @@
      height: 46px;
      border: 1px solid #707070;
      color: #333333;
      font-size: 20px;
      }
      ::v-deep .el-input {
      width: 360px;
      height: 78px;
      height: 46px;
      }
      ......@@ -164,19 +164,20 @@
      }
      .card_center {
      width: 1px;
      width: 2px;
      height: 548px;
      background: #E0E0E0;
      margin: 50px 43px 50px 85px;
      margin-top: 20px;
      /* margin: 50px 43px 50px 85px; */
      }
      .card_right {
      width: 100%;
      }
      ::v-deep .card_right .el-button {
      margin: auto 0 50px 0;
      margin-top: 70px;
      text-align: center;
      position: relative;
      }
      ::v-deep .el-button {
      ......@@ -185,4 +186,32 @@
      padding: 0;
      font-size: 14px;
      }
      ::v-deep .auth_top .el-button {
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 4px;
      border: 1px solid #707070;
      }
      ::v-deep .el-button--primary {
      width: 132px;
      height: 50px;
      background: #437AE5;
      font-size: 18px;
      border: none;
      }
      .card_item_next {
      position: absolute;
      bottom: 30px;
      left: 40%;
      /* display: inline-block; */
      }
      </style>
      \ No newline at end of file
      src/views/visitor/reserved.vue
      View file @ 08752d4c
      <template>
      <div class="reserved">
      <div class="content">
      <div class="content_time">118s</div>
      <div class="content_card">
      <div class="card_left">
      ......@@ -46,7 +45,7 @@
      clickBtn(val) {
      val == 11 ? this.phone = '' : ''
      if (this.phone.length > 10) return
      if (this.phone.length > 10 && val != 10) return
      val <= 9 ?
      this.phone = this.phone + val.toString() : '';
      ......@@ -64,10 +63,10 @@
      .reserved {
      width: 100%;
      padding: 36px;
      height: 950px;
      /* padding: 36px; */
      /* height: 950px; */
      height: 670px;
      box-sizing: border-box;
      }
      ......@@ -75,28 +74,19 @@
      .content {
      background: #FFFFFF;
      border-radius: 14px;
      height: 880px;
      padding-top: 24px;
      /* padding-top: 24px; */
      box-sizing: border-box;
      }
      .content_time {
      width: 50px;
      height: 50px;
      background: #FFFFFF;
      opacity: 1;
      border: 3px solid #5A8FF6;
      margin: 0 30px 0 auto;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      }
      .content_card {
      display: flex;
      padding: 76px 100px 0 70px;
      padding: 150px 100px 0 70px;
      box-sizing: border-box;
      }
      .card_tip {
      ......@@ -117,22 +107,24 @@
      ::v-deep .content_card .el-input {
      width: 482px;
      height: 78px;
      background: #FFFFFF;
      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #CBC7C7;
      border: 1px solid #cbc7c7;
      margin: 40px 0 120px 0;
      }
      ::v-deep .content_card .el-input-group__prepend {
      background-color: white;
      border: 0;
      line-height: 70px;
      line-height: 78px;
      border-radius: 50%;
      }
      ::v-deep .content_card .el-input.is-disabled .el-input__inner {
      border-color: white;
      height: 100%;
      font-size: 24px;
      background-color: white;
      border-radius: 10%;
      cursor: default;
      ......@@ -140,22 +132,26 @@
      }
      .card_pre {
      color: #000000;
      font-size: 24px;
      }
      .card_center {
      width: 2px;
      height: 40px;
      background: #D6D6D6;
      height: 78px;
      background: #d6d6d6;
      margin-left: 30px;
      }
      .card_btn {
      display: flex;
      align-items: center;
      }
      ::v-deep .card_btn .el-button {
      width: 208px;
      height: 70px;
      border-radius: 4px 4px 4px 4px;
      border-radius: 4px;
      margin-right: 40px;
      font-size: 24px;
      ......@@ -173,22 +169,25 @@
      height: 391px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start;
      padding: 30px;
      padding: 30px 0;
      background: white;
      margin-right: 0;
      margin-left: auto;
      box-sizing: border-box;
      }
      ::v-deep .card_right .el-button {
      width: 113px;
      height: 64px;
      background: #FFFFFF;
      border-radius: 6px 6px 6px 6px;
      border-radius: 6px;
      opacity: 1;
      border: 1px solid #CBC7C7;
      margin: 0 25px 25px 0;
      font-weight: bold;
      color: #000000;
      font-size: 36px;
      font-size: 24px;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/send.vue
      View file @ 08752d4c
      ......@@ -5,17 +5,17 @@
      <div><el-button @click="toBack">返回上一步</el-button>
      </div>
      <div class="content_time">118s</div>
      </div>
      <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>
      ......@@ -57,7 +57,7 @@
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "cardentify", params: { title: '实名认证', } });
      this.$router.push({ name: "card" });
      },
      }
      ......@@ -65,20 +65,17 @@
      </script>
      <style scoped>
      .reserved {
      width: 100%;
      padding: 36px;
      height: calc(100vh - 70px);
      box-sizing: border-box;
      height: 100%;
      }
      .card_content {
      width: 100%;
      height: 620px;
      background: #FFFFFF;
      border-radius: 14px;
      height: 100%;
      padding: 30px;
      box-sizing: border-box;
      ......@@ -87,20 +84,16 @@
      .card_top {
      width: 100%;
      display: flex;
      height: 50px;
      /* height: 50px; */
      align-items: center;
      justify-content: space-between !important;
      }
      .card_title {
      color: #666666;
      font-size: 18px;
      }
      .card_body {
      width: 100%;
      height: 90%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      ......@@ -109,6 +102,7 @@
      .card_body_text {
      margin: 55px 0 30px 0;
      font-size: 26px;
      }
      .card_center {
      ......@@ -116,11 +110,11 @@
      }
      .card_img {
      width: 386.54px;
      height: 287.18px;
      width: 123.36px;
      height: 84.72px;
      }
      ::v-deep .el-progress-bar {
      /* ::v-deep .el-progress-bar {
      width: 520px;
      height: 8px;
      }
      ......@@ -133,29 +127,37 @@
      ::v-deep .el-progress__text {
      margin-top: 10px;
      margin-left: 45%;
      }
      margin-left: 30%;
      } */
      .content_time {
      width: 50px;
      height: 50px;
      background: #FFFFFF;
      opacity: 1;
      border: 3px solid #5A8FF6;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      .progress {
      width: 551px;
      margin-bottom: 26px;
      }
      .progress_schedule {
      font-size: 22px;
      color: #333333;
      }
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #707070;
      padding: 0;
      }
      ::v-deep .el-button--primary {
      height: 50px;
      width: 208px;
      height: 70px;
      font-size: 24px;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/standby.vue
      View file @ 08752d4c
      ......@@ -6,15 +6,13 @@
      <span class="header_first"><span>{{weekDay }}</span>
      <span class="header_mon">{{currentDate}}</span>
      </span>
      <span style="line-height: 18px;">|</span>
      <div class="header_center"></div>
      <span class="header_time">{{currentTIme}}</span>
      </div>
      </div>
      <div class="content">
      <div style="color: #333333;
      font-size: 44px;">欢迎使用</div>
      <div style="color: #416CCC;
      font-size: 50px;">访客自助登记系统</div>
      <div class="content_title">欢迎使用</div>
      <div class="content_title2">访客自助登记系统</div>
      <div class="content_btns">
      <div class="content_btn" @click="Reserved('reserved',0)">
      <div class="content_text">已预约</div>
      ......@@ -73,10 +71,11 @@ font-size: 50px;">访客自助登记系统</div>
      </script>
      <style scoped>
      .standby {
      height: 100%;
      height: 800px;
      width: 100%;
      background: url("~@/assets/visitor/background.png") no-repeat;
      background-size: 100%;
      background-size: 1280px 800px;
      box-sizing: border-box;
      }
      .header {
      ......@@ -91,44 +90,61 @@ font-size: 50px;">访客自助登记系统</div>
      .header_title {
      color: #333333;
      font-size: 16px;
      margin-top: 20px;
      font-size:
      16px;
      margin-top: 29px;
      }
      .header_right {
      display: flex;
      color: #FFFFFF;
      align-items: center;
      height: 70px;
      margin-top: 24px;
      }
      .header_first {
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 13px;
      margin-right: 10px;
      margin-right: 18px;
      }
      .header_mon {
      margin-top: 2px;
      margin-top: 5px;
      }
      .header_center {
      height: 18px;
      width: 1px;
      background: white;
      margin-top: 12px;
      }
      .header_time {
      font-size: 30px;
      font-weight: bold;
      margin-left: 6px;
      margin-left: 16px;
      }
      .content {
      /* height: 100%; */
      font-weight: bold;
      padding: 140px 60px 0;
      padding: 57px 0 0 60px;
      box-sizing: border-box;
      }
      .content_title {
      color: #333333;
      font-size: 30px;
      }
      .content_title2 {
      color: #416CCC;
      font-size: 75px;
      }
      .content_btns {
      display: flex;
      margin-top: 85px;
      ......@@ -140,27 +156,27 @@ font-size: 50px;">访客自助登记系统</div>
      background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      padding: 22px;
      padding: 33px;
      cursor: pointer;
      }
      .content_e {
      background: linear-gradient(136deg, #BDC9DF 0%, #6F84B0 100%) !important;
      margin-left: 50px;
      margin-left: 75px;
      }
      .auth_img_left {
      width: 114px;
      height: 120px;
      float: right;
      margin-top: 81px;
      }
      .content_text {
      font-size: 30px;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 41px;
      }
      </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