3

4a28a1f6 · limeimei · 7cf2f74c · 4a28a1f6 · 4a28a1f6 · 4a28a1f6
Commit 4a28a1f6 authored Nov 14, 2023 by limeimei
20 changed files
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/assets/sim/card5.png
+++ b/src/assets/sim/card5.png
--- a/src/assets/visitor/home.png
+++ b/src/assets/visitor/home.png
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,9 +67,43 @@ 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,
+      },
+      {
+        path: "/send",
+        name: "send",
+        component: Send,
+      },
    ],
  },

@@ -176,41 +210,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",

--- a/src/views/common.vue
+++ b/src/views/common.vue
 <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_title">
@@ -10,7 +10,14 @@

        </div>
        <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>

@@ -22,59 +29,97 @@
    export default {
        data() {
            return {
-                title: ""
+                title: "",
+                percentage: 100,
+                currentIndex: "", //当前移动到的路径
+                time: 120, //时间设定为360
            }
-        }, watch: {
+        },
+        watch: {
            $route: {
                // $route可以用引号，也可以不用引号  监听的对象
                handler(to) {
-                    this.title = to.params.title
+                    console.log(to.meta.title)
+                    this.title = to.meta.title
                },
            },

        },
        created() {
+            this.decrease();

        },

        methods: {
+            // 自定义进度条
+            format(percentage) {
+                const remainingTime = Math.ceil((percentage / 100) * 120);
+                return `${remainingTime}s`;
+            },
+            // 倒计时
+            decrease() {
+                var that = this;
+                that.timer = setInterval(() => {
+                    that.time--;
+
+                    // 计算进度百分比
+                    that.percentage = (that.time / 120) * 100;
+
+                    // 检查是否倒计时结束
+                    if (that.time <= 0) {
+                        clearInterval(that.timer); // 清除定时器
+                        // that.gohome();
+                    }
+                }, 1000); // 每1000毫秒（1秒）更新一次
+            },

+            // 返回主页
+            gohome() {
+                this.$router.replace({
+                    name: "visitor",
+                });
+            },
        }
    }
 </script>
 <style scoped>
    .wrapper {
        background: #F0F2F8;
-        /* height: 1018px; */
+        height: auto;

        box-sizing: border-box;
    }

    .home {
-        width: 18.52px;
+        width: 18px;
        height: 20px;
-        margin-top: 25px;
+        margin-right: 7px;
+        /* margin-top: 25px; */
    }

+
+
    .common {
        width: 100%;
-        height: 70px;
+        height: 105px;
        background: #507DD9;
-        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
-        border-radius: 0px 0px 15px 15px;
+        box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
+        border-radius: 0px 0px 23px 23px;
        opacity: 1;
-        line-height: 70px;
+        line-height: 105px;
+        padding-left: 46px;
        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:
+            24px;

    }

@@ -91,4 +136,27 @@

        flex: 1;
    }
+
+    .hotel_content {
+        width: 100%;
+        padding: 54px;
+        box-sizing: border-box;
+
+    }
+
+    .hotel_content_frame {
+        width: 100%;
+        /* height: 100%; */
+        position: relative;
+        border-radius: 21px;
+        background: white;
+        z-index: 999;
+    }
+
+    .hotel_content_frame_countdown {
+        position: absolute;
+        top: 54px;
+        right: 45px;
+        z-index: 999;
+    }
 </style>
\ No newline at end of file
--- a/src/views/common2.vue
+++ b/src/views/common2.vue
@@ -13,8 +13,10 @@
                <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}}</span>
-                    <img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
+                    <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">
@@ -37,7 +39,33 @@
        data() {
            return {
                title: "",
-                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+                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
@@ -77,7 +105,7 @@
                    // 检查是否倒计时结束
                    if (that.time <= 0) {
                        clearInterval(that.timer); // 清除定时器
-                        that.gohome();
+                        // that.gohome();
                    }
                }, 1000); // 每1000毫秒（1秒）更新一次
            },
@@ -94,36 +122,38 @@
 <style scoped>
    .wrapper {
        background: #F0F2F8;
-        height: 1018px;
+        /* height: 1018px; */

        box-sizing: border-box;
+        padding-bottom: 50px;
    }

    .home {
-        width: 18.52px;
+        width: 18px;
        height: 20px;
-        margin-top: 25px;
+        margin-right: 7px;
+        /* margin-top: 25px; */
    }

    .common {
        width: 100%;
-        height: 70px;
+        height: 105px;
        background: #507DD9;
-        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
-        border-radius: 0px 0px 15px 15px;
+        box-shadow: 0px 5px 9px 2px rgba(0, 0, 0, 0.05);
+        border-radius: 0px 0px 23px 23px;
        opacity: 1;
-        line-height: 70px;
+        line-height: 105px;
        display: flex;
        color: white;
-        padding-left: 31px;
+        padding-left: 46px;
        box-sizing: border-box;
+        display: flex;
+        align-items: center;
    }

    .common_btn {
-        margin-left: 31px;
-        margin-right: auto;

-        font-size: 16px;
+        font-size: 24px;
        cursor: pointer;
    }

@@ -132,7 +162,7 @@
        margin-right: 50%;
        margin-left: auto;

