更新页面

package.json

@@ -10,6 +10,8 @@
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
     "vue": "^2.6.14",
+    "iscroll": "^5.2.0",
+    "lib-flexible": "^0.3.2",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {

src/App.vue

@@ -5,16 +5,18 @@
 </template>
 
 <style>
-  html,
-  body {
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-  }
+html,
+body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
 
-  #app {
-    width: 100%;
-    height: 100%;
-  }
+#app {
+  width: 100%;
+}
+.el-progress-circle{
+  width: 75px !important;
+  height: 75px !important; /* 自定义高度 */
+}
 </style>
\ No newline at end of file

src/main.js

-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 
-Vue.config.productionTip = false
+import "./utils/fixle";
+
+import VIscroll from "./utils/vIscroll";
+Vue.use(VIscroll);
+
+Vue.config.productionTip = false;
 Vue.use(ElementUI);
 new Vue({
   router,
-  render: h => h(App)
-}).$mount('#app')
+  render: (h) => h(App),
+  data: function () {
+    return {
+      hotelType: null,
+    };
+  },
+}).$mount("#app");

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-import Visitor from '../views/visitor/standby.vue'
-import Reserved from '../views/visitor/reserved.vue'
-import Comment from '../views/common.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/HomeView.vue";
+import Visitor from "../views/visitor/standby.vue";
+import Reserved from "../views/visitor/reserved.vue";
+import Comment from "../views/common.vue";
+import Hotel from "../views/hotels/standbuy.vue";
+import hotelCommon from "../views/hotels/common.vue";
+import hotelReservation from "../views/hotels/bookroom.vue";
+import hotelOrderComfim from "../views/hotels/order/comfim.vue";
+import hotelIdentitySuccess from "../views/hotels/real/success.vue";
+import hotelInfo from "../views/hotels/info/register.vue";
+import hotelInfoPay from "../views/hotels/info/pay.vue";
+import hotelInfoGrant from "../views/hotels/info/roomcard.vue";
+import hotelInfoSuccess from "../views/hotels/info/success.vue";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "home",
+    component: HomeView,
   },
   {
-    path: '/about',
-    name: 'about',
+    path: "/about",
+    name: "about",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
   {
-    path: '/visitor',
-    name: 'visitor',
-    component: Visitor
+    path: "/visitor",
+    name: "visitor",
+    component: Visitor,
   },
   {
     path: "/comment",
@@ -39,14 +49,91 @@ const routes = [
           title: "已预约",
         },
       },
-    ]
-  }
-]
+    ],
+  },
+
+  // 酒店页
+  {
+    path: "/hotel",
+    name: "hotel",
+    component: Hotel,
+  },
+  {
+    path: "/hotel/common",
+    redirect: "/hotel/reservation",
+    component: hotelCommon,
+    children: [
+      {
+        path: "/hotel/reservation",
+        name: "hotelReservation",
+        component: hotelReservation,
+        meta: {
+          title: "预定房间",
+          index: 0,
+        },
+      },
+      {
+        path: "/hotel/order/comfim",
+        name: "hotelOrderComfim",
+        component: hotelOrderComfim,
+        meta: {
+          title: "订单确认",
+          index: 0,
+        },
+      },
+      {
+        path: "/hotel/identity/success",
+        name: "hotelIdentitySuccess",
+        component: hotelIdentitySuccess,
+        meta: {
+          title: "身份采集成功",
+          index: 1,
+        },
+      },
+      {
+        path: "/hotel/info/checkin",
+        name: "hotelInfo",
+        component: hotelInfo,
+        meta: {
+          title: "确认信息",
+          index: 2,
+        },
+      },
+      {
+        path: "/hotel/info/pay",
+        name: "hotelInfoPay",
+        component: hotelInfoPay,
+        meta: {
+          title: "订单支付",
+          index: 3,
+        },
+      },
+      {
+        path: "/hotel/info/grant",
+        name: "hotelInfoGrant",
+        component: hotelInfoGrant,
+        meta: {
+          title: "发放房卡",
+          index: 4,
+        },
+      },
+      {
+        path: "/hotel/info/success",
+        name: "hotelInfoSuccess",
+        component: hotelInfoSuccess,
+        meta: {
+          title: "发放成功",
+          index: 4,
+        },
+      },
+    ],
+  },
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/utils/fixle.js

