fiee-official-website/src/views/myHome/size375/index.vue

<template>
  <div class="home-page">
    <!-- 顶部背景图 Banner -->
    <div class="hero-banner">
      <div class="banner-content">
        <h1 class="main-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h1>
        <p class="sub-title">
          NASDAQ: MINM | {{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}
        </p>
        <!-- <p class="sub-title" style="">
          {{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}
        </p> -->
      </div>
    </div>
    <section
      class="company-overview"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h2 class="section-title">{{ $t("HOME.CONTAIN.TITLEONE.TITLE") }}</h2>
      <div class="content-block">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</p>
        <p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
      </div>
    </section>

    <!-- 公司概况 -->
    <section
      class="company-overview"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
      <div class="content-block">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
      </div>
    </section>

    <!-- 使命与愿景 -->
    <section
      class="mission-vision"
      style="
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 40px;
        background: #f8fafc;
      "
    >
      <h2 class="section-title">
        {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
      </h2>
      <div class="mission-content">
        <ul>
          <li>
            {{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENT").replace("•", "") }}
          </li>
          <li>
            {{ $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO").replace("•", "") }}
          </li>
        </ul>
      </div>
    </section>

    <!-- 企业里程碑 -->
    <section
      class="milestones"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}</h2>

      <div class="milestone-item">
        <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING") }}</h3>
        <ul>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.ONE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraph.TWO") }}</li>
        </ul>
      </div>

      <div class="milestone-item">
        <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO") }}</h3>
        <ul>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.ONE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTwo.TWO") }}</li>
        </ul>
      </div>

      <div class="milestone-item">
        <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE") }}</h3>
        <ul>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.ONE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphTHREE.TWO") }}</li>
        </ul>
      </div>

      <div class="milestone-item">
        <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF") }}</h3>
        <ul>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.ONE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFOUR.TWO") }}</li>
        </ul>
      </div>

      <div class="milestone-item">
        <h3>{{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE") }}</h3>
        <ul>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.ONE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.TWO") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.THREE") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FOUR") }}</li>
          <li>{{ $t("COMPANYOVERVIEW.TITLEFOUR.paragraphFIVE.FIVE") }}</li>
        </ul>
      </div>
    </section>

    <!-- 突出成就 -->
    <section
      class="achievements"
      style="
        max-width: 1200px;
        margin: 60px auto;
        padding: 0 40px;
        background: #f8fafc;
      "
    >
      <h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}</h2>
      <p>{{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}</p>
    </section>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
</script>

<style scoped>
.home-page {
  background-image: url("@/assets/image/bg.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-banner {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  text-align: center;
  color: white;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.main-title {
  font-size: 3.5rem;
  margin-bottom: 20px;
}

.sub-title {
  font-size: 1.5rem;
}

.section-card {
  padding: 40px;
  border-radius: 12px;
}

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

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

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

.mission-content ul {
  list-style: disc;
  padding-left: 20px;
  font-size: 1.1rem;
}

.milestones {
  font-size: 1.1rem;
}

.milestone-item {
  margin-bottom: 40px;
  padding: 20px;
  border-left: 3px solid #ddf6e0;
  background: #f8fafc;
}

.milestone-item h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #895bff;
}

.milestone-item ul {
  list-style: none;
  padding-left: 0;
}

.milestone-item li {
  margin-bottom: 10px;
}

.achievements {
  padding: 40px;
  border-radius: 12px;
}
</style>