-        font-size: 22px;
+        font-size: 33px;
    }

    .content_view {
@@ -144,24 +174,24 @@
        display: flex;
        justify-content: center;
        align-items: center;
-        height: 80px;
+        height: 120px;
    }

    .phone_title_item {
        display: flex;
-        margin-right: 26px;
+        margin-right: 32px;
        align-items: center;
    }

    .title_item_idx {
-        width: 16px;
-        height: 16px;
+        width: 24px;
+        height: 24px;
        background: #797F90;
        border-radius: 50%;
        color: #FFFFFF;
        text-align: center;

-        font-size: 13px;
+        font-size: 20px;
    }

    .item_active {
@@ -175,13 +205,13 @@
    .title_item {

        color: #797F90;
-        font-size: 15px;
-        margin: 0 21px 0 15px;
+        font-size: 23px;
+        margin: 0 32px 0 23px;
    }

    .title_item_img {
-        width: 19.24px;
-        height: 4.37px;
+        width: 29px;
+        height: 7px;
    }

    .hotel_content {

--- a/src/views/hotels/order/check.vue
+++ b/src/views/hotels/order/check.vue
@@ -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,184 +25,186 @@
 </template>

 <script>
-// @ is an alias to /src
-
-export default {
-  data() {
-    return {
-      phone: "",
-      numList: [
-        { label: "1", value: 1 },
-        { label: "2", value: 2 },
-        { label: "3", value: 3 },
-        { label: "4", value: 4 },
-        { label: "5", value: 5 },
-        { label: "6", value: 6 },
-        { label: "7", value: 7 },
-        { label: "8", value: 8 },
-        { label: "9", value: 9 },
-        { label: "退格", value: 10 },
-        { label: "0", value: 0 },
-        { 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))
-        : "";
+  // @ is an alias to /src
+
+  export default {
+    data() {
+      return {
+        phone: "",
+        numList: [
+          { label: "1", value: 1 },
+          { label: "2", value: 2 },
+          { label: "3", value: 3 },
+          { label: "4", value: 4 },
+          { label: "5", value: 5 },
+          { label: "6", value: 6 },
+          { label: "7", value: 7 },
+          { label: "8", value: 8 },
+          { label: "9", value: 9 },
+          { label: "退格", value: 10 },
+          { label: "0", value: 0 },
+          { label: "删除", value: 11 },
+        ],
+      };
    },
-    comfirm() {
-      this.$router.push({
-        name: "hotelOrderComfim",
-      });
+    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() {
+        this.$router.push({
+          name: "hotelOrderComfim",
+        });
+      },
    },
-  },
-};
+  };
 </script>
 <style scoped>
-.reserved {
-  width: 100%;
-  padding-top: 150px;
-  background: #f6f7fb;
-  height: 906px;
-  box-sizing: border-box;
-}
-
-.content {
-  border-radius: 14px;
-  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: 0 105px;
-  box-sizing: border-box;
-}
-
-.card_tip {
-  font-size: 42px;
-  color: #000000;
-}
-
-::v-deep .content_card .el-input__inner {
-  width: 377px;
-  height: 78px;
-  background: none;
-  opacity: 1;
-  border: none;
-  padding-left: 0;
-  font-size: 24px;
-}
-
-::v-deep .content_card .el-input {
-  width: 723px;
-  height: 117px;
-  background: #ffffff;
-  border-radius: 10px 10px 10px 10px;
-  opacity: 1;
-  border: 1px solid #cbc7c7;
-  margin: 40px 0 120px 0;
-}
-
-::v-deep .content_card .el-input-group__prepend {
-  background-color: white;
-  border: 0;
-  line-height: 117px;
-  border-radius: 50%;
-}
-
-::v-deep .content_card .el-input.is-disabled .el-input__inner {
-  border-color: white;
-  height: 100%;
-  font-size: 36px;
-  background-color: white;
-  border-radius: 10%;
-  cursor: default;
-  color: #000000;
-}
-
-.card_pre {
-  color: #000000;
-  font-size: 36px;
-}
-
-.card_center {
-  width: 2px;
-  height: 117px;
-  background: #d6d6d6;
-  margin-left: 30px;
-}
-
-.card_btn {
-  display: flex;
-  align-items: center;
-}
-
-.card_right {
-  width: 674px;
-  height: 587px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: flex-start;
-  padding: 45px;
-  background: white;
-  margin-right: 0;
-  margin-left: auto;
-  box-sizing: border-box;
-}
-
-::v-deep .card_right .el-button {
-  width: 170px;
-  height: 96px;
-  background: #ffffff;
-  border-radius: 6px 6px 6px 6px;
-  margin-bottom: 45px;
-  border: 1px solid #cbc7c7;
-  font-weight: bold;
-  color: #000000;
-  font-size: 54px;
-}
-.comfin {
-  background: #eb9c4e;
-  width: 312px;
-  height: 105px;
-  text-align: center;
-  line-height: 105px;
-  color: white;
-  font-size: 36px;
-  background: #eb9c4e;
-  cursor: pointer;
-  border-radius: 6px 6px 6px 6px;
-}
-.reset {
-  width: 312px;
-  height: 105px;
-  text-align: center;
-  line-height: 105px;
-  color: #717171;
-  font-size: 36px;
-  background: #dcdcdc;
-  border-radius: 6px 6px 6px 6px;
-  margin-right: 60px;
-  cursor: pointer;
-}
+  .reserved {
+    width: 100%;
+    padding-top: 150px;
+    background: #f6f7fb;
+    height: 906px;
+    box-sizing: border-box;
+  }
+
+  .content {
+    border-radius: 14px;
+    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: 0 105px;
+    box-sizing: border-box;
+  }
+
+  .card_tip {
+    font-size: 42px;
+    color: #000000;
+  }
+
+  ::v-deep .content_card .el-input__inner {
+    width: 377px;
+    height: 78px;
+    background: none;
+    opacity: 1;
+    border: none;
+    padding-left: 0;
+    font-size: 24px;
+  }
+
+  ::v-deep .content_card .el-input {
+    width: 723px;
+    height: 117px;
+    background: #ffffff;
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    border: 1px solid #cbc7c7;
+    margin: 60px 0 180px 0;
+  }
+
+  ::v-deep .content_card .el-input-group__prepend {
+    background-color: white;
+    border: 0;
+    line-height: 117px;
+    border-radius: 50%;
+  }
+
+  ::v-deep .content_card .el-input.is-disabled .el-input__inner {
+    border-color: white;
+    height: 100%;
+    font-size: 36px;
+    background-color: white;
+    border-radius: 10%;
+    cursor: default;
+    color: #000000;
+  }
+
+  .card_pre {
+    color: #000000;
+    font-size: 36px;
+  }
+
+  .card_center {
+    width: 2px;
+    height: 117px;
+    background: #d6d6d6;
+    margin-left: 30px;
+  }
+
+  .card_btn {
+    display: flex;
+    align-items: center;
+  }
+
+  .card_right {
+    width: 674px;
+    height: 587px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: flex-start;
+    padding: 45px;
+    background: white;
+    margin-right: 0;
+    margin-left: auto;
+    box-sizing: border-box;
+  }
+
+  ::v-deep .card_right .el-button {
+    width: 170px;
+    height: 96px;
+    background: #ffffff;
+    border-radius: 6px 6px 6px 6px;
+    margin-bottom: 45px;
+    border: 1px solid #cbc7c7;
+    font-weight: bold;
+    color: #000000;
+    font-size: 54px;
+  }
+
+  .comfin {
+    background: #eb9c4e;
+    width: 312px;
+    height: 105px;
+    text-align: center;
+    line-height: 105px;
+    color: white;
+    font-size: 36px;
+    background: #eb9c4e;
+    cursor: pointer;
+    border-radius: 6px 6px 6px 6px;
+  }
+
+  .reset {
+    width: 312px;
+    height: 105px;
+    text-align: center;
+    line-height: 105px;
+    color: #717171;
+    font-size: 36px;
+    background: #dcdcdc;
+    border-radius: 6px 6px 6px 6px;
+    margin-right: 60px;
+    cursor: pointer;
+  }
 </style>
\ No newline at end of file
--- a/src/views/sim/authSuccess.vue
+++ b/src/views/sim/authSuccess.vue
@@ -57,7 +57,7 @@
    .reserved {

        width: 100%;
-        padding: 0 36px;
+        padding: 0 45px;

        /* height: calc(100vh - 150px); */
        box-sizing: border-box;
@@ -67,9 +67,9 @@
    .auth_content {
        width: 100%;
        background: #FFFFFF;
-        border-radius: 14px;
+        border-radius: 21px;
        height: 835px;
-        padding: 30px;
+        padding: 45px;
        box-sizing: border-box;

    }
@@ -77,16 +77,17 @@
    .auth_top {
        width: 100%;
        display: flex;
-        height: 50px;
+        height: 75px;
        position: relative;
        justify-content: center;
+        margin-bottom: 55px;
    }

    .auth_title {

        color: #000000;

-        font-size: 28px;
+        font-size: 42px;
        width: 100%;
        text-align: center;
    }
@@ -105,60 +106,46 @@
    }

    .auth_img {
-        width: 167px;
-        height: 194px;
+        width: 251px;
+        height: 291px;
    }

    .auth_right {
        display: flex;
        flex-direction: column;
-        margin-left: 40px;
-        line-height: 40px;
+        margin-left: 60px;
+        line-height: 60px;
        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;
+        font-size: 30px;
+        margin-top: -30px;
        margin-bottom: 62px;
    }

-    .auth_span {
-
-        font-size: 20px;

-    }
-
-    .auth_span_a {

-        color: #666666;
-        line-height: 18px;
-        font-size: 16px;
-    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
-
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
    }

+
    ::v-deep .auth_top .el-button {
        position: absolute;
        left: 0;
        top: 0;
+        border-radius: 6px 6px 6px 6px;
+
+        border: 2px solid #707070;
    }

+
    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
 </style>
\ No newline at end of file
--- a/src/views/sim/authentify.vue
+++ b/src/views/sim/authentify.vue
@@ -4,8 +4,12 @@
            <div class="auth_top">
                <div><el-button @click="toBack">返回上一步</el-button>
                </div>
-                <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
-                        身份证、粤居码</span>任意一种进行实名认证</div>
+                <div class="auth_title">
+                    <div class="auth_title_a">实名认证
+                    </div>
+                    <div>您可通过刷<span style="color: #5A8FF6;">
+                            身份证、粤居码</span>任意一种进行实名认证</div>
+                </div>
            </div>
            <div class="auth_body">
                <div class="auth_center">
@@ -35,6 +39,7 @@

            </div>

+
        </div>
    </div>
    </div>
@@ -62,9 +67,9 @@
    .reserved {

        width: 100%;
-        padding: 0 36px;
+        padding: 0 45px;

-        /* height: 1018px; */
+        /* height: auto; */
        box-sizing: border-box;

    }
@@ -73,8 +78,8 @@
        width: 100%;
        background: #FFFFFF;
        border-radius: 14px;
-        height: 835px;
-        padding: 30px;
+        height: 935px;
+        padding: 45px;
        box-sizing: border-box;

    }
@@ -82,25 +87,35 @@
    .auth_top {
        width: 100%;
        display: flex;
-        height: 50px;
+        /* height: 50px; */
        /* align-items: center; */
        position: relative;
        justify-content: center;
    }

+    .auth_title_a {
+        font-weight: 500;
+        color: #000000;
+        font-size: 42px;
+        margin-bottom: 51px;
+    }
+
    .auth_title {

        color: #666666;
-        font-size: 18px;
+
+
+        font-size: 27px;
+        text-align: center;
    }

    .auth_body {
        width: 100%;
-        height: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
-        justify-content: center;
+        margin-top: 99px;
+
    }

    .auth_center {
@@ -108,14 +123,14 @@
    }

    .auth_img {
-        width: 386.54px;
-        height: 287.18px;
+        width: 580px;
+        height: 431px;
    }

    .auth_center_right {
        display: flex;
        flex-direction: column;
-        margin-top: 38px;
+        margin-top: 60px;
    }

    .auth_img_left {
@@ -143,33 +158,29 @@
        font-size: 16px;
    }

-    .content_time {
-        width: 50px;
-        height: 50px;
-        background: #FFFFFF;
-        opacity: 1;
-        border: 3px solid #5A8FF6;
-        border-radius: 50%;
-        text-align: center;
-        line-height: 50px;
-
-    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
-
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
    }

+
    ::v-deep .auth_top .el-button {
        position: absolute;
        left: 0;
        top: 0;
+        border-radius: 6px 6px 6px 6px;
+
+        border: 2px solid #707070;
    }

+
    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
 </style>
\ No newline at end of file
--- a/src/views/sim/choose.vue
+++ b/src/views/sim/choose.vue
@@ -54,7 +54,7 @@

        position: relative;

-        padding: 0 36px;
+        padding: 0 54px;
        box-sizing: border-box;
    }

@@ -67,7 +67,7 @@
        border-radius: 14px;
        opacity: 1;

-        padding: 30px;
+        padding: 45px;
        box-sizing: border-box;
        text-align: center;

@@ -82,7 +82,7 @@
    }

    .phone_first {
-        height: 99px;
+        height: 149px;
        display: flex;
        width: 100%;
        position: relative;
@@ -91,7 +91,7 @@

    .phone_text {

-        font-size: 28px;
+        font-size: 42px;
        font-weight: 500;
        color: #000000;
        /* margin-left: 35%; */
@@ -112,17 +112,17 @@
    .phone_list_item {

        align-items: center;
-
-        margin: 0 100px 60px 0;
+        margin-bottom: 90px;
+        /* margin: 0 100px 90px 0; */
        display: flex;


    }

    .list_item_img {
-        width: 454px;
-        height: 140px;
-        margin-left: 30px;
+        width: 681px;
+        height: 210px;
+        margin-left: 45px;
    }

    ::v-deep .el-button {
@@ -133,25 +133,33 @@
    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
-
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
    }

+
    ::v-deep .phone_first .el-button {
        position: absolute;
        left: 0;
        top: 0;
+
+        border-radius: 6px 6px 6px 6px;
+
+        border: 2px solid #707070;
    }

+
+
    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
    }

    .no_check {
-        width: 30px;
-        height: 30px;
+        width: 45px;
+        height: 45px;
    }
 </style>
\ No newline at end of file
--- a/src/views/sim/index.vue
+++ b/src/views/sim/index.vue
@@ -63,38 +63,40 @@


    .sim {
-        width: 396px;
-        height: 113px;
+        width: 614px;
+        height: 169px;
        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;
+        box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, 0.3), inset 0px 0px 21px 2px rgba(149, 136, 136, 1);
+        border-radius: 12px 12px 12px 12px;
        opacity: 1;
        position: absolute;
-        left: 147px;
-        top: 80%;
+        margin-left: 221px;
+        top: auto;
+        bottom: 55px;
        display: flex;
-        padding: 0 32px;
+        padding: 0 50px;
        box-sizing: border-box;
        align-items: center;
    }

    .sim_center {
-        width: 3px;
-        height: 32px;
+        width: 5px;
+        height: 50px;
        background: #713DB0;
-        margin-left: 20px;
-        margin-right: 32px;
+        margin-left: 30px;
+        margin-right: 50px;
    }

    .sim_img {
-        width: 44.81px;
-        height: 64.16px;
+        width: 67px;
+        height: 96px;

    }

    .sim_text {

+        font-weight: bold;
        color: #713DB0;
-        font-size: 34px;
+        font-size: 51px;
    }
 </style>
