fiee-official-website/src/views/footerLinks/siteMap/size375/index.vue

<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from 'naive-ui'
import { onUnmounted, ref, watch, onMounted, computed } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<template>
  <div class="site-map">
    <section class="site-map-intro" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h1 class="section-titles">FiEE, Inc. Sitemap</h1>
      <div class="content-block">
        <p class="intro-text">
          Browse the links below for pages that make up the FiEE, Inc. website.
        </p>
      </div>
    </section>

    <section class="site-map-corporate" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h3 class="section-title">Corporate Information</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push('/companyoverview')">Company Overview</li>
          <li @click="router.push('/businessservices')">Business Introduction</li>
          <li @click="router.push('/manage')">Management</li>
          <li @click="router.push('/boarddirectors')">Board of Directors</li>
          <li @click="router.push('/committeeappointment')">Committee Appointments</li>
          <li @click="router.push('/govern')">Governance</li>
        </ul>
      </div>
    </section>

    <section class="site-map-financial" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h3 class="section-title">Financial Information</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push('/secfilings')">SEC Filings</li>
          <li @click="router.push('/annualreports')">Annual Reports</li>
          <li @click="router.push('/quarterlyreports')">Quarterly Reports</li>
        </ul>
      </div>
    </section>

    <section class="site-map-stock" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h3 class="section-title">Stock Information</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push('/stock-quote')">Stock Quote</li>
          <li @click="router.push('/historic-stock')">Historic Stock Price</li>
        </ul>
      </div>
    </section>

    <section class="site-map-news" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h3 class="section-title">News Releases</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push('/press-releases')">Press Releases</li>
          <li @click="router.push('/events-calendar')">Events Calendar</li>
        </ul>
      </div>
    </section>

    <section class="site-map-investor" style="max-width: 1200px; margin: 30px auto; padding: 0 15px">
      <h3 class="section-title">Investor Resources</h3>
      <div class="content-block">
        <ul class="link-list">
          <li @click="router.push('/contacts')">IR Contacts</li>
          <li @click="router.push('/email-alerts')">Email Alerts</li>
        </ul>
      </div>
    </section>
  </div>
</template>

<style scoped>
.site-map {
  background-image: url("@/assets/image/bg-mobile.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.section-titles {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: black;
}

.section-title {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #895bff;
}

.content-block {
  font-size: 0.9rem;
  line-height: 1.5;
}

.intro-text {
  font-size: 1rem;
  margin-bottom: 12px;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 0.3s ease;
  text-decoration: underline;
  text-decoration-color: rgba(137, 91, 255, 0.5);
  text-underline-offset: 4px;
}

.link-list li:hover {
  color: #895bff;
  text-decoration-color: #895bff;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .section-titles {
    font-size: 1.6rem;
  }

  .section-title {
    font-size: 1.1rem;
  }

  .content-block {
    font-size: 0.85rem;
  }

  .intro-text {
    font-size: 0.9rem;
  }
}
</style>