+// 这段代码它又来了，完全可以单独丢一个js文件里面。
+if (!/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+  // 当前设备是移动设备
+  let width = window.innerWidth;
+  width = width <= 1200 ? 1200 : width;
+  const htmlObj = document.getElementsByTagName("html")[0];
+  htmlObj.style.fontSize = width / 120 + "px";
+
+  if (document.createEvent) {
+    var event = document.createEvent("HTMLEvents");
+    event.initEvent("resize", true, true);
+    window.dispatchEvent(event);
+  } else if (document.createEventObject) {
+    window.fireEvent("onresize");
+  }
+  window.addEventListener("resize", function () {
+    let width = window.innerWidth;
+    htmlObj.style.fontSize = width / 120 + "px";
+  });
+}

src/utils/vIscroll.js

+const IScroll = require("iscroll");
+const VIScroll = {
+  install: function (Vue, options) {
+    Vue.directive("iscroll", {
+      inserted: function (el, binding, vnode) {
+        let callBack;
+        let iscrollOptions = options;
+        const option = binding.value && binding.value.option;
+        const func = binding.value && binding.value.instance;
+        // 判断输入参数
+        const optionType = option ? [].toString.call(option) : undefined;
+        const funcType = func ? [].toString.call(func) : undefined;
+        // 兼容 google 浏览器拖动
+        el.addEventListener("touchmove", function (e) {
+          e.preventDefault();
+        });
+        // 将参数配置到new IScroll(el, iscrollOptions)中
+        if (optionType === "[object Object]") {
+          iscrollOptions = option;
+        }
+        if (funcType === "[object Function]") {
+          callBack = func;
+        }
+        // 使用vnode绑定iscroll是为了让iscroll对象能够夸状态传递，避免iscroll重复建立
+        // 这里面跟官方网站 const myScroll = new IScroll('#wrapper'，option) 初始化一样
+        vnode.scroll = new IScroll(el, iscrollOptions);
+        // 如果指令传递函数进来，把iscroll实例传递出去
+        if (callBack) callBack(vnode.scroll);
+      },
+      componentUpdated: function (el, binding, vnode, oldVnode) {
+        // 将scroll绑定到新的vnode上，避免多次绑定
+        vnode.scroll = oldVnode.scroll;
+        // 使用 settimeout 让refresh跳到事件流结尾，保证refresh时数据已经更新完毕
+        setTimeout(() => {
+          vnode.scroll.refresh();
+        }, 0);
+      },
+      unbind: function (el, binding, vnode, oldVnode) {
+        // 解除绑定时要把iscroll销毁
+        vnode.scroll = oldVnode.scroll;
+        vnode.scroll.destroy();
+        vnode.scroll = null;
+      },
+    });
+  },
+};
+module.exports = VIScroll;

src/views/hotels/bookroom.vue