\ No newline at end of file
--- a/src/views/sim/phone.vue
+++ b/src/views/sim/phone.vue
@@ -57,7 +57,7 @@

        position: relative;

-        padding: 0 36px;
+        padding: 0 86px;
        box-sizing: border-box;
    }

@@ -65,12 +65,12 @@

    .phone {
        width: 100%;
-        min-height: 818px;
+        min-height: 827px;
        background: #FFFFFF;
-        border-radius: 14px;
+        border-radius: 21px;
        opacity: 1;

-        padding: 30px;
+        padding: 45px;
        box-sizing: border-box;
        text-align: center;

@@ -78,60 +78,45 @@



-    .phone_img {
-        width: 44.81px;
-        height: 64.16px;

-    }

    .phone_first {
-        height: 99px;
+        height: 149px;
        display: flex;
        width: 100%;
    }

    .phone_text {

-        font-size: 28px;
+        font-size: 42px;
        font-weight: 500;
        color: #000000;
        margin-left: 45%;
    }

-    .content_time {
-        width: 50px;
-        height: 50px;
-        background: #FFFFFF;
-        opacity: 1;
-        border: 3px solid #5A8FF6;
-        border-radius: 50%;
-        text-align: center;
-        line-height: 50px;
-        margin: 0 0 0 auto;

-    }

    .phone_list {
        display: flex;
        flex-wrap: wrap;
        min-height: 471px;
-        align-content: start;
+        align-content: flex-start;
    }

    .phone_list_item {
-        width: 166px;
-        height: 56px;
+        width: 249px;
+        height: 86px;

        background: #F0F0F0;
-        border-radius: 4px 4px 4px 4px;
+        border-radius: 6px;
        opacity: 1;
-        margin: 0 30px 25px 0;
+        margin: 0 45px 38px 0;
        text-align: center;
        font-weight: 500;
        color: #666666;

-        font-size: 18px;
-        line-height: 56px;
+        font-size: 27px;
+        line-height: 86px;
        cursor: pointer;
    }

@@ -140,13 +125,21 @@
    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
    }

    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
