代码暂存

src/views/myHome/size1440/index.vue

@@ -1,8 +1,28 @@
 <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: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[916px] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_1.png"
+          alt=""
+          class="w-[100vw] absolute top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_2.png"
+          alt=""
+          class="w-[100vw] absolute bottom-0 lef-0 right-0 z-99"
+        />
+      </div>
+    </div>
     <section
-      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      class="company-overview h-[916px]"
+      style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
     >
       <div class="hero-section">
         <transition name="fade-up" appear>
@@ -23,15 +43,14 @@
     <!-- 公司概况 -->
     <section
       class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      style="max-width: 900px; margin: 0 auto; padding: 0"
     >
-      <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 +58,135 @@
         </p>
         <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
       </div>
+
+      <div class="flex justify-between w-[100%]">
+        <img
+          src="@/assets/image/content/profile_1.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_2.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_3.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_4.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+      </div>
     </section>
     <!-- 突出成就 -->
     <section
-      class="achievements"
+      class="achievements overflow-hidden z-99 relative"
       style="
-        max-width: 1200px;
-        margin: 60px auto;
+        width: 100vw;
         padding: 0 40px;
-        background: #fff;
+        margin-top: 40px;
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
       "
+    >
+      <div
+        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] 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">
+          <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center mr-[8px]"
+            >
+              <img
+                src="@/assets/image/content/left.png"
+                alt=""
+                class="w-[94px] h-[94px]"
+              />
+            </div>
+            <img
+              src="@/assets/image/content/arrowhead_left.png"
+              alt=""
+              class="w-[95px]"
+            />
+          </div>
+          <p style="font-size: 18px" class="w-[438px] my-0">
             {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
           </p>
+          <div class="flex items-center">
+            <img
+              src="@/assets/image/content/arrowhead_right.png"
+              alt=""
+              class="w-[95px]"
+            />
+            <div
+              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center ml-[8px]"
+            >
+              <img
+                src="@/assets/image/content/right.png"
+                alt=""
+                class="w-[94px] h-[94px]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
     <!-- 新闻模块 -->
-    <section
-      class="news-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
+    <section class="news-section" style="width: 900px; margin: 60px auto">
       <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-      <div class="news-card">
+      <div class="grid grid-cols-2 gap-[15px]">
+        <template v-for="(item, index) in newList" :key="index">
+          <div
+            class="h-[246px] news-card flex flex-col justify-between"
+            :class="{ 'col-span-2': index === 4 }"
+          >
+            <div class="text-[24px] font-600">{{ item.time }}</div>
+            <n-tooltip
+              trigger="hover"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
+              <template #trigger>
+                <div
+                  :ref="(el) => setTitleRef(el, index)"
+                  style="
+                    word-break: break-word;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
+                  class="text-[16px] text-[#455363]"
+                >
+                  {{ item.title }}
+                </div>
+              </template>
+              <div slot="content" class="text-[16px] text-[#455363]">
+                {{ item.title }}
+              </div>
+            </n-tooltip>
+            <div
+              class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
+              @click="handleLink(item)"
+            >
+              View Press Release
+              <img
+                src="@/assets/image/content/vector.png"
+                alt=""
+                class="ml-[10px] w-[6.5px] h-[13px]"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+      <!-- <div class="news-card">
         <div style="margin-bottom: 20px" v-for="(item, index) in newList">
           <div
             style="
@@ -74,6 +197,7 @@
           >
             <div>
               <div style="font-size: 18px">{{ item.time }}</div>
+
               <n-tooltip
                 trigger="hover"
                 :disabled="!item.showTooltip"
@@ -125,38 +249,41 @@
             style="width: 109px; height: 60px"
           />
         </div>
-      </div>
+      </div> -->
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
     <section
-      class="dual-column-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      class="dual-column-section bg-[url('@/assets/image/content/information.png')]"
+      style="
+        width: 100vw;
+        height: 643px;
+        margin: 60px auto;
+        padding: 0 40px;
+        background-size: 100% 100%;
+        background-color: #e7407e;
+      "
     >
-      <div class="grid-container">
+      <div class="w-[900px] m-auto">
         <!-- 股票信息卡片 -->
-        <div class="info-card stock-card">
+        <div class="">
           <h2 class="card-title">{{ $t("HOME.CONTAINY.STOCK_INFO.TITLE") }}</h2>
           <div class="stock-data">
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label"> Time </span>
-              <span style="font-size: 18px" class="data-value">{{
-                formatted
-              }}</span>
+              <span class="data-label"> Time </span>
+              <span class="data-value">{{ sampleDate }}</span>
             </div>
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.LAST_PRICE")
               }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.price }}</span
