<template>
  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
    <div
      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-0"
      style="width: 920px; pointer-events: none; mix-blend-mode: multiply"
    >
      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
    </div>
    <div class="w-[100%] h-[916px] z-[] top-0 absolute">
      <div class="relative w-[100%] h-[100%]">
        <img
          src="@/assets/image/content/bg_1.png"
          alt=""
          class="w-[100vw] absolute top-[-90px]"
        />
        <img
          src="@/assets/image/content/bg_2.png"
          alt=""
          class="w-[100vw] absolute bottom-0 lef-0 right-0 z-99"
        />
      </div>
    </div>
    <section
      class="company-overview h-[916px]"
      style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
    >
      <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: 900px; margin: 0 auto; padding: 0"
    >
      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
      <h1 class="section-titles">{{ $t("COMPANYOVERVIEW.Company") }}</h1>
      <div class="content-block text-[#455363]">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>
          <text class="text-[#455363]">{{
            $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
          }}</text>

          {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}
        </p>
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
      </div>

      <div class="flex justify-between w-[100%]">
        <img
          src="@/assets/image/content/profile_1.png"
          alt=""
          class="w-[201px] h-[201px]"
        />
        <img
          src="@/assets/image/content/profile_2.png"
          alt=""
          class="w-[201px] h-[201px]"
        />
        <img
          src="@/assets/image/content/profile_3.png"
          alt=""
          class="w-[201px] h-[201px]"
        />
        <img
          src="@/assets/image/content/profile_4.png"
          alt=""
          class="w-[201px] h-[201px]"
        />
      </div>
    </section>
    <!-- 突出成就 -->
    <section
      class="achievements overflow-hidden z-99 relative"
      style="
        width: 100vw;
        padding: 0 40px;
        margin-top: 40px;
        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
      "
    >
      <div
        style="height: 190px; width: 900px"
        class="m-[auto] my-[64px] flex flex-col items-center text-center"
      >
        <h2 class="section-titles">
          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
        </h2>
        <div class="w-100% flex items-center justify-between">
          <div class="flex items-center">
            <div
              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center mr-[8px]"
            >
              <img
                src="@/assets/image/content/left.png"
                alt=""
                class="w-[94px] h-[94px]"
              />
            </div>
            <img
              src="@/assets/image/content/arrowhead_left.png"
              alt=""
              class="w-[95px]"
            />
          </div>
          <p
            style="font-size: 13.5px; width: 439px"
            class="my-0 text-[#455363]"
          >
            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
          </p>
          <div class="flex items-center">
            <img
              src="@/assets/image/content/arrowhead_right.png"
              alt=""
              class="w-[95px]"
            />
            <div
              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center ml-[8px]"
            >
              <img
                src="@/assets/image/content/right.png"
                alt=""
                class="w-[94px] h-[94px]"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 新闻模块 -->
    <section
      class="news-section relative z-99"
      style="width: 900px; margin: 60px auto"
    >
      <div class="flex justify-between">
        <h2 class="section-titles section-titles1">
          {{ $t("HOME.CONTAINY.NEWS.TITLE") }}
        </h2>
        <div v-if="totalPages > 1">
          <!-- 左右切换按钮 -->
          <img
            v-if="currentPage === 0"
            disabled
            class="w-[38px] h-[38px]"
            src="@/assets/image/content/switch_right.png"
            alt=""
          />
          <img
            v-else
            @click="prevPage"
            src="@/assets/image/content/switch_left.png"
            class="transform rotate-180 w-[38px] h-[38px] cursor-pointer"
            alt=""
          />

          <img
            v-if="currentPage >= totalPages - 1"
            class="transform rotate-180 w-[38px] h-[38px] ml-[20px]"
            disabled
            src="@/assets/image/content/switch_right.png"
            alt=""
          />
          <img
            v-else
            @click="nextPage"
            class="w-[38px] h-[38px] ml-[20px] cursor-pointer"
            src="@/assets/image/content/switch_left.png"
            alt=""
          />
        </div>
      </div>

      <!-- <div class="grid grid-cols-2 gap-[15px]">
        <template v-for="(item, index) in newList" :key="index">
          <div
            class="h-[246px] news-card flex flex-col justify-between"
            :class="{ 'col-span-2': index === 4 }"
          >
            <div class="text-[24px] font-600">{{ item.time }}</div>
            <n-tooltip
              trigger="hover"
              :disabled="!item.showTooltip"
              width="trigger"
            >
              <template #trigger>
                <div
                  :ref="(el) => setTitleRef(el, index)"
                  style="
                    word-break: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  "
                  class="text-[16px] text-[#455363]"
                >
                  {{ item.title }}
                </div>
              </template>
              <div slot="content" class="text-[16px] text-[#455363]">
                {{ item.title }}
              </div>
            </n-tooltip>
            <div
              class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
              @click="handleLink(item)"
            >
              View Press Release
              <img
                src="@/assets/image/content/vector.png"
                alt=""
                class="ml-[10px] w-[6.5px] h-[13px]"
              />
            </div>
          </div>
        </template>
      </div> -->

      <!-- Grid 布局容器 -->
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2 grid grid-cols-2 gap-4">
          <template v-for="(item, index) in pages" :key="index">
            <div
              class="h-[246px] news-card flex flex-col justify-between"
              :class="{
                'col-span-2':
                  pages.length % 2 !== 0 && index === pages.length - 1,
              }"
            >
              <div class="text-[24px] font-600">
                {{
                  locale === "zh" || locale === "zh-TW"
                    ? dayjs(item.date).format("YYYY年M月D日")
                    : dayjs(item.date).format("MMMM D, YYYY")
                }}
              </div>
              <n-tooltip
                trigger="hover"
                :disabled="!item.showTooltip"
                width="trigger"
              >
                <template #trigger>
                  <div
                    :ref="(el) => setTitleRef(el, index)"
                    style="
                      word-break: break-word;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    class="text-[16px] text-[#455363]"
                  >
                    {{ item.title }}
                  </div>
                </template>
                <div slot="content" class="text-[16px] text-[#455363]">
                  {{ item.title }}
                </div>
              </n-tooltip>
              <div
                class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
                @click="handleLink(item)"
              >
                {{ $t("operation.value") }}
                <img
                  src="@/assets/image/content/vector.png"
                  alt=""
                  class="ml-[10px] w-[6.5px] h-[13px]"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </section>
    <!-- 新增：股票信息与活动预告双栏模块 -->
    <section
      class="dual-column-section bg-[url('@/assets/image/content/bg_stock1940.png')] relative z-10"
      style="
        width: 100vw;
        height: 643px;
        margin: 60px auto;
        padding: 0 40px;
        background-size: 100% 100%;
      "
    >
      <div style="width: 900px" class="w-[900px] m-auto">
        <!-- 股票信息卡片 -->
        <div class="">
          <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
          <div class="stock-data">
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">
                {{ $t("HOME.CONTAINY.STOCK_INFO.TIME") }}
              </span>
              <span class="data-value">{{ date }}</span>
            </div>
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
              }}</span>
              <span class="data-value">${{ stockQuote.price }}</span>
            </div>
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
              }}</span>

              <span class="data-value">{{ stockQuote.change || "--" }}</span>
            </div>
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
              }}</span>
              <span class="data-value">NASDAQ: FIEE</span>
            </div>
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
              }}</span>
              <span class="data-value">{{ stockQuote.volume }}</span>
            </div>
            <div
              class="data-row"
              style="transform: translateX(-10px); padding-left: 10px"
            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
              }}</span>
              <span class="data-value">${{ stockQuote.marketCap }}</span>
            </div>
          </div>
        </div>

        <!-- 活动预告卡片 -->
        <!-- <div class="">
          <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>
    <section
      class="dual-column-section relative z-10"
      style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
    >
      <div class="w-[900PX] m-auto">
        <div class="">
          <h2 class="card-title1">
            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
          </h2>
          <div class="event-item">
            <img
              src="@/assets/image/content/empty.png"
              alt=""
              class="w-[100%] h-[540px]"
            />
            <!-- <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, computed, nextTick, watch } from "vue";