+
+
+    /* ::v-deep .el-button--primary {
+        height: 75px;
+    } */
 </style>
\ No newline at end of file
--- a/src/views/sim/register.vue
+++ b/src/views/sim/register.vue
@@ -2,27 +2,42 @@
  <div class="order">
    <div class="order_top">
      <div class="goback" @click="gobak">返回上一步</div>
-      <div class="order_title">确认信息</div>
+      <div class="order_title">确认订单</div>
    </div>
    <div class="collection">
      <div class="roominfo">
-        <div class="roominfo_name">房间号</div>
+        <!-- <div class="roominfo_name">房间号</div>
        <div class="roominfo_num">3602</div>
-        <div class="roominfo_type">豪华大床房</div>
+        <div class="roominfo_type">豪华大床房</div> -->
      </div>
      <div class="roomcheck">
        <div class="roomcheck_sin">
-          <div class="roomcheck_sin_name">入住人数:</div>
-          <div class="roomcheck_sin_people">1人</div>
+          <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">王大锤</div>
+          <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>
-          <div class="roomcheck_sin_time">
-            2023.11.07(入住)——2023.11.08(离店)
+          <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>
@@ -50,183 +65,243 @@
 </template>

 <script>
-export default {
-  data() {
-    return {};
-  },
-  methods: {
-    pay() {
-      this.$router.push({
-        name: "hotelInfoPay",
-      });
+  export default {
+    data() {
+      return {};
    },
-    goback() {
-      this.$router.go(-1);
+    methods: {
+      pay() {
+        this.$router.push({
+          name: "hotelInfoPay",
+        });
+      },
+      goback() {
+        this.$router.go(-1);
+      },
    },
-  },
-};
+  };
 </script>

 <style scoped>
-.order {
-  width: 100%;
-  height: 100%;
-  padding: 0 45px;
-  box-sizing: border-box;
-  background: #f6f7fb;
-  border-radius: 21px;
-}
-.order_top {
-  height: 132px;
-  width: 100%;
-  position: relative;
-}
-.goback {
-  width: 141px;
-  height: 51px;
-  position: absolute;
-  top: 45px;
-  left: 0;
-  cursor: pointer;
-  font-size: 21px;
-  color: #666666;
-  background: #ffffff;
-  border-radius: 6px 6px 6px 6px;
-  border: 2px solid #707070;
-  text-align: center;
-  line-height: 51px;
-}
-.order_title {
-  font-size: 42px;
-  color: #000000;
-  width: 100%;
-  text-align: center;
-  line-height: 132px;
-}
-.collection {
-  width: 100%;
-  background: white;
-  height: 729px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-}
-.roominfo {
-  width: 467px;
-  height: 100%;
-  padding: 51px 0 0 53px;
-  box-sizing: border-box;
-  background: url("~@/assets/hotel/room.png");
-  background-size: 100% 100%;
-}
-.roominfo_name {
-  font-size: 30px;
-  color: #a28263;
-}
-.roominfo_num {
-  font-size: 90px;
-  color: #7f5321;
-  margin: 12px 0 15px;
-}
-.roominfo_type {
-  width: 141px;
-  height: 54px;
-  border-radius: 6px 6px 6px 6px;
-  text-align: center;
-  line-height: 54px;
-  color: #7f5321;
-  font-size: 21px;
-  border: 1px solid #7f5321;
-}
-.roomcheck {
-  width: 636px;
-  height: 100%;
-  padding: 0 60px 0 45px;
-  box-sizing: border-box;
-}
-.roomcheck_sin {
-  width: 531px;
-  height: 156px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e0e0e0;
-}
-.roomcheck_sin_name {
-  font-size: 24px;
-  color: #666666;
-}
-.roomcheck_sin_people {
-  font-size: 27px;
-  color: #333333;
-}
-.roomcheck_sin_time {
-  font-size: 24px;
-  margin-top: 45px;
-  color: #000000;
-}
-.roomcheck_sin_bottom {
-  margin-top: 60px;
-}
-.shu {
-  width: 1px;
-  height: 489px;
-  background: #e0e0e0;
-}
-.roomprice {
-  flex: 1;
-  height: 100%;
-  padding: 60px 77px 0;
-  box-sizing: content-box;
-}
-.roomprice_tips {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.heng {
-  width: 168px;
-  height: 1px;
-  background: #e0e0e0;
-}
-.roomprice_title {
-  font-size: 24px;
-  color: #666666;
-  text-align: center;
-}
-.roomprice_num {
-  color: #333333;
-  font-size: 33px;
-  text-align: center;
-  margin: 27px 0 84px;
-}
-.roomprice_num span {
-  font-size: 72px;
-}
-.roomprice_specific {
-  display: flex;
-  margin-top: 42px;
-  justify-content: space-between;
-}
-.roomprice_specific_name {
-  font-size: 24px;
-  color: #666666;
-}
-.roomprice_specific_num {
-  color: #000000;
-  font-size: 30px;
-}
-.roomprice_bto {
-  width: 198px;
-  height: 75px;
-  text-align: center;
-  line-height: 75px;
-  font-size: 27px;
-  cursor: pointer;
-  color: #ffffff;
-  margin: 150px auto 0;
-  background: #eb9c4e;
-  border-radius: 6px 6px 6px 6px;
-}
+  .order {
+    width: 100%;
+    height: 100%;
+    padding: 0 45px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 21px;
+    padding-bottom: 75px;
+  }
+
+  .order_top {
+    height: 132px;
+    width: 100%;
+    position: relative;
+  }
+
+  .goback {
+    width: 141px;
+    height: 51px;
+    position: absolute;
+    top: 45px;
+    left: 0;
+    cursor: pointer;
+    font-size: 21px;
+    color: #666666;
+    background: #ffffff;
+    border-radius: 6px 6px 6px 6px;
+    border: 2px solid #707070;
+    text-align: center;
+    line-height: 51px;
+  }
+
+  .order_title {
+    font-size: 42px;
+    color: #000000;
+    width: 100%;
+    text-align: center;
+    line-height: 132px;
+  }
+
+  .collection {
+    width: 100%;
+    background: white;
+    height: 729px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .roominfo {
+    width: 467px;
+    height: 100%;
+    padding: 51px 0 0 53px;
+    box-sizing: border-box;
+    background: url("~@/assets/sim/card5.png");
+    background-size: 100% 100%;
+  }
+
+  .roominfo_name {
+    font-size: 30px;
+    color: #a28263;
+  }
+
+  .roominfo_num {
+    font-size: 90px;
+    color: #7f5321;
+    margin: 12px 0 15px;
+  }
+
+  .roominfo_type {
+    width: 141px;
+    height: 54px;
+    border-radius: 6px 6px 6px 6px;
+    text-align: center;
+    line-height: 54px;
+    color: #7f5321;
+    font-size: 21px;
+    border: 1px solid #7f5321;
+  }
+
+  .roomcheck {
+    width: 636px;
+    height: 100%;
+    padding: 0 60px 0 45px;
+    box-sizing: border-box;
+  }
+
+  .roomcheck_sin {
+    width: 531px;
+    height: 156px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .roomcheck_sin_name {
+    font-size: 24px;
+    color: #666666;
+  }
+
+  .roomcheck_sin_people {
+    font-size: 27px;
+    color: #333333;
+  }
+
+  .roomcheck_sin_time {
+    font-size: 24px;
+    margin-top: 45px;
+    color: #000000;
+
+  }
+
+  .roomcheck_sin_time_title {
+    margin-top: 45px !important;
+
+    color: #666666 !important;
+  }
+
+  .roomcheck_sin_time_a {
+    font-size: 24px;
+    margin-top: 14px;
+    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: 21px;
+  }
+
+  .roomcheck_sin_bottom {
+    margin-top: 60px;
+  }
+
+  .shu {
+    width: 1px;
+    height: 489px;
+    background: #e0e0e0;
+  }
+
+  .roomprice {
+    flex: 1;
+    height: 100%;
+    padding: 60px 77px 0;
+    box-sizing: content-box;
+  }
+
+  .roomprice_tips {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .heng {
+    width: 168px;
+    height: 1px;
+    background: #e0e0e0;
+  }
+
+  .roomprice_title {
+    font-size: 24px;
+    color: #666666;
+    text-align: center;
+  }
+
+  .roomprice_num {
+    color: #333333;
+    font-size: 33px;
+    text-align: center;
+    margin: 27px 0 84px;
+  }
+
+  .roomprice_num span {
+    font-size: 72px;
+  }
+
+  .roomprice_specific {
+    display: flex;
+    margin-top: 42px;
+    justify-content: space-between;
+  }
+
+  .roomprice_specific_name {
+    font-size: 24px;
+    color: #666666;
+  }
+
+  .roomprice_specific_num {
+    color: #000000;
+    font-size: 30px;
+  }
+
+  .roomprice_bto {
+    width: 198px;
+    height: 75px;
+    text-align: center;
+    line-height: 75px;
+    font-size: 27px;
+    cursor: pointer;
+    color: #ffffff;
+    margin: 150px auto 0;
+    background: #437AE5;
+    border-radius: 6px 6px 6px 6px;
+  }
 </style>
\ No newline at end of file
--- a/src/views/visitor/authSuccess.vue
+++ b/src/views/visitor/authSuccess.vue
@@ -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">
@@ -76,9 +75,9 @@
    .reserved {

        width: 100%;
-        padding: 36px;
+        padding: 45px;

-        height: calc(100vh - 70px);
+        /* height: calc(100vh - 70px); */
        box-sizing: border-box;

    }
@@ -87,8 +86,8 @@
        width: 100%;
        background: #FFFFFF;
        border-radius: 14px;
-        height: 100%;
-        padding: 30px;
+        height: 835px;
+        /* padding: 45px; */
        box-sizing: border-box;

    }
@@ -99,13 +98,14 @@
        height: 50px;
        align-items: center;
        justify-content: space-between !important;
+        position: relative;
    }

    .auth_title {

        color: #000000;

-        font-size: 28px;
+        font-size: 42px;
        width: 100%;
        text-align: center;
    }
@@ -164,13 +164,27 @@
    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
    }

+
+    ::v-deep .auth_top .el-button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 6px 6px 6px 6px;
+
+        border: 2px solid #707070;
+    }
+
+
    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
 </style>
\ No newline at end of file
--- a/src/views/visitor/authentify.vue
+++ b/src/views/visitor/authentify.vue
@@ -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">
@@ -36,6 +35,7 @@

            </div>

+
        </div>
    </div>
    </div>
@@ -46,7 +46,6 @@
    export default {
        data() {
            return {
-
            }
        },

@@ -61,101 +60,123 @@
    }
 </script>
 <style scoped>
-.reserved {
-  width: 100%;
-  padding: 36px;
-
-  height: calc(100vh - 70px);
-  box-sizing: border-box;
-}
-
-.auth_content {
-  width: 100%;
-  background: #ffffff;
-  border-radius: 14px;
-  height: 100%;
-  padding: 30px;
-  box-sizing: border-box;
-}
-
-.auth_top {
-  width: 100%;
-  display: flex;
-  height: 50px;
-  align-items: center;
-  justify-content: space-between !important;
-}
-
-.auth_title {
-  color: #666666;
-  font-size: 18px;
-}
-
-.auth_body {
-  width: 100%;
-  height: 90%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.auth_center {
-  display: flex;
-}
-
-.auth_img {
-  width: 386.54px;
-  height: 287.18px;
-}
-
-.auth_center_right {
-  display: flex;
-  flex-direction: column;
-  margin-top: 38px;
-}
-
-.auth_img_left {
-  width: 64px;
-  height: 12px;
-  margin-right: 9px;
-  margin-top: 7px;
-}
-
-.auth_right {
-  display: flex;
-  margin-bottom: 62px;
-}
-
-.auth_span {
-  font-size: 20px;
-}
-
-.auth_span_a {
-  color: #666666;
-  line-height: 18px;
-  font-size: 16px;
-}
-
-.content_time {
-  width: 50px;
-  height: 50px;
-  background: #ffffff;
-  opacity: 1;
-  border: 3px solid #5a8ff6;
-  border-radius: 50%;
-  text-align: center;
-  line-height: 50px;
-}
-
-::v-deep .el-button {
-  width: 94px;
-  height: 34px;
-  padding: 0;
-  font-size: 14px;
-}
-
-::v-deep .el-button--primary {
-  height: 50px;
-}
+    .reserved {
+
+        width: 100%;
+        padding: 0 45px;
+
+        box-sizing: border-box;
+
+    }
+
+    .auth_content {
+        width: 100%;
+        background: #FFFFFF;
+        border-radius: 14px;
+        /* height: 835px; */
+        padding: 45px;
+        box-sizing: border-box;
+
+    }
+
+    .auth_top {
+        width: 100%;
+        display: flex;
+        height: 50px;
+        position: relative;
+        justify-content: center;
+        margin-bottom: 186px;
+    }
+
+    .auth_title_a {
+        font-weight: 500;
+        color: #000000;
+        font-size: 42px;
+        margin-bottom: 51px;
+    }
+
+    .auth_title {
+
+        color: #666666;
+
+
+        font-size: 27px;
+        text-align: center;
+    }
+
+    .auth_body {
+        width: 100%;
+        /* height: 90%; */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        /* justify-content: center; */
+        /* margin-top: 99px; */
+    }
+
+    .auth_center {
+        display: flex;
+    }
+
+    .auth_img {
+        width: 580px;
+        height: 431px;
+    }
+
+    .auth_center_right {
+        display: flex;
+        flex-direction: column;
+        margin-top: 60px;
+    }
+
+    .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: 141px;
+        height: 51px;
+        font-size: 21px;
+    }
+
+
+    ::v-deep .auth_top .el-button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 6px 6px 6px 6px;
+
+        border: 2px solid #707070;
+    }
+
+
+    ::v-deep .el-button--primary {
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
+    }
 </style>
\ No newline at end of file
--- a/src/views/visitor/card.vue
+++ b/src/views/visitor/card.vue
@@ -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>

@@ -68,9 +67,6 @@
    .reserved {

        width: 100%;
-        padding: 36px;
-
-        height: calc(100vh - 70px);
        box-sizing: border-box;

    }
@@ -78,9 +74,9 @@
    .card_content {
        width: 100%;
        background: #FFFFFF;
-        border-radius: 14px;
+        border-radius: 21px;
        height: 100%;
-        padding: 30px;
+        padding: 45px;
        box-sizing: border-box;

    }
@@ -109,10 +105,10 @@
    }

    .card_body_text {
-        margin: 46px 0 65px 0;
+        margin: 69px 0 98px 0;

        color: #333333;
-        font-size: 26px;
+        font-size: 39px;
        text-align: center;

        font-weight: 500;
@@ -122,6 +118,10 @@
        display: flex;
    }

