导航显示样式优化

 <!--
 <!--
  * @Date: 2024-01-16 10:06:47
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 11:27:36
+ * @LastEditTime: 2024-01-25 10:56:14
  * @FilePath: /xysBooking/src/views/bookingCode.vue
  * @FilePath: /xysBooking/src/views/bookingCode.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
 <template>
 <template>
   <div class="booking-code-page">
   <div class="booking-code-page">
+    <div style="padding: 1rem;">
       <qrCode></qrCode>
       <qrCode></qrCode>
       <div class="warning">
       <div class="warning">
         <p><van-icon name="warning-o" />&nbsp;温馨提示</p>
         <p><van-icon name="warning-o" />&nbsp;温馨提示</p>
         <p>一人一码，扫码或识别身份证成功后进入</p>
         <p>一人一码，扫码或识别身份证成功后进入</p>
+        <div style="height: 8rem;"></div>
+      </div>
+    </div>
+    <div class="index-nav">
+      <div class="nav-logo" @click="toHome">
+        <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
+        首页
+      </div>
+      <div class="nav-logo">
+        <van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
+        <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
+        预约码
+      </div>
+      <div class="nav-logo" @click="toMy">
+        <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
+        我的
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -23,19 +41,62 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 //import { } from '@/composables'
 import qrCode from '@/components/qrCode';
 import qrCode from '@/components/qrCode';
+import icon_1 from '@/assets/images/立即预约@2x.png'
+import icon_2 from '@/assets/images/预约记录@2x.png'
+import icon_3 from '@/assets/images/首页01@2x.png'
+import icon_4 from '@/assets/images/二维码icon.png'
+import icon_5 from '@/assets/images/我的01@2x.png'
+import { useGo } from '@/hooks/useGo'
+const go = useGo();
 const $route = useRoute();
 const $route = useRoute();
 const $router = useRouter();
 const $router = useRouter();
 useTitle($route.meta.title);
 useTitle($route.meta.title);
 
 
+const toBooking = () => { // 跳转到预约须知
+  go('/notice');
+}
+const toRecord = () => { // 跳转到预约记录
+  go('/bookingList');
+}
+const toMy = () => { // 跳转到我的
+  go('/me');
+}
+const toHome = () => { // 跳转到我的
+  go('/');
+}
+
+onMounted(() => {
+})
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .booking-code-page {
 .booking-code-page {
-  padding: 1rem;
+  position: relative;
+  height: 100vh;
 
 
   .warning {
   .warning {
     text-align: center;
     text-align: center;
     color: #A67939;
     color: #A67939;
   }
   }
+
+  .index-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    height: 10vh;
+    background: #FFFFFF;
+    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    color: #A67939;
+    .nav-logo {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
 }
 }
 </style>
 </style>

 <!--
 <!--
  * @Date: 2024-01-16 13:33:36
  * @Date: 2024-01-16 13:33:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-25 10:10:41
+ * @LastEditTime: 2024-01-25 10:53:23
  * @FilePath: /xysBooking/src/views/me.vue
  * @FilePath: /xysBooking/src/views/me.vue
  * @Description: 我的页面
  * @Description: 我的页面
 -->
 -->