<!--
 * @Date: 2023-06-21 10:23:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-16 14:09:56
 * @FilePath: /xysBooking/src/views/index.vue
 * @Description: 预约页首页
-->
<template>
  <div class="index-page">
    <div class="index-content">
      <div style="height: 30vh;">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img style="height: 30vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="index-control">
        <div class="booking" @click="toBooking">
          <van-icon size="1.5rem" color="#FFFFFF" name="https://cdn.ipadbiz.cn/xys/booking/%E7%AB%8B%E5%8D%B3%E9%A2%84%E7%BA%A6@2x.png" />
          &nbsp;立即预约
        </div>
        <div class="record" @click="toRecord">
          <van-icon size="1.5rem" color="#A67939" name="https://cdn.ipadbiz.cn/xys/booking/%E9%A2%84%E7%BA%A6%E8%AE%B0%E5%BD%95@2x.png" />
          &nbsp;预约记录
        </div>
      </div>
      <div class="logo"></div>
    </div>
    <div class="index-nav">
      <div class="nav-logo">
        <van-icon size="1.5rem" name="https://cdn.ipadbiz.cn/xys/booking/%E9%A6%96%E9%A1%B502@2x.png" color="#A67939" />
        首页
      </div>
      <div class="nav-logo" @click="toCode">
        <van-icon size="5rem" name="https://cdn.ipadbiz.cn/xys/booking/%E4%BA%8C%E7%BB%B4%E7%A0%81@2x%20(1).png" 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="https://cdn.ipadbiz.cn/xys/booking/%E6%88%91%E7%9A%8401@2x.png" color="#A67939" />
        我的
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { showSuccessToast, showFailToast } from 'vant';
import { useGo } from '@/hooks/useGo'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const go = useGo();

const toBooking = () => {
  go('/notice');
}
const toRecord = () => {
  go('/bookingList');
}
const toCode = () => {
  go('/bookingCode');
}
const toMy = () => {
  go('/me');
}

onMounted(async () => {
});

</script>

<style lang="less" scoped>
.index-page {
  position: relative;
  height: 100vh;
  background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  .index-content {
    height: 90vh;
    .index-control {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 10vh;
      // font-weight: bold;
      font-size: 1.15rem;
      .booking {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #A67939;
        border-radius: 7px;
        color: #FFFFFF;
        padding: 0.7rem 4rem;
        border: 1px solid #A67939;
      }
      .record {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #A67939;
        border-radius: 7px;
        padding: 0.7rem 4rem;
        border: 1px solid #A67939;
        margin-top: 1.5rem;
      }
    }
    .logo {
      position: absolute;
      right: 0;
      bottom: calc(15vh);
      height: 30vh;
      width: 20vw;
      background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  .my-swipe {
    height: 30vh;
    .van-swipe-item {
      height: 30vh;
      width: 100vw;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .index-nav {
    position: absolute;
    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>