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

<template>
  <div class="home-page">
    <section
      class="company-overview"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <div class="hero-section">
        <transition name="fade-up" appear>
          <n-h1 class="hero-title">
            <div
              class="content-blocks"
              :class="{ 'slide-in': isInView }"
              ref="contentRef"
            >
              <text>{{ $t("HOME.CONTAIN.TITLEONE.CONTENT") }}</text>
              <p>{{ $t("HOME.CONTAIN.TITLEONE.CONTENTTWO") }}</p>
            </div>
          </n-h1>
        </transition>
      </div>
    </section>

    <!-- 公司概况 -->
    <section
      class="company-overview"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h1 class="section-titles">Company profile</h1>
      <h2 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h2>
      <div class="content-block">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>
          <text style="color: #895bff">{{
            $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
          }}</text>

          {{ $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-titles">
        {{ $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-titles">
        {{ $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="news-section"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
      <div class="news-card">
        <!-- <div class="news-date">De 15. 2023</div> -->
        <!-- <h3 class="news-title">{{ $t("HOME.CONTAINY.NEWS.LATEST_TITLE") }}</h3> -->
        <p class="news-excerpt">
          {{ $t("HOME.CONTAINY.NEWS.TITLETWO") }}
        </p>
        <p class="news-excerpt">
          {{ $t("HOME.CONTAINY.NEWS.TITLETHTEE") }}
        </p>
        <p class="news-excerpt">
          {{ $t("HOME.CONTAINY.NEWS.CONTENTTHREE") }}
        </p>
        <p class="news-excerpt">
          {{ $t("HOME.CONTAINY.NEWS.CONTENTFOUR") }}
        </p>
        <p class="news-excerpt">
          {{ $t("HOME.CONTAINY.NEWS.CONTENTFIVE") }}
        </p>
        <!-- <a href="#" class="news-link"
          >{{ $t("HOME.CONTAINY.NEWS.READ_MORE") }} →</a
        > -->
      </div>
    </section>
    <!-- 新增：股票信息与活动预告双栏模块 -->
    <section
      class="dual-column-section"
      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
    >
      <div class="grid-container">
        <!-- 股票信息卡片 -->
        <div class="info-card stock-card">
          <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
          <div class="stock-data">
            <div class="data-row">
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
              }}</span>
              <span class="data-value">${{ stockQuote.Open }}</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
              }}</span>
              <span class="data-value positive"
                >{{ stockQuote.change[0] }}{{ stockQuote.change[1] }}</span
              >
            </div>
            <div class="data-row">
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
              }}</span>
              <span class="data-value">NASDAQ: MINM</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
              }}</span>
              <span class="data-value">{{ stockQuote.Volume }}</span>
            </div>
            <div class="data-row">
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
              }}</span>
              <span class="data-value">${{ stockQuote.MarketCap }}</span>
            </div>
          </div>
        </div>

        <!-- 活动预告卡片 -->
        <div class="info-card events-card">
          <h2 class="card-title">
            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
          </h2>
          <div class="event-item">
            <!-- <h3 class="event-name">
              {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
            </h3> -->
            <!-- <div class="event-detail">
              <div class="detail-row">
                <i class="icon-calendar"></i>
                <span
                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
                  2025年8月12日(二)-2025年8月14日</span
                >
              </div>
              <div class="detail-row">
                <i class="icon-location"></i>
                <span
                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
                  6号馆B厅</span
                >
              </div>
              <div class="detail-row">
                <i class="icon-area"></i>
                <span
                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
                  约10,000m²</span
                >
              </div>
              <div class="detail-row">
                <i class="icon-booth"></i>
                <span
                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
                  约500个标准展位</span
                >
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
const dataObj = ref({
  change: ["0.2", "1111"],
});
import { useStockQuote } from "@/store/stock-quote/index.js";
const { getStockQuate, stockQuote } = useStockQuote();

getStockQuate();

const { t: $t } = useI18n();
const contentRef = ref(null);
const isInView = ref(false);
let observer = null;

onMounted(() => {
  if (contentRef.value && "IntersectionObserver" in window) {
    observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            isInView.value = true;
            // 可选：只触发一次动画
            // observer.unobserve(entry.target);
          }
        });
      },
      {
        root: null,
        threshold: 0.1, // 元素进入视口10%时触发
        rootMargin: "0px 0px -50px 0px", // 提前50px触发
      }
    );

    observer.observe(contentRef.value);
  } else {
    // 回退方案：如果不支持IntersectionObserver则直接显示
    isInView.value = true;
  }
});

onUnmounted(() => {
  if (observer) {
    observer.disconnect();
  }
});
</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;
}
/* 顶部大图区域 */
.hero-section {
  background: linear-gradient(135deg, #1a2a6c, #895bff, #fdbb2d);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: white;
  padding: 40px 20px;
  text-align: left;
  margin-bottom: 60px;
  border-radius: 8px;
}
/* 动画 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.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: 1.125rem; /* 18px */
  margin-bottom: 30px;
  color: #895bff;
}
.section-titles {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: black;
}

.content-block {
  font-size: 1.1rem;
  line-height: 1.8;
}
.content-blocks {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;

  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.content-blocks.slide-in {
  opacity: 1;
  transform: translateX(0);
}
.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 #895bff;
  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;
}
/* 新增样式 */
.dual-column-section {
  margin-bottom: 80px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #333;
  position: relative;
  padding-bottom: 10px;
}

.card-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #121212, #232330);
}

/* 股票信息卡片样式 */
.stock-card {
  border-top: 4px solid #895bff;
}

.stock-data {
  margin-bottom: 25px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.data-label {
  color: #666;
  font-weight: 500;
}

.data-value {
  font-weight: 600;
}

.positive {
  color: #895bff;
}

.stock-chart-placeholder {
  height: 200px;
  background: #f8fafc;
  border-radius: 8px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.chart-mock {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(90deg, #e0e7ff, #c7d2fe);
  border-radius: 0 0 8px 8px;
}

/* 活动预告卡片样式 */
.events-card {
  border-top: 4px solid #10b981;
}

.event-item {
  margin-bottom: 20px;
}

.event-name {
  font-size: 1.4rem;
  color: #333;
  margin-bottom: 15px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #555;
}

.detail-row i {
  margin-right: 10px;
  color: #895bff;
  font-size: 1.2rem;
}

.event-button {
  background: linear-gradient(135deg, #895bff, #6a11cb);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.event-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(137, 91, 255, 0.3);
}

/* 新闻模块样式 */
.news-section {
  margin-bottom: 80px;
}

.news-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #895bff;
}

.news-date {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.news-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

.news-excerpt {
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
}

.news-link {
  color: #895bff;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.news-link:hover {
  text-decoration: underline;
}

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

  .hero-banner {
    height: 400px;
  }

  .main-title {
    font-size: 2.5rem;
  }
}
</style>