Merge pull request '代码暂存' (#1 ) from yk-20250926 into newmain-20250926

Reviewed-on: http://gitea.tools.fontree.cn:3000/scout666/fiee-official-website/pulls/1
代码暂存
2025-10-10 06:51:21 +00:00 · 2025-10-10 14:49:49 +08:00
23 changed files with 1293 additions and 300 deletions
--- a/src/assets/image/content/bg_10.png
+++ b/src/assets/image/content/bg_10.png
--- a/src/assets/image/content/bg_11.png
+++ b/src/assets/image/content/bg_11.png
--- a/src/assets/image/content/bg_12.png
+++ b/src/assets/image/content/bg_12.png
--- a/src/assets/image/content/bg_3.png
+++ b/src/assets/image/content/bg_3.png
--- a/src/assets/image/content/bg_4.png
+++ b/src/assets/image/content/bg_4.png
--- a/src/assets/image/content/bg_5.png
+++ b/src/assets/image/content/bg_5.png
--- a/src/assets/image/content/bg_6.png
+++ b/src/assets/image/content/bg_6.png
--- a/src/assets/image/content/bg_7.png
+++ b/src/assets/image/content/bg_7.png
--- a/src/assets/image/content/bg_8.png
+++ b/src/assets/image/content/bg_8.png
--- a/src/assets/image/content/bg_9.png
+++ b/src/assets/image/content/bg_9.png
--- a/src/assets/image/content/information1.png
+++ b/src/assets/image/content/information1.png
--- a/src/assets/image/content/switch_left.png
+++ b/src/assets/image/content/switch_left.png
--- a/src/assets/image/content/switch_right.png
+++ b/src/assets/image/content/switch_right.png
--- a/src/components/customHeader/size375/index.vue
+++ b/src/components/customHeader/size375/index.vue
@ -201,11 +201,12 @@ const handleToHome = () => {
  top: 320px;
  left: 0;
  width: 100vw;
-  background: #fddfea;
+  bottom: 0;
+  background: #fff;
  z-index: 1100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  padding: 40px 0 80px 0;
-  max-height: 1500px;
+  // max-height: 1500px;
  overflow-y: auto;

  // 设置CSS变量，只影响当前组件的菜单
@ -215,6 +216,16 @@ const handleToHome = () => {
    font-weight: 600;
  }

+  // 为n-submenu添加上边虚线边框
+  :deep(.mobile-menu > div) {
+    border-top: 3px dashed #e0e0e0;
+  }
+
+  // 为最后一个n-submenu额外添加下边框
+  :deep(.mobile-menu > div:last-child) {
+    border-bottom: 3px dashed #e0e0e0;  
+  }
+
  // // 强制覆盖子菜单激活状态的文字颜色
  // :deep(
  //     .n-menu
--- a/src/locales/en.js
+++ b/src/locales/en.js
@ -648,7 +648,7 @@ export default {
        TWO: "• Signed a merger agreement with e2Companies to broaden its technology and revenue base.",
        THREE: "",
      },
-      SUBHEADINGFIVE: "2025 Rebranding & New C-Suite",
+      SUBHEADINGFIVE: "2025: Rebranding & New C-Suite",
      paragraphFIVE: {
        ONE: "• Officially rebranded from Minim Inc. to FiEE, Inc.",
        TWO: "• Appointed Li Wai Chung as CEO and Cao Yu as CFO.",
--- a/src/views/BusinessServices/size1920/index.vue
+++ b/src/views/BusinessServices/size1920/index.vue
@ -1,5 +1,25 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      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>
    <div class="business-page">
      <!-- 渐变背景标题区 - 增加层次感 -->
      <section class="hero-section">
@ -7,7 +27,7 @@
          <h2 class="hero-title">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
          </h2>
-          <div style="font-size: 18px" class="hero-description">
+          <div style="font-size: 16px" class="hero-description">
            {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
          </div>
        </div>
@ -109,7 +129,7 @@ const solutions = computed(() => [
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.8;
-  color: black;
+  color: #455363;
 }

 :root {
--- a/src/views/companyoverview/size1440/index.vue
+++ b/src/views/companyoverview/size1440/index.vue
@ -1,16 +1,37 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[700PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_6.png"
+          alt=""
+          class="w-[100vw] absolute top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_7.png"
+          alt=""
+          class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
+        />
+      </div>
+    </div>
+
    <div class="company-overview">
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto"
+        style="max-width: 900px; margin: 120px auto"
      >
-        <h1 class="section-title">
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
        </h1>
        <div class="content-block">
-          <div style="font-size: 18px">
+          <div style="font-size: 16px; color: #455363">
            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@ -20,12 +41,17 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
-        <h1 class="section-title">
+        <!-- <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1>
+        </h1> -->
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-p style="font-size: 18px" class="card-content">{{
+            <div>
+              <h1 class="mt-0">
+                {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+              </h1>
+            </div>
+            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -34,7 +60,7 @@

      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
-      <section class="section timeline-section">
+      <section class="section timeline-section mt-[120PX]">
        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
        </h1>
@ -43,8 +69,11 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
              }}</n-h3>
              <br />
              <n-p style="font-size: 18px" class="timeline-desc">{{
@ -62,8 +91,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
              }}</n-h3>
              <br />

@ -82,8 +116,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
              }}</n-h3>
              <br />

@ -102,8 +141,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
              }}</n-h3>
              <br />

@ -122,8 +166,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
              }}</n-h3>
              <br />

@ -154,20 +203,71 @@
          </div>
        </div>
      </section>
+    </div>
+    <!-- 成就部分 -->

-      <section class="mission-section">
-        <h1 class="section-title">
+    <section
+      class="mission-section overflow-hidden relative z-99"
+      style="
+        width: 100vw;
+        /* padding: 0 40px; */
+        /* margin-top: 40px; */
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
+      "
+    >
+      <div
+        style="height: 190px; width: 880px"
+        class="m-[auto] my-[64px] flex flex-col items-center text-center"
+      >
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
        </h1>
-        <div class="mission-cards">
+        <!-- <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
            }}</n-p>
          </n-card>
