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 Hide 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 @@ ...@@ -21,4 +21,8 @@
      height: 50px !important; height: 50px !important;
      /* 自定义高度 */ /* 自定义高度 */
      } }
      .el-progress__text {
      font-size: 13px !important;
      }
      </style> </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"; ...@@ -29,6 +29,10 @@ import Authentify2 from "../views/sim/authentify.vue";
      import AuthSuccess2 from "../views/sim/authSuccess.vue"; import AuthSuccess2 from "../views/sim/authSuccess.vue";
      import hotelIdcardPhotograph from "../views/hotels/real/photograph.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); Vue.use(VueRouter);
      const routes = [ const routes = [
      ...@@ -66,7 +70,47 @@ const routes = [ ...@@ -66,7 +70,47 @@ const routes = [
      name: "reserved", name: "reserved",
      component: Reserved, component: Reserved,
      meta: { 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 = [ ...@@ -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", path: "/comment2",
      redirect: "/phone", redirect: "/phone",
      ...@@ -230,6 +242,7 @@ const routes = [ ...@@ -230,6 +242,7 @@ const routes = [
      component: Phone, component: Phone,
      meta: { meta: {
      title: "自助办理sim卡系统", title: "自助办理sim卡系统",
      index: 0,
      }, },
      }, },
      { {
      ...@@ -238,6 +251,7 @@ const routes = [ ...@@ -238,6 +251,7 @@ const routes = [
      component: Choose, component: Choose,
      meta: { meta: {
      title: "自助办理sim卡系统", title: "自助办理sim卡系统",
      index: 1,
      }, },
      }, },
      { {
      ...@@ -246,6 +260,7 @@ const routes = [ ...@@ -246,6 +260,7 @@ const routes = [
      component: Authentify2, component: Authentify2,
      meta: { meta: {
      title: "自助办理sim卡系统", title: "自助办理sim卡系统",
      index: 2,
      }, },
      }, },
      { {
      ...@@ -253,7 +268,44 @@ const routes = [ ...@@ -253,7 +268,44 @@ const routes = [
      name: "realname", name: "realname",
      component: AuthSuccess2, component: AuthSuccess2,
      meta: { 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> <template>
      <div class="wrapper "> <div class="wrapper ">
      <div class="common"> <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"> <div class="common_title">
      {{title}} {{title}}
      </div> </div>
      </div> </div>
      <div class="content_view"> <div class="content_view">
      <router-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>
      </div> </div>
      ...@@ -22,22 +29,67 @@ ...@@ -22,22 +29,67 @@
      export default { export default {
      data() { data() {
      return { return {
      title: "" title: "",
      percentage: 100,
      currentIndex: "", //当前移动到的路径
      time: 120, //时间设定为360
      timer: null, //定时器
      } }
      }, watch: { },
      watch: {
      $route: { $route: {
      // $route可以用引号，也可以不用引号 监听的对象 // $route可以用引号，也可以不用引号 监听的对象
      handler(to) { handler(to) {
      this.title = to.params.title this.title = to.meta.title
      this.time = 120;
      }, },
      }, },
      }, },
      created() { created() {
      this.decrease();
      }, },
      methods: { 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 @@ ...@@ -45,36 +97,37 @@
      <style scoped> <style scoped>
      .wrapper { .wrapper {
      background: #F0F2F8; background: #F0F2F8;
      /* height: 1018px; */
      box-sizing: border-box; box-sizing: border-box;
      } }
      .home { .home {
      width: 18.52px; width: 18px;
      height: 20px; height: 20px;
      margin-top: 25px; margin-right: 7px;
      } }
      .common { .common {
      width: 100%;
      height: 70px; height: 70px;
      background: #507DD9; background: #507DD9;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05); box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
      border-radius: 0px 0px 15px 15px; border-radius: 0px 0px 15px 15px;
      opacity: 1; opacity: 1;
      line-height: 70px; line-height: 70px;
      padding-left: 31px;
      display: flex; display: flex;
      color: white; color: white;
      padding-left: 31px; align-items: center;
      } }
      .common_btn { .common_btn {
      margin-left: 31px; margin-left: 7px;
      margin-right: auto; margin-right: auto;
      font-size: 16px; font-size:
      16px;
      } }
      ...@@ -91,4 +144,25 @@ ...@@ -91,4 +144,25 @@
      flex: 1; 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> </style>
      \ No newline at end of file
      src/views/common2.vue
      View file @ 08752d4c
      ...@@ -2,14 +2,31 @@ ...@@ -2,14 +2,31 @@
      <div class="wrapper "> <div class="wrapper ">
      <div class="common"> <div class="common">
      <img src="@/assets/sim/home.png" alt="" class="home"> <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"> <div class="common_title">
      {{title}} 自助办理sim卡系统
      </div> </div>
      </div> </div>
      <div class="content_view"> <div class="content_view">
      <router-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>
      </div> </div>
      ...@@ -21,22 +38,95 @@ ...@@ -21,22 +38,95 @@
      export default { export default {
      data() { data() {
      return { 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: { }, watch: {
      $route: { $route: {
      // $route可以用引号，也可以不用引号 监听的对象 // $route可以用引号，也可以不用引号 监听的对象
      handler(to) { handler(to) {
      this.title = to.meta.title this.currentIndex = to.meta.index;
      this.time = 120;
      }, },
      }, },
      }, },
      created() { created() {
      this.decrease();
      this.currentIndex = this.$route.meta.index;
      }, },
      methods: { 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 @@ ...@@ -44,36 +134,37 @@
      <style scoped> <style scoped>
      .wrapper { .wrapper {
      background: #F0F2F8; background: #F0F2F8;
      height: 1018px; height: 800px;
      box-sizing: border-box; box-sizing: border-box;
      } }
      .home { .home {
      width: 18.52px; width: 18px;
      height: 20px; height: 20px;
      margin-top: 25px; margin-right: 7px;
      } }
      .common { .common {
      width: 100%; width: 1280px;
      height: 70px; height: 70px;
      background: #507DD9; background: white;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05); 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; opacity: 1;
      line-height: 70px; line-height: 70px;
      display: flex; display: flex;
      color: white; color: #333333;
      padding-left: 31px; padding-left: 31px;
      box-sizing: border-box; box-sizing: border-box;
      display: flex;
      align-items: center;
      } }
      .common_btn { .common_btn {
      margin-left: 31px;
      margin-right: auto;
      font-size: 16px; font-size: 16px;
      cursor: pointer;
      } }
      ...@@ -88,4 +179,72 @@ ...@@ -88,4 +179,72 @@
      flex: 1; 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> </style>
      \ No newline at end of file
      src/views/hotels/order/check.vue
      View file @ 08752d4c
      ...@@ -4,25 +4,20 @@ ...@@ -4,25 +4,20 @@
      <div class="content_card"> <div class="content_card">
      <div class="card_left"> <div class="card_left">
      <div class="card_tip">请输入手机号查询订单</div> <div class="card_tip">请输入手机号查询订单</div>
      <el-input :value="phone" disabled <el-input :value="phone" disabled><template slot="prepend">
      ><template slot="prepend">
      <div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
      <span class="card_pre">+86</span> <span class="card_pre">+86</span>
      <div class="card_center"></div> <div class="card_center"></div>
      </div> </template </div>
      ></el-input> </template></el-input>
      <div class="card_btn"> <div class="card_btn">
      <div @click="clickBtn(11)" type="info" class="reset">重置</div> <div @click="clickBtn(11)" type="info" class="reset">重置</div>
      <div @click="comfirm" type="primary" class="comfin">确认</div> <div @click="comfirm" type="primary" class="comfin">确认</div>
      </div> </div>
      </div> </div>
      <div class="card_right"> <div class="card_right">
      <el-button <el-button v-for="item in numList" :key="item.value" @click="clickBtn(item.value)">{{ item.label
      v-for="item in numList" }}</el-button>
      :key="item.value"
      @click="clickBtn(item.value)"
      >{{ item.label }}</el-button
      >
      </div> </div>
      </div> </div>
      </div> </div>
      ...@@ -30,45 +25,45 @@ ...@@ -30,45 +25,45 @@
      </template> </template>
      <script> <script>
      // @ is an alias to /src // @ is an alias to /src
      export default { export default {
      data() { data() {
      return { return {
      phone: "", phone: "",
      numList: [ numList: [
      { label: "1", value: 1 }, { label: "1", value: 1 },
      { label: "2", value: 2 }, { label: "2", value: 2 },
      { label: "3", value: 3 }, { label: "3", value: 3 },
      { label: "4", value: 4 }, { label: "4", value: 4 },
      { label: "5", value: 5 }, { label: "5", value: 5 },
      { label: "6", value: 6 }, { label: "6", value: 6 },
      { label: "7", value: 7 }, { label: "7", value: 7 },
      { label: "8", value: 8 }, { label: "8", value: 8 },
      { label: "9", value: 9 }, { label: "9", value: 9 },
      { label: "退格", value: 10 }, { label: "退格", value: 10 },
      { label: "0", value: 0 }, { label: "0", value: 0 },
      { label: "删除", value: 11 }, { label: "删除", value: 11 },
      ], ],
      }; };
      },
      methods: {
      clickBtn(val) {
      val == 11 ? (this.phone = "") : "";
      if (this.phone.length > 10) return;
      val <= 9 ? (this.phone = this.phone + val.toString()) : "";
      val == 10 && this.phone.length >= 1
      ? (this.phone = this.phone.substring(0, this.phone.length - 1))
      : "";
      }, },
      comfirm() { methods: {
      this.$router.push({ clickBtn(val) {
      name: "hotelOrderComfim", val == 11 ? (this.phone = "") : "";
      }); if (this.phone.length > 10) return;
      val <= 9 ? (this.phone = this.phone + val.toString()) : "";
      val == 10 && this.phone.length >= 1
      ? (this.phone = this.phone.substring(0, this.phone.length - 1))
      : "";
      },
      comfirm() {
      this.$router.push({
      name: "hotelOrderComfim",
      });
      },
      }, },
      }, };
      };
      </script> </script>
      <style scoped> <style scoped>
      .reserved { .reserved {
      ......
      src/views/sim/authSuccess.vue
      View file @ 08752d4c
      <template> <template>
      <div class="reserved"> <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_content">
      <div class="auth_top"> <div class="auth_top">
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div> </div>
      <div class="content_time">118s</div> <div class="auth_title">实名认证成功</div>
      </div> </div>
      <div class="auth_title">实名认证成功</div>
      <div class="auth_body"> <div class="auth_body">
      <div> <div>
      ...@@ -43,7 +36,6 @@ ...@@ -43,7 +36,6 @@
      export default { export default {
      data() { data() {
      return { return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      } }
      }, },
      ...@@ -55,7 +47,7 @@ ...@@ -55,7 +47,7 @@
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() { toNext() {
      this.$router.push({ name: "card", params: { title: '发放访客卡', } }); this.$router.push({ name: "pay" });
      }, },
      } }
      ...@@ -65,9 +57,8 @@ ...@@ -65,9 +57,8 @@
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 0 36px; /* height: 650px; */
      /* height: calc(100vh - 150px); */
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -76,7 +67,7 @@ ...@@ -76,7 +67,7 @@
      width: 100%; width: 100%;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 835px; height: 620px;
      padding: 30px; padding: 30px;
      box-sizing: border-box; box-sizing: border-box;
      ...@@ -85,9 +76,10 @@ ...@@ -85,9 +76,10 @@
      .auth_top { .auth_top {
      width: 100%; width: 100%;
      display: flex; display: flex;
      height: 50px; height: 75px;
      align-items: center; position: relative;
      justify-content: space-between !important; justify-content: center;
      margin-bottom: 55px;
      } }
      .auth_title { .auth_title {
      ...@@ -101,7 +93,7 @@ ...@@ -101,7 +93,7 @@
      .auth_body { .auth_body {
      width: 100%; width: 100%;
      height: 90%; /* height: 650px; */
      text-align: center; text-align: center;
      display: flex; display: flex;
      align-items: center; align-items: center;
      ...@@ -125,32 +117,12 @@ ...@@ -125,32 +117,12 @@
      text-align: left; text-align: left;
      font-size: 20px; font-size: 20px;
      margin-top: -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 { ::v-deep .el-button {
      width: 94px; width: 94px;
      ...@@ -159,52 +131,22 @@ ...@@ -159,52 +131,22 @@
      font-size: 14px; font-size: 14px;
      } }
      ::v-deep .el-button--primary {
      height: 50px;
      }
      .phone_title { ::v-deep .auth_top .el-button {
      display: flex; position: absolute;
      justify-content: center; left: 0;
      align-items: center; top: 0;
      height: 80px; border-radius: 4px;
      }
      .phone_title_item { border: 1px solid #707070;
      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 { ::v-deep .el-button--primary {
      background: #437AE5 !important; width: 132px;
      } height: 50px;
      background: #437AE5;
      .item_active_text { font-size: 18px;
      color: #437AE5 !important; border: none;
      }
      .title_item {
      color: #797F90;
      font-size: 15px;
      margin: 0 21px 0 15px;
      }
      .title_item_img {
      width: 19.24px;
      height: 4.37px;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/sim/authentify.vue
      View file @ 08752d4c
      <template> <template>
      <div class="reserved"> <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_content">
      <div class="auth_top"> <div class="auth_top">
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div> </div>
      <div class="auth_title">您可通过刷<span style="color: #5A8FF6;"> <div class="auth_title">
      身份证、粤居码</span>任意一种进行实名认证</div> <div class="auth_title_a">实名认证
      <div class="content_time">118s</div> </div>
      <div>您可通过刷<span style="color: #5A8FF6;">
      身份证、粤居码</span>任意一种进行实名认证</div>
      </div>
      </div> </div>
      <div class="auth_body"> <div class="auth_body">
      <div class="auth_center"> <div class="auth_center">
      ...@@ -40,10 +35,11 @@ ...@@ -40,10 +35,11 @@
      <el-button type="primary">粤居码</el-button> <el-button type="primary">粤居码</el-button>
      </div> </div>
      <button @click="toNext">下一步</button>
      </div> </div>
      </div> </div>
      </div> </div>
      </div> </div>
      ...@@ -54,7 +50,6 @@ ...@@ -54,7 +50,6 @@
      export default { export default {
      data() { data() {
      return { return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      } }
      }, },
      ...@@ -64,7 +59,10 @@ ...@@ -64,7 +59,10 @@
      toBack() { toBack() {
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() {
      this.$router.push({ name: "realname" });
      },
      } }
      } }
      </script> </script>
      ...@@ -72,9 +70,8 @@ ...@@ -72,9 +70,8 @@
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 0 36px;
      /* height: 1018px; */ /* height: auto; */
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -83,7 +80,7 @@ ...@@ -83,7 +80,7 @@
      width: 100%; width: 100%;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 835px; height: 620px;
      padding: 30px; padding: 30px;
      box-sizing: border-box; box-sizing: border-box;
      ...@@ -92,24 +89,35 @@ ...@@ -92,24 +89,35 @@
      .auth_top { .auth_top {
      width: 100%; width: 100%;
      display: flex; display: flex;
      height: 50px; /* height: 50px; */
      align-items: center; /* align-items: center; */
      justify-content: space-between !important; 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; color: #666666;
      font-size: 18px; font-size: 18px;
      text-align: center;
      } }
      .auth_body { .auth_body {
      width: 100%; width: 100%;
      height: 90%;
      display: flex; display: flex;
      flex-direction: column; flex-direction: column;
      align-items: center; align-items: center;
      justify-content: center; margin-top: 66px;
      } }
      .auth_center { .auth_center {
      ...@@ -124,7 +132,7 @@ ...@@ -124,7 +132,7 @@
      .auth_center_right { .auth_center_right {
      display: flex; display: flex;
      flex-direction: column; flex-direction: column;
      margin-top: 38px; margin-top: 40px;
      } }
      .auth_img_left { .auth_img_left {
      ...@@ -152,17 +160,6 @@ ...@@ -152,17 +160,6 @@
      font-size: 16px; 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; width: 94px;
      ...@@ -171,51 +168,22 @@ ...@@ -171,51 +168,22 @@
      font-size: 14px; 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; ::v-deep .auth_top .el-button {
      } position: absolute;
      left: 0;
      .item_active { top: 0;
      background: #437AE5 !important; border-radius: 4px;
      }
      .item_active_text { border: 1px solid #707070;
      color: #437AE5 !important;
      } }
      .title_item {
      color: #797F90; ::v-deep .el-button--primary {
      font-size: 15px; width: 132px;
      margin: 0 21px 0 15px; height: 50px;
      } background: #437AE5;
      font-size: 18px;
      .title_item_img { border: none;
      width: 19.24px;
      height: 4.37px;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/sim/choose.vue
      View file @ 08752d4c
      <template> <template>
      <div class="standby"> <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">
      <div class="phone_first"> <div class="phone_first">
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div><span class="phone_text">选择套餐</span> </div><span class="phone_text">选择套餐</span>
      <div class="content_time">118s</div>
      </div> </div>
      <div class="phone_list"> <div class="phone_list">
      <div v-for="item in phoneList" :key="item.value" class=" phone_list_item"> <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)" <img src="@/assets/sim/check.png" class="no_check" @click="chooseItem(item.value)"
      v-if="currentindex==item.value"> v-if="currentindex==item.value">
      <img src="@/assets/sim/nocheck.png" class="no_check" @click="chooseItem(item.value)" v-else> <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>
      </div> </div>
      <el-button type="primary" @click="toNext">下一步</el-button> <el-button type="primary" @click="toNext">下一步</el-button>
      ...@@ -36,9 +39,8 @@ ...@@ -36,9 +39,8 @@
      data() { data() {
      return { return {
      currentindex: null, currentindex: null,
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'], 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" },
      phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" }, { title: '100', price: "75", min: '200', value: 4, label: "card4.png" },]
      { value: 4, label: "card4.png" },]
      } }
      }, },
      created() { created() {
      ...@@ -63,7 +65,6 @@ ...@@ -63,7 +65,6 @@
      position: relative; position: relative;
      padding: 0 36px;
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -71,7 +72,7 @@ ...@@ -71,7 +72,7 @@
      .phone { .phone {
      width: 100%; width: 100%;
      min-height: 818px; height: 620px;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      opacity: 1; opacity: 1;
      ...@@ -82,49 +83,6 @@ ...@@ -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 { .phone_img {
      ...@@ -134,10 +92,12 @@ ...@@ -134,10 +92,12 @@
      } }
      .phone_first { .phone_first {
      height: 99px; /* height: 149px; */
      display: flex; display: flex;
      width: 100%; width: 100%;
      justify-content: space-between; position: relative;
      justify-content: center;
      margin-bottom: 42px;
      } }
      .phone_text { .phone_text {
      ...@@ -145,23 +105,15 @@ ...@@ -145,23 +105,15 @@
      font-size: 28px; font-size: 28px;
      font-weight: 500; font-weight: 500;
      color: #000000; 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 { .phone_list {
      display: flex; display: flex;
      flex-wrap: wrap; flex-wrap: wrap;
      min-height: 471px; /* min-height: 471px; */
      justify-content: space-between; justify-content: space-between;
      box-sizing: border-box; box-sizing: border-box;
      /* align-content: space-between; */ /* align-content: space-between; */
      ...@@ -171,8 +123,8 @@ ...@@ -171,8 +123,8 @@
      .phone_list_item { .phone_list_item {
      align-items: center; align-items: center;
      margin-bottom: 60px;
      margin: 0 100px 60px 0; /* margin: 0 100px 90px 0; */
      display: flex; display: flex;
      ...@@ -180,8 +132,58 @@ ...@@ -180,8 +132,58 @@
      .list_item_img { .list_item_img {
      width: 454px; width: 454px;
      height: 140px; height: 140.22px;
      margin-left: 30px; 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 { ::v-deep .el-button {
      ...@@ -191,8 +193,27 @@ ...@@ -191,8 +193,27 @@
      font-size: 14px; 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 { ::v-deep .el-button--primary {
      width: 132px;
      height: 50px; height: 50px;
      background: #437AE5;
      font-size: 18px;
      } }
      .no_check { .no_check {
      ......
      src/views/sim/index.vue
      View file @ 08752d4c
      <template> <template>
      <div class="standby"> <div class="standby">
      <div class="sim"> <div class="sim" @click="comfim">
      <span class="sim_text">自助办理Sim卡</span> <span class="sim_text">自助办理Sim卡</span>
      <div class="sim_center"></div> <div class="sim_center"></div>
      <img src="@/assets/sim/card.png" alt="" class="sim_img"> <img src="@/assets/sim/card.png" alt="" class="sim_img">
      ...@@ -25,6 +25,11 @@ ...@@ -25,6 +25,11 @@
      this.getTime() this.getTime()
      }, },
      methods: { methods: {
      comfim() {
      this.$router.push({
      name: "phone",
      });
      },
      Reserved(name, type) { Reserved(name, type) {
      this.$router.push({ name: name, params: { title: '访客信息', type: type } }); this.$router.push({ name: name, params: { title: '访客信息', type: type } });
      }, },
      ...@@ -52,35 +57,37 @@ ...@@ -52,35 +57,37 @@
      </script> </script>
      <style scoped> <style scoped>
      .standby { .standby {
      height: 100vh; height: 800px;
      width: 100%; width: 1280px;
      background: url("~@/assets/sim/background.png") no-repeat; background: url("~@/assets/sim/background.png") no-repeat;
      background-size: 100%; background-size: 1280px 800px;
      background-attachment: fixed;
      position: relative; position: relative;
      /* background-attachment: fixed; */
      } }
      .sim { .sim {
      width: 396px; width: 426px;
      height: 113px; height: 113px;
      background: #FFFFFF; background: #FFFFFF;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3), inset 0px 0px 14px 1px #958888; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3), inset 0px 0px 14px 1px #958888;
      border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
      opacity: 1;
      position: absolute; position: absolute;
      left: 147px; margin-left: 147px;
      top: 80%; margin-top: auto;
      bottom: 143px;
      display: flex; display: flex;
      padding: 0 32px; padding: 0 33px;
      box-sizing: border-box; box-sizing: border-box;
      align-items: center; align-items: center;
      cursor: pointer;
      } }
      .sim_center { .sim_center {
      width: 3px; width: 5px;
      height: 32px; height: 50px;
      background: #713DB0; background: #713DB0;
      margin-left: 20px; margin-left: 20px;
      margin-right: 32px; margin-right: 32px;
      ...@@ -94,6 +101,7 @@ ...@@ -94,6 +101,7 @@
      .sim_text { .sim_text {
      font-weight: bold;
      color: #713DB0; color: #713DB0;
      font-size: 34px; 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> <template>
      <div class="standby"> <div class="standby">
      <div class="phone_title">
      <div
      v-for="(item, index) in navList" <div class="phone">
      :key="index" <div class="phone_first"><span class="phone_text">选择号码</span>
      class="phone_title_item" </div>
      > <div class="phone_list">
      <div <div v-for="(item,index) in phoneList" :key="index"
      :class="[ :class=" [index==currentindex?'item_active list_item_active phone_list_item':'phone_list_item']"
      index == 0 ? 'item_active title_item_idx ' : 'title_item_idx ', @click="chooseItem(index)">{{item.label}}</div>
      ]" </div>
      > <el-button type="primary" @click="toNext">下一步</el-button>
      {{ 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>
      </div>
      <el-button type="primary" @click="toNext">下一步</el-button>
      </div> </div>
      </div>
      </template> </template>
      <script> <script>
      // @ is an alias to /src // @ is an alias to /src
      export default { export default {
      data() { data() {
      return { return {
      currentindex: null, currentindex: null,
      navList: ["选择号码", "选择套餐", "实名认证", "订单支付", "发放SIM卡"], navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      phoneList: [ 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" },
      { 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() {
      { value: 0, label: "172-0728-2374" }, },
      { value: 0, label: "172-0728-2374" }, methods: {
      { value: 0, label: "172-0728-2374" }, toNext(name, type) {
      { value: 0, label: "172-0728-2374" }, this.$router.push({ name: 'choose' });
      { value: 0, label: "172-0728-2374" }, },
      { value: 0, label: "172-0728-2374" }, chooseItem(idx) {
      { value: 0, label: "172-0728-2374" }, this.currentindex = idx
      { 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> </script>
      <style scoped> <style scoped>
      .standby { .standby {
      height: 100%; height: 620px;
      width: 100%; width: 100%;
      position: relative;
      position: relative;
      /* padding: 0 0px; */
      padding: 0 36px; box-sizing: border-box;
      box-sizing: border-box; }
      }
      .phone {
      width: 100%; .phone {
      min-height: 818px; width: 100%;
      background: #ffffff; /* min-height: 620px; */
      border-radius: 14px; background: #FFFFFF;
      opacity: 1; border-radius: 14px;
      opacity: 1;
      padding: 30px;
      box-sizing: border-box; padding: 30px;
      text-align: center; box-sizing: border-box;
      } text-align: center;
      .phone_title { }
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80px;
      }
      .phone_first {
      .phone_title_item { /* height: 149px; */
      display: flex; display: flex;
      margin-right: 26px; width: 100%;
      align-items: center; margin-bottom: 41px;
      } }
      .title_item_idx { .phone_text {
      width: 16px;
      height: 16px; font-size: 28px;
      background: #797f90; font-weight: 500;
      border-radius: 50%; color: #000000;
      color: #ffffff; margin-left: 45%;
      text-align: center; }
      font-size: 13px;
      }
      .phone_list {
      .item_active { width: 100%;
      background: #437ae5 !important; display: flex;
      } flex-wrap: wrap;
      /* min-height: 471px; */
      .item_active_text { align-content: flex-start;
      color: #437ae5 !important; /* justify-content: space-between; */
      } }
      .title_item { .phone_list_item {
      color: #797f90; width: 166px;
      font-size: 15px; height: 56px;
      margin: 0 21px 0 15px;
      } background: #F0F0F0;
      border-radius: 4px;
      .title_item_img { opacity: 1;
      width: 19.24px; margin: 0 27px 25px 0;
      height: 4.37px; text-align: center;
      } font-weight: 500;
      color: #666666;
      .phone_img {
      width: 44.81px; font-size: 18px;
      height: 64.16px; line-height: 56px;
      } cursor: pointer;
      }
      .phone_first {
      height: 99px; .list_item_active {
      display: flex; color: #FFFFFF;
      width: 100%; }
      }
      .item_active {
      .phone_text { background: #437AE5;
      font-size: 28px; }
      font-weight: 500;
      color: #000000; ::v-deep .el-button--primary {
      margin-left: 45%; width: 132px;
      } height: 50px;
      background: #437AE5;
      .content_time { font-size: 18px;
      width: 50px; border: none;
      height: 50px; margin-top: 10px;
      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> </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 @@ ...@@ -4,7 +4,6 @@
      <div class="auth_top"> <div class="auth_top">
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div> </div>
      <div class="content_time">118s</div>
      </div> </div>
      <div class="auth_title">实名认证成功</div> <div class="auth_title">实名认证成功</div>
      <div class="auth_body"> <div class="auth_body">
      ...@@ -66,7 +65,7 @@ ...@@ -66,7 +65,7 @@
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() { toNext() {
      this.$router.push({ name: "card", params: { title: '发放访客卡', } }); this.$router.push({ name: "send" });
      }, },
      } }
      ...@@ -76,9 +75,8 @@ ...@@ -76,9 +75,8 @@
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 36px; /* height: 650px; */
      height: calc(100vh - 70px);
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -87,7 +85,7 @@ ...@@ -87,7 +85,7 @@
      width: 100%; width: 100%;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 100%; height: 620px;
      padding: 30px; padding: 30px;
      box-sizing: border-box; box-sizing: border-box;
      ...@@ -96,9 +94,10 @@ ...@@ -96,9 +94,10 @@
      .auth_top { .auth_top {
      width: 100%; width: 100%;
      display: flex; display: flex;
      height: 50px; /* height: 75px; */
      align-items: center; position: relative;
      justify-content: space-between !important; justify-content: center;
      margin-bottom: 55px;
      } }
      .auth_title { .auth_title {
      ...@@ -112,11 +111,12 @@ ...@@ -112,11 +111,12 @@
      .auth_body { .auth_body {
      width: 100%; width: 100%;
      height: 90%; /* height: 500px; */
      text-align: center; text-align: center;
      display: flex; display: flex;
      align-items: center; align-items: center;
      justify-content: center; justify-content: center;
      margin-top: 80px;
      } }
      .auth_center { .auth_center {
      ...@@ -135,33 +135,13 @@ ...@@ -135,33 +135,13 @@
      line-height: 40px; line-height: 40px;
      text-align: left; text-align: left;
      font-size: 20px; font-size: 20px;
      margin-top: -20px; /* margin-top: -20px; */
      } margin-bottom: 84px;
      .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 { ::v-deep .el-button {
      width: 94px; width: 94px;
      ...@@ -170,7 +150,22 @@ ...@@ -170,7 +150,22 @@
      font-size: 14px; 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 { ::v-deep .el-button--primary {
      width: 132px;
      height: 50px; height: 50px;
      background: #437AE5;
      font-size: 18px;
      border: none;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/visitor/authentify.vue
      View file @ 08752d4c
      ...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
      </div> </div>
      <div class="auth_title">您可通过刷<span style="color: #5A8FF6;"> <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
      身份证、粤居码</span>任意一种进行实名认证</div> 身份证、粤居码</span>任意一种进行实名认证</div>
      <div class="content_time">118s</div>
      </div> </div>
      <div class="auth_body"> <div class="auth_body">
      <div class="auth_center"> <div class="auth_center">
      ...@@ -32,10 +31,11 @@ ...@@ -32,10 +31,11 @@
      <el-button type="primary">粤居码</el-button> <el-button type="primary">粤居码</el-button>
      </div> </div>
      <button @click="toNext">下一步</button>
      </div> </div>
      </div> </div>
      </div> </div>
      </div> </div>
      ...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
      export default { export default {
      data() { data() {
      return { return {
      } }
      }, },
      ...@@ -56,106 +55,131 @@ ...@@ -56,106 +55,131 @@
      toBack() { toBack() {
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() {
      this.$router.push({ name: "success" });
      },
      } }
      } }
      </script> </script>
      <style scoped> <style scoped>
      .reserved { .reserved {
      width: 100%;
      padding: 36px; width: 100%;
      height: calc(100vh - 70px); /* height: auto; */
      box-sizing: border-box; box-sizing: border-box;
      }
      }
      .auth_content {
      width: 100%; .auth_content {
      background: #ffffff; width: 100%;
      border-radius: 14px; background: #FFFFFF;
      height: 100%; border-radius: 14px;
      padding: 30px; height: 620px;
      box-sizing: border-box; padding: 30px;
      } box-sizing: border-box;
      .auth_top { }
      width: 100%;
      display: flex; .auth_top {
      height: 50px; width: 100%;
      align-items: center; display: flex;
      justify-content: space-between !important; /* height: 50px; */
      } /* align-items: center; */
      position: relative;
      .auth_title { justify-content: center;
      color: #666666; }
      font-size: 18px;
      } .auth_title_a {
      font-weight: 500;
      .auth_body { color: #000000;
      width: 100%; font-size: 28px;
      height: 90%; margin-bottom: 34px;
      display: flex; }
      flex-direction: column;
      align-items: center; .auth_title {
      justify-content: center;
      } color: #666666;
      .auth_center {
      display: flex; font-size: 18px;
      } text-align: center;
      }
      .auth_img {
      width: 386.54px; .auth_body {
      height: 287.18px; width: 100%;
      } display: flex;
      flex-direction: column;
      .auth_center_right { align-items: center;
      display: flex; margin-top: 66px;
      flex-direction: column;
      margin-top: 38px; }
      }
      .auth_center {
      .auth_img_left { display: flex;
      width: 64px; }
      height: 12px;
      margin-right: 9px; .auth_img {
      margin-top: 7px; width: 386.54px;
      } height: 287.18px;
      }
      .auth_right {
      display: flex; .auth_center_right {
      margin-bottom: 62px; display: flex;
      } flex-direction: column;
      margin-top: 40px;
      .auth_span { }
      font-size: 20px;
      } .auth_img_left {
      width: 64px;
      .auth_span_a { height: 12px;
      color: #666666; margin-right: 9px;
      line-height: 18px; margin-top: 7px;
      font-size: 16px; }
      }
      .auth_right {
      .content_time { display: flex;
      width: 50px; margin-bottom: 62px;
      height: 50px; }
      background: #ffffff;
      opacity: 1; .auth_span {
      border: 3px solid #5a8ff6;
      border-radius: 50%; font-size: 20px;
      text-align: center;
      line-height: 50px; }
      }
      .auth_span_a {
      ::v-deep .el-button {
      width: 94px; color: #666666;
      height: 34px; line-height: 18px;
      padding: 0; font-size: 16px;
      font-size: 14px; }
      }
      ::v-deep .el-button--primary { ::v-deep .el-button {
      height: 50px; width: 94px;
      } height: 34px;
      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;
      }
      </style> </style>
      \ No newline at end of file
      src/views/visitor/card.vue
      View file @ 08752d4c
      ...@@ -5,10 +5,9 @@ ...@@ -5,10 +5,9 @@
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div> </div>
      <div class="content_time">118s</div>
      </div> </div>
      <div class="card_body"> <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> <div class="card_body_text">访客卡发放成功，可在门禁处刷卡通行<br>感谢您的使用</div>
      <el-button type="primary" @click="toNext">回到首页</el-button> <el-button type="primary" @click="toNext">回到首页</el-button>
      ...@@ -58,7 +57,7 @@ ...@@ -58,7 +57,7 @@
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() { toNext() {
      this.$router.push({ name: "cardentify", params: { title: '实名认证', } }); this.$router.push({ name: "visitor" });
      }, },
      } }
      ...@@ -68,9 +67,6 @@ ...@@ -68,9 +67,6 @@
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 36px;
      height: calc(100vh - 70px);
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -79,7 +75,7 @@ ...@@ -79,7 +75,7 @@
      width: 100%; width: 100%;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 100%; height: 620px;
      padding: 30px; padding: 30px;
      box-sizing: border-box; box-sizing: border-box;
      ...@@ -88,20 +84,15 @@ ...@@ -88,20 +84,15 @@
      .card_top { .card_top {
      width: 100%; width: 100%;
      display: flex; display: flex;
      height: 50px;
      align-items: center; align-items: center;
      justify-content: space-between !important; justify-content: space-between !important;
      } }
      .card_title {
      color: #666666;
      font-size: 18px;
      }
      .card_body { .card_body {
      width: 100%; width: 100%;
      height: 90%; height: 100%;
      display: flex; display: flex;
      flex-direction: column; flex-direction: column;
      align-items: center; align-items: center;
      ...@@ -122,33 +113,30 @@ ...@@ -122,33 +113,30 @@
      display: flex; 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 { ::v-deep .el-button {
      width: 94px; width: 94px;
      height: 34px; height: 34px;
      padding: 0; padding: 0;
      font-size: 14px; font-size: 14px;
      border-radius: 4px;
      border: 1px solid #707070;
      } }
      ::v-deep .el-button--primary { ::v-deep .el-button--primary {
      height: 50px; width: 208px;
      height: 70px;
      border: none;
      background: #437AE5;
      font-size: 24px;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/visitor/disreserve.vue
      View file @ 08752d4c
      ...@@ -2,11 +2,9 @@ ...@@ -2,11 +2,9 @@
      <div class="reserved"> <div class="reserved">
      <div class="content"> <div class="content">
      <div class="card_left"> <div class="card_left">
      <div style="margin-top: 30px;height: 34px;"><el-button v-show="this.type==0" <div class="return_btn"><el-button v-show="this.type==0" @click="toBack">返回上一步</el-button></div>
      @click="toBack">返回上一步</el-button></div>
      <div class="card_left_c"><img src="@/assets/visitor/camera.png" alt="" <div class="card_left_c"><img src="@/assets/visitor/camera.png" alt="" class="card_left_img">
      style="width: 58.15px;height: 45.4px;margin:35%;">
      </div> </div>
      <div class="card_item"><span class="card_item_span">姓名：</span> <div class="card_item"><span class="card_item_span">姓名：</span>
      <el-input v-model="vform.name"></el-input> <el-input v-model="vform.name"></el-input>
      ...@@ -27,14 +25,14 @@ ...@@ -27,14 +25,14 @@
      </div> </div>
      <div class="card_center"></div> <div class="card_center"></div>
      <div class="card_right"> <div class="card_right">
      <div class="content_time">118s</div>
      <div class="card_item"><span class="card_item_span">公司名称：</span> <div class="card_item"><span class="card_item_span">公司名称：</span>
      <el-input v-model="vform.name" placeholder="必填"></el-input> <el-input v-model="vform.name" placeholder="必填"></el-input>
      </div> </div>
      <div class="card_item"><span class="card_item_span">到访人数：</span> <div class="card_item"><span class="card_item_span">到访人数：</span>
      <el-input v-model="vform.name" placeholder="必填"></el-input> <el-input v-model="vform.name" placeholder="必填"></el-input>
      </div> </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> </div>
      </div> </div>
      ...@@ -82,12 +80,18 @@ ...@@ -82,12 +80,18 @@
      } }
      </script> </script>
      <style scoped> <style scoped>
      .return_btn {
      /* margin-top: 45px; */
      /* position: absolute; */
      height: 34px;
      }
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 36px; padding: 30px;
      height: 670px;
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -96,51 +100,46 @@ ...@@ -96,51 +100,46 @@
      width: 100%; width: 100%;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 880px;
      padding: 0 30px; /* padding: 0 45px; */
      box-sizing: border-box; box-sizing: border-box;
      display: flex; display: flex;
      } }
      .card_left_img {
      width: 58.15px;
      height: 45.4px;
      margin: 35%;
      }
      .card_left_c { .card_left_c {
      width: 193px; width: 193px;
      height: 193px; height: 193px;
      background: #F4F4F4; background: #F4F4F4;
      border-radius: 10px 10px 10px 10px; border-radius: 15px;
      opacity: 1; opacity: 1;
      margin: 14px 0 54px 156px; margin: 0 207px 53px 175px;
      text-align: center; text-align: center;
      } }
      .card_item { .card_item {
      display: flex; display: flex;
      height: 46px; height: 46px;
      margin-bottom: 30px; margin-bottom: 30px;
      margin-left: 20px; margin-left: 30px;
      } }
      .card_item_span { .card_item_span {
      line-height: 46px; line-height: 46px;
      width: 120px;
      color: #333333; color: #333333;
      font-size: 20px; 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 @@ ...@@ -150,11 +149,12 @@
      height: 46px; height: 46px;
      border: 1px solid #707070; border: 1px solid #707070;
      color: #333333; color: #333333;
      font-size: 20px;
      } }
      ::v-deep .el-input { ::v-deep .el-input {
      width: 360px; width: 360px;
      height: 78px; height: 46px;
      } }
      ...@@ -164,19 +164,20 @@ ...@@ -164,19 +164,20 @@
      } }
      .card_center { .card_center {
      width: 1px; width: 2px;
      height: 548px; height: 548px;
      background: #E0E0E0; background: #E0E0E0;
      margin: 50px 43px 50px 85px; margin-top: 20px;
      /* margin: 50px 43px 50px 85px; */
      } }
      .card_right { .card_right {
      width: 100%; width: 100%;
      } margin-top: 70px;
      text-align: center;
      ::v-deep .card_right .el-button { position: relative;
      margin: auto 0 50px 0;
      } }
      ::v-deep .el-button { ::v-deep .el-button {
      ...@@ -185,4 +186,32 @@ ...@@ -185,4 +186,32 @@
      padding: 0; padding: 0;
      font-size: 14px; 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> </style>
      \ No newline at end of file
      src/views/visitor/reserved.vue
      View file @ 08752d4c
      <template> <template>
      <div class="reserved"> <div class="reserved">
      <div class="content"> <div class="content">
      <div class="content_time">118s</div>
      <div class="content_card"> <div class="content_card">
      <div class="card_left"> <div class="card_left">
      ...@@ -46,7 +45,7 @@ ...@@ -46,7 +45,7 @@
      clickBtn(val) { clickBtn(val) {
      val == 11 ? this.phone = '' : '' val == 11 ? this.phone = '' : ''
      if (this.phone.length > 10) return if (this.phone.length > 10 && val != 10) return
      val <= 9 ? val <= 9 ?
      this.phone = this.phone + val.toString() : ''; this.phone = this.phone + val.toString() : '';
      ...@@ -64,10 +63,10 @@ ...@@ -64,10 +63,10 @@
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 36px; /* padding: 36px; */
      height: 950px;
      /* height: 950px; */
      height: 670px;
      box-sizing: border-box; box-sizing: border-box;
      } }
      ...@@ -75,28 +74,19 @@ ...@@ -75,28 +74,19 @@
      .content { .content {
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 880px;
      padding-top: 24px; /* padding-top: 24px; */
      box-sizing: border-box; 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 { .content_card {
      display: flex; display: flex;
      padding: 76px 100px 0 70px; padding: 150px 100px 0 70px;
      box-sizing: border-box;
      } }
      .card_tip { .card_tip {
      ...@@ -117,22 +107,24 @@ ...@@ -117,22 +107,24 @@
      ::v-deep .content_card .el-input { ::v-deep .content_card .el-input {
      width: 482px; width: 482px;
      height: 78px; height: 78px;
      background: #FFFFFF; background: #ffffff;
      border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
      opacity: 1; opacity: 1;
      border: 1px solid #CBC7C7; border: 1px solid #cbc7c7;
      margin: 40px 0 120px 0; margin: 40px 0 120px 0;
      } }
      ::v-deep .content_card .el-input-group__prepend { ::v-deep .content_card .el-input-group__prepend {
      background-color: white; background-color: white;
      border: 0; border: 0;
      line-height: 70px; line-height: 78px;
      border-radius: 50%; border-radius: 50%;
      } }
      ::v-deep .content_card .el-input.is-disabled .el-input__inner { ::v-deep .content_card .el-input.is-disabled .el-input__inner {
      border-color: white; border-color: white;
      height: 100%;
      font-size: 24px;
      background-color: white; background-color: white;
      border-radius: 10%; border-radius: 10%;
      cursor: default; cursor: default;
      ...@@ -140,22 +132,26 @@ ...@@ -140,22 +132,26 @@
      } }
      .card_pre { .card_pre {
      color: #000000; color: #000000;
      font-size: 24px; font-size: 24px;
      } }
      .card_center { .card_center {
      width: 2px; width: 2px;
      height: 40px; height: 78px;
      background: #D6D6D6; background: #d6d6d6;
      margin-left: 30px; margin-left: 30px;
      } }
      .card_btn {
      display: flex;
      align-items: center;
      }
      ::v-deep .card_btn .el-button { ::v-deep .card_btn .el-button {
      width: 208px; width: 208px;
      height: 70px; height: 70px;
      border-radius: 4px 4px 4px 4px; border-radius: 4px;
      margin-right: 40px; margin-right: 40px;
      font-size: 24px; font-size: 24px;
      ...@@ -173,22 +169,25 @@ ...@@ -173,22 +169,25 @@
      height: 391px; height: 391px;
      display: flex; display: flex;
      flex-wrap: wrap; flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start; align-content: flex-start;
      padding: 30px; padding: 30px 0;
      background: white;
      margin-right: 0; margin-right: 0;
      margin-left: auto; margin-left: auto;
      box-sizing: border-box;
      } }
      ::v-deep .card_right .el-button { ::v-deep .card_right .el-button {
      width: 113px; width: 113px;
      height: 64px; height: 64px;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 6px 6px 6px 6px; border-radius: 6px;
      opacity: 1; opacity: 1;
      border: 1px solid #CBC7C7; border: 1px solid #CBC7C7;
      margin: 0 25px 25px 0; margin: 0 25px 25px 0;
      font-weight: bold; font-weight: bold;
      color: #000000; color: #000000;
      font-size: 36px; font-size: 24px;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/visitor/send.vue
      View file @ 08752d4c
      ...@@ -5,17 +5,17 @@ ...@@ -5,17 +5,17 @@
      <div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
      </div> </div>
      <div class="content_time">118s</div>
      </div> </div>
      <div class="card_body"> <div class="card_body">
      <img src="@/assets/visitor/card.png" class="card_img_left"> <img src="@/assets/visitor/card.png" class="card_img_left">
      <div class="card_body_text">访客卡发放中，请耐心等待</div> <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> </div>
      <button @click="toNext">成功</button>
      <!-- <el-button type="primary" @click="toNext">下一步</el-button> --> <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
      </div> </div>
      </div> </div>
      ...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
      this.$router.go(-1); this.$router.go(-1);
      }, },
      toNext() { toNext() {
      this.$router.push({ name: "cardentify", params: { title: '实名认证', } }); this.$router.push({ name: "card" });
      }, },
      } }
      ...@@ -65,20 +65,17 @@ ...@@ -65,20 +65,17 @@
      </script> </script>
      <style scoped> <style scoped>
      .reserved { .reserved {
      width: 100%; width: 100%;
      padding: 36px;
      height: calc(100vh - 70px);
      box-sizing: border-box; box-sizing: border-box;
      height: 100%;
      } }
      .card_content { .card_content {
      width: 100%; width: 100%;
      height: 620px;
      background: #FFFFFF; background: #FFFFFF;
      border-radius: 14px; border-radius: 14px;
      height: 100%;
      padding: 30px; padding: 30px;
      box-sizing: border-box; box-sizing: border-box;
      ...@@ -87,20 +84,16 @@ ...@@ -87,20 +84,16 @@
      .card_top { .card_top {
      width: 100%; width: 100%;
      display: flex; display: flex;
      height: 50px; /* height: 50px; */
      align-items: center; align-items: center;
      justify-content: space-between !important; justify-content: space-between !important;
      } }
      .card_title {
      color: #666666;
      font-size: 18px;
      }
      .card_body { .card_body {
      width: 100%; width: 100%;
      height: 90%; height: 100%;
      display: flex; display: flex;
      flex-direction: column; flex-direction: column;
      align-items: center; align-items: center;
      ...@@ -109,6 +102,7 @@ ...@@ -109,6 +102,7 @@
      .card_body_text { .card_body_text {
      margin: 55px 0 30px 0; margin: 55px 0 30px 0;
      font-size: 26px;
      } }
      .card_center { .card_center {
      ...@@ -116,11 +110,11 @@ ...@@ -116,11 +110,11 @@
      } }
      .card_img { .card_img {
      width: 386.54px; width: 123.36px;
      height: 287.18px; height: 84.72px;
      } }
      ::v-deep .el-progress-bar { /* ::v-deep .el-progress-bar {
      width: 520px; width: 520px;
      height: 8px; height: 8px;
      } }
      ...@@ -133,29 +127,37 @@ ...@@ -133,29 +127,37 @@
      ::v-deep .el-progress__text { ::v-deep .el-progress__text {
      margin-top: 10px; margin-top: 10px;
      margin-left: 45%; margin-left: 30%;
      } } */
      .content_time { .progress {
      width: 50px; width: 551px;
      height: 50px; margin-bottom: 26px;
      background: #FFFFFF; }
      opacity: 1;
      border: 3px solid #5A8FF6;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      .progress_schedule {
      font-size: 22px;
      color: #333333;
      } }
      ::v-deep .el-button { ::v-deep .el-button {
      width: 94px; width: 94px;
      height: 34px; height: 34px;
      padding: 0;
      font-size: 14px; font-size: 14px;
      border-radius: 4px;
      border: 1px solid #707070;
      padding: 0;
      } }
      ::v-deep .el-button--primary { ::v-deep .el-button--primary {
      height: 50px; width: 208px;
      height: 70px;
      font-size: 24px;
      } }
      </style> </style>
      \ No newline at end of file
      src/views/visitor/standby.vue
      View file @ 08752d4c
      ...@@ -6,15 +6,13 @@ ...@@ -6,15 +6,13 @@
      <span class="header_first"><span>{{weekDay }}</span> <span class="header_first"><span>{{weekDay }}</span>
      <span class="header_mon">{{currentDate}}</span> <span class="header_mon">{{currentDate}}</span>
      </span> </span>
      <span style="line-height: 18px;">|</span> <div class="header_center"></div>
      <span class="header_time">{{currentTIme}}</span> <span class="header_time">{{currentTIme}}</span>
      </div> </div>
      </div> </div>
      <div class="content"> <div class="content">
      <div style="color: #333333; <div class="content_title">欢迎使用</div>
      font-size: 44px;">欢迎使用</div> <div class="content_title2">访客自助登记系统</div>
      <div style="color: #416CCC;
      font-size: 50px;">访客自助登记系统</div>
      <div class="content_btns"> <div class="content_btns">
      <div class="content_btn" @click="Reserved('reserved',0)"> <div class="content_btn" @click="Reserved('reserved',0)">
      <div class="content_text">已预约</div> <div class="content_text">已预约</div>
      ...@@ -73,10 +71,11 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -73,10 +71,11 @@ font-size: 50px;">访客自助登记系统</div>
      </script> </script>
      <style scoped> <style scoped>
      .standby { .standby {
      height: 100%; height: 800px;
      width: 100%; width: 100%;
      background: url("~@/assets/visitor/background.png") no-repeat; background: url("~@/assets/visitor/background.png") no-repeat;
      background-size: 100%; background-size: 1280px 800px;
      box-sizing: border-box;
      } }
      .header { .header {
      ...@@ -91,44 +90,61 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -91,44 +90,61 @@ font-size: 50px;">访客自助登记系统</div>
      .header_title { .header_title {
      color: #333333; color: #333333;
      font-size: 16px; font-size:
      margin-top: 20px; 16px;
      margin-top: 29px;
      } }
      .header_right { .header_right {
      display: flex; display: flex;
      color: #FFFFFF; color: #FFFFFF;
      align-items: center; margin-top: 24px;
      height: 70px;
      } }
      .header_first { .header_first {
      display: flex; display: flex;
      flex-direction: column; flex-direction: column;
      text-align: center; text-align: center;
      font-size: 13px; font-size: 13px;
      margin-right: 10px; margin-right: 18px;
      } }
      .header_mon { .header_mon {
      margin-top: 2px; margin-top: 5px;
      }
      .header_center {
      height: 18px;
      width: 1px;
      background: white;
      margin-top: 12px;
      } }
      .header_time { .header_time {
      font-size: 30px; font-size: 30px;
      font-weight: bold; font-weight: bold;
      margin-left: 6px; margin-left: 16px;
      } }
      .content { .content {
      /* height: 100%; */
      font-weight: bold; font-weight: bold;
      padding: 140px 60px 0; padding: 57px 0 0 60px;
      box-sizing: border-box; box-sizing: border-box;
      } }
      .content_title {
      color: #333333;
      font-size: 30px;
      }
      .content_title2 {
      color: #416CCC;
      font-size: 75px;
      }
      .content_btns { .content_btns {
      display: flex; display: flex;
      margin-top: 85px; margin-top: 85px;
      ...@@ -140,27 +156,27 @@ font-size: 50px;">访客自助登记系统</div> ...@@ -140,27 +156,27 @@ font-size: 50px;">访客自助登记系统</div>
      background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%); background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
      border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
      opacity: 1; opacity: 1;
      padding: 22px; padding: 33px;
      cursor: pointer; cursor: pointer;
      } }
      .content_e { .content_e {
      background: linear-gradient(136deg, #BDC9DF 0%, #6F84B0 100%) !important; background: linear-gradient(136deg, #BDC9DF 0%, #6F84B0 100%) !important;
      margin-left: 50px; margin-left: 75px;
      } }
      .auth_img_left { .auth_img_left {
      width: 114px; width: 114px;
      height: 120px; height: 120px;
      float: right; float: right;
      margin-top: 81px;
      } }
      .content_text { .content_text {
      font-size: 30px; font-size: 30px;
      font-weight: bold; font-weight: bold;
      color: #FFFFFF; color: #FFFFFF;
      margin-bottom: 41px;
      } }
      </style> </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