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

<template>
  <div class="site-map">
    <section
      class="site-map-intro"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <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: 60px auto; padding: 0 40px"
    >
      <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: 60px auto; padding: 0 40px"
    >
      <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: 60px auto; padding: 0 40px"
    >
      <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: 60px auto; padding: 0 40px"
    >
      <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: 60px auto; padding: 0 40px"
    >
      <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>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style scoped>
.site-map {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

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

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

.content-block {
  font-size: 1.1rem;
  line-height: 1.8;
}

.intro-text {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

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

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

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

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

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

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

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

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