src/components/customHeader/size375/index.vue

@@ -201,12 +201,11 @@ const handleToHome = () => {
   top: 320px;
   left: 0;
   width: 100vw;
-  bottom: 0;
+  background: #fddfea;
-  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变量，只影响当前组件的菜单
@@ -216,16 +215,6 @@ 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,25 +1,5 @@
 <template>
-  <div class="home-page relative bg-[#ffffff]">
+  <div class="home-page">
-    <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">
@@ -27,7 +7,7 @@
           <h2 class="hero-title">
             {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.TITLE") }}
           </h2>
-          <div style="font-size: 16px" class="hero-description">
+          <div style="font-size: 18px" class="hero-description">
             {{ $t("BusinessiIntroduction.CONTAIN.TITLEONE.CONTENT") }}
           </div>
         </div>
@@ -129,7 +109,7 @@ const solutions = computed(() => [
   margin: 0 auto;
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #455363;
+  color: black;
 }
 
 :root {

src/views/companyoverview/size1440/index.vue

@@ -1,37 +1,16 @@
 <template>
-  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+  <div class="home-page">
-    <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: 900px; margin: 120px auto"
+        style="max-width: 1200px; margin: 60px auto"
       >
-        <h1 class="">
+        <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
         </h1>
         <div class="content-block">
-          <div style="font-size: 16px; color: #455363">
+          <div style="font-size: 18px">
             {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
           </div>
           <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@@ -41,17 +20,12 @@
 
       <!-- 使命愿景卡片 -->
       <section class="mission-section">
-        <!-- <h1 class="section-title">
+        <h1 class="section-title">
-          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1> -->
-        <div class="mission-cards">
-          <n-card hoverable class="mission-card" v-motion-pop>
-            <div>
-              <h1 class="mt-0">
           {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
         </h1>
-            </div>
+        <div class="mission-cards">
-            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
               $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
             }}</n-p>
           </n-card>
@@ -60,7 +34,7 @@
 
       <!-- 里程碑时间轴 -->
       <!-- 里程碑时间轴 -->
-      <section class="section timeline-section mt-[120PX]">
+      <section class="section timeline-section">
         <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
         </h1>
@@ -69,11 +43,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
               }}</n-h3>
               <br />
               <n-p style="font-size: 18px" class="timeline-desc">{{
@@ -91,13 +62,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
               }}</n-h3>
               <br />
 
@@ -116,13 +82,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
               }}</n-h3>
               <br />
 
@@ -141,13 +102,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
               }}</n-h3>
               <br />
 
@@ -166,13 +122,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
               }}</n-h3>
               <br />
 
@@ -203,72 +154,21 @@
           </div>
         </div>
       </section>
-    </div>
-    <!-- 成就部分 -->
 