+    .success_icon {
+        width: 119px;
+        height: 119px;
+    }


    ::v-deep .el-icon-success:before {
@@ -129,26 +129,22 @@
        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;
+        width: 141px;
+
+        height: 51px;
+        font-size: 21px;
+        border-radius: 6px;
+
+        border: 2px solid #707070;
    }

    ::v-deep .el-button--primary {
-        height: 50px;
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
 </style>
\ No newline at end of file
--- a/src/views/visitor/disreserve.vue
+++ b/src/views/visitor/disreserve.vue
@@ -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,10 +80,16 @@
    }
 </script>
 <style scoped>
+    .return_btn {
+        /* margin-top: 45px; */
+        position: absolute;
+        height: 51px;
+    }
+
    .reserved {

        width: 100%;
-        padding: 36px;
+        padding: 75px;


        box-sizing: border-box;
@@ -97,92 +101,97 @@
        background: #FFFFFF;
        border-radius: 14px;
        height: 880px;
-        padding: 0 30px;
+        /* padding: 0 45px; */
        box-sizing: border-box;
        display: flex;

    }

+    .card_left_img {
+        width: 87px;
+        height: 68px;
+        margin: 35%;
+    }

    .card_left_c {
-        width: 193px;
-        height: 193px;
+        width: 290px;
+        height: 290px;
        background: #F4F4F4;
-        border-radius: 10px 10px 10px 10px;
+        border-radius: 15px;
        opacity: 1;
-        margin: 14px 0 54px 156px;
+        margin: 0 309px 81px 234px;
        text-align: center;
    }

    .card_item {
        display: flex;
-        height: 46px;
-        margin-bottom: 30px;
-        margin-left: 20px;
+        height: 69px;
+        margin-bottom: 45px;
+        margin-left: 30px;
    }

    .card_item_span {
-        line-height: 46px;
-        width: 120px;
+        line-height: 69px;
        color: #333333;

-        font-size: 20px;
+        font-size: 30px;
+        margin-right: 10px;
    }

