labsop_h5/src/layout/animal.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-13 09:07:55
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-20 16:38:29
 * @FilePath: \labsop-h5\src\layout\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <router-view></router-view>
  <van-tabbar route :placeholder="true" v-if="route.path !== '/entry/add'">
    <van-tabbar-item replace to="/animal-application" icon="send-gift-o">笼位申请</van-tabbar-item>
    <van-tabbar-item replace to="/animal-return" icon="send-gift-o">笼位退还</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
  import to from 'await-to-js'
  import { showDialog } from 'vant'
  import { ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useUserInfo } from '/@/stores/userInfo'
  import { Local } from '/@/utils/storage'

  const active = ref(0)
  const router = useRouter()
  const route = useRoute()

  const onRouterPush = (val: string) => {
    router.push(val)
  }
  const scan = async () => {
    const res = await useUserInfo().scanCode()
    if (res) {
      window.location.href = res as string
    }
  }
</script>

<style lang="scss" scoped>
  .footer-nav {
    height: 60px;
    font-weight: bold;
    ul {
      height: 60px;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        &.center-icon {
          height: 60px;
          flex: 0 0 60px;
          padding: 10px;
          align-self: flex-end;
          i {
            padding: 10px;
            background: #1d66dc;
            border-radius: 50%;
          }
        }
        img {
          height: 24px;
          width: 24px;
        }
        .img-container {
          padding: 6px;
          height: 24px;
          width: 24px;
          background-color: #419fe5;
          border-radius: 50%;
          overflow: visible;
        }
        &.service .img-container {
          background-color: #f59969;
        }
        &.todo .img-container {
          background-color: #20b5ae;
        }
        &.user .img-container {
          background-color: #595cac;
        }
      }
    }
  }
</style>