import { NTooltip } from "naive-ui";
import { useI18n } from "vue-i18n";
import { useStockQuote } from "@/store/stock-quote/index.js";
import axios from "axios";
import dayjs from "dayjs";

const { getStockQuate, stockQuote, formatted } = useStockQuote();
const date = computed(() => {
  return ["zh", "zh-TW"].includes(locale.value)
    ? dayjs(formatted.value).format("YYYY年MM月DD日") + " 16:00"
    : formatted.value;
});

// 每页显示的项目数 - 最多三行，每行最多2个项目，所以每页最多6个项目
const itemsPerPage = 6;

// 当前页码
const currentPage = ref(0);

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(newList.value.length / itemsPerPage);
});

// 将数据分页，最多返回6个项目
const pages = computed(() => {
  // 使用slice确保只处理前6个项目
  const limitedItems = newList.value.slice(
    currentPage.value * itemsPerPage,
    (currentPage.value + 1) * itemsPerPage,
  );
  return limitedItems;
});

// 切换到上一页
const prevPage = () => {
  if (currentPage.value > 0) {
    currentPage.value--;
  }
};

// 切换到下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value - 1) {
    currentPage.value++;
  }
};

getStockQuate();
// 示例数据
const sampleDate = ref(formatted);

const newList = ref([
  // {
  //   time: "June 3, 2025",
  //   title: "FiEE, Inc. seized market opportunities through 2025 Osaka Expo",
  //   router: "/news",
  // },
  // {
  //   time: "June 2, 2025",
  //   title: "FiEE, Inc. Closes Its First Day of Trading on NASDAQ",
  //   router: "/news",
  // },
]);