-    .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;

-    }




    ::v-deep .el-input__inner {
-        width: 360px;
-        height: 46px;
-        border: 1px solid #707070;
+        width: 540px;
+        height: 69px;
+        border: 2px solid #707070;
        color: #333333;
+        font-size: 30px;
    }

    ::v-deep .el-input {
-        width: 360px;
-        height: 78px;
+        width: 540px;
+        height: 69px;


    }

    ::v-deep .el-input__icon {
-        height: 46px;
+        height: 69px;
    }

    .card_center {
-        width: 1px;
-        height: 548px;
+        width: 2px;
+        height: 100%;
        background: #E0E0E0;
-        margin: 50px 43px 50px 85px;
+        margin: 0 65px 75px 0;
    }


    .card_right {
        width: 100%;
+        margin-top: 75px;
+        text-align: center;
    }

    ::v-deep .card_right .el-button {
-        margin: auto 0 50px 0;
+        position: absolute;
+        bottom: 90px;
    }

    ::v-deep .el-button {
-        width: 94px;
-        height: 34px;
-        padding: 0;
-        font-size: 14px;
+        width: 141px;
+        height: 51px;
+        font-size: 21px;
+    }
+
+    ::v-deep .el-button--primary {
+        width: 198px;
+        height: 75px;
+        background: #437AE5;
+        font-size: 27px;
+        border: none;
    }
 </style>