-    <section
+      <section class="mission-section">
-      class="mission-section overflow-hidden relative z-99"
+        <h1 class="section-title">
-      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>
@@ -284,18 +184,15 @@ const stats = ref([
 ]);
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .home-page {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 .company-overview {
-  width: 900PX;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
-  z-index: 99;
-  position: relative;
   /* padding: 0 20px; */
 }
 
@@ -324,7 +221,7 @@ const stats = ref([
 
 /* 通用部分样式 */
 .section {
-  margin-bottom: 30px;
+  margin-bottom: 80px;
 }
 
 .section-title {
@@ -334,16 +231,14 @@ const stats = ref([
   display: inline-block;
 }
 
-.section-title::before {
+.section-title:after {
   content: "";
   position: absolute;
-  top: -10px;
+  bottom: -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;
 }
 
@@ -356,8 +251,7 @@ const stats = ref([
 
 /* 使命愿景卡片 */
 .mission-section {
-  // margin: 80px 0;
+  margin: 80px 0;
-  // margin-top: 160px;
 }
 
 .mission-cards {
@@ -395,18 +289,16 @@ const stats = ref([
   position: relative;
   padding-left: 50px;
   margin-top: 50px;
-  transform: translateX(-20px);
 }
 
 .timeline:before {
   content: "";
   position: absolute;
-  top: 2%;
+  top: 0;
-  left: 10px;
+  left: 20px;
   height: 100%;
-  width: 2px;
+  width: 4px;
-  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
-  background: #ff7bac;
 }
 
 .timeline-item {
@@ -414,25 +306,12 @@ 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: 22px;
+  width: 40px;
-  height: 22px;
+  height: 40px;
   border-radius: 50%;
   background: #ff7bac;
   display: flex;
@@ -440,20 +319,18 @@ const stats = ref([
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {
   font-size: 1.4rem;
   margin-bottom: 15px;
-  color: #000;
+  color: #1a2a6c;
-  font-weight: 500;
 }
 
 .timeline-desc {
-  font-size: 16PX !important;
+  font-size: 1.05rem;
   line-height: 1.7;
-  color: #455363;
   margin-bottom: 10px;
 }
 

src/views/companyoverview/size1920/index.vue

@@ -1,37 +1,16 @@
 <template>
-  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+  <div class="home-page">
-    <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: 900px; margin: 120px auto"
+        style="max-width: 1200px; margin: 60px auto"
       >
-        <h1 class="">
+        <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
         </h1>
         <div class="content-block">
-          <div style="font-size: 16px; color: #455363">
+          <div style="font-size: 18px">
             {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
           </div>
           <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@@ -41,17 +20,12 @@
 
       <!-- 使命愿景卡片 -->
       <section class="mission-section">
-        <!-- <h1 class="section-title">
+        <h1 class="section-title">
-          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1> -->
-        <div class="mission-cards">
-          <n-card hoverable class="mission-card" v-motion-pop>
-            <div>
-              <h1 class="mt-0">
           {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
         </h1>
-            </div>
+        <div class="mission-cards">
-            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
               $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
             }}</n-p>
           </n-card>
@@ -60,7 +34,7 @@
 
       <!-- 里程碑时间轴 -->
       <!-- 里程碑时间轴 -->
-      <section class="section timeline-section mt-[120PX]">
+      <section class="section timeline-section">
         <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
         </h1>
@@ -69,11 +43,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
               }}</n-h3>
               <br />
               <n-p style="font-size: 18px" class="timeline-desc">{{
@@ -91,13 +62,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
               }}</n-h3>
               <br />
 
@@ -116,13 +82,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
               }}</n-h3>
               <br />
 
@@ -141,13 +102,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
               }}</n-h3>
               <br />
 
@@ -166,13 +122,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
               }}</n-h3>
               <br />
 
@@ -203,72 +154,23 @@
           </div>
         </div>
       </section>
-    </div>
+
       <!-- 成就部分 -->
 
-    <section
+      <section class="mission-section">
-      class="mission-section overflow-hidden relative z-99"
+        <h1 class="section-title">
-      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>
@@ -284,18 +186,15 @@ const stats = ref([
 ]);
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .home-page {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 .company-overview {
-  width: 900PX;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
-  z-index: 99;
-  position: relative;
   /* padding: 0 20px; */
 }
 
@@ -324,7 +223,7 @@ const stats = ref([
 
 /* 通用部分样式 */
 .section {
-  margin-bottom: 30px;
+  margin-bottom: 80px;
 }
 
 .section-title {
@@ -334,16 +233,14 @@ const stats = ref([
   display: inline-block;
 }
 
-.section-title::before {
+.section-title:after {
   content: "";
   position: absolute;
-  top: -10px;
+  bottom: -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;
 }
 
@@ -356,8 +253,7 @@ const stats = ref([
 
 /* 使命愿景卡片 */
 .mission-section {
-  // margin: 80px 0;
+  margin: 80px 0;
-  // margin-top: 160px;
 }
 
 .mission-cards {
@@ -395,18 +291,16 @@ const stats = ref([
   position: relative;
   padding-left: 50px;
   margin-top: 50px;
-  transform: translateX(-20px);
 }
 
 .timeline:before {
   content: "";
   position: absolute;
-  top: 2%;
+  top: 0;
-  left: 10px;
+  left: 20px;
   height: 100%;
-  width: 2px;
+  width: 4px;
-  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
-  background: #ff7bac;
 }
 
 .timeline-item {
@@ -414,25 +308,12 @@ 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: 22px;
+  width: 40px;
-  height: 22px;
+  height: 40px;
   border-radius: 50%;
   background: #ff7bac;
   display: flex;
@@ -440,20 +321,18 @@ const stats = ref([
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {
   font-size: 1.4rem;
   margin-bottom: 15px;
-  color: #000;
+  color: #1a2a6c;
-  font-weight: 500;
 }
 
 .timeline-desc {
-  font-size: 16PX !important;
+  font-size: 1.05rem;
   line-height: 1.7;
-  color: #455363;
   margin-bottom: 10px;
 }
 

src/views/companyoverview/size768/index.vue

@@ -1,37 +1,16 @@
 <template>
-  <div class="home-page relative overflow-hidden z-99 bg-[#ffffff]">
+  <div class="home-page">
-    <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: 586px; margin: 120px auto"
+        style="max-width: 1200px; margin: 60px auto"
       >
-        <h1 class="">
+        <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}
         </h1>
         <div class="content-block">
-          <div style="font-size: 16px; color: #455363">
+          <div style="font-size: 18px">
             {{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}
           </div>
           <!-- <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWO") }}</p>
@@ -41,17 +20,12 @@
 
       <!-- 使命愿景卡片 -->
       <section class="mission-section">
-        <!-- <h1 class="section-title">
+        <h1 class="section-title">
-          {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
-        </h1> -->
-        <div class="mission-cards">
-          <n-card hoverable class="mission-card" v-motion-pop>
-            <div>
-              <h1 class="mt-0">
           {{ $t("COMPANYOVERVIEW.TITLETHREE.TITLE") }}
         </h1>
-            </div>
+        <div class="mission-cards">
-            <n-p style="font-size: 16px; color: #455363" class="card-content">{{
+          <n-card hoverable class="mission-card" v-motion-pop>
+            <n-p style="font-size: 18px" class="card-content">{{
               $t("COMPANYOVERVIEW.TITLETHREE.CONTENTTWO")
             }}</n-p>
           </n-card>
@@ -60,7 +34,7 @@
 
       <!-- 里程碑时间轴 -->
       <!-- 里程碑时间轴 -->
-      <section class="section timeline-section mt-[120PX]">
+      <section class="section timeline-section">
         <h1 class="section-title">
           {{ $t("COMPANYOVERVIEW.TITLEFOUR.TITLE") }}
         </h1>
@@ -69,11 +43,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADING")
               }}</n-h3>
               <br />
               <n-p style="font-size: 18px" class="timeline-desc">{{
@@ -91,13 +62,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTWO")
               }}</n-h3>
               <br />
 
@@ -116,13 +82,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGTHREE")
               }}</n-h3>
               <br />
 
@@ -141,13 +102,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFOREFF")
               }}</n-h3>
               <br />
 
@@ -166,13 +122,8 @@
           <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").split(":")[1]
+                $t("COMPANYOVERVIEW.TITLEFOUR.SUBHEADINGFIVE")
               }}</n-h3>
               <br />
 
@@ -203,72 +154,22 @@
           </div>
         </div>
       </section>
-    </div>
-    <!-- 成就部分 -->
 
-    <section
+      <!-- 成就部分 -->
-      class="mission-section overflow-hidden relative z-99"
+      <section class="mission-section">
-      style="
+        <h1 class="section-title">
-        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>
@@ -284,19 +185,15 @@ const stats = ref([
 ]);
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .home-page {
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
 .company-overview {
-  width: 586PX;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 0 10px;
-  z-index: 99;
-  position: relative;
-  /* padding: 0 20px; */
 }
 
 /* 顶部大图区域 */
@@ -324,7 +221,7 @@ const stats = ref([
 
 /* 通用部分样式 */
 .section {
-  margin-bottom: 30px;
+  margin-bottom: 80px;
 }
 
 .section-title {
@@ -334,16 +231,14 @@ const stats = ref([
   display: inline-block;
 }
 
-.section-title::before {
+.section-title:after {
   content: "";
   position: absolute;
-  top: -10px;
+  bottom: -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;
 }
 
@@ -356,8 +251,7 @@ const stats = ref([
 
 /* 使命愿景卡片 */
 .mission-section {
-  // margin: 80px 0;
+  margin: 80px 0;
-  // margin-top: 160px;
 }
 
 .mission-cards {
@@ -395,18 +289,16 @@ const stats = ref([
   position: relative;
   padding-left: 50px;
   margin-top: 50px;
-  transform: translateX(-20px);
 }
 
 .timeline:before {
   content: "";
   position: absolute;
-  top: 2%;
+  top: 0;
-  left: 10px;
+  left: 20px;
   height: 100%;
-  width: 2px;
+  width: 4px;
-  /* background: linear-gradient(to bottom, #00ffff, #ff7bac); */
+  background: linear-gradient(to bottom, #00ffff, #ff7bac);
-  background: #ff7bac;
 }
 
 .timeline-item {
@@ -414,25 +306,12 @@ 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: 22px;
+  width: 40px;
-  height: 22px;
+  height: 40px;
   border-radius: 50%;
   background: #ff7bac;
   display: flex;
@@ -440,20 +319,18 @@ const stats = ref([
   justify-content: center;
   color: white;
   font-weight: bold;
-  box-shadow: 0 0 0 7px rgba(255, 123, 172, 0.2);
+  box-shadow: 0 0 0 6px rgba(255, 123, 172, 0.2);
 }
 
 .timeline-year {
   font-size: 1.4rem;
   margin-bottom: 15px;
-  color: #000;
+  color: #1a2a6c;
-  font-weight: 500;
 }
 
 .timeline-desc {
-  font-size: 16PX !important;
+  font-size: 1.05rem;
   line-height: 1.7;
-  color: #455363;
   margin-bottom: 10px;
 }
 
@@ -511,30 +388,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,8 +93,7 @@
       "
     >
       <div
-        style="height: 190px; width: 900px"
+        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
-        class="m-[auto] my-[64px] flex flex-col items-center text-center"
       >
         <h2 class="section-titles">
           {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
@@ -116,7 +115,7 @@
               class="w-[95px]"
             />
           </div>
-          <p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
+          <p style="font-size: 18px" class="w-[438px] my-0">
             {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
           </p>
           <div class="flex items-center">
@@ -139,46 +138,9 @@
       </div>
     </section>
     <!-- 新闻模块 -->
-    <section class="news-section relative z-99" style="width: 900px; margin: 60px auto">
+    <section class="news-section" style="width: 900px; margin: 60px auto">
-      <div class="flex justify-between">
+      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-        <h2 class="section-titles section-titles1">
+      <div class="grid grid-cols-2 gap-[15px]">
-          {{ $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"
@@ -223,59 +185,6 @@
             </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">
@@ -354,59 +263,49 @@
         background-color: #e7407e;
       "
     >
-      <div style="width: 900px" class="w-[900px] m-auto">
+      <div class="w-[900px] m-auto">
         <!-- 股票信息卡片 -->
         <div class="">
           <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
           <div class="stock-data">
-            <div
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label"> Time </span>
               <span class="data-value">{{ sampleDate }}</span>
             </div>
-            <div
+            <div class="data-row">
-              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
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
 
-              <span class="data-value">{{ stockQuote.change || "--" }}</span>
+              <span
-            </div>
+                class="data-value"
-            <div
+                :class="
-              class="data-row"
+                  stockQuote.change?.includes('-')
-              style="transform: translateX(-10px); padding-left: 10px"
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
               >
+            </div>
+            <div class="data-row">
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
               }}</span>
               <span class="data-value">NASDAQ: FIEE</span>
             </div>
-            <div
+            <div class="data-row">
-              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
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
               }}</span>
@@ -462,7 +361,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") }}
@@ -520,42 +419,6 @@ 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);
@@ -751,16 +614,6 @@ 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 {
@@ -890,7 +743,8 @@ 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,8 +93,7 @@
       "
     >
       <div
-        style="height: 190px; width: 900px"
+        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] text-center"
-        class="m-[auto] my-[64px] flex flex-col items-center text-center"
       >
         <h2 class="section-titles">
           {{ $t("COMPANYOVERVIEW.TITLEFIVE.TITLE") }}
@@ -116,7 +115,7 @@
               class="w-[95px]"
             />
           </div>
-          <p style="font-size: 14px; width: 439px" class="my-0 text-[#455363]">
+          <p style="font-size: 18px" class="w-[438px] my-0">
             {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
           </p>
           <div class="flex items-center">
@@ -139,46 +138,9 @@
       </div>
     </section>
     <!-- 新闻模块 -->
-    <section class="news-section relative z-99" style="width: 900px; margin: 60px auto;">
+    <section class="news-section" style="width: 900px; margin: 60px auto">
-      <div class="flex justify-between">
+      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-        <h2 class="section-titles section-titles1">
+      <div class="grid grid-cols-2 gap-[15px]">
-          {{ $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"
@@ -223,59 +185,6 @@
             </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">
@@ -354,59 +263,49 @@
         background-color: #e7407e;
       "
     >
-      <div style="width: 900px" class="w-[900px] m-auto">
+      <div class="w-[900px] m-auto">
         <!-- 股票信息卡片 -->
         <div class="">
           <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
           <div class="stock-data">
-            <div
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label"> Time </span>
               <span class="data-value">{{ sampleDate }}</span>
             </div>
-            <div
+            <div class="data-row">
-              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
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
 
-              <span class="data-value">{{ stockQuote.change || "--" }}</span>
+              <span
-            </div>
+                class="data-value"
-            <div
+                :class="
-              class="data-row"
+                  stockQuote.change?.includes('-')
-              style="transform: translateX(-10px); padding-left: 10px"
+                    ? 'text-green-500'
+                    : 'text-red-500'
+                "
+                >{{ stockQuote.change || "--" }}</span
               >
+            </div>
+            <div class="data-row">
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
               }}</span>
               <span class="data-value">NASDAQ: FIEE</span>
             </div>
-            <div
+            <div class="data-row">
-              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
+            <div class="data-row">
-              class="data-row"
-              style="transform: translateX(-10px); padding-left: 10px"
-            >
               <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
               }}</span>
@@ -462,7 +361,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") }}
@@ -520,42 +419,6 @@ 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);
@@ -751,16 +614,6 @@ 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 {
@@ -890,7 +743,8 @@ 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,39 +1,8 @@
 <template>
-  <div class="home-page relative overflow-hidden z-10 bg-[#ffffff]">
+  <div class="home-page">
-    <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="
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-        max-width: 618px;
-        margin: 0 auto;
-        padding: 0;
-        padding-top: 290px;
-        height: 790px;
-      "
     >
       <div class="hero-section">
         <transition name="fade-up" appear>
@@ -54,14 +23,15 @@
     <!-- 公司概况 -->
     <section
       class="company-overview"
-      style="max-width: 618px; margin: 0 auto; padding: 0;margin-top: 100px;"
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
     >
-      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
       <h1 class="section-titles">Company Profile</h1>
-      <div class="content-block text-[#455363]">
+
+      <h3 class="section-title">{{ $t("COMPANYOVERVIEW.TITLETWO.TITLE") }}</h3>
+      <div class="content-block">
         <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENT") }}</p>
         <p>
-          <text class="text-[#455363]">{{
+          <text style="color: black">{{
             $t("COMPANYOVERVIEW.TITLETWO.CONTENTTWOTITLE")
           }}</text>
 
@@ -69,195 +39,31 @@
         </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 overflow-hidden z-99 relative"
+      class="achievements"
       style="
-        width: 100vw;
+        max-width: 1200px;
+        margin: 60px auto;
         padding: 0 40px;
-        margin-top: 40px;
+        background: #fff;
-        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>
-        <div class="w-100% flex items-center justify-between">
+      <p style="font-size: 18px">
-          <p style="font-size: 14px" class="my-0 text-[#455363]">
         {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
       </p>
-        </div>
-      </div>
     </section>
     <!-- 新闻模块 -->
-    <section class="news-section relative z-99" style="width: 618px; margin: 60px auto">
+    <section
-      <div class="flex justify-between">
+      class="news-section"
-        <h2 class="section-titles section-titles1">
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-          {{ $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>
+      <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-            <n-tooltip
+      <div class="news-card">
-              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="
@@ -268,9 +74,8 @@
           >
             <div>
               <div style="font-size: 18px">{{ item.time }}</div>
-
               <n-tooltip
-                trigger="hover"
+                trigger="click"
                 :disabled="!item.showTooltip"
                 width="trigger"
               >
@@ -297,7 +102,7 @@
             </div>
 
             <div
-              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.6rem"
+              style="font-size: 18px; flex-shrink: 0; margin: 0 0 0 0.9rem"
               class="cursor-pointer"
               @click="handleLink(item)"
             >
@@ -320,121 +125,81 @@
             style="width: 109px; height: 60px"
           />
         </div>
-      </div> -->
+      </div>
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
     <section
-      class="dual-column-section bg-[url('@/assets/image/content/information1.png')]"
+      class="dual-column-section"
-      style="
+      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-        width: 100vw;
-        height: 743px;
-        margin: 60px auto;
-        padding: 0 40px;
-        background-size: 100% 100%;
-        background-color: #e7407e;
-      "
     >
-      <div style="width: 618px" class="m-auto">
+      <div class="grid-container">
         <!-- 股票信息卡片 -->
-        <div class="">
+        <div class="info-card stock-card">
           <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
           <div class="stock-data">
             <div class="data-row">
-              <span class="data-label"> Time </span>
+              <span style="font-size: 18px" class="data-label"> Time </span>
-              <span class="data-value">{{ sampleDate }}</span>
+              <span style="font-size: 18px" class="data-value">{{
+                formatted
+              }}</span>
             </div>
             <div class="data-row">
-              <span class="data-label">{{
+              <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
               }}</span>
-              <span class="data-value">${{ stockQuote.price }}</span>
+              <span style="font-size: 18px" class="data-value"
+                >${{ stockQuote.price }}</span
+              >
             </div>
             <div class="data-row">
-              <span class="data-label">{{
+              <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
 
-              <span class="data-value">{{ stockQuote.change || "--" }}</span>
+              <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 class="data-label">{{
+              <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
               }}</span>
-              <span class="data-value">NASDAQ: FIEE</span>
+              <span style="font-size: 18px" class="data-value"
+                >NASDAQ: FIEE</span
+              >
             </div>
             <div class="data-row">
-              <span class="data-label">{{
+              <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
               }}</span>
-              <span class="data-value">{{ stockQuote.volume }}</span>
+              <span style="font-size: 18px" class="data-value">{{
+                stockQuote.volume
+              }}</span>
             </div>
             <div class="data-row">
-              <span class="data-label">{{
+              <span style="font-size: 18px" class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
               }}</span>
-              <span class="data-value">${{ stockQuote.marketCap }}</span>
+              <span style="font-size: 18px" class="data-value"
+                >${{ stockQuote.marketCap }}</span
+              >
             </div>
           </div>
         </div>
 
         <!-- 活动预告卡片 -->
-        <!-- <div class="">
+        <div class="info-card events-card">
           <h2 class="card-title">
             {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
           </h2>
-          <div class="event-item"> -->
-        <!-- <h3 class="event-name">
-              {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
-            </h3> -->
-        <!-- <div class="event-detail">
-              <div class="detail-row">
-                <i class="icon-calendar"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
-                  2025年8月12日(二)-2025年8月14日</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-location"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
-                  6号馆B厅</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-area"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
-                  约10,000m²</span
-                >
-              </div>
-              <div class="detail-row">
-                <i class="icon-booth"></i>
-                <span
-                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
-                  约500个标准展位</span
-                >
-              </div>
-            </div> -->
-        <!-- </div> -->
-        <!-- </div> -->
-      </div>
-    </section>
-    <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> -->
@@ -483,44 +248,12 @@ 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);
+const { t: $t } = useI18n();
+const contentRef = ref(null);
+const isInView = ref(false);
+let observer = null;
 
 const newList = ref([
   // {
@@ -535,36 +268,6 @@ 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(
@@ -624,6 +327,32 @@ 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();
@@ -641,7 +370,7 @@ const handleLink = (item) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .home-page {
   background-size: 100% 100%;
   background-position: center;
@@ -655,11 +384,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: #000;
+  color: white;
-  padding: 40px 0px;
+  padding: 40px 20px;
   text-align: left;
   margin-bottom: 60px;
   border-radius: 8px;
@@ -678,7 +407,7 @@ const handleLink = (item) => {
 }
 .banner-content {
   text-align: center;
-  color: #000;
+  color: white;
   padding: 20px;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
@@ -705,34 +434,24 @@ const handleLink = (item) => {
 
 .section-title {
   font-size: 1.5rem; /* 18px */
-  margin-bottom: 0;
+  margin-bottom: 30px;
   color: #ff7bac;
 }
 .section-titles {
-  font-size: 2.2rem;
+  font-size: 2.5rem;
-  margin-bottom: 15px;
+  margin-bottom: 30px;
-  margin-top: 0;
   color: black;
-  position: relative;
-}
-.section-titles1::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: 60px;
-  height: 4px;
-  background: #ff7bac;
-  transform: translateY(-20px);
 }
 
 .content-block {
-  font-size: 0.9rem;
+  font-size: 1.1rem;
   line-height: 1.8;
 }
 .content-blocks {
   font-size: 2rem;
-  color: #000;
+  color: #fff;
   font-weight: bold;
+
   opacity: 0;
   transform: translateX(-200px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
@@ -804,38 +523,20 @@ const handleLink = (item) => {
 
 .card-title {
   font-size: 2.5rem;
-  padding-top: 88px;
+  margin-bottom: 25px;
-  color: #ffffff;
+  color: #333;
   position: relative;
-  margin-bottom: 0;
+  padding-bottom: 10px;
 }
 
 .card-title::after {
   content: "";
   position: absolute;
+  bottom: 0;
   left: 0;
   width: 60px;
-  height: 4px;
+  height: 3px;
-  background: #ffffff;
+  background: linear-gradient(90deg, #121212, #232330);
-  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);
 }
 
 /* 股票信息卡片样式 */
@@ -849,24 +550,20 @@ const handleLink = (item) => {
 
 .data-row {
   display: flex;
-  /* justify-content: space-between; */
+  justify-content: space-between;
-  margin: 24px 0;
+  padding: 12px 0;
-  border-left: 2px solid #00ffff;
+  border-bottom: 1px solid #f0f0f0;
-  transform: translateX(-10px);
-  padding-left: 30px;
-  font-size: 14PX;
-  color: #fff;
 }
 
 .data-label {
-  // font-weight: 500;
+  color: #666;
-  width: 150px;
+  font-weight: 500;
+  font-size: 18px;
 }
 
 .data-value {
-  // font-weight: 600;
+  font-weight: 600;
-  font-family: "PingFang SC";
+  font-size: 18px;
-  letter-spacing: 0.48px;
 }
 
 .positive {
@@ -947,7 +644,7 @@ const handleLink = (item) => {
   border-radius: 12px;
   padding: 30px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
-  border-top: 14px solid #ff7bac;
+  border-left: 4px solid #ff7bac;
 }
 
 .news-date {

src/views/news/size1920/index.vue

@@ -54,7 +54,7 @@ const getPressReleasesInfo = () => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  width: 900PX;
+  max-width: 932px;
   margin: 0 auto;
   padding: 0 16px;
 }