预约成功页

src/components/BookingSuccess.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="booking-success">
+    <article>
+      <h1>芜湖方特</h1>
+      <div class="tip-1">预约成功</div>
+      <div class="time-summary">
+        <span class="key">预约时间：</span>
+        <span class="value">2022-05-04 17:22:35</span>
+      </div>
+      <div class="line">
+        <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
+        <div class="text">
+          <span class="key">预约日期：</span>
+          <span class="value">2022-05-04 周六</span>
+          </div>
+      </div>
+      <div class="line">
+        <img class="icon" src="@/assets/img/service/time.png" alt="" draggable="false">
+        <div class="text">
+          <span class="key">预约时段：</span>
+          <span class="value">10:00-11:00</span>
+        </div>
+      </div>
+      <div class="line">
+        <img class="icon" src="@/assets/img/service/people.png" alt="" draggable="false">
+        <div class="text">
+          <span class="key">参观人数：</span>
+          <span class="value">1人</span>
+        </div>
+      </div>
+      <div class="tip-2">
+        请您在规定日期时间段内进行参观
+      </div>
+    </article>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.booking-success {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  .line {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 6vw;
+    .icon {
+      width: 4.3vw;
+      height: 4.3vw;
+      margin-right: 2.4vw;
+    }
+    .key {
+      font-size: 3.2vw;
+      font-weight: bold;
+      color: #222222;
+    }
+    .value {
+      font-size: 3.2vw;
+      color: #222222;
+    }
+  }
+  > article {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 81.9vw;
+    height: 125.4vw;
+    background-image: url(~@/assets/img/service/booking-result-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding-left: 5vw;
+    padding-right: 5vw;
+    > h1 {
+      font-size: 8vw;
+      font-weight: bold;
+      color: #FFFFFF;
+      margin-top: 15vw;
+      text-align: center;
+    }
+    > .tip-1 {
+      margin-top: 20vw;
+      font-size: 6.4vw;
+      font-weight: bold;
+      color: #733634;
+    }
+    > .time-summary {
+      margin-top: 3.3vw;
+      margin-bottom: 9vw;
+    }
+    > .tip-2 {
+      position: absolute;
+      bottom: 12vw;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: pre;
+      font-size: 3.2vw;
+      color: #222222;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -105,7 +105,7 @@ const routes = [{
           myInd: 2,
           myTitle: '建筑可游玩',
         },
-        component: () => import('../views/Serve/index.vue')
+        component: () => import('../components/BookingSuccess.vue')
       },
       {
         path: '/layout/serve/recommended-path',