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

Reviewed-on: http://gitea.tools.fontree.cn:3000/scout666/fiee-official-website/pulls/1

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

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

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 {

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,21 +203,72 @@
           </div>
         </div>
       </section>
+    </div>
+    <!-- 成就部分 -->
 
-      <section class="mission-section">
+    <section
-        <h1 class="section-title">
+      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>
       </div>
     </section>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -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;
+  top: 2%;
-  left: 20px;
+  left: 10px;
   height: 100%;
-  width: 4px;
+  width: 2px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  /* 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;
+  width: 22px;
-  height: 40px;
+  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;
 }
 

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,23 +203,72 @@
           </div>
         </div>
       </section>
-
+    </div>
     <!-- 成就部分 -->
 
-      <section class="mission-section">
+    <section
-        <h1 class="section-title">
+      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>
       </div>
     </section>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -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;
+  top: 2%;
-  left: 20px;
+  left: 10px;
   height: 100%;
-  width: 4px;
+  width: 2px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  /* 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;
+  width: 22px;
-  height: 40px;
+  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;
 }
 

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,22 +203,72 @@
           </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>
       </div>
     </section>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -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;
+  top: 2%;
-  left: 20px;
+  left: 10px;
   height: 100%;
-  width: 4px;
+  width: 2px;
-  background: linear-gradient(to bottom, #00ffff, #ff7bac);
+  /* 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;
+  width: 22px;
-  height: 40px;
+  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 {
+  // .hero-title {
-    font-size: 2.5rem;
+  //   font-size: 2.5rem;
-  }
+  // }
 
-  .hero-subtitle {
+  // .hero-subtitle {
-    font-size: 1.2rem;
+  //   font-size: 1.2rem;
-  }
+  // }
 
-  .section-title {
+  // .section-title {
-    font-size: 1.8rem;
+  //   font-size: 1.8rem;
-  }
+  // }
 
-  .timeline {
+  // .timeline {
-    padding-left: 30px;
+  //   padding-left: 30px;
-  }
+  // }
 
-  .timeline-dot {
+  // .timeline-dot {
-    left: -30px;
+  //   left: -30px;
-    width: 30px;
+  //   // width: 30px;
-    height: 30px;
+  //   // height: 30px;
-  }
+  // }
 
-  .achievement-section {
+  // .achievement-section {
-    padding: 40px 20px;
+  //   padding: 40px 20px;
-  }
+  // }
 }
 </style>

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">
+    <section class="news-section relative z-99" style="width: 900px; margin: 60px auto">
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
+      <div class="flex justify-between">
-      <div class="grid grid-cols-2 gap-[15px]">
+        <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
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
-                class="data-value"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ 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;
 }

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">
+    <section class="news-section relative z-99" style="width: 900px; margin: 60px auto;">
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
+      <div class="flex justify-between">
-      <div class="grid grid-cols-2 gap-[15px]">
+        <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
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
-                class="data-value"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ 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;
 }

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;
+        width: 100vw;
-        margin: 60px auto;
         padding: 0 40px;
-        background: #fff;
+        margin-top: 40px;
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
       "
+    >
+      <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>
-      <p style="font-size: 18px">
+        <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
+    <section class="news-section relative z-99" style="width: 618px; margin: 60px auto">
-      class="news-section"
+      <div class="flex justify-between">
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+        <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 }"
           >
-      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
+            <div class="text-[24px] font-600">{{ item.time }}</div>
-      <div class="news-card">
+            <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"
+      class="dual-column-section bg-[url('@/assets/image/content/information1.png')]"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      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 class="data-label"> Time </span>
-              <span style="font-size: 18px" class="data-value">{{
+              <span class="data-value">{{ sampleDate }}</span>
-                formatted
-              }}</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"
+              <span class="data-value">${{ stockQuote.price }}</span>
-                >${{ 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
+              <span class="data-value">{{ stockQuote.change || "--" }}</span>
-                style="font-size: 18px"
-                class="data-value"
-                :class="
-                  stockQuote.change?.includes('-')
-                    ? 'text-green-500'
-                    : 'text-red-500'
-                "
-                >{{ 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"
+              <span class="data-value">NASDAQ: FIEE</span>
-                >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">{{
+              <span class="data-value">{{ stockQuote.volume }}</span>
-                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"
+              <span class="data-value">${{ stockQuote.marketCap }}</span>
-                >${{ 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 currentPage = ref(0);
-const isInView = ref(false);
+
-let observer = null;
+// 计算总页数
+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;
+  /* animation: gradientBG 15s ease infinite; */
-  color: white;
+  color: #000;
-  padding: 40px 20px;
+  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;
+  font-size: 2.2rem;
-  margin-bottom: 30px;
+  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;
+  padding-top: 88px;
-  color: #333;
+  color: #ffffff;
   position: relative;
-  padding-bottom: 10px;
+  margin-bottom: 0;
 }
 
 .card-title::after {
   content: "";
   position: absolute;
-  bottom: 0;
   left: 0;
   width: 60px;
-  height: 3px;
+  height: 4px;
-  background: linear-gradient(90deg, #121212, #232330);
+  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;
+  /* justify-content: space-between; */
-  padding: 12px 0;
+  margin: 24px 0;
-  border-bottom: 1px solid #f0f0f0;
+  border-left: 2px solid #00ffff;
+  transform: translateX(-10px);
+  padding-left: 30px;
+  font-size: 14PX;
+  color: #fff;
 }
 
 .data-label {
-  color: #666;
+  // font-weight: 500;
-  font-weight: 500;
+  width: 150px;
-  font-size: 18px;
 }
 
 .data-value {
-  font-weight: 600;
+  // font-weight: 600;
-  font-size: 18px;
+  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 {

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;
 }