+        </div> -->
+        <div class="w-100% flex items-center justify-between">
+          <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] 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: 14px; 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] 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>
-      </section>
-    </div>
+      </div>
+    </section>
  </div>
 </template>

@ -184,15 +284,18 @@ const stats = ref([
 ]);
 </script>

-<style scoped>
+<style scoped lang="scss">
 .home-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .company-overview {
-  max-width: 1200px;
+  width: 900PX;
  margin: 0 auto;
+  padding: 0 10px;
+  z-index: 99;
+  position: relative;
  /* padding: 0 20px; */
 }

@ -221,7 +324,7 @@ const stats = ref([

 /* 通用部分样式 */
 .section {
-  margin-bottom: 80px;
+  margin-bottom: 30px;
 }

 .section-title {
@ -231,14 +334,16 @@ const stats = ref([
  display: inline-block;
 }

-.section-title:after {
+.section-title::before {
  content: "";
  position: absolute;
-  bottom: -10px;
+  top: -10px;
+  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
-  background: linear-gradient(to right, #00ffff, #ff7bac);
+  // background: linear-gradient(to right, #00ffff, #ff7bac);
+  background-color: #ff7bac;
  border-radius: 2px;
 }

@ -251,7 +356,8 @@ const stats = ref([

 /* 使命愿景卡片 */
 .mission-section {
-  margin: 80px 0;
+  // margin: 80px 0;
+  // margin-top: 160px;
 }

 .mission-cards {
@ -289,16 +395,18 @@ const stats = ref([
  position: relative;
  padding-left: 50px;
  margin-top: 50px;
+  transform: translateX(-20px);
 }

 .timeline:before {
  content: "";
  position: absolute;
-  top: 0;
-  left: 20px;
+  top: 2%;
+  left: 10px;
  height: 100%;
-  width: 4px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  width: 2px;
+  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: #ff7bac;
 }

 .timeline-item {
@ -306,12 +414,25 @@ const stats = ref([
  margin-bottom: 50px;
 }

+.timeline-item {
+  &:last-child:before {
+    content: "";
+    position: absolute;
+    top: 2%;
+    left: -40px;
+    height: 110%;
+    width: 2px;
+    /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+    background: #E6EAEE;
+  }
+}
+
 .timeline-dot {
  position: absolute;
  left: -50px;
  top: 5px;
-  width: 40px;
-  height: 40px;
+  width: 22px;
+  height: 22px;
  border-radius: 50%;
  background: #ff7bac;
  display: flex;
@ -319,18 +440,20 @@ const stats = ref([
  justify-content: center;
  color: white;
  font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
 }

 .timeline-year {
  font-size: 1.4rem;
  margin-bottom: 15px;
-  color: #1a2a6c;
+  color: #000;
+  font-weight: 500;
 }

 .timeline-desc {
-  font-size: 1.05rem;
+  font-size: 16PX !important;
  line-height: 1.7;
+  color: #455363;
  margin-bottom: 10px;
 }

--- a/src/views/companyoverview/size1920/index.vue
+++ b/src/views/companyoverview/size1920/index.vue
@ -1,16 +1,37 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 900px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[700PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_6.png"
+          alt=""
+          class="w-[100vw] absolute top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_7.png"
+          alt=""
+          class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
+        />
+      </div>
+    </div>
+
    <div class="company-overview">
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto"
+        style="max-width: 900px; margin: 120px auto"
      >
-        <h1 class="section-title">
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
        </h1>
        <div class="content-block">
-          <div style="font-size: 18px">
+          <div style="font-size: 16px; color: #455363">
            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@ -20,12 +41,17 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
-        <h1 class="section-title">
+        <!-- <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1>
+        </h1> -->
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-p style="font-size: 18px" class="card-content">{{
+            <div>
+              <h1 class="mt-0">
+                {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+              </h1>
+            </div>
+            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -34,7 +60,7 @@

      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
-      <section class="section timeline-section">
+      <section class="section timeline-section mt-[120PX]">
        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
        </h1>
@ -43,8 +69,11 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
              }}</n-h3>
              <br />
              <n-p style="font-size: 18px" class="timeline-desc">{{
@ -62,8 +91,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
              }}</n-h3>
              <br />

@ -82,8 +116,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
              }}</n-h3>
              <br />

@ -102,8 +141,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
              }}</n-h3>
              <br />

@ -122,8 +166,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
              }}</n-h3>
              <br />

@ -154,22 +203,71 @@
          </div>
        </div>
      </section>
+    </div>
+    <!-- 成就部分 -->

-      <!-- 成就部分 -->
-
-      <section class="mission-section">
-        <h1 class="section-title">
+    <section
+      class="mission-section overflow-hidden relative z-99"
+      style="
+        width: 100vw;
+        /* padding: 0 40px; */
+        /* margin-top: 40px; */
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
+      "
+    >
+      <div
+        style="height: 190px; width: 880px"
+        class="m-[auto] my-[64px] flex flex-col items-center text-center"
+      >
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
        </h1>
-        <div class="mission-cards">
+        <!-- <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
            }}</n-p>
          </n-card>
+        </div> -->
+        <div class="w-100% flex items-center justify-between">
+          <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] 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: 14px; 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] 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>
-      </section>
-    </div>
+      </div>
+    </section>
  </div>
 </template>

@ -186,15 +284,18 @@ const stats = ref([
 ]);
 </script>

-<style scoped>
+<style scoped lang="scss">
 .home-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .company-overview {
-  max-width: 1200px;
+  width: 900PX;
  margin: 0 auto;
+  padding: 0 10px;
+  z-index: 99;
+  position: relative;
  /* padding: 0 20px; */
 }

@ -223,7 +324,7 @@ const stats = ref([

 /* 通用部分样式 */
 .section {
-  margin-bottom: 80px;
+  margin-bottom: 30px;
 }

 .section-title {
@ -233,14 +334,16 @@ const stats = ref([
  display: inline-block;
 }

-.section-title:after {
+.section-title::before {
  content: "";
  position: absolute;
-  bottom: -10px;
+  top: -10px;
+  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
-  background: linear-gradient(to right, #00ffff, #ff7bac);
+  // background: linear-gradient(to right, #00ffff, #ff7bac);
+  background-color: #ff7bac;
  border-radius: 2px;
 }

@ -253,7 +356,8 @@ const stats = ref([

 /* 使命愿景卡片 */
 .mission-section {
-  margin: 80px 0;
+  // margin: 80px 0;
+  // margin-top: 160px;
 }

 .mission-cards {
@ -291,16 +395,18 @@ const stats = ref([
  position: relative;
  padding-left: 50px;
  margin-top: 50px;
+  transform: translateX(-20px);
 }

 .timeline:before {
  content: "";
  position: absolute;
-  top: 0;
-  left: 20px;
+  top: 2%;
+  left: 10px;
  height: 100%;
-  width: 4px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  width: 2px;
+  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: #ff7bac;
 }

 .timeline-item {
@ -308,12 +414,25 @@ const stats = ref([
  margin-bottom: 50px;
 }

+.timeline-item {
+  &:last-child:before {
+    content: "";
+    position: absolute;
+    top: 2%;
+    left: -40px;
+    height: 110%;
+    width: 2px;
+    /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+    background: #E6EAEE;
+  }
+}
+
 .timeline-dot {
  position: absolute;
  left: -50px;
  top: 5px;
-  width: 40px;
-  height: 40px;
+  width: 22px;
+  height: 22px;
  border-radius: 50%;
  background: #ff7bac;
  display: flex;
@ -321,18 +440,20 @@ const stats = ref([
  justify-content: center;
  color: white;
  font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
 }

 .timeline-year {
  font-size: 1.4rem;
  margin-bottom: 15px;
-  color: #1a2a6c;
+  color: #000;
+  font-weight: 500;
 }

 .timeline-desc {
-  font-size: 1.05rem;
+  font-size: 16PX !important;
  line-height: 1.7;
+  color: #455363;
  margin-bottom: 10px;
 }

--- a/src/views/companyoverview/size768/index.vue
+++ b/src/views/companyoverview/size768/index.vue
@ -1,16 +1,37 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 586px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[720PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_10.png"
+          alt=""
+          class="w-[100vw] absolute top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_11.png"
+          alt=""
+          class="w-[100vw] h-[320PX] absolute bottom-0 lef-0 right-0 z-1"
+        />
+      </div>
+    </div>
+
    <div class="company-overview">
      <!-- 公司概况 -->
      <section
        class="company-overview"
-        style="max-width: 1200px; margin: 60px auto"
+        style="max-width: 586px; margin: 120px auto"
      >
-        <h1 class="section-title">
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
        </h1>
        <div class="content-block">
-          <div style="font-size: 18px">
+          <div style="font-size: 16px; color: #455363">
            {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
          </div>
          <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@ -20,12 +41,17 @@

      <!-- 使命愿景卡片 -->
      <section class="mission-section">
-        <h1 class="section-title">
+        <!-- <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1>
+        </h1> -->
        <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
-            <n-p style="font-size: 18px" class="card-content">{{
+            <div>
+              <h1 class="mt-0">
+                {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
+              </h1>
+            </div>
+            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
            }}</n-p>
          </n-card>
@ -34,7 +60,7 @@

      <!-- 里程碑时间轴 -->
      <!-- 里程碑时间轴 -->
-      <section class="section timeline-section">
+      <section class="section timeline-section mt-[120PX]">
        <h1 class="section-title">
          {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
        </h1>
@ -43,8 +69,11 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{ $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[0] }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING").split(":")[1]
              }}</n-h3>
              <br />
              <n-p style="font-size: 18px" class="timeline-desc">{{
@ -62,8 +91,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO").split(":")[1]
              }}</n-h3>
              <br />

@ -82,8 +116,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE").split(":")[1]
              }}</n-h3>
              <br />

@ -102,8 +141,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF").split(":")[1]
              }}</n-h3>
              <br />

@ -122,8 +166,13 @@
          <div class="timeline-item" v-motion-slide-visible-once-bottom>
            <div class="timeline-dot"></div>
            <div class="timeline-content">
+              <div class="text-[#FF7BAC] text-[16PX]">
+                {{
+                  $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[0]
+                }}
+              </div>
              <n-h3 class="timeline-year">{{
-                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE").split(":")[1]
              }}</n-h3>
              <br />

@ -154,21 +203,71 @@
          </div>
        </div>
      </section>
+    </div>
+    <!-- 成就部分 -->

-      <!-- 成就部分 -->
-      <section class="mission-section">
-        <h1 class="section-title">
+    <section
+      class="mission-section overflow-hidden relative z-99"
+      style="
+        width: 100vw;
+        /* padding: 0 40px; */
+        /* margin-top: 40px; */
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
+      "
+    >
+      <div
+        style="height: 190px; width: 500px"
+        class="m-[auto] my-[64px] flex flex-col items-center text-center"
+      >
+        <h1 class="">
          {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
        </h1>
-        <div class="mission-cards">
+        <!-- <div class="mission-cards">
          <n-card hoverable class="mission-card" v-motion-pop>
            <n-p style="font-size: 18px" class="card-content">{{
              $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT")
            }}</n-p>
          </n-card>
+        </div> -->
+        <div class="w-100% flex items-center justify-between">
+          <!-- <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] 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: 14px;" 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] 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>
-      </section>
-    </div>
+      </div>
+    </section>
  </div>
 </template>

@ -185,15 +284,19 @@ const stats = ref([
 ]);
 </script>

-<style scoped>
+<style scoped lang="scss">
 .home-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
 .company-overview {
-  max-width: 1200px;
+  width: 586PX;
  margin: 0 auto;
+  padding: 0 10px;
+  z-index: 99;
+  position: relative;
+  /* padding: 0 20px; */
 }

 /* 顶部大图区域 */
@ -221,7 +324,7 @@ const stats = ref([

 /* 通用部分样式 */
 .section {
-  margin-bottom: 80px;
+  margin-bottom: 30px;
 }

 .section-title {
@ -231,14 +334,16 @@ const stats = ref([
  display: inline-block;
 }

-.section-title:after {
+.section-title::before {
  content: "";
  position: absolute;
-  bottom: -10px;
+  top: -10px;
+  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
-  background: linear-gradient(to right, #00ffff, #ff7bac);
+  // background: linear-gradient(to right, #00ffff, #ff7bac);
+  background-color: #ff7bac;
  border-radius: 2px;
 }

@ -251,7 +356,8 @@ const stats = ref([

 /* 使命愿景卡片 */
 .mission-section {
-  margin: 80px 0;
+  // margin: 80px 0;
+  // margin-top: 160px;
 }

 .mission-cards {
@ -289,16 +395,18 @@ const stats = ref([
  position: relative;
  padding-left: 50px;
  margin-top: 50px;
+  transform: translateX(-20px);
 }

 .timeline:before {
  content: "";
  position: absolute;
-  top: 0;
-  left: 20px;
+  top: 2%;
+  left: 10px;
  height: 100%;
-  width: 4px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  width: 2px;
+  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: #ff7bac;
 }

 .timeline-item {
@ -306,12 +414,25 @@ const stats = ref([
  margin-bottom: 50px;
 }

+.timeline-item {
+  &:last-child:before {
+    content: "";
+    position: absolute;
+    top: 2%;
+    left: -40px;
+    height: 110%;
+    width: 2px;
+    /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+    background: #E6EAEE;
+  }
+}
+
 .timeline-dot {
  position: absolute;
  left: -50px;
  top: 5px;
-  width: 40px;
-  height: 40px;
+  width: 22px;
+  height: 22px;
  border-radius: 50%;
  background: #ff7bac;
  display: flex;
@ -319,18 +440,20 @@ const stats = ref([
  justify-content: center;
  color: white;
  font-weight: bold;
-  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
 }

 .timeline-year {
  font-size: 1.4rem;
  margin-bottom: 15px;
-  color: #1a2a6c;
+  color: #000;
+  font-weight: 500;
 }

 .timeline-desc {
-  font-size: 1.05rem;
+  font-size: 16PX !important;
  line-height: 1.7;
+  color: #455363;
  margin-bottom: 10px;
 }

@ -388,30 +511,30 @@ const stats = ref([

 /* 响应式设计 */
@media (max-width: 768px) {
-  .hero-title {
-    font-size: 2.5rem;
-  }
+  // .hero-title {
+  //   font-size: 2.5rem;
+  // }

-  .hero-subtitle {
-    font-size: 1.2rem;
-  }
+  // .hero-subtitle {
+  //   font-size: 1.2rem;
+  // }

-  .section-title {
-    font-size: 1.8rem;
-  }
+  // .section-title {
+  //   font-size: 1.8rem;
+  // }

-  .timeline {
-    padding-left: 30px;
-  }
+  // .timeline {
+  //   padding-left: 30px;
+  // }

-  .timeline-dot {
-    left: -30px;
-    width: 30px;
-    height: 30px;
-  }
+  // .timeline-dot {
+  //   left: -30px;
+  //   // width: 30px;
+  //   // height: 30px;
+  // }

-  .achievement-section {
-    padding: 40px 20px;
-  }
+  // .achievement-section {
+  //   padding: 40px 20px;
+  // }
 }
 </style>
--- a/src/views/myHome/size1440/index.vue
+++ b/src/views/myHome/size1440/index.vue
@ -93,7 +93,8 @@
      "
    >
      <div
-        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
+        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") }}
@ -115,7 +116,7 @@
              class="w-[95px]"
            />
          </div>
-          <p style="font-size: 18px" class="w-[438px] my-0">
+          <p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
          </p>
          <div class="flex items-center">
@ -138,9 +139,46 @@
      </div>
    </section>
    <!-- 新闻模块 -->
-    <section class="news-section" style="width: 900px; margin: 60px auto">
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-      <div class="grid grid-cols-2 gap-[15px]">
+    <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"
@ -185,6 +223,59 @@
            </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">{{ 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>
      </div>
      <!-- <div class="news-card">
        <div style="margin-bottom: 20px" v-for="(item, index) in newList">
@ -263,49 +354,59 @@
        background-color: #e7407e;
      "
    >
-      <div class="w-[900px] m-auto">
+      <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">
+            <div
+              class="data-row"
+              style="transform: translateX(-10px); padding-left: 10px"
+            >
              <span class="data-label"> Time </span>
              <span class="data-value">{{ sampleDate }}</span>
            </div>
-            <div class="data-row">
+            <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">
+            <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"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ stockQuote.change || "--" }}</span
-              >
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
            </div>
-            <div class="data-row">
+            <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">
+            <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">
+            <div
+              class="data-row"
+              style="transform: translateX(-10px); padding-left: 10px"
+            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
              }}</span>
@ -361,7 +462,7 @@
      class="dual-column-section"
      style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
    >
-      <div class="w-[900px] m-auto">
+      <div class="w-[900PX] m-auto">
        <div class="">
          <h2 class="card-title1">
            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
@ -419,6 +520,42 @@ import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
 import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
+
+// 每页显示的项目数 - 最多三行，每行最多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);
@ -614,6 +751,16 @@ const handleLink = (item) => {
  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 {
@ -743,8 +890,7 @@ const handleLink = (item) => {
  /* justify-content: space-between; */
  margin: 24px 0;
  border-left: 2px solid #00ffff;
-  transform: translateX(-10px);
-  padding-left: 10px;
+
  font-size: 14px;
  color: #fff;
 }
--- a/src/views/myHome/size1920/index.vue
+++ b/src/views/myHome/size1920/index.vue
@ -93,7 +93,8 @@
      "
    >
      <div
-        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
+        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") }}
@ -115,7 +116,7 @@
              class="w-[95px]"
            />
          </div>
-          <p style="font-size: 18px" class="w-[438px] my-0">
+          <p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
          </p>
          <div class="flex items-center">
@ -138,9 +139,46 @@
      </div>
    </section>
    <!-- 新闻模块 -->
-    <section class="news-section" style="width: 900px; margin: 60px auto">
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-      <div class="grid grid-cols-2 gap-[15px]">
+    <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"
@ -185,6 +223,59 @@
            </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">{{ 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>
      </div>
      <!-- <div class="news-card">
        <div style="margin-bottom: 20px" v-for="(item, index) in newList">
@ -263,49 +354,59 @@
        background-color: #e7407e;
      "
    >
-      <div class="w-[900px] m-auto">
+      <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">
+            <div
+              class="data-row"
+              style="transform: translateX(-10px); padding-left: 10px"
+            >
              <span class="data-label"> Time </span>
              <span class="data-value">{{ sampleDate }}</span>
            </div>
-            <div class="data-row">
+            <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">
+            <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"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ stockQuote.change || "--" }}</span
-              >
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
            </div>
-            <div class="data-row">
+            <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">
+            <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">
+            <div
+              class="data-row"
+              style="transform: translateX(-10px); padding-left: 10px"
+            >
              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
              }}</span>
@ -361,7 +462,7 @@
      class="dual-column-section"
      style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
    >
-      <div class="w-[900px] m-auto">
+      <div class="w-[900PX] m-auto">
        <div class="">
          <h2 class="card-title1">
            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
@ -419,6 +520,42 @@ import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
 import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
+
+// 每页显示的项目数 - 最多三行，每行最多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);
@ -614,6 +751,16 @@ const handleLink = (item) => {
  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 {
@ -743,8 +890,7 @@ const handleLink = (item) => {
  /* justify-content: space-between; */
  margin: 24px 0;
  border-left: 2px solid #00ffff;
-  transform: translateX(-10px);
-  padding-left: 10px;
+
  font-size: 14px;
  color: #fff;
 }
--- a/src/views/myHome/size768/index.vue
+++ b/src/views/myHome/size768/index.vue
@ -1,8 +1,39 @@
 <template>
-  <div class="home-page">
+  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+    <div
+      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-1"
+      style="width: 630px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[813PX] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_3.png"
+          alt=""
+          class="w-[100vw] h-[813PX] absolute top-[-90PX]"
+        />
+        <img
+          src="@/assets/image/content/bg_4.png"
+          alt=""
+          class="w-[312PX] h-[214PX] absolute top-[108PX] left-[50%] translate-x-[-100%]"
+        />
+        <img
+          src="@/assets/image/content/bg_5.png"
+          alt=""
+          class="w-[100vw] absolute bottom-[-80PX] lef-0 right-0 z-99"
+        />
+      </div>
+    </div>
    <section
      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      style="
+        max-width: 618px;
+        margin: 0 auto;
+        padding: 0;
+        padding-top: 290px;
+        height: 790px;
+      "
    >
      <div class="hero-section">
        <transition name="fade-up" appear>
@ -23,15 +54,14 @@
    <!-- 公司概况 -->
    <section
      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      style="max-width: 618px; margin: 0 auto; padding: 0;margin-top: 100px;"
    >
-      <h1 class="section-titles">Company Profile</h1>
-
      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
-      <div class="content-block">
+      <h1 class="section-titles">Company Profile</h1>
+      <div class="content-block text-[#455363]">
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
        <p>
-          <text style="color: black">{{
+          <text class="text-[#455363]">{{
            $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
          }}</text>

@ -39,31 +69,195 @@
        </p>
        <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
      </div>
+
+      <div class="grid grid-cols-2 gap-4 w-[100%]">
+        <img
+          src="@/assets/image/content/profile_1.png"
+          alt=""
+          class="w-[293PX] h-[201PX] mx-auto"
+        />
+        <img
+          src="@/assets/image/content/profile_2.png"
+          alt=""
+          class="w-[293PX] h-[201PX] mx-auto"
+        />
+        <img
+          src="@/assets/image/content/profile_3.png"
+          alt=""
+          class="w-[293PX] h-[201PX] mx-auto"
+        />
+        <img
+          src="@/assets/image/content/profile_4.png"
+          alt=""
+          class="w-[293PX] h-[201PX] mx-auto"
+        />
+      </div>
    </section>
    <!-- 突出成就 -->
    <section
-      class="achievements"
+      class="achievements overflow-hidden z-99 relative"
      style="
-        max-width: 1200px;
-        margin: 60px auto;
+        width: 100vw;
        padding: 0 40px;
-        background: #fff;
+        margin-top: 40px;
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
      "
    >
-      <h2 class="section-titles">
-        {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
-      </h2>
-      <p style="font-size: 18px">
-        {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
-      </p>
+      <div
+        style="max-width: 618px; height: 260px; padding: 64px 0"
+        class="m-[auto] 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">
+          <p style="font-size: 14px" class="my-0 text-[#455363]">
+            {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
+          </p>
+        </div>
+      </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">
+    <section class="news-section relative z-99" style="width: 618px; 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
+              style="height: 232px"
+              class="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">{{ 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>
+      </div>
+      <!-- <div class="news-card">
        <div style="margin-bottom: 20px" v-for="(item, index) in newList">
          <div
            style="
@ -74,8 +268,9 @@
          >
            <div>
              <div style="font-size: 18px">{{ item.time }}</div>
+
              <n-tooltip
-                trigger="click"
+                trigger="hover"
                :disabled="!item.showTooltip"
                width="trigger"
              >
@ -102,7 +297,7 @@
            </div>

            <div
-              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.9rem"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
              class="cursor-pointer"
              @click="handleLink(item)"
            >
@ -125,81 +320,121 @@
            style="width: 109px; height: 60px"
          />
        </div>
-      </div>
+      </div> -->
    </section>
    <!-- 新增：股票信息与活动预告双栏模块 -->
    <section
-      class="dual-column-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      class="dual-column-section bg-[url('@/assets/image/content/information1.png')]"
+      style="
+        width: 100vw;
+        height: 743px;
+        margin: 60px auto;
+        padding: 0 40px;
+        background-size: 100% 100%;
+        background-color: #e7407e;
+      "
    >
-      <div class="grid-container">
+      <div style="width: 618px" class="m-auto">
        <!-- 股票信息卡片 -->
-        <div class="info-card stock-card">
+        <div class="">
          <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
          <div class="stock-data">
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label"> Time </span>
-              <span style="font-size: 18px" class="data-value">{{
-                formatted
-              }}</span>
+              <span class="data-label"> Time </span>
+              <span class="data-value">{{ sampleDate }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.price }}</span
-              >
+              <span class="data-value">${{ stockQuote.price }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
              }}</span>

-              <span
-                style="font-size: 18px"
-                class="data-value"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ stockQuote.change || "--" }}</span
-              >
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >NASDAQ: FIEE</span
-              >
+              <span class="data-value">NASDAQ: FIEE</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
              }}</span>
-              <span style="font-size: 18px" class="data-value">{{
-                stockQuote.volume
-              }}</span>
+              <span class="data-value">{{ stockQuote.volume }}</span>
            </div>
            <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
              }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.marketCap }}</span
-              >
+              <span class="data-value">${{ stockQuote.marketCap }}</span>
            </div>
          </div>
        </div>

        <!-- 活动预告卡片 -->
-        <div class="info-card events-card">
+        <!-- <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"
+      style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
+    >
+      <div class="w-[618PX] 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> -->
@ -248,12 +483,44 @@ import { useStockQuote } from "@/store/stock-quote/index.js";
 import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();

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

-const { t: $t } = useI18n();
-const contentRef = ref(null);
-const isInView = ref(false);
-let observer = null;
+// 当前页码
+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([
  // {
@ -268,6 +535,36 @@ const newList = ref([
  // },
 ]);

+// 获取新闻发布(展示在首页的)
+const getPressReleasesDisplay = () => {
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
+  let params = {
+    page: 1,
+    pageSize: 10,
+    display: 2, // 1: 不展示在首页 2: 展示在首页
+  };
+  // 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.createdAt).toLocaleDateString("en-US", {
+            month: "long",
+            day: "numeric",
+            year: "numeric",
+          });
+        });
+        newList.value = res.data.data?.data || [];
+      }
+    }
+  });
+};
+
+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(
@ -327,32 +624,6 @@ watch(
  { deep: true }
 );

-// 获取新闻发布(展示在首页的)
-const getPressReleasesDisplay = () => {
-  let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
-  let params = {
-    page: 1,
-    pageSize: 10,
-    display: 2, // 1: 不展示在首页 2: 展示在首页
-  };
-  // 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.createdAt).toLocaleDateString("en-US", {
-            month: "long",
-            day: "numeric",
-            year: "numeric",
-          });
-        });
-        newList.value = res.data.data?.data || [];
-      }
-    }
-  });
-};
-
 onUnmounted(() => {
  if (observer) {
    observer.disconnect();
@ -370,7 +641,7 @@ const handleLink = (item) => {
 };
 </script>

-<style scoped>
+<style scoped lang="scss">
 .home-page {
  background-size: 100% 100%;
  background-position: center;
@ -384,11 +655,11 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
  background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 40px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 40px 0px;
  text-align: left;
  margin-bottom: 60px;
  border-radius: 8px;
@ -407,7 +678,7 @@ const handleLink = (item) => {
 }
 .banner-content {
  text-align: center;
-  color: white;
+  color: #000;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
@ -434,24 +705,34 @@ const handleLink = (item) => {

 .section-title {
  font-size: 1.5rem; /* 18px */
-  margin-bottom: 30px;
+  margin-bottom: 0;
  color: #ff7bac;
 }
 .section-titles {
-  font-size: 2.5rem;
-  margin-bottom: 30px;
+  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: 1.1rem;
+  font-size: 0.9rem;
  line-height: 1.8;
 }
 .content-blocks {
  font-size: 2rem;
-  color: #fff;
+  color: #000;
  font-weight: bold;
-
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
@ -523,20 +804,38 @@ const handleLink = (item) => {

 .card-title {
  font-size: 2.5rem;
-  margin-bottom: 25px;
-  color: #333;
+  padding-top: 88px;
+  color: #ffffff;
  position: relative;
-  padding-bottom: 10px;
+  margin-bottom: 0;
 }

 .card-title::after {
  content: "";
  position: absolute;
-  bottom: 0;
  left: 0;
  width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #121212, #232330);
+  height: 4px;
+  background: #ffffff;
+  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);
 }

 /* 股票信息卡片样式 */
@ -550,20 +849,24 @@ const handleLink = (item) => {

 .data-row {
  display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
+  /* justify-content: space-between; */
+  margin: 24px 0;
+  border-left: 2px solid #00ffff;
+  transform: translateX(-10px);
+  padding-left: 30px;
+  font-size: 14PX;
+  color: #fff;
 }

 .data-label {
-  color: #666;
-  font-weight: 500;
-  font-size: 18px;
+  // font-weight: 500;
+  width: 150px;
 }

 .data-value {
-  font-weight: 600;
-  font-size: 18px;
+  // font-weight: 600;
+  font-family: "PingFang SC";
+  letter-spacing: 0.48px;
 }

 .positive {
@ -644,7 +947,7 @@ const handleLink = (item) => {
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #ff7bac;
+  border-top: 14px solid #ff7bac;
 }

 .news-date {
--- a/src/views/news/size1920/index.vue
+++ b/src/views/news/size1920/index.vue
@ -54,7 +54,7 @@ const getPressReleasesInfo = () => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  max-width: 932px;
+  width: 900PX;
  margin: 0 auto;
  padding: 0 16px;
 }
Author	SHA1	Message	Date
yinkang	5c1e776820	Merge pull request '代码暂存' (#1 ) from yk-20250926 into newmain-20250926 Reviewed-on: http://gitea.tools.fontree.cn:3000/scout666/fiee-official-website/pulls/1	2025-10-10 06:51:21 +00:00
yinkang	ec3a82faf9	代码暂存	2025-10-10 14:49:49 +08:00