-              >
+              <span class="data-value">${{ stockQuote.price }}</span>
             </div>
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.CHANGE")
               }}</span>
+
               <span
-                style="font-size: 18px"
                 class="data-value"
                 :class="
                   stockQuote.change?.includes('-')
@@ -167,38 +294,84 @@
               >
             </div>
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.STOCK_CODE")
               }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >NASDAQ: FIEE</span
-              >
+              <span class="data-value">NASDAQ: FIEE</span>
             </div>
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.VOLUME")
               }}</span>
-              <span style="font-size: 18px" class="data-value">{{
-                stockQuote.volume
-              }}</span>
+              <span class="data-value">{{ stockQuote.volume }}</span>
             </div>
             <div class="data-row">
-              <span style="font-size: 18px" class="data-label">{{
+              <span class="data-label">{{
                 $t("HOME.CONTAINY.STOCK_INFO.MARKET_CAP")
               }}</span>
-              <span style="font-size: 18px" class="data-value"
-                >${{ stockQuote.marketCap }}</span
-              >
+              <span class="data-value">${{ stockQuote.marketCap }}</span>
             </div>
           </div>
         </div>
 
         <!-- 活动预告卡片 -->
-        <div class="info-card events-card">
+        <!-- <div class="">
           <h2 class="card-title">
             {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
           </h2>
+          <div class="event-item"> -->
+        <!-- <h3 class="event-name">
+              {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
+            </h3> -->
+        <!-- <div class="event-detail">
+              <div class="detail-row">
+                <i class="icon-calendar"></i>
+                <span
+                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.DATE") }}:
+                  2025年8月12日(二)-2025年8月14日</span
+                >
+              </div>
+              <div class="detail-row">
+                <i class="icon-location"></i>
+                <span
+                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.VENUE") }}:
+                  6号馆B厅</span
+                >
+              </div>
+              <div class="detail-row">
+                <i class="icon-area"></i>
+                <span
+                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.AREA") }}:
+                  约10,000m²</span
+                >
+              </div>
+              <div class="detail-row">
+                <i class="icon-booth"></i>
+                <span
+                  >{{ $t("HOME.CONTAINY.UPCOMING_EVENTS.BOOTHS") }}:
+                  约500个标准展位</span
+                >
+              </div>
+            </div> -->
+        <!-- </div> -->
+        <!-- </div> -->
+      </div>
+    </section>
+    <section
+      class="dual-column-section"
+      style="width: 100vw; height: 643px; margin: 60px auto; padding: 0 40px"
+    >
+      <div class="w-[900px] m-auto">
+        <div class="">
+          <h2 class="card-title1">
+            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
+          </h2>
           <div class="event-item">
+            <img
+              src="@/assets/image/content/empty.png"
+              alt=""
+              class="w-[100%] h-[540px]"
+            />
             <!-- <h3 class="event-name">
               {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
             </h3> -->
@@ -246,13 +419,10 @@ import { useI18n } from "vue-i18n";
 import { useStockQuote } from "@/store/stock-quote/index.js";
 import axios from "axios";
 const { getStockQuate, stockQuote, formatted } = useStockQuote();
-
 getStockQuate();
+// 示例数据
+const sampleDate = ref(formatted);
 
-const { t: $t } = useI18n();
-const contentRef = ref(null);
-const isInView = ref(false);
-let observer = null;
 const newList = ref([
   // {
   //   time: "June 3, 2025",
@@ -292,6 +462,10 @@ const getPressReleasesDisplay = () => {
   });
 };
 
+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(
@@ -368,7 +542,7 @@ const handleLink = (item) => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .home-page {
   background-size: 100% 100%;
   background-position: center;
@@ -382,11 +556,11 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
   background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 40px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 40px 0px;
   text-align: left;
   margin-bottom: 60px;
   border-radius: 8px;
@@ -405,7 +579,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;
@@ -432,24 +606,24 @@ const handleLink = (item) => {
 
 .section-title {
   font-size: 1.5rem; /* 18px */
-  margin-bottom: 30px;
+  margin-bottom: 0;
   color: #ff7bac;
 }
 .section-titles {
-  font-size: 2.5rem;
-  margin-bottom: 30px;
+  font-size: 2.2rem;
+  margin-bottom: 15px;
+  margin-top: 0;
   color: black;
 }
 
 .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;
@@ -521,20 +695,38 @@ const handleLink = (item) => {
 
 .card-title {
   font-size: 2.5rem;
-  margin-bottom: 25px;
-  color: #333;
+  padding-top: 88px;
+  color: #ffffff;
   position: relative;
-  padding-bottom: 10px;
+  margin-bottom: 0;
 }
 
 .card-title::after {
   content: "";
   position: absolute;
-  bottom: 0;
   left: 0;
   width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #121212, #232330);
+  height: 4px;
+  background: #ffffff;
+  transform: translateY(-20px);
+}
+
+.card-title1 {
+  font-size: 2.5rem;
+  padding-top: 88px;
+  color: #000;
+  position: relative;
+  margin-bottom: 0;
+}
+
+.card-title1::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: #ff7bac;
+  transform: translateY(-20px);
 }
 
 /* 股票信息卡片样式 */
@@ -548,20 +740,24 @@ const handleLink = (item) => {
 
 .data-row {
   display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
+  /* justify-content: space-between; */
+  margin: 24px 0;
+  border-left: 2px solid #00ffff;
+  transform: translateX(-10px);
+  padding-left: 10px;
+  font-size: 14px;
+  color: #fff;
 }
 
 .data-label {
-  color: #666;
-  font-weight: 500;
-  font-size: 18px;
+  // font-weight: 500;
+  width: 150px;
 }
 
 .data-value {
-  font-weight: 600;
-  font-size: 18px;
+  // font-weight: 600;
+  font-family: "PingFang SC";
+  letter-spacing: 0.48px;
 }
 
 .positive {
@@ -642,7 +838,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 {
@@ -657,6 +853,13 @@ const handleLink = (item) => {
   margin-bottom: 15px;
 }
 
+.news-excerpt {
+  color: black;
+  line-height: 0.8;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
 .news-link {
   color: #895bff;
   font-weight: 600;

src/views/myHome/size1920/index.vue

@@ -1,8 +1,28 @@
 <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: 920px; pointer-events: none; mix-blend-mode: multiply"
+    >
+      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
+    </div>
+    <div class="w-[100%] h-[916px] z-[] top-0 absolute">
+      <div class="relative w-[100%] h-[100%]">
+        <img
+          src="@/assets/image/content/bg_1.png"
+          alt=""
+          class="w-[100vw] absolute top-[-90px]"
+        />
+        <img
+          src="@/assets/image/content/bg_2.png"
+          alt=""
+          class="w-[100vw] absolute bottom-0 lef-0 right-0 z-99"
+        />
+      </div>
+    </div>
     <section
-      class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      class="company-overview h-[916px]"
+      style="max-width: 900px; margin: 0 auto; padding: 0; padding-top: 190px"
     >
       <div class="hero-section">
         <transition name="fade-up" appear>
@@ -23,14 +43,14 @@
     <!-- 公司概况 -->
     <section
       class="company-overview"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      style="max-width: 900px; margin: 0 auto; padding: 0"
     >
-      <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>
 
@@ -38,31 +58,135 @@
         </p>
         <p>{{ $t("COMPANYOVERVIEW.TITLETWO.CONTENTTHREE") }}</p>
       </div>
+
+      <div class="flex justify-between w-[100%]">
+        <img
+          src="@/assets/image/content/profile_1.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_2.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_3.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+        <img
+          src="@/assets/image/content/profile_4.png"
+          alt=""
+          class="w-[201px] h-[201px]"
+        />
+      </div>
     </section>
     <!-- 突出成就 -->
     <section
-      class="achievements"
+      class="achievements overflow-hidden z-99 relative"
       style="
-        max-width: 1200px;
-        margin: 60px auto;
+        width: 100vw;
         padding: 0 40px;
-        background: #fff;
+        margin-top: 40px;
+        background: linear-gradient(180deg, #e5ffff 0%, #fff8fb 100%);
       "
+    >
+      <div
+        class="w-[900px] m-[auto] my-[64px] flex flex-col items-center h-[190px] 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">
+          <div class="flex items-center">
+            <div
+              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center mr-[8px]"
+            >
+              <img
+                src="@/assets/image/content/left.png"
+                alt=""
+                class="w-[94px] h-[94px]"
+              />
+            </div>
+            <img
+              src="@/assets/image/content/arrowhead_left.png"
+              alt=""
+              class="w-[95px]"
+            />
+          </div>
+          <p style="font-size: 18px" class="w-[438px] my-0">
             {{ $t("COMPANYOVERVIEW.TITLEFIVE.CONTENT").replace("•", "") }}
           </p>
+          <div class="flex items-center">
+            <img
+              src="@/assets/image/content/arrowhead_right.png"
+              alt=""
+              class="w-[95px]"
+            />
+            <div
+              class="bg-[#ffffff] w-[108px] h-[108px] rounded-[50%] flex justify-center items-center ml-[8px]"
+            >
+              <img
+                src="@/assets/image/content/right.png"
+                alt=""
+                class="w-[94px] h-[94px]"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
     <!-- 新闻模块 -->
-    <section
-      class="news-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
-    >
+    <section class="news-section" style="width: 900px; margin: 60px auto">
       <h2 class="section-titles">{{ $t("HOME.CONTAINY.NEWS.TITLE") }}</h2>
-      <div class="news-card">
+      <div class="grid grid-cols-2 gap-[15px]">
+        <template v-for="(item, index) in newList" :key="index">
+          <div
+            class="h-[246px] news-card flex flex-col justify-between"
+            :class="{ 'col-span-2': index === 4 }"
+          >
+            <div class="text-[24px] font-600">{{ item.time }}</div>
+            <n-tooltip
+              trigger="hover"
+              :disabled="!item.showTooltip"
+              width="trigger"
+            >
+              <template #trigger>
+                <div
+                  :ref="(el) => setTitleRef(el, index)"
+                  style="
+                    word-break: break-word;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
+                  class="text-[16px] text-[#455363]"
+                >
+                  {{ item.title }}
+                </div>
+              </template>
+              <div slot="content" class="text-[16px] text-[#455363]">
+                {{ item.title }}
+              </div>
+            </n-tooltip>
+            <div
+              class="text-[16px] text-[#FF7BAC] font-500 flex items-center cursor-pointer"
+              @click="handleLink(item)"
+            >
+              View Press Release
+              <img
+                src="@/assets/image/content/vector.png"
+                alt=""
+                class="ml-[10px] w-[6.5px] h-[13px]"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+      <!-- <div class="news-card">
         <div style="margin-bottom: 20px" v-for="(item, index) in newList">
           <div
             style="
@@ -125,16 +249,23 @@
             style="width: 109px; height: 60px"
           />
         </div>
-      </div>
+      </div> -->
     </section>
     <!-- 新增：股票信息与活动预告双栏模块 -->
     <section
-      class="dual-column-section"
-      style="max-width: 1200px; margin: 60px auto; padding: 0 40px"
+      class="dual-column-section bg-[url('@/assets/image/content/information.png')]"
+      style="
+        width: 100vw;
+        height: 643px;
+        margin: 60px auto;
+        padding: 0 40px;
+        background-size: 100% 100%;
+        background-color: #e7407e;
+      "
     >
-      <div class="grid-container">
+      <div class="w-[900px] 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">
@@ -184,11 +315,63 @@
         </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-[900px] m-auto">
+        <div class="">
+          <h2 class="card-title1">
+            {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.TITLE") }}
+          </h2>
           <div class="event-item">
+            <img
+              src="@/assets/image/content/empty.png"
+              alt=""
+              class="w-[100%] h-[540px]"
+            />
             <!-- <h3 class="event-name">
               {{ $t("HOME.CONTAINY.UPCOMING_EVENTS.EVENT_NAME") }}
             </h3> -->
@@ -359,7 +542,7 @@ const handleLink = (item) => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .home-page {
   background-size: 100% 100%;
   background-position: center;
@@ -373,11 +556,11 @@ const handleLink = (item) => {
 }
 /* 顶部大图区域 */
 .hero-section {
-  background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac);
+  /* background: linear-gradient(135deg, #00ffff, #b21f1f, #ff7bac); */
   background-size: 400% 400%;
-  animation: gradientBG 15s ease infinite;
-  color: white;
-  padding: 40px 20px;
+  /* animation: gradientBG 15s ease infinite; */
+  color: #000;
+  padding: 40px 0px;
   text-align: left;
   margin-bottom: 60px;
   border-radius: 8px;
@@ -396,7 +579,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;
@@ -423,24 +606,24 @@ const handleLink = (item) => {
 
 .section-title {
   font-size: 1.5rem; /* 18px */
-  margin-bottom: 30px;
+  margin-bottom: 0;
   color: #ff7bac;
 }
 .section-titles {
-  font-size: 2.5rem;
-  margin-bottom: 30px;
+  font-size: 2.2rem;
+  margin-bottom: 15px;
+  margin-top: 0;
   color: black;
 }
 
 .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;
@@ -512,20 +695,38 @@ const handleLink = (item) => {
 
 .card-title {
   font-size: 2.5rem;
-  margin-bottom: 25px;
-  color: #333;
+  padding-top: 88px;
+  color: #ffffff;
   position: relative;
-  padding-bottom: 10px;
+  margin-bottom: 0;
 }
 
 .card-title::after {
   content: "";
   position: absolute;
-  bottom: 0;
   left: 0;
   width: 60px;
-  height: 3px;
-  background: linear-gradient(90deg, #121212, #232330);
+  height: 4px;
+  background: #ffffff;
+  transform: translateY(-20px);
+}
+
+.card-title1 {
+  font-size: 2.5rem;
+  padding-top: 88px;
+  color: #000;
+  position: relative;
+  margin-bottom: 0;
+}
+
+.card-title1::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 60px;
+  height: 4px;
+  background: #ff7bac;
+  transform: translateY(-20px);
 }
 
 /* 股票信息卡片样式 */
@@ -539,20 +740,24 @@ const handleLink = (item) => {
 
 .data-row {
   display: flex;
-  justify-content: space-between;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
+  /* justify-content: space-between; */
+  margin: 24px 0;
+  border-left: 2px solid #00ffff;
+  transform: translateX(-10px);
+  padding-left: 10px;
+  font-size: 14px;
+  color: #fff;
 }
 
 .data-label {
-  color: #666;
-  font-weight: 500;
-  font-size: 18px;
+  // font-weight: 500;
+  width: 150px;
 }
 
 .data-value {
-  font-weight: 600;
-  font-size: 18px;
+  // font-weight: 600;
+  font-family: "PingFang SC";
+  letter-spacing: 0.48px;
 }
 
 .positive {
@@ -633,7 +838,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/size1440/index.vue

@@ -1,7 +1,21 @@
 <template>
-  <div class="page-container">
+  <div class="relative">
+    <div
+      class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
+    ></div>
+    <div
+      class="page-container overflow-hidden z-10 relative"
+      style="width: 900px"
+    >
+      <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 id="my-richText"></div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -12,7 +26,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
-import axios from 'axios'
+import axios from "axios";
 
 const state = reactive({
   id: "", // 新闻id
@@ -26,23 +40,22 @@ onMounted(() => {
 
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases?id=" + state.id;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
-       const myRichText = document.getElementById('my-richText')
-       myRichText.innerHTML = res.data.data.content
+        const myRichText = document.getElementById("my-richText");
+        myRichText.innerHTML = res.data.data.content;
       }
     }
-  })
-}
+  });
+};
 </script>
-
 <style scoped lang="scss">
 .page-container {
-  max-width: 1200px;
+  // max-width: 900px;
   margin: 0 auto;
-  padding: 40px;
+  // padding: 40px;
 }
 </style>

src/views/news/size1920/index.vue

@@ -1,7 +1,21 @@
 <template>
-  <div class="page-container">
+  <div class="relative">
+    <div
+      class="w-[100vw] bg-[#ffffff] z-[1] top-0 left-0 bottom-0 right-0 absolute"
+    ></div>
+    <div
+      class="page-container overflow-hidden z-10 relative"
+      style="width: 900px"
+    >
+      <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 id="my-richText"></div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -12,7 +26,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 import { useRoute } from "vue-router";
 const route = useRoute();
-import axios from 'axios'
+import axios from "axios";
 
 const state = reactive({
   id: "", // 新闻id
@@ -26,22 +40,22 @@ onMounted(() => {
 
 //获取新闻信息
 const getPressReleasesInfo = () => {
-  let url = 'https://erpapi.fiee.com/api/fiee/pressreleases?id=' + state.id
+  let url = "https://erpapi.fiee.com/api/fiee/pressreleases?id=" + state.id;
   axios.get(url).then((res) => {
     // console.log(res)
     if (res.status === 200) {
       if (res.data.status === 0) {
-       const myRichText = document.getElementById('my-richText')
-       myRichText.innerHTML = res.data.data.content
+        const myRichText = document.getElementById("my-richText");
+        myRichText.innerHTML = res.data.data.content;
       }
     }
-  })
-}
+  });
+};
 </script>
 <style scoped lang="scss">
 .page-container {
-  max-width: 1200px;
+  // max-width: 900px;
   margin: 0 auto;
-  padding: 40px;
+  // padding: 40px;
 }
 </style>