\ No newline at end of file
--- a/src/views/visitor/reserved.vue
+++ b/src/views/visitor/reserved.vue
 <template>
    <div class="reserved">
        <div class="content">
-            <div class="content_time">118s</div>
            <div class="content_card">
                <div class="card_left">

@@ -76,31 +75,20 @@
        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: 225px 100px 0 70px;
    }

    .card_tip {
-        font-size: 28px;
+        font-size: 42px;
        color: #000000;
    }

@@ -115,24 +103,26 @@
    }

    ::v-deep .content_card .el-input {
-        width: 482px;
-        height: 78px;
-        background: #FFFFFF;
+        width: 723px;
+        height: 117px;
+        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
-        border: 1px solid #CBC7C7;
-        margin: 40px 0 120px 0;
+        border: 1px solid #cbc7c7;
+        margin: 60px 0 180px 0;
    }

    ::v-deep .content_card .el-input-group__prepend {
        background-color: white;
        border: 0;
-        line-height: 70px;
+        line-height: 117px;
        border-radius: 50%;
    }

    ::v-deep .content_card .el-input.is-disabled .el-input__inner {
        border-color: white;
+        height: 100%;
+        font-size: 36px;
        background-color: white;
        border-radius: 10%;
        cursor: default;
@@ -140,25 +130,29 @@
    }

    .card_pre {
-
        color: #000000;
-        font-size: 24px;
+        font-size: 36px;
    }

    .card_center {
        width: 2px;
-        height: 40px;
-        background: #D6D6D6;
+        height: 117px;
+        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;
-        margin-right: 40px;
+        width: 312px;
+        height: 105px;
+        border-radius: 6px;
+        margin-right: 60px;

-        font-size: 24px;
+        font-size: 36px;
    }

    ::v-deep .card_btn .el-button--info {
@@ -169,24 +163,27 @@
    }

    .card_right {
-        width: 449px;
-        height: 391px;
+        width: 674px;
+        height: 587px;
        display: flex;
        flex-wrap: wrap;
+        justify-content: space-between;
        align-content: flex-start;
-        padding: 30px;
+        padding: 45px 0;
+        background: white;
        margin-right: 0;
        margin-left: auto;
+        box-sizing: border-box;
    }

    ::v-deep .card_right .el-button {
-        width: 113px;
-        height: 64px;
+        width: 170px;
+        height: 96px;
        background: #FFFFFF;
-        border-radius: 6px 6px 6px 6px;
+        border-radius: 9px;
        opacity: 1;
        border: 1px solid #CBC7C7;
-        margin: 0 25px 25px 0;
+        margin: 0 38px 38px 0;
        font-weight: bold;
        color: #000000;
        font-size: 36px;

--- a/src/views/visitor/send.vue
+++ b/src/views/visitor/send.vue
@@ -5,7 +5,6 @@
                <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">
@@ -65,21 +64,17 @@
 </script>
 <style scoped>
    .reserved {
-
        width: 100%;
-        padding: 36px;
-
-        height: calc(100vh - 70px);
        box-sizing: border-box;
-
    }

+
    .card_content {
        width: 100%;
        background: #FFFFFF;
-        border-radius: 14px;
-        height: 100%;
-        padding: 30px;
+        border-radius: 21px;
+        height: calc(100vh - 225px);
+        padding: 45px;
        box-sizing: border-box;

    }
@@ -87,7 +82,7 @@
    .card_top {
        width: 100%;
        display: flex;
-        height: 50px;
+        /* height: 50px; */
        align-items: center;
        justify-content: space-between !important;
    }
@@ -108,7 +103,8 @@
    }

    .card_body_text {
-        margin: 55px 0 30px 0;
+        margin: 83px 0 45px 0;
+        font-size: 39px;
    }

    .card_center {
@@ -116,8 +112,8 @@
    }

    .card_img {
-        width: 386.54px;
-        height: 287.18px;
+        width: 185px;
+        height: 127px;
    }

    ::v-deep .el-progress-bar {

--- a/src/views/visitor/standby.vue
+++ b/src/views/visitor/standby.vue
@@ -6,15 +6,15 @@
                <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>
+font-size:66px;">欢迎使用</div>
            <div style="color: #416CCC;
-font-size: 50px;">访客自助登记系统</div>
+font-size:75px;">访客自助登记系统</div>
            <div class="content_btns">
                <div class="content_btn" @click="Reserved('reserved',0)">
                    <div class="content_text">已预约</div>
@@ -73,10 +73,11 @@ font-size: 50px;">访客自助登记系统</div>
 </script>
 <style scoped>
    .standby {
-        height: 100%;
+        /* height: 100%; */
        width: 100%;
        background: url("~@/assets/visitor/background.png") no-repeat;
        background-size: 100%;
+        box-sizing: border-box;
    }

    .header {
@@ -91,8 +92,9 @@ font-size: 50px;">访客自助登记系统</div>

    .header_title {
        color: #333333;
-        font-size: 16px;
-        margin-top: 20px;
+        font-size:
+            24px;
+        margin-top: 44px;
    }


@@ -101,63 +103,70 @@ font-size: 50px;">访客自助登记系统</div>

        color: #FFFFFF;
        align-items: center;
-        height: 70px;
+        height: 105px;
    }

    .header_first {
        display: flex;
        flex-direction: column;
        text-align: center;
-        font-size: 13px;
-        margin-right: 10px;
+        font-size: 20px;
+        margin-right: 24px;
    }

    .header_mon {
-        margin-top: 2px;
+        margin-top: 11px;
+    }
+
+    .header_center {
+        height: 27px;
+        width: 2px;
+        background: white;
    }

    .header_time {
-        font-size: 30px;
+        font-size: 45px;
        font-weight: bold;
-        margin-left: 6px;
+        margin-left: 24px;
    }

    .content {
-
+        height: 100%;
        font-weight: bold;
-        padding: 140px 60px 0;
+        padding: 57px 90px 142px;
        box-sizing: border-box;
    }

    .content_btns {
        display: flex;
-        margin-top: 85px;
+        margin-top: 128px;
    }

    .content_btn {
-        width: 192px;
-        height: 239px;
+        width: 288px;
+        height: 359px;
        background: linear-gradient(136deg, #65DCAC 0%, #4DA8D5 100%);
-        border-radius: 10px 10px 10px 10px;
+        border-radius: 15px;
        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;
+        width: 171px;
+        height: 180px;
        float: right;
+        margin-top: 78px;
    }

    .content_text {
-        font-size: 30px;
+        font-size: 45px;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: 41px;