+<template>
+  <div class="bookroom">
+    <div class="bookroom_top">
+      <div class="bookroom_title">选择房间</div>
+      <div
+        class="bookroom_room"
+        v-iscroll="{
+          option: iscrollConf,
+          instance: getIscroll,
+        }"
+        ref="scrollContainer"
+      >
+        <div class="room_all" ref="tabLiContainer">
+          <div
+            :class="[
+              'room_single',
+              currentIndex == item.id ? 'room_single_select' : '',
+            ]"
+            v-for="item in roomList"
+            ref="tabItem"
+            @click="selectRoom(item.id)"
+          >
+            <img
+              src="https://img2.baidu.com/it/u=4226896243,3275827708&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350"
+              class="room_img"
+            />
+            <div class="room_single_bottom">
+              <div>
+                <div class="room_single_name">{{ item.name }}</div>
+                <div class="room_single_people">可住2人</div>
+              </div>
+              <div class="room_single_price">
+                ¥<span>{{ item.price }}</span
+                >/晚
+              </div>
+
+              <img
+                v-if="currentIndex == item.id"
+                src="@/assets/hotel/success.png"
+                class="room_single_success"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="bookroom_bto">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      roomList: [
+        {
+          name: "精品大床房",
+          price: "388",
+          id: 1,
+        },
+        {
+          name: "精品双床房",
+          price: "488",
+          id: 2,
+        },
+        {
+          name: "豪华大床房",
+          price: "588",
+          id: 3,
+        },
+        {
+          name: "豪华双床房",
+          price: "688",
+          id: 4,
+        },
+        {
+          name: "豪华房",
+          price: "788",
+          id: 5,
+        },
+      ],
+      currentId: null,
+      currentIndex: 0,
+      myScroll: null,
+      iscrollConf: {
+        bounce: true,
+        mouseWheel: true,
+        click: true,
+        scrollX: true,
+        scrollY: false,
+      },
+    };
+  },
+
+  mounted() {
+    this.$refs.tabLiContainer.style.width =
+      this.$refs.tabItem[0].offsetWidth * this.roomList.length * 1.13 + "px";
+    this.$nextTick(() => {
+      this.myScroll.refresh();
+    });
+  },
+
+  methods: {
+    getIscroll(iscroll) {
+      this.myScroll = iscroll;
+    },
+
+    // 选择房间
+    selectRoom(id) {
+      this.currentIndex = id;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bookroom {
+  width: 100%;
+  height: 100%;
+  padding: 0 45px;
+  box-sizing: border-box;
+  background: #f6f7fb;
+  border-radius: 21px;
+}
+.bookroom_top {
+  height: 132px;
+  width: 100%;
+}
+.bookroom_title {
+  font-size: 42px;
+  color: #000000;
+  width: 100%;
+  text-align: center;
+  line-height: 132px;
+}
+.bookroom_room {
+  height: 729px;
+  padding-top: 60px;
+  padding-left: 45px;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: white;
+}
+.room_single {
+  width: 368px;
+  height: 454px;
+  position: relative;
+  margin-right: 45px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: 15px 15px 15px 15px;
+  border: 3px solid #e0e0e0;
+}
+.room_all {
+  display: flex;
+  width: 100%;
+  height: 460px;
+}
+.room_img {
+  width: 100%;
+  height: 315px;
+  border-radius: 15px 15px 0 0;
+}
+.room_single_bottom {
+  display: flex;
+  width: 100%;
+  padding: 0 24px;
+  margin-top: 27px;
+  box-sizing: border-box;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.room_single_name {
+  font-size: 30px;
+  color: #333333;
+}
+.room_single_people {
+  color: #999999;
+  margin-top: 5px;
+  font-size: 21px;
+}
+.room_single_price {
+  font-size: 26px;
+  color: #f29736;
+}
+.room_single_price span {
+  font-size: 48px;
+}
+.bookroom_bto {
+  width: 198px;
+  height: 75px;
+  text-align: center;
+  line-height: 75px;
+  font-size: 27px;
+  color: white;
+  background: #eb9c4e;
+  border-radius: 6px 6px 6px 6px;
+  margin: 69px auto 0;
+}
+.room_single_select {
+  border: 3px solid #5a8ff6 !important;
+}
+.room_single_success {
+  position: absolute;
+  top: 23px;
+  right: 23px;
+  width: 48px;
+  height: 48px;
+}
+</style>
\ No newline at end of file

src/views/hotels/common.vue

+<template>
+  <div class="hotel_common">
+    <div class="hotel_header">
+      <div class="go_home" @click="gohome">
+        <img src="@/assets/hotel/home.png" class="home" />
+        <div>返回主页</div>
+      </div>
+      <div class="hotel_header_title">陆瑞酒店智能化自助入住系统</div>
+      <div class="hotel_header_time">{{ date }}</div>
+    </div>
+    <div class="hotel_step">
+      <div class="hotel_step_single" v-for="(item, index) in step" :key="index">
+        <div
+          :class="[
+            'hotel_step_num',
+            currentIndex >= index ? 'hotel_step_num_s' : '',
+          ]"
+        >
+          {{ index + 1 }}
+        </div>
+        <div
+          :class="[
+            'hotel_step_index',
+            currentIndex >= index ? 'hotel_step_index_s' : '',
+          ]"
+        >
+          {{ item.name }}
+        </div>
+        <img
+          src="@/assets/hotel/righttrue.png"
+          v-if="item.next && currentIndex >= index"
+          class="hotel_step_right"
+        />
+        <img src="@/assets/hotel/right.png" v-else class="hotel_step_right" />
+      </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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: "", //年月日
+      percentage: 100,
+      currentIndex: "", //当前移动到的路径
+      time: 120, //时间设定为360
+      step: [
+        {
+          name: "订单查询",
+          path: "hotelOrderComfim",
+          next: true,
+        },
+        {
+          name: "订单确认",
+          path: "hotelOrderComfim",
+          next: true,
+        },
+        {
+          name: "身份核对",
+          next: true,
+        },
+        {
+          name: "登记入住",
+          path: "hotelInfo",
+          next: true,
+        },
+        {
+          name: "订单支付",
+          path: "hotelInfoPay",
+          next: true,
+        },
+        {
+          name: "发放房卡",
+          path: "hotelInfoGrant",
+          next: false,
+        },
+      ],
+    };
+  },
+
+  created() {
+    this.getDate();
+
+    this.decrease();
+
+    var type = this.$root.hotelType;
+    if (type == 0) {
+      this.step.splice(0, 1);
+    }
+
+    this.currentIndex = this.$route.meta.index;
+  },
+
+  watch: {
+    $route: {
+      // $route可以用引号，也可以不用引号  监听的对象
+      handler(to) {
+        this.currentIndex = to.meta.index;
+      },
+    },
+  },
+
+  methods: {
+    // 获取当前日期
+    getDate() {
+      const now = new Date();
+
+      const year = now.getFullYear();
+      const month = ("0" + (now.getMonth() + 1)).slice(-2);
+      const day = ("0" + now.getDate()).slice(-2);
+      const hours = ("0" + now.getHours()).slice(-2);
+      const minutes = ("0" + now.getMinutes()).slice(-2);
+      const seconds = ("0" + now.getSeconds()).slice(-2);
+
+      this.date = year + "." + month + "." + day + " " + hours + ":" + minutes;
+    },
+
+    // 自定义进度条
+    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: "hotel",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.hotel_common {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 69px;
+  background: linear-gradient(to bottom, #07122f, #2e246d);
+}
+.hotel_header {
+  width: 100%;
+  background: #17204b;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+  box-sizing: border-box;
+  height: 70px;
+}
+.hotel_header_title {
+  font-size: 33px;
+  color: white;
+}
+.hotel_header_time {
+  font-size: 27px;
+  color: white;
+}
+.home {
+  width: 18px;
+  height: 20px;
+  margin-right: 7px;
+}
+.go_home {
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  color: white;
+}
+.hotel_step {
+  display: flex;
+  height: 80px;
+  justify-content: center;
+  align-items: center;
+}
+.hotel_step_index {
+  font-size: 23px;
+  color: #797f90;
+}
+.hotel_step_single {
+  display: flex;
+  align-items: center;
+}
+.hotel_step_num {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  border-radius: 50%;
+  background: #797f90;
+  color: white;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hotel_step_right {
+  width: 29x;
+  height: 7px;
+  margin: 0 21px;
+}
+.hotel_content {
+  width: 100%;
+  padding: 0 36px;
+  box-sizing: border-box;
+  border-radius: 21px;
+  height: 906px;
+}
+.hotel_content_frame {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 21px;
+  background: white;
+}
+.hotel_content_frame_countdown {
+  position: absolute;
+  top: 36px;
+  right: 45px;
+}
+.hotel_step_index_s {
+  color: #f29736;
+}
+.hotel_step_num_s {
+  background: #f29736;
+  color: white;
+}
+</style>
\ No newline at end of file

src/views/hotels/info/pay.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="goback" @click="goback">返回上一步</div>
+      <div class="order_title">订单支付</div>
+    </div>
+    <div class="collection">
+      <div class="price_title">支付金额</div>
+      <div class="price">¥<span>588</span></div>
+      <div class="price_type">
+        <div class="price_wechat">
+          <img src="" class="price_img" />
+          <div class="price_tips">使用<span>微信</span>扫一扫进行支付</div>
+        </div>
+        <div class="price_alipay">
+          <img src="" class="price_img" />
+          <div class="price_tips">使用<span>支付宝</span>扫一扫进行支付</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    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;
+  padding-top: 60px;
+  box-sizing: border-box;
+}
+.price_title {
+  font-size: 24px;
+  color: #666666;
+  text-align: center;
+}
+.price {
+  color: #333333;
+  font-size: 33px;
+  margin-top: 27px;
+  text-align: center;
+}
+.price span {
+  font-size: 72px;
+}
+.price_type {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 44px;
+}
+.price_img {
+  width: 342px;
+  height: 342px;
+}
+.price_wechat {
+  margin-right: 210px;
+}
+.price_tips {
+  font-size: 24px;
+  color: #999999;
+  text-align: center;
+}
+.price_tips span {
+  color: #eb9c4e;
+}
+</style>
\ No newline at end of file

src/views/hotels/info/register.vue

+<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="roominfo">
+        <div class="roominfo_name">房间号</div>
+        <div class="roominfo_num">3602</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>
+        <div class="roomcheck_sin">
+          <div class="roomcheck_sin_name">房客信息:</div>
+          <div class="roomcheck_sin_people">王大锤</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>
+        </div>
+      </div>
+      <div class="shu"></div>
+      <div class="roomprice">
+        <div class="roomprice_title">支付金额</div>
+        <div class="roomprice_num">¥<span>588</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">房间费用</div>
+          <div class="roomprice_specific_num">200</div>
+        </div>
+        <div class="roomprice_specific">
+          <div class="roomprice_specific_name">房间费用</div>
+          <div class="roomprice_specific_num">200</div>
+        </div>
+        <div class="roomprice_bto" @click="pay">确认支付</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  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;
+}
+</style>
\ No newline at end of file

src/views/hotels/info/roomcard.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="order_title">发放房卡</div>
+    </div>
+    <div class="collection">
+      <img src="@/assets/hotel/grant.png" class="grant" />
+      <div class="waiting">房卡发放中，请耐心等待...</div>
+      <el-progress
+        :show-text="false"
+        color="#EB9C4E"
+        :percentage="50"
+        class="progress"
+        :stroke-width="21"
+      ></el-progress>
+      <div class="progress_schedule">40%</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</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;
+}
+.order_title {
+  font-size: 42px;
+  color: #000000;
+  width: 100%;
+  text-align: center;
+  line-height: 132px;
+}
+.collection {
+  width: 100%;
+  background: white;
+  height: 729px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+.grant {
+  width: 168px;
+  height: 137px;
+}
+.waiting {
+  font-size: 39px;
+  color: #333333;
+  margin: 80px 0 45px;
+}
+.progress {
+  width: 827px;
+  margin-bottom: 26px;
+}
+.progress_schedule{
+    font-size: 33px;
+    color: #333333;
+}
+</style>
\ No newline at end of file

src/views/hotels/info/success.vue

+<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">房卡发放成功，请拿好您的房卡</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: "hotel",
+      });
+    },
+  },
+};
+</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;
+}
+.order_title {
+  font-size: 42px;
+  color: #000000;
+  width: 100%;
+  text-align: center;
+  line-height: 132px;
+}
+.collection {
+  width: 100%;
+  background: white;
+  height: 729px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+.success_icon {
+  width: 119px;
+  height: 119px;
+  margin-bottom: 69px;
+}
+.success_text {
+  font-size: 39px;
+  color: #333333;
+}
+.success_back {
+  width: 312px;
+  height: 105px;
+  background: #eb9c4e;
+  text-align: center;
+  line-height: 105px;
+  color: white;
+  font-size: 36px;
+  cursor: pointer;
+  border-radius: 6px 6px 6px 6px;
+  margin-top: 98px;
+}
+</style>
\ No newline at end of file

src/views/hotels/order/comfim.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="order_title">确认订单信息</div>
+    </div>
+    <div>
+      <div class="order_info">
+        <div class="order_info_head">
+          <div class="order_info_head_left">
+            <div>
+              <div class="order_info_tip">联系人</div>
+              <div class="order_info_text">王大锤</div>
+            </div>
+            <div class="order_info_head_phone">
+              <div class="order_info_tip">联系电话</div>
+              <div class="order_info_text">172-0920-1829</div>
+            </div>
+          </div>
+          <div class="order_info_head_tips">
+            <div class="order_info_tip">温馨提示</div>
+            <div class="order_info_prompt">
+              信息有误需要更改请前往前台办理，请于中午14:00前办理入住，12:00前
+              办理离店，房间会一直为你保留
+            </div>
+          </div>
+        </div>
+        <div class="order_info_room">
+          <div class="order_info_room_conten">
+            <div class="order_info_room_conten_left">
+              <img
+                class="order_info_room_img"
+                src="https://img2.baidu.com/it/u=4226896243,3275827708&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350"
+              />
+              <div>
+                <div class="order_info_room_name">豪华大床房</div>
+                <div class="order_info_room_time">
+                  2023.11.07(入住)——2023.11.08(离店)
+                </div>
+                <div class="order_info_room_price">总价：¥<span>388</span></div>
+              </div>
+            </div>
+            <div class="order_info_room_conten_right">
+              <div>
+                <div class="order_people">入住人数</div>
+                <div class="order_info_room_conten_people">
+                  <div
+                    v-for="item in peopleList"
+                    @click="selectPeople(item)"
+                    :class="[
+                      'order_info_room_conten_people_li',
+                      currentPeople == item
+                        ? 'order_info_room_conten_people_li_select'
+                        : '',
+                    ]"
+                  >
+                    {{ item }}人
+                  </div>
+                  <div class="order_info_checkin">
+                    <div class="order_info_room_conten_bto">直接入住</div>
+                    <div class="order_info_room_conten_btotios">
+                      房间将默认分配
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      peopleList: [1, 2, 3],
+      currentPeople: 1,
+    };
+  },
+
+  methods: {
+    selectPeople(value) {
+      this.currentPeople = value;
+    },
+  },
+};
+</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%;
+}
+.order_title {
+  font-size: 42px;
+  color: #000000;
+  width: 100%;
+  text-align: center;
+  line-height: 132px;
+}
+.order_info {
+  width: 100%;
+  height: 729px;
+  background: white;
+}
+.order_info_head {
+  width: 100%;
+  height: 174px;
+  display: flex;
+  padding: 45px 0 0 0;
+  box-sizing: border-box;
+  align-items: flex-start;
+  border-bottom: 2px solid #e0e0e0;
+}
+.order_info_head_left {
+  width: 50%;
+  padding-left: 60px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+}
+.order_info_tip {
+  font-size: 24px;
+  color: #666666;
+}
+.order_info_text {
+  font-size: 33px;
+  color: #333333;
+  margin-top: 24px;
+}
+.order_info_prompt {
+  font-size: 21px;
+  margin-top: 21px;
+  width: 672px;
+  color: #666666;
+}
+.order_info_head_phone {
+  margin-left: 195px;
+}
+.order_info_head_tips {
+  margin-left: 42px;
+}
+.order_info_room {
+  width: 100%;
+  height: 275px;
+  padding: 0 60px;
+  box-sizing: border-box;
+}
+.order_info_room_conten {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid #e0e0e0;
+}
+.order_info_room_img {
+  width: 251px;
+  height: 185px;
+  border-radius: 6px;
+  margin-right: 45px;
+}
+.order_info_room_conten_left {
+  width: 50%;
+  display: flex;
+  border-right: 2px solid #e0e0e0;
+  align-items: flex-end;
+}
+.order_info_room_price {
+  color: #666666;
+  margin-top: 36px;
+}
+.order_info_room_price span {
+  font-size: 42px;
+  line-height: 22px;
+  color: #000000;
+}
+.order_info_room_time {
+  font-size: 24px;
+  color: #666666;
+  margin-top: 18px;
+}
+.order_info_room_name {
+  font-size: 33px;
+  color: #333333;
+}
+.order_info_room_conten_right {
+  padding-left: 42px;
+  display: flex;
+  box-sizing: border-box;
+}
+.order_people {
+  font-size: 24px;
+  color: #666666;
+}
+.order_info_room_conten_people {
+  display: flex;
+  align-items: center;
+  margin-top: 23px;
+}
+.order_info_room_conten_people_li {
+  width: 123px;
+  height: 56px;
+  margin-right: 30px;
+  background: #eaeaea;
+  border-radius: 6px 6px 6px 6px;
+  text-align: center;
+  line-height: 56px;
+  color: #717171;
+  cursor: pointer;
+  font-size: 24px;
+}
+.order_info_room_conten_people_li_select {
+  background: #eb9c4e;
+  color: white;
+}
+.order_info_room_conten_bto {
+  width: 198px;
+  height: 75px;
+  background: #eb9c4e;
+  cursor: pointer;
+  text-align: center;
+  line-height: 75px;
+  color: white;
+  font-size: 27px;
+  border-radius: 6px 6px 6px 6px;
+}
+.order_info_checkin {
+  margin-left: 105px;
+  position: relative;
+}
+.order_info_room_conten_btotios {
+  position: absolute;
+  width: 140px;
+  bottom: -37px;
+  left: 50%;
+  font-size: 20px;
+  color: #666666;
+  transform: translateX(-50%);
+  text-align: center;
+}
+</style>
\ No newline at end of file

