prodio/web/layouts/default.vue

<script setup>
const router = useRouter()
import logoImg from '@/assets/img/logo.png';
import dotCircleImg from '@/assets/img/dotCircle.png';
import useStore from '@/store';
const { locale } = useI18n()
const store = useStore();

const { config } = storeToRefs(store);

const cateData = ref(null);

const { data: cateRes } = await useMyFetch('/index/getCateList', "GET")

</script>

<template>
  <header class="header">
    <nav class="navbar navbar-expand-md">
      <div class="container">
        <a class="navbar-brand" href="javascript:;">
          <div class="logo" @click="router.push(localeLocation('/'))">
            <img :src="logoImg" alt="prodio">
          </div>
          <p>since 2002</p>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
          aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa-solid fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <div class="nav-link">{{ $t('aboutus') }}</div>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="javascript:;" @click="router.push(localeLocation('/about/company'))">{{
                  $t('about.company') }}</a></li>
                <li><a class="dropdown-item" href="javascript:;" @click="router.push(localeLocation('/about/concept'))">{{
                  $t('about.concept') }}</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <div class="nav-link" data-toggle="dropdown" data-submenu>{{ $t('products') }}</div>
              <div class="dropdown-menu">
                <template v-for="(item, index) in cateRes.data" :key="index">
                  <div class="dropdown dropright dropdown-submenu" v-if="item.children.length > 0">
                    <button class="dropdown-item dropdown-toggle" type="button">{{ item.name }}</button>
                    <div class="dropdown-menu">
                      <NuxtLinkLocale class="dropdown-item" v-for="(clip, i) in item.children"
                        :key="i" :to="'/products/list/'+clip.id">{{ clip.name }}
                      </NuxtLinkLocale>
                    </div>
                  </div>
                  <a class="dropdown-item" href="javascript:;" v-else>{{ item.name }}</a>
                </template>
              </div>
            </li>
            <li class="nav-item">
              <div class="nav-link">{{ $t('news') }}</div>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item"
                    @click="router.push(localeLocation('/social/news'))">{{ $t('Social.news') }}</a></li>
                <li><a class="dropdown-item"
                    @click="router.push(localeLocation('/social/activity'))">{{ $t('Social.activity') }}</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <div class="nav-link">{{ $t('contact') }}</div>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="javascript:;"
                    @click="router.push(localeLocation('/contact/form'))">{{ $t('Contact.form') }}</a></li>
                <li><a class="dropdown-item" href="javascript:;"
                    @click="router.push(localeLocation('/contact/company'))">{{ $t('Contact.branch') }}</a></li>
              </ul>
            </li>
          </ul>
          <div class="landBtnGroup btn-group">
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'tw' }" :to="switchLocalePath('tw')">繁</NuxtLink>
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'cn' }" :to="switchLocalePath('cn')">简</NuxtLink>
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'en' }" :to="switchLocalePath('en')">EN</NuxtLink>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <slot></slot>
  <footer class="footer">
    <div class="container">
      <div class="dotCircle left"><img :src="dotCircleImg" alt=""></div>
      <div class="dotCircle right"><img :src="dotCircleImg" alt=""></div>
      <div class="row gx-lg-5 justify-content-between mb-5">
        <div class="col-12 col-lg-auto">
          <a class="logoGroup" href="javascript:;" @click="router.push(localeLocation('/'))">
            <div class="logo"><img :src="logoImg" alt=""></div>
            <p>since 2002</p>
          </a>
          <!-- <div class="share_link">
              <a href="#"><div class="item fb"><i class="fa-brands fa-facebook-f"></i></div></a>
              <a href="#"><div class="item line"><i class="fa-brands fa-line"></i></div></a>
              <a href="#"><div class="item ins"><i class="fa-brands fa-instagram"></i></div></a>
            </div>					 -->
        </div>
        <div class="col-12 col-lg-auto">
          <div class="row gx-lg-5">
            <div class="col-12 col-lg-auto">
              <div class="fTitle">Service</div>
              <div class="site_link">
                <a href="javascript:;" @click="router.push(localeLocation('/about/company'))">{{ $t('aboutus') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/products'))">{{ $t('products') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/social/news'))">{{ $t('news') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/contact/form'))">{{ $t('contact') }}</a>
              </div>
            </div>
            <div class="col-12 col-lg">
              <div class="fTitle">Company</div>
              <div class="info_link">
                <a target="_blank" :href="'https://www.google.com.tw/maps/place/' + config[locale].address"
                  v-if="config[locale].address">
                  <i class="fa-solid fa-map-location-dot"></i>
                  <div class="text">{{ config[locale].address }}</div>
                </a>
                <a :href="'mailto: ' + config[locale].email" v-if="config[locale].email">
                  <i class="fa-solid fa-envelope"></i>
                  <div class="text">{{ config[locale].email }}</div>
                </a>
                <div class="d-flex">
                  <a :href="'tel: ' + config[locale].tel" class="me-4" v-if="config[locale].tel">
                    <i class="fa-solid fa-phone"></i>
                    <div class="text">{{ config[locale].tel }}</div>
                  </a>
                  <a :href="'fax:' + config[locale].fax" v-if="config[locale].fax">
                    <i class="fa-solid fa-fax"></i>
                    <div class="text">{{ config[locale].fax }}</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-auto p-0">
          <div class="topBtn" @click="toTopClick">
            <i class="fa-solid fa-angles-up"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">{{ $t('copyright') }}</div>
  </footer>
</template>