const map = {
  en: "enUS",
  ja: "jaJP",
  zh: "zhCN",
  "zh-TW": "zhTW",
};

// 获取新闻发布(展示在首页的)
const getPressReleasesDisplay = () => {
  let url = `${import.meta.env.VITE_API_BASE_URL}/fiee/pressreleases/display`;
  let params = {
    page: 1,
    pageSize: 10,
    display: 2, // 1: 不展示在首页 2: 展示在首页
    langType: map[locale.value],
  };
  // console.log(params)
  axios.post(url, params).then((res) => {
    // console.log(res)
    if (res.status === 200) {
      if (res.data.status === 0) {
        res.data.data?.data?.forEach((item) => {
          item.time = new Date(item.date).toLocaleDateString("en-US", {
            month: "long",
            day: "numeric",
            year: "numeric",
          });
        });
        newList.value = res.data.data?.data || [];
      }
    }
  });
};

const { t: $t, locale } = 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;
  }
  getPressReleasesDisplay();

  nextTick(() => {
    checkAllTitleOverflow();
  });
});

// 监听语言切换
watch(locale, (newLocale) => {
  getPressReleasesDisplay();
});

const titleRefs = ref([]);

const setTitleRef = (el, idx) => {
  if (el) titleRefs.value[idx] = el;
};

const checkAllTitleOverflow = () => {
  newList.value.forEach((item, idx) => {
    const el = titleRefs.value[idx];
    if (!el) {
      item.showTooltip = false;
      return;
    }
    item.showTooltip =
      el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
  });
};

watch(
  () => newList.value,
  () => {
    nextTick(() => {
      checkAllTitleOverflow();
    });
  },
  { deep: true },
);

onUnmounted(() => {
  if (observer) {
    observer.disconnect();
  }
});
import { useRouter } from "vue-router";
const router = useRouter();
const handleLink = (item) => {
  router.push({
    path: "/news",
    query: {
      id: item.uuid,
    },
  });
};
</script>

<style scoped lang="scss">
.home-page {
  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, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
  /* animation: gradientBG 15s ease infinite; */
  color: #000;
  padding: 40px 0px;
  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: #000;
  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.5rem; /* 18px */
  margin-bottom: 0;
  color: #ff7bac;
}
.section-titles {
  font-size: 2.2rem;
  margin-bottom: 15px;
  margin-top: 0;
  color: black;
  position: relative;
}
.section-titles1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 60px;
  height: 4px;
  background: #ff7bac;
  transform: translateY(-20px);
}

.content-block {
  font-size: 0.9rem;
  line-height: 1.8;
}
.content-blocks {
  font-size: 2rem;
  color: #000;
  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: 2.5rem;
  padding-top: 88px;
  color: #000;
  position: relative;
  margin-bottom: 0;
}

.card-title::after {
  content: "";
  position: absolute;
  left: 0;
  width: 60px;
  height: 4px;
  background: #ff7bac;
  transform: translateY(-20px);
}

.card-title1 {
  font-size: 2.5rem;
  padding-top: 88px;
  color: #000;
  position: relative;
  margin-bottom: 0;
}

.card-title1::after {
  content: "";
  position: absolute;
  left: 0;
  width: 60px;
  height: 4px;
  background: #ff7bac;
  transform: translateY(-20px);
}

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

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

.data-row {
  display: flex;
  /* justify-content: space-between; */
  margin: 24px 0;
  border-left: 2px solid #ff7bac;

  font-size: 14px;
  color: #000;
}

.data-label {
  // font-weight: 500;
  width: 150px;
}

.data-value {
  // font-weight: 600;
  // font-family: var(--van-base-font) !important;
  font-family: "PingFang SC", sans-serif;
  letter-spacing: 0.48px;
}

.positive {
  color: #ff7bac;
}

.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 #00ffff;
}

.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(255, 123, 172, 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-top: 14px solid #ff7bac;
}

.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: black;
  line-height: 0.8;
  margin-bottom: 20px;
  font-size: 18px;
}

.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>