src/views/hotels/real/success.vue

+<template>
+  <div class="order">
+    <div class="order_top">
+      <div class="goback">返回上一步</div>
+      <div class="order_title">身份采集成功</div>
+    </div>
+    <div class="collection">
+      <div class="collection_info">
+        <img src="" class="collection_info_head" />
+        <div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">姓名:</div>
+            <div class="collection_info_single_text">网达成</div>
+          </div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">性别:</div>
+            <div class="collection_info_single_text">女</div>
+          </div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">民族:</div>
+            <div class="collection_info_single_text">汉</div>
+          </div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">出生:</div>
+            <div class="collection_info_single_text">1994年10月10日</div>
+          </div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">住址:</div>
+            <div class="collection_info_single_text">
+              广东省广州市黄浦区黄埔大道129号
+            </div>
+          </div>
+          <div class="collection_info_single">
+            <div class="collection_info_single_title">身份证号码:</div>
+            <div class="collection_info_single_text">362421********5627</div>
+          </div>
+        </div>
+      </div>
+      <div class="collection_bto">下一步</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</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;
+  padding-top: 150px;
+  box-sizing: border-box;
+}
+.collection_info {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.collection_info_head {
+  width: 251px;
+  height: 291px;
+  margin-right: 60px;
+}
+.collection_info_single {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+}
+.collection_info_single_title {
+  font-size: 30px;
+  color: #333333;
+  margin-right: 10px;
+}
+.collection_info_single_text {
+  font-size: 30px;
+  color: #666666;
+}
+.collection_bto {
+  width: 198px;
+  height: 75px;
+  background: #eb9c4e;
+  border-radius: 6px 6px 6px 6px;
+  text-align: center;
+  line-height: 75px;
+  cursor: pointer;
+  font-size: 27px;
+  color: white;
+  margin: 50px auto 0;
+}
+</style>
\ No newline at end of file

src/views/hotels/standbuy.vue

+<template>
+  <div class="hotel">
+    <div class="hotel_top">
+      <div class="hotel_left">
+        <img src="" />
+        <div>陆瑞酒店</div>
+      </div>
+      <div class="hotel_right">
+        <div class="hotel_right_date">
+          <div>{{ dayOfWeek }}</div>
+          <div>{{ date }}</div>
+        </div>
+        <div class="hotel_right_l">|</div>
+        <div class="hotel_right_time">{{ time }}</div>
+      </div>
+    </div>
+    <div class="hotel_welcome">
+      <div class="hotel_welcome_tips1">欢迎使用</div>
+      <div class="hotel_welcome_tips2">酒店智能化自助入住系统</div>
+    </div>
+    <div class="hotel_option">
+      <div class="hotel_option_all">
+        <div class="hotel_option_reserve" @click="reserve(1)">
+          <div class="hotel_reser">有预定</div>
+          <div class="hotel_reser_english">Express Check-in</div>
+          <img src="@/assets/hotel/reservation.png" class="hotel_option_icon" />
+        </div>
+        <img src="@/assets/hotel/r.png" class="hotel_option_icon_h" />
+      </div>
+      <div class="hotel_option_all">
+        <div class="hotel_option_noreserve" @click="reserve(0)">
+          <div class="hotel_reser">无预定</div>
+          <div class="hotel_reser_english">No appointment</div>
+          <img
+            src="@/assets/hotel/noreservation.png"
+            class="hotel_option_icon"
+          />
+        </div>
+        <img src="@/assets/hotel/n.png" class="hotel_option_icon_h" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: "", //年月日
+      time: "", //时间
+      dayOfWeek: "", //星期几
+    };
+  },
+
+  created() {
+    this.getDate();
+  },
+
+  methods: {
+    // 获取当前日期
+    getDate() {
+      const now = new Date();
+
+      const year = now.getFullYear();
+      const month = ("0" + (now.getMonth() + 1)).slice(-2);
+      const day = ("0" + now.getDate()).slice(-2);
+      const hours = ("0" + now.getHours()).slice(-2);
+      const minutes = ("0" + now.getMinutes()).slice(-2);
+      const seconds = ("0" + now.getSeconds()).slice(-2);
+
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const dayOfWeek = weekDays[now.getDay()];
+      this.dayOfWeek = dayOfWeek;
+
+      this.date = year + "." + month + "." + day;
+      this.time = hours + ":" + minutes;
+    },
+
+    reserve(type) {
+      this.$root.hotelType = type;
+      this.$router.replace({
+        path: "/hotel/common",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.hotel {
+  width: 100%;
+  padding: 24px 20px;
+  box-sizing: border-box;
+  height: 100%;
+  background: linear-gradient(to bottom, #07122f, #2e246d);
+}
+.hotel_top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.hotel_right {
+  display: flex;
+  color: white;
+  align-items: center;
+}
+.hotel_left {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: white;
+}
+.hotel_right_l {
+  width: 1px;
+  height: 18px;
+  background: #ffffff;
+  opacity: 0.29;
+  margin: 0 16px 0 18px;
+}
+.hotel_right_date {
+  font-size: 13px;
+  font-weight: 400;
+}
+.hotel_right_time {
+  font-size: 30px;
+  font-weight: bold;
+}
+.hotel_welcome {
+  margin-top: 83px;
+}
+.hotel_welcome_tips1 {
+  font-size: 34px;
+  color: white;
+  text-align: center;
+}
+.hotel_welcome_tips2 {
+  font-size: 52px;
+  color: white;
+  font-weight: 400;
+  margin-top: 23px;
+  text-align: center;
+}
+.hotel_option {
+  margin-top: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hotel_option_reserve {
+  width: 260px;
+  height: 342px;
+  background: linear-gradient(to bottom, #6297f6 0%, #2d41f3);
+  border-radius: 10px;
+  padding: 32px 0 0 24px;
+  box-sizing: border-box;
+  margin-right: 100px;
+  position: relative;
+}
+.hotel_option_noreserve {
+  width: 260px;
+  height: 342px;
+  background: linear-gradient(to bottom, #ae5df2 0%, #8a31d9);
+  padding: 32px 0 0 24px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  position: relative;
+}
+.hotel_reser {
+  font-size: 28px;
+  color: white;
+}
+.hotel_reser_english {
+  font-size: 18px;
+  color: white;
+}
+.hotel_option_icon {
+  width: 166px;
+  height: 174px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.hotel_option_icon_h {
+  height: 111px;
+  width: 260px;
+  object-fit: cover;
+}
+</style>
\ No newline at end of file