From 89460d738fdc32d1bd1e4724a044da908173aba5 Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Tue, 9 Jun 2026 15:24:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=9B=B4=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/homePage/mainPage/index.vue     | 2492 +++++++----------
 1 file changed, 986 insertions(+), 1506 deletions(-)

diff --git a/f/web-kboss/src/views/homePage/mainPage/index.vue b/f/web-kboss/src/views/homePage/mainPage/index.vue
index 1b2c85c..2fc29f3 100644
--- a/f/web-kboss/src/views/homePage/mainPage/index.vue
+++ b/f/web-kboss/src/views/homePage/mainPage/index.vue
@@ -1,1642 +1,1122 @@
 <template>
-  <div class="mainBox">
-    <!-- 粘性导航组件 -->
-    <HomePageSticky
-      ref="stickyNav"
-      :sections="getStickySections()"
-      @navigate="handleNavigation"
-      :show-threshold-element-selector="'.tagUl'"
-      :show-offset="0"
-      id="sticky"
-    ></HomePageSticky>
+  <div class="jd-homepage">
+    <!-- 搜索区域 -->
+    <!-- <div class="search-box">
+      <search></search>
+    </div> -->
 
-    <div id="banner" class="banner">
-      <div class="centerBox">
-        <span style="margin-top: 100px" class="title">
-          <span v-if="JSON.stringify(logoInfoNew) !== '{}'" class="leftText">
-            {{ getBannerTitle() }}
-          </span>
-          <span class="rightText"> {{ translations[language].aiButler }}</span>
-        </span>
-        <!-- 当滚动到这个元素位置时，显示粘性导航 -->
-        <ul style="margin-top: 50px" class="tagUl">
-          <li>{{ translations[language].slogan }}</li>
-        </ul>
-      </div>
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <section id="banner" class="public-hero">
+        <div class="floating-orb orb-1"></div>
+        <div class="floating-orb orb-2"></div>
+        <div class="floating-orb orb-3"></div>
+        <div class="floating-orb orb-4"></div>
 
-      <div style="cursor: pointer" class="tag">
-        <span @click="openTalk" class="product">
-          <span class="productName">{{ translations[language].product1Name }}</span>
-          <span class="price">
-            <span class="smallText">￥</span>
-            <span class="bigText">6000</span>
-            <span class="smallText">/{{ translations[language].month }}</span>
-          </span>
-        </span>
-        <span @click="goBaiduFn" style="top: 180px" class="product">
-          <span class="productName">{{ translations[language].product2Name }}</span>
-          <span class="price">
-            <span style="margin-top: 15px" class="smallText">
-              {{ translations[language].discount }}
-              <span style="font-size: 30px; display: inline-block" class="bigText">20%</span>
-            </span>
-          </span>
-        </span>
-      </div>
-    </div>
+        <div class="hero-glow glow-blue"></div>
+        <div class="hero-glow glow-purple"></div>
+        <div class="hero-glow glow-warm"></div>
 
-    <!-- 为每个主要区域添加 ref，用于平滑滚动定位 -->
-    <div ref="baseSection" class="base">
-      <div class="bg"></div>
-      <div class="itemTitle">
-        <span class="topText">
-          <span>{{ translations[language].baseTitle1 }}</span>
-          <span class="commonTextColor">{{ translations[language].baseTitle2 }}</span>
-        </span>
-        <span class="bottomText">{{ translations[language].baseSubtitle }}</span>
-      </div>
-
-      <ul class="myTab">
-        <li
-          v-for="menu in getBaseMenu()"
-          :class="currentBaseMenu === menu.id ? 'activeMenu' : ''"
-          @click="clickBaseMenu(menu)"
-          :key="menu.id"
-        >
-          <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
-          {{ menu.name }}
-        </li>
-      </ul>
-
-      <transition name="slide-fade" mode="out-in">
-        <div
-          :key="currentBaseMenu"
-          :style="{ backgroundImage: 'url(' + baseItem.bgImgUrl + ')' }"
-          class="itemContent"
-        >
-          <span class="title">{{ getBaseItemTitle() }}</span>
-          <p style="line-height: 2" class="description">{{ getBaseItemDescription() }}</p>
-          <ul class="itemContentTag">
-            <li v-for="(item, index) in getBaseItemList()" :key="index">
-              <img :src="item.icon" alt="" />
-              <span
-                v-if="item.name"
-                :style="item.name === '高可靠' ? { width: '150px' } : {}"
-                class="tagTitle"
-                >{{ item.name }}</span
-              >
-              <span class="tagContent">{{ item.content }}</span>
-            </li>
-          </ul>
-          <span class="basePrice">
-            <span style="font-weight: bold;">￥</span>
-            <span style="font-weight: bold; font-size: 48px">{{ baseItem.price }}</span>
-            <span style="color: #7a82a0">/{{ baseItem.price_unit }}</span>
-          </span>
-          <div class="twoBtn">
-            <div class="butStyle" @click="goBaiduFn(baseItem)">
-              {{ translations[language].buyNow }}
-              <span style="display: inline-block; margin-left: 5px; color: white">></span>
-            </div>
-            <div v-show="false" class="lookDetailStyle">
-              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
-              <span style="display: inline-block; margin-left: 5px;"></span>
-            </div>
-          </div>
-          <span class="discountStyle">
-            <span style="font-size: 18px">{{ translations[language].officialDiscount }}</span>
-            <span style="font-size: 24px">{{ baseItem.discount }}折</span>
-          </span>
+        <div class="hero-particles">
+          <span v-for="item in 30" :key="item"></span>
         </div>
-      </transition>
-    </div>
 
-    <div ref="suanSection" class="suan">
-      <div class="bg"></div>
-      <div class="itemTitle">
-        <span class="topText">
-          <span>{{ translations[language].suanTitle1 }}</span>
-          <span class="commonTextColor">{{ translations[language].suanTitle2 }}</span>
-        </span>
-        <span class="bottomText">{{ translations[language].suanSubtitle }}</span>
-      </div>
-
-      <ul class="myTab">
-        <li
-          v-for="menu in getSuanMenu()"
-          :class="currentSuanMenu === menu.id ? 'activeMenu' : ''"
-          @click="clickSuanMenu(menu)"
-          :key="menu.id"
-        >
-          <img :src="currentSuanMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
-          {{ menu.name }}
-        </li>
-      </ul>
-
-      <transition name="slide-fade" mode="out-in">
-        <div :key="currentSuanMenu" class="itemContentSuan">
-          <span class="title">{{ getSuanItemTitle() }}</span>
-          <ul class="itemContentTag">
-            <li v-for="(item, index) in getSuanItemList()" :key="index">
-              <img :src="item.icon" alt="" />
-              <span
-                v-if="item.name"
-                :style="item.name === '高可靠' ? { width: '150px' } : {}"
-                class="tagTitle"
-                >{{ item.name }}</span
-              >
-              <span class="tagContent">{{ item.content }}</span>
-            </li>
-          </ul>
-
-          <span class="basePrice">
-            <span style="font-weight: bold;">￥</span>
-            <span style="font-weight: bold; font-size: 48px">{{ suanItem.price }}</span>
-            <span style="color: #7a82a0">/{{ suanItem.price_unit }}</span>
-            <span style="color: #222f60">（{{ translations[language].shortRent }}）</span>
-          </span>
-
-          <div style="margin-top: 10px !important;" class="twoBtn">
-            <div class="butStyle" @click="openTalk">
-              {{ translations[language].consultNow }}
-              <span style="display: inline-block; margin-left: 5px; color: white">></span>
-            </div>
-            <div v-show="false" class="lookDetailStyle">
-              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
-              <span style="display: inline-block; margin-left: 5px;"></span>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
-
-    <div ref="netSection" class="net">
-      <div class="bg"></div>
-      <div class="itemTitle">
-        <span class="topText">
-          <span>{{ translations[language].netTitle1 }}</span>
-          <span class="commonTextColor">{{ translations[language].netTitle2 }}</span>
-        </span>
-        <span class="bottomText">{{ translations[language].netSubtitle }}</span>
-      </div>
-      <ul class="myTab">
-        <li
-          v-for="menu in getNetMenu()"
-          :class="currentNetMenu === menu.id ? 'activeMenu' : ''"
-          @click="clickNetMenu(menu)"
-          :key="menu.id"
-        >
-          <img :src="currentBaseMenu === menu.id ? menu.icon : menu.activeIcon" alt="" />
-          {{ menu.name }}
-        </li>
-      </ul>
-
-      <transition name="slide-fade" mode="out-in">
-        <div :key="currentNetMenu" class="itemContentNet">
-          <span style="margin-bottom: 15px" class="title">{{ getNetItemTitle() }}</span>
-          <p style="line-height: 2; margin-bottom: 15px" class="description">
-            {{ getNetItemDescription() }}
+        <div class="hero-inner">
+          <p class="hero-slogan">好用还省钱，Token 就上开元云</p>
+          <h1><span>OPC</span>公共服务平台</h1>
+          <p class="hero-subtitle">
+            为 <strong>OPC</strong> 而生，极致性价比一站式模型平台
           </p>
-          <span class="subTitle">{{ translations[language].productAdvantage }}</span>
-          <ul class="itemContentTag">
-            <li v-for="(item, index) in getNetAdvantageList()" :key="index">
-              <img :src="item.icon" alt="" />
-              <span style="width: fit-content !important;" class="tagTitle">{{ item.name }}</span>
-              <span class="tagContent">{{ item.content }}</span>
-            </li>
-          </ul>
-          <span class="subTitle">{{ translations[language].applicationScenario }}</span>
-          <ul class="netTagUl">
-            <li v-for="(i, d) in getNetTagList()" :key="d">{{ i.name }}</li>
-          </ul>
-          <div class="twoBtn">
-            <div @click="openTalk" class="butStyle">
-              {{ translations[language].consultNow }}
-              <span style="display: inline-block; margin-left: 5px; color: white">></span>
+
+          <div class="hero-service-list">
+            <div class="circle-item token" @click="goTokenMarket">
+              <div class="circle-ring">
+                <div class="circle-core">
+                  <svg viewBox="0 0 80 80" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="tokenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#93c5fd" />
+                        <stop offset="50%" stop-color="#3b82f6" />
+                        <stop offset="100%" stop-color="#1d4ed8" />
+                      </linearGradient>
+                    </defs>
+                    <polygon points="40,8 68,24 68,56 40,72 12,56 12,24" fill="rgba(59,130,246,0.18)" stroke="url(#tokenGradient)" stroke-width="2" />
+                    <polygon points="40,18 56,28 56,48 40,58 24,48 24,28" fill="url(#tokenGradient)" opacity="0.75" />
+                    <text x="40" y="45" text-anchor="middle" fill="#fff" font-size="20" font-weight="700">T</text>
+                    <line x1="40" y1="8" x2="40" y2="2" stroke="#60a5fa" stroke-width="1.5" />
+                    <line x1="68" y1="24" x2="74" y2="20" stroke="#60a5fa" stroke-width="1.5" />
+                    <line x1="12" y1="24" x2="6" y2="20" stroke="#60a5fa" stroke-width="1.5" />
+                  </svg>
+                </div>
+              </div>
+              <h3>Token市集</h3>
+              <p>汇聚海量精品模型，以更低成本畅享极致 AI 体验</p>
+              <button type="button" @click.stop="goTokenMarket">立即体验</button>
             </div>
-            <div @click="goDetail(netItem.id)" class="lookDetailStyle">
-              {{ translations[language].viewDetails }}&nbsp;&nbsp;>
-              <span style="display: inline-block; margin-left: 5px;"></span>
+
+            <div class="circle-item workshop" @click="goCreativeWorkshop">
+              <div class="circle-ring">
+                <div class="circle-core">
+                  <svg viewBox="0 0 80 80" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="lensGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#e9d5ff" />
+                        <stop offset="50%" stop-color="#a855f7" />
+                        <stop offset="100%" stop-color="#7c3aed" />
+                      </linearGradient>
+                    </defs>
+                    <circle cx="40" cy="40" r="32" fill="rgba(139,92,246,0.15)" stroke="url(#lensGradient)" stroke-width="2" />
+                    <circle cx="40" cy="40" r="22" fill="rgba(168,85,247,0.32)" stroke="#c084fc" stroke-width="1.5" />
+                    <circle cx="40" cy="40" r="12" fill="url(#lensGradient)" opacity="0.85" />
+                    <ellipse cx="35" cy="35" rx="6" ry="3" fill="#fff" opacity="0.45" transform="rotate(-30 35 35)" />
+                    <line x1="40" y1="18" x2="40" y2="8" stroke="#c084fc" stroke-width="1.5" />
+                    <line x1="40" y1="62" x2="40" y2="72" stroke="#c084fc" stroke-width="1.5" />
+                    <line x1="18" y1="40" x2="8" y2="40" stroke="#c084fc" stroke-width="1.5" />
+                    <line x1="62" y1="40" x2="72" y2="40" stroke="#c084fc" stroke-width="1.5" />
+                  </svg>
+                </div>
+              </div>
+              <h3>创镜工坊</h3>
+              <p>以文筑境，以镜生画，全场景 AI 影像创作</p>
+              <button type="button" @click.stop="goCreativeWorkshop">了解更多</button>
+            </div>
+
+            <div class="circle-item base" @click="goCloudBase">
+              <div class="circle-ring">
+                <div class="circle-core">
+                  <svg viewBox="0 0 80 80" aria-hidden="true">
+                    <defs>
+                      <linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" stop-color="#a7f3d0" />
+                        <stop offset="50%" stop-color="#10b981" />
+                        <stop offset="100%" stop-color="#059669" />
+                      </linearGradient>
+                    </defs>
+                    <rect x="14" y="48" width="52" height="14" rx="4" fill="rgba(16,185,129,0.25)" stroke="#34d399" />
+                    <rect x="14" y="32" width="52" height="14" rx="4" fill="rgba(16,185,129,0.38)" stroke="#34d399" />
+                    <rect x="14" y="16" width="52" height="14" rx="4" fill="url(#cloudGradient)" opacity="0.78" stroke="#a7f3d0" />
+                    <circle cx="22" cy="23" r="2" fill="#a7f3d0" />
+                    <circle cx="22" cy="39" r="2" fill="#34d399" />
+                    <circle cx="22" cy="55" r="2" fill="#34d399" />
+                    <line x1="40" y1="30" x2="40" y2="32" stroke="#34d399" stroke-width="1.5" />
+                    <line x1="40" y1="46" x2="40" y2="48" stroke="#34d399" stroke-width="1.5" />
+                    <path d="M56 20 Q60 16 64 20" stroke="#a7f3d0" stroke-width="1.5" fill="none" />
+                    <path d="M54 17 Q60 10 66 17" stroke="#a7f3d0" stroke-width="1.2" fill="none" opacity="0.55" />
+                  </svg>
+                </div>
+              </div>
+              <h3>云枢基座</h3>
+              <p>深耕基础云服务，筑牢 AI 平台数字根基</p>
+              <button type="button" @click.stop="goCloudBase">了解更多</button>
+            </div>
+          </div>
+
+          <div class="hero-stat-list">
+            <div class="hero-stat-item">
+              <strong>50+</strong>
+              <span>精品模型</span>
+            </div>
+            <div class="hero-stat-item">
+              <strong>99.9%</strong>
+              <span>服务可用性</span>
+            </div>
+            <div class="hero-stat-item">
+              <strong>4800+</strong>
+              <span>企业用户</span>
+            </div>
+            <div class="hero-stat-item highlight">
+              <strong>低至0.001</strong>
+              <span>每千Token起步价</span>
             </div>
           </div>
         </div>
-      </transition>
+      </section>
+    </main>
 
-      <div style="margin-top: 80px; margin-bottom: 50px" class="itemTitle">
-        <span class="topText">
-          <span></span>
-          <span class="commonTextColor">{{ translations[language].partners }}</span>
+    <!-- 产品列表区域 -->
+    <!-- <div class="productList">
+      <ul class="myTab">
+        <li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
+          :key="menu.name">
+          <span class="tab-text">{{ menu.product_category }}</span>
+        </li>
+      </ul>
+
+      <productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
+
+      <el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </div> -->
+
+    <!-- 发布商品/需求对话框 -->
+    <!-- <el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
+      :visible.sync="sendProductVisible">
+      <sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
+      </sendProduct>
+    </el-dialog> -->
+
+    <!-- 提示对话框 -->
+    <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
+      <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
+      <span slot="footer" class="dialog-footer">
+        <span>
+          <span style="margin-right: 10px;">跳转到</span>
+          <el-button size="small" type="primary" @click="goInfo">信息完善</el-button>
         </span>
-      </div>
-      <div
-        style="max-width: 1400px; padding: 15px; width: 100%; background: white; border-radius: 16px; margin-bottom: 30px"
-      >
-        <logo-g></logo-g>
-      </div>
-    </div>
-
-    <div v-show="false" class="resources">
-      <div class="bg"></div>
-      <div style="margin-top: 140px" class="itemTitle">
-        <span class="topText">
-          <span>{{ translations[language].resourcesTitle1 }}</span>
-          <span class="commonTextColor">{{ translations[language].resourcesTitle2 }}</span>
-        </span>
-      </div>
-      <div class="mapBox">
-        <div style="display: flex; justify-content: space-around; width: 100%;">
-          <div class="map">
-            <span class="mapItem" style="top: 130px; right: 149px">
-              <span class="title">{{ translations[language].beijing }}</span>
-              <img src="./img/map.png" alt="" />
-            </span>
-            <span class="mapItem" style="top: 154px; right: 124px">
-              <span class="title">{{ translations[language].tianjin }}</span>
-              <img src="./img/map.png" alt="" />
-            </span>
-            <span class="mapItem" style="top: 278px; right: 310px">
-              <span class="title">{{ translations[language].sichuan }}</span>
-              <img src="./img/map.png" alt="" />
-            </span>
-            <span class="mapItem" style="top: 291px; right: 136px">
-              <span class="title">{{ translations[language].shanghai }}</span>
-              <img src="./img/map.png" alt="" />
-            </span>
-            <span class="mapItem" style="top: 261px; right: 174px">
-              <span class="title">{{ translations[language].jiangsu }}</span>
-              <img src="./img/map.png" alt="" />
-            </span>
-          </div>
-          <ul class="content">
-            <li>
-              <div style="display: flex; flex-direction: column; align-items: flex-start">
-                <span class="numberStyle">
-                  8
-                  <span class="mapTag">+</span>
-                </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computeCenters }}</span>
-              </div>
-            </li>
-            <li>
-              <div style="display: flex; flex-direction: column; align-items: flex-start">
-                <span class="numberStyle">
-                  2000
-                  <span style="right: -35px" class="mapTag">P+</span>
-                </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].computingPower }}</span>
-              </div>
-            </li>
-            <li>
-              <div style="display: flex; flex-direction: column; align-items: flex-start">
-                <span class="numberStyle">
-                  10
-                  <span style="right: -35px" class="mapTag">ms</span>
-                </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].realTimeResponse }}</span>
-              </div>
-            </li>
-            <li>
-              <div style="display: flex; flex-direction: column; align-items: flex-start">
-                <span class="numberStyle">
-                  100,000
-                  <span class="mapTag">+</span>
-                </span>
-                <span style="color: #222f60; font-size: 18px; margin-top: 5px">{{ translations[language].registeredUsers }}</span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <div class="tiyan">
-      <div>
-        <el-input v-model="phone" :placeholder="translations[language].phonePlaceholder" class="custom-input">
-          <template #append>
-            <span
-              @click="
-                $router.push({
-                  path: '/login',
-                  phone,
-                })
-              "
-              class="experience-btn"
-              >{{ translations[language].experienceNow }}</span
-            >
-          </template>
-        </el-input>
-      </div>
-    </div>
-
-    <Talk></Talk>
-    <el-dialog
-      title=""
-      :visible.sync="mesDialog"
-      custom-class="msgDialog"
-      :before-close="handleClose"
-      width="30%"
-    >
-      <span class="title">{{ translations[language].officialStatement }}</span>
-      <p>{{ translations[language].dearUser }}：</p>
-      <p>{{ translations[language].greeting }}</p>
-      <p>{{ translations[language].statement1 }}</p>
-      <p>
-        {{ translations[language].specialNote }}：<span style="color: #7a82a0 !important;"
-          >{{ translations[language].statement2 }}</span
-        >
-      </p>
-      <p>{{ translations[language].statement3 }}</p>
-      <div style="margin-top: 85px" class="footerBox">
-        <div class="item">
-          <span style="margin-bottom: 10px">{{ translations[language].customerService }}</span>
-          <span style="color: #7a82a0 !important;">4006150805</span>
-        </div>
-        <div style="margin-right: 50px" class="item">
-          <span>{{ translations[language].currentDate }}</span>
-        </div>
-      </div>
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { reqHotProduct } from "@/api/newHome";
-import Talk from "@/views/homePage/dialog/talk/index.vue";
-import LogoG from "@/views/homePage/mainPage/logoG/index.vue";
-import { mapState } from "vuex";
-import IndexTwo from "@/views/homePage/mainPage/logoG/indexTwo.vue";
-
-import HomePageSticky from "@/components/HomePageSticky/index.vue";
-// 导入语言管理
-import { languageStore, languageBus } from '@/utils/language'
+import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
+import { mapGetters, mapState } from "vuex";
+import { gotoYuanJingAPI } from '@/api/gotoYuanJing'
 
 export default Vue.extend({
   name: "mainPage",
-  components: { IndexTwo, LogoG, Talk, HomePageSticky },
-  data() {
-    return {
-      mesDialog: localStorage.getItem('showMsg') !== '1',
-      phone: null,
-      currentBaseMenu: "hot",
-      currentNetMenu: "hot",
-      currentSuanMenu: 'hot',
-      base: {},
-      baseItem: {},
-      net: {},
-      netItem: {},
-      suan: {},
-      suanItem: {},
-      language: 'zh',
-      languageChangedHandler: null,
-      translations: {
-        zh: {
-          // Banner 区域
-          aiButler: '您身边的AI管家',
-          slogan: '全 球 领 先 的 AI 服 务 运 营 商',
-          product1Name: '4090 裸金属',
-          product2Name: '云资源',
-          month: '台/月',
-          discount: '直降',
-
-          // 基础产品区域
-          baseTitle1: '云筑',
-          baseTitle2: '企业基座',
-          baseSubtitle: '多云融合 让上云更简单',
-
-          // 智算区域
-          suanTitle1: '智算',
-          suanTitle2: '未来征程',
-          suanSubtitle: '多元异构 灵活短租',
-          shortRent: '可短租',
-
-          // 网络区域
-          netTitle1: '网织',
-          netTitle2: '智能经纬',
-          netSubtitle: '云算网融合 让连接更简单',
-          productAdvantage: '产品优势',
-          applicationScenario: '应用场景',
-          partners: '合作伙伴',
-
-          // 资源区域
-          resourcesTitle1: '算力',
-          resourcesTitle2: '资源',
-          beijing: '北京',
-          tianjin: '天津',
-          sichuan: '四川',
-          shanghai: '上海',
-          jiangsu: '江苏',
-          computeCenters: '算力中心接入',
-          computingPower: '算力',
-          realTimeResponse: '实时算力响应',
-          registeredUsers: '注册用户',
-
-          // 按钮文本
-          buyNow: '立即购买',
-          consultNow: '立即咨询',
-          viewDetails: '查看详情',
-          experienceNow: '立即体验',
-          officialDiscount: '官网折扣',
-
-          // 输入框
-          phonePlaceholder: '请输入您的手机号',
-
-          // 弹窗内容
-          officialStatement: '官方申明',
-          dearUser: '尊敬用户',
-          greeting: '您好~~',
-          statement1: '本平台公示的所有产品折扣活动均真实有效，价格体系严格遵循公开透明原则。',
-          specialNote: '特别说明',
-          statement2: '云服务产品页面所示价格属参考性标价，实际交易金额须以资源清单订单页面为准。',
-          statement3: '请您知悉上述条款并放心进行购买决策，如有任何疑问，可随时联系平台官方客服，我们将为您详细说明。',
-          customerService: '客服热线',
-          currentDate: '2025年6月30日',
-
-          // 菜单项
-          hotRecommend: '热门推荐',
-          computing: '计算',
-          storage: '存储',
-          database: '数据库',
-          container: '人脸识别',
-          internetLine: '互联网专线',
-          sdwan: 'SDWAN',
-          dci: 'DCI',
-          aiLine: 'AI专线',
-
-          // 粘性导航
-          stickyBase: '云筑企业基座',
-          stickySuan: '智算未来征程',
-          stickyNet: '网织智能经纬'
-        },
-        en: {
-          // Banner 区域
-          aiButler: 'Your AI Butler',
-          slogan: 'Leading AI Service Operator Worldwide',
-          product1Name: '4090 Bare Metal',
-          product2Name: 'Cloud Resources',
-          month: 'unit/month',
-          discount: 'Off',
-
-          // 基础产品区域
-          baseTitle1: 'Cloud Build',
-          baseTitle2: 'Enterprise Foundation',
-          baseSubtitle: 'Multi-cloud integration makes cloud migration easier',
-
-          // 智算区域
-          suanTitle1: 'Intelligent Computing',
-          suanTitle2: 'Future Journey',
-          suanSubtitle: 'Multi-source heterogeneous Flexible short-term rental',
-          shortRent: 'Short rent available',
-
-          // 网络区域
-          netTitle1: 'Network Weaving',
-          netTitle2: 'Smart Framework',
-          netSubtitle: 'Cloud-computing-network integration makes connection easier',
-          productAdvantage: 'Product Advantages',
-          applicationScenario: 'Application Scenarios',
-          partners: 'Partners',
-
-          // 资源区域
-          resourcesTitle1: 'Computing',
-          resourcesTitle2: 'Resources',
-          beijing: 'Beijing',
-          tianjin: 'Tianjin',
-          sichuan: 'Sichuan',
-          shanghai: 'Shanghai',
-          jiangsu: 'Jiangsu',
-          computeCenters: 'Compute Centers Access',
-          computingPower: 'Computing Power',
-          realTimeResponse: 'Real-time Response',
-          registeredUsers: 'Registered Users',
-
-          // 按钮文本
-          buyNow: 'Buy Now',
-          consultNow: 'Consult Now',
-          viewDetails: 'View Details',
-          experienceNow: 'Experience Now',
-          officialDiscount: 'Official Discount',
-
-          // 输入框
-          phonePlaceholder: 'Please enter your phone number',
-
-          // 弹窗内容
-          officialStatement: 'Official Statement',
-          dearUser: 'Dear User',
-          greeting: 'Hello~~',
-          statement1: 'All product discount activities displayed on this platform are valid and the pricing system strictly follows the principle of transparency.',
-          specialNote: 'Special Note',
-          statement2: 'The prices shown on cloud service product pages are reference prices, and the actual transaction amount shall be subject to the resource list order page.',
-          statement3: 'Please be aware of the above terms and make purchase decisions with confidence. If you have any questions, please contact our official customer service at any time for detailed explanation.',
-          customerService: 'Customer Service',
-          currentDate: 'June 30, 2025',
-
-          // 菜单项
-          hotRecommend: 'Hot Recommend',
-          computing: 'Computing',
-          storage: 'Storage',
-          database: 'Database',
-          container: 'Face Recognition',
-          internetLine: 'Internet Line',
-          sdwan: 'SDWAN',
-          dci: 'DCI',
-          aiLine: 'AI Line',
-
-          // 粘性导航
-          stickyBase: 'Cloud Enterprise Foundation',
-          stickySuan: 'Intelligent Computing Journey',
-          stickyNet: 'Smart Network Framework'
-        }
-      }
-    }
+  components: {
+    // sendProduct: () => import('../ncmatch/sendProduct/index.vue'),
+    // productCard: () => import('./productCard/index.vue'),
+    // search: () => import('../search/index.vue'),
+    // menuAside: () => import('./menuAside/index.vue')
   },
   created() {
-    // 修复：确保从共享状态获取当前语言
-    this.initLanguage()
+    this.getHomepageProductCategory()
   },
-  mounted() {
-    // 监听滚动 控制sticky显示隐藏
-    document.getElementById("homeOut").addEventListener('scroll', (e) =>{
-      if (e.target.scrollTop > 500) {
-        document.getElementById('sticky').style.display = 'block'
-      } else {
-        document.getElementById('sticky').style.display = 'none'
-      }
-    })
-    this.initData()
-  },
-  beforeDestroy() {
-    // 移除事件监听
-    if (this.languageChangedHandler) {
-      languageBus.$off('language-changed', this.languageChangedHandler)
+  data() {
+    return {
+      boxLoading: false,
+      selectedCategory: "",
+      showTip: false,
+      total: 0,
+      publish_type: null,
+      sendProductVisible: false,
+      currentHotMenu: "",
+      product: [],
+      hotProductList: [],
+      current_page: 1,
+      page_size: 8,
     }
   },
   computed: {
+    ...mapGetters(["sidebar", "avatar", "device"]),
     ...mapState({
-      logoInfoNew: state => state.product.logoInfoNew,
+      isShowPanel: (state) => state.product.showHomeNav,
+      navIndex: (state) => state.product.navIndex,
+      gridObj: state => state.operationAnalysis.gridObj,
+      mybalance: state => state.user.mybalance,
+      logoutUrl: state => state.login.logoutUrl,
       loginStateVuex: state => state.login.loginState,
+      logoInfoNew: state => state.product.logoInfoNew,
     }),
     loginState() {
-      return this.loginStateVuex || (sessionStorage.getItem('userId') !== undefined && sessionStorage.getItem('userId') !== null)
+      const userId = sessionStorage.getItem('userId');
+      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
     },
   },
   methods: {
-    // 初始化语言状态
-    initLanguage() {
-      // 直接从store获取当前语言，确保一致性
-      this.language = languageStore.getLanguage()
-      console.log('mainPage初始化语言:', this.language)
-
-      // 保存事件处理函数的引用，以便正确移除
-      this.languageChangedHandler = (lang) => {
-        console.log('mainPage接收到语言变化:', lang)
-        this.language = lang
-      }
-
-      // 监听语言变化事件
-      languageBus.$on('language-changed', this.languageChangedHandler)
-    },
-
-    // 获取粘性导航数据
-    getStickySections() {
-      return [
-        { title: this.translations[this.language].stickyBase, ref: 'baseSection' },
-        { title: this.translations[this.language].stickySuan, ref: 'suanSection' },
-        { title: this.translations[this.language].stickyNet, ref: 'netSection' },
-      ]
-    },
-
-    // 获取基础菜单
-    getBaseMenu() {
-      return [
-        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "computing", name: this.translations[this.language].computing, icon: require("../newImg/computing.png"), activeIcon: require("../newImg/computingActive.png") },
-        { id: "storage", name: this.translations[this.language].storage, icon: require("../newImg/cun.png"), activeIcon: require("../newImg/cunActive.png") },
-        { id: "database", name: this.translations[this.language].database, icon: require("../newImg/database.png"), activeIcon: require("../newImg/databaseActive.png") },
-        { id: "container", name: this.translations[this.language].container, icon: require("../newImg/container.png"), activeIcon: require("../newImg/containerActive.png") }
-      ]
-    },
-
-    // 获取智算菜单
-    getSuanMenu() {
-      return [
-        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "4090", name: "4090", icon: require("./img/suan/1.png"), activeIcon: require("./img/suan/1.png") },
-        { id: "A100", name: "A100", icon: require("./img/suan/2.png"), activeIcon: require("./img/suan/2.png") },
-        { id: "A800", name: "A800", icon: require("./img/suan/3.png"), activeIcon: require("./img/suan/3.png") },
-        { id: "910B", name: "910B", icon: require("./img/suan/5.png"), activeIcon: require("./img/suan/5.png") }
-      ]
-    },
-
-    // 获取网络菜单
-    getNetMenu() {
-      return [
-        { id: "hot", name: this.translations[this.language].hotRecommend, icon: require("../newImg/niu.png"), activeIcon: require("../newImg/niuActive.png") },
-        { id: "hlzx", name: this.translations[this.language].internetLine, icon: require("./img/net/1.png"), activeIcon: require("./img/net/1.png") },
-        { id: "SDWAN", name: this.translations[this.language].sdwan, icon: require("./img/net/2.png"), activeIcon: require("./img/net/2.png") },
-        { id: "DCI", name: this.translations[this.language].dci, icon: require("./img/net/3.png"), activeIcon: require("./img/net/3.png") },
-        { id: "AI", name: this.translations[this.language].aiLine, icon: require("./img/net/4.png"), activeIcon: require("./img/net/4.png") }
-      ]
-    },
-
-    // 获取Banner标题
-    getBannerTitle() {
-      if (this.language === 'en') {
-        // 这里可以根据需要提供英文的banner标题
-        return this.logoInfoNew.home.bannerTitle || ""
-      }
-      return this.logoInfoNew.home.bannerTitle || ""
-    },
-
-    // 获取基础产品标题
-    getBaseItemTitle() {
-      if (this.language === 'en') {
-        // 这里可以根据实际数据结构提供英文标题
-        return this.baseItem.title || ""
-      }
-      return this.baseItem.title || ""
-    },
-
-    // 获取基础产品描述
-    getBaseItemDescription() {
-      if (this.language === 'en') {
-        // 这里可以根据实际数据结构提供英文描述
-        return this.baseItem.description || ""
-      }
-      return this.baseItem.description || ""
-    },
-
-    // 获取基础产品列表
-    getBaseItemList() {
-      // 这里可以处理产品列表的翻译
-      return this.baseItem.list || []
-    },
-
-    // 获取智算产品标题
-    getSuanItemTitle() {
-      if (this.language === 'en') {
-        return this.suanItem.title || ""
-      }
-      return this.suanItem.title || ""
-    },
-
-    // 获取智算产品列表
-    getSuanItemList() {
-      return this.suanItem.list || []
-    },
-
-    // 获取网络产品标题
-    getNetItemTitle() {
-      if (this.language === 'en') {
-        return this.netItem.title || ""
-      }
-      return this.netItem.title || ""
-    },
-
-    // 获取网络产品描述
-    getNetItemDescription() {
-      if (this.language === 'en') {
-        return this.netItem.description || ""
-      }
-      return this.netItem.description || ""
-    },
-
-    // 获取网络产品优势列表
-    getNetAdvantageList() {
-      return this.netItem.advantageList || []
-    },
-
-    // 获取网络产品标签列表
-    getNetTagList() {
-      return this.netItem.tagList || []
-    },
-
-    goBaiduFn(item) {
-      if (this.loginState) {
-        this.$store.commit('setRedirectUrl', item.url)
-        localStorage.setItem('redirectUrl', item.url)
-        localStorage.setItem('userRescourseUrl', item.listUrl)
+    goTokenMarket() {
+      if (!this.loginState) {
         this.$router.push({
-          name: 'baiduProductShow',
-          params: {
-            listUrl: item.listUrl,
-            url: item.url
+          path: '/tokenMarket',
+          query: {
+            category: 'TOKEN市集',
+            from: 'home',
+            single: '1'
+          }
+        })
+        return
+      }
+      this.$router.push({
+        path: '/product',
+        query: {
+          category: 'TOKEN市集',
+          from: 'home'
+        }
+      })
+    },
+    goCloudBase() {
+      if (!this.loginState) {
+        this.$message.warning('请先登录哦~')
+        return
+      }
+      this.$router.push({
+        path: '/product',
+        query: {
+          category: '基础云',
+          from: 'home'
+        }
+      })
+    },
+    getHomepageProductCategory() {
+      reqHomepageProductCategory({
+        url_link: window.location.href,
+        publish_type: "1"
+      }).then(res => {
+        if (res.status) {
+          this.categories = res.data
+          this.product = res.data
+          this.currentHotMenu = res.data[0].id
+          this.selectedCategory = res.data[0].id
+          this.initData()
+        }
+      })
+    },
+    goInfo() {
+      this.showTip = false
+      this.$router.push('/customer/approve')
+    },
+    async goCreativeWorkshop() {
+      if (!this.loginState) {
+        window.open('https://ai.opencomputing.cn/', '_blank')
+        return
+      }
+
+      const yuanJingWindow = window.open('', '_blank')
+
+      try {
+        const res = await gotoYuanJingAPI({
+          user_id: sessionStorage.getItem('userId')
+        })
+
+        const deerer = this.getYuanJingAuthorization(res)
+
+        if (!deerer) {
+          if (yuanJingWindow) {
+            yuanJingWindow.close()
+          }
+          this.$message.error((res && res.msg) || '获取元境授权参数失败')
+          return
+        }
+
+        const loginUrl = `https://ai.opencomputing.cn/#/getCookie?deerer=${encodeURIComponent(deerer)}`
+
+        if (yuanJingWindow) {
+          yuanJingWindow.location.href = loginUrl
+        } else {
+          window.location.href = loginUrl
+        }
+      } catch (error) {
+        if (yuanJingWindow) {
+          yuanJingWindow.close()
+        }
+        this.$message.error('跳转元境失败，请稍后重试')
+      }
+    },
+    getYuanJingAuthorization(res) {
+      if (!res) {
+        return ''
+      }
+
+      if (typeof res === 'string') {
+        return res
+      }
+
+      const data = res.data || res
+      if (typeof data === 'string') {
+        return data
+      }
+
+      return data.Authorization || data.authorization || data.token || data.header || data.value || ''
+    },
+    handleCurrentChange(val) {
+      this.current_page = val
+      this.initData()
+    },
+    sendInfo(type) {
+      if (this.loginState) {
+        reqEnterpriseAuditInfoSearch({
+          url_link: window.location.href,
+        }).then(res => {
+          const dataList = res && res.data && res.data.data
+          const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
+          const roles = sessionStorage.getItem('jueseNew')
+          const isCustomer = roles ? roles.includes('客户') : true
+
+          // 安全检查：确保 data[0] 存在
+          if (hasAuditInfo && dataList[0]) {
+            const auditStatus = dataList[0].audit_status
+
+            if (auditStatus === 'pending') {
+              this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
+            } else if (auditStatus === 'rejected') {
+              this.$message.warning('您的审核状态为驳回，请重新提交~')
+            } else {
+              // 审核通过或其他状态，允许发布
+              this.publish_type = type
+              this.sendProductVisible = true
+            }
+          } else if (!isCustomer) {
+            // 非客户角色，允许发布
+            this.publish_type = type
+            this.sendProductVisible = true
+          } else {
+            // 没有审核信息且是客户角色，显示提示
+            this.showTip = true
           }
         })
       } else {
-        this.$router.push({
-          path: "/login",
-          query: {
-            fromPath: 'homePage',
-            productInfo: item,
-            type: 'bd',
-            listUrl: item.listUrl,
-            url: item.url
-          }
-        })
+        this.$router.push('/login')
       }
     },
-    handleClose() {
-      localStorage.setItem('showMsg', '1');
-      this.mesDialog = false;
-    },
-    openTalk() {
-      this.$store.commit('setShowTalk', true);
-    },
-    goDetail(id) {
-      this.$router.push({
-        path: "/homePage/detail",
-        query: {
-          id
-        }
-      })
-    },
     initData() {
-      reqHotProduct().then(res => {
+      this.boxLoading = true
+      let ploay = {
+        product_category: this.selectedCategory,
+        to_page: "first_page",
+        url_link: window.location.href,
+        page_size: this.page_size,
+        current_page: this.current_page,
+        publish_type: "1"
+      }
+      reqGetSupplyAndDemandSquareList(ploay).then(res => {
+        this.boxLoading = false
         if (res.status) {
-          this.base = res.data.base
-          this.baseItem = this.base.hot
-          this.net = res.data.net
-          this.netItem = this.net.hot
-          this.suan = res.data.suan
-          this.suanItem = this.suan.hot
+          if (res.data.length === 0) {
+            this.hotProductList = []
+            this.total = 0
+          } else {
+            this.hotProductList = res.data[0].product_list
+            this.total = res.data[0].total_count
+          }
         }
       })
     },
-    clickSuanMenu(menu) {
-      console.log("emnu", menu)
-      this.currentSuanMenu = menu.id;
-      this.suanItem = this.suan[menu.id] || {};
+    init_product_list() {
+      reqPublishProductSearchFirstPage({
+        publish_type: "1",
+        url_link: window.location.href,
+        to_page: 'first_page',
+        page_size: this.page_size,
+        current_page: this.current_page,
+        product_type: this.currentHotMenu
+      }).then(res => {
+        if (res.status) {
+          if (res.data.length > 0) {
+            this.currentHotMenu = res.data[0].id
+            this.hotProductList = res.data[0].product_list
+            this.product = res.data
+            this.total = res.data[0].total_count
+          }
+        }
+      })
     },
-    clickBaseMenu(menu) {
-      console.log("emnu", menu)
-      this.currentBaseMenu = menu.id;
-      this.baseItem = this.base[menu.id] || {};
+    sendProductSuccess() {
+      this.sendProductVisible = false; // 关闭弹窗
+      this.init_product_list()
     },
     clickNetMenu(menu) {
-      this.currentNetMenu = menu.id;
-      this.netItem = this.net[menu.id] || {};
+      this.current_page = 1
+      this.currentHotMenu = menu.id;
+      this.selectedCategory = menu.id
+      this.initData()
     },
-    // 处理来自子组件的导航事件
-    handleNavigation(index) {
-      console.log('父组件接收到导航事件，索引:', index);
-      const sectionRef = this.getStickySections()[index]?.ref;
-      if (sectionRef && this.$refs[sectionRef]) {
-        // 使用原生 scrollIntoView 实现平滑滚动
-        this.$refs[sectionRef].scrollIntoView({
-          behavior: 'smooth',
-          block: 'start',
-          inline: 'start'
-        });
+    goFavorite() {
+      if (this.loginState) {
+        this.$router.push('/ncmatchHome/favoriteBox')
+      } else {
+        this.$router.push('/login')
+      }
+    },
+    goHistory() {
+      if (this.loginState) {
+        this.$router.push('/ncmatchHome/historyBox')
+      } else {
+        this.$router.push('/login')
       }
     }
   }
 })
 </script>
 
-
-
-<style scoped lang="less">
-
-// 添加动画样式
-.slide-fade-enter-active {
-  transition: all 0.3s ease;
-}
-.slide-fade-leave-active {
-  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
-}
-.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
-  transform: translateX(10px);
-  opacity: 0;
-}
-.homeOut {
-  height: 100%;
-  overflow: auto !important;
-  min-width: 1500px;
-
+<style scoped lang="scss">
+.jd-homepage {
+  margin: 0;
+  // padding-top: 92px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 46%, #f7faff 74%, #f8fafc 100%);
+  overflow-x: hidden;
 }
 
-.banner {
-  background: url("../newImg/banner.png");
-  height: calc(100vh - 84px);
+.search-box {
+  max-width: 1280px;
+  margin: 0 auto 18px;
+  padding: 0 24px;
+}
+
+/* 主内容区域 */
+.main-content {
   width: 100%;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-
-  .centerBox {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .title {
-      color: #222f60;
-      font-size: 64px;
-
-      .leftText {
-        background: linear-gradient(to right, #275aff, #2ebdfa);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        display: inline-block;
-      }
-    }
-
-    .description {
-      margin: 15px 0;
-      color: #7a82a0;
-      font-size: 24px;
-      height: 75px;
-      line-height: 1.6;
-    }
-
-    .tagUl {
-      color: #222f60;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 32px;
-
-      li {
-        padding: 0 30px;
-        margin-top: 25px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:not(:last-child) {
-          border-right: 2px solid #d2d7e6;
-        }
-      }
-    }
-  }
+  padding: 0;
 }
 
-.commonTextColor {
-  background: linear-gradient(to right, #275aff, #2ebdfa);
+/* 横幅样式 */
+.public-hero {
+  width: 100%;
+  min-height: 760px;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  color: #111827;
+  background:
+    radial-gradient(circle at 16% 18%, rgba(45, 91, 255, 0.12), transparent 28%),
+    radial-gradient(circle at 82% 28%, rgba(124, 58, 237, 0.1), transparent 30%),
+    radial-gradient(circle at 50% 52%, rgba(245, 158, 11, 0.08), transparent 36%),
+    linear-gradient(180deg, #f0f7ff 0%, #ffffff 66%, #f7faff 88%, #f8fafc 100%);
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 76px 48px 64px;
+  text-align: center;
+}
+
+.hero-slogan {
+  margin: 0 0 28px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 25%, #f59e0b 50%, #2d5bff 75%, #f59e0b 100%);
+  background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  display: inline-block;
-  font-weight: bold;
+  animation: sloganShine 4s linear infinite;
 }
 
-.tag {
-  width: 200px;
-  height: 270px;
-  background: url("../newImg/tag.png");
-  background-size: 100% 100%;
-  background-position: center;
-  position: absolute;
-  right: 8%;
-  top: 15%;
+.public-hero h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 64px;
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: 0.02em;
 
-  .product {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 70px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-
-    .productName {
-      color: #222f60;
-      font-size: 18px;
-    }
-
-    .price {
-      background: linear-gradient(to right, #275aff, #2ebdfa);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-      display: inline-block;
-      font-weight: bold;
-
-      .bigText {
-        font-size: 36px;
-      }
-    }
+  span {
+    margin: 0 4px;
+    background: linear-gradient(135deg, #2d5bff 0%, #7c3aed 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
   }
 }
 
-.bg {
+.hero-subtitle {
+  max-width: 760px;
+  margin: 22px auto 70px;
+  color: #666666;
+  font-size: 22px;
+  line-height: 1.7;
+
+  strong {
+    color: #2d5bff;
+    font-weight: 700;
+  }
+}
+
+.floating-orb {
   position: absolute;
-  left: 0;
-  top: 0;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.08;
+  pointer-events: none;
   z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: url("../newImg/baseBg.png");
-  background-size: 100% 100%;
-  background-position: center;
+
+  &.orb-1 {
+    top: -110px;
+    left: -100px;
+    width: 400px;
+    height: 400px;
+    background: #3b82f6;
+    animation: float1 20s ease-in-out infinite;
+  }
+
+  &.orb-2 {
+    right: -150px;
+    bottom: -160px;
+    width: 500px;
+    height: 500px;
+    background: #8b5cf6;
+    animation: float2 25s ease-in-out infinite;
+  }
+
+  &.orb-3 {
+    left: 50%;
+    top: 50%;
+    width: 300px;
+    height: 300px;
+    background: #ec4899;
+    animation: float3 18s ease-in-out infinite;
+  }
+
+  &.orb-4 {
+    right: 20%;
+    bottom: 30%;
+    width: 350px;
+    height: 350px;
+    background: #f59e0b;
+    animation: float1 22s ease-in-out infinite reverse;
+  }
 }
 
-.base {
-  background: #f6f8fd;
-  width: 100%;
-  padding-bottom: 150px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+.hero-glow {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 1;
+
+  &.glow-blue {
+    top: 90px;
+    left: 9%;
+    width: 360px;
+    height: 360px;
+    background: rgba(59, 130, 246, 0.18);
+    filter: blur(120px);
+  }
+
+  &.glow-purple {
+    right: 8%;
+    bottom: 120px;
+    width: 480px;
+    height: 480px;
+    background: rgba(168, 85, 247, 0.16);
+    filter: blur(150px);
+  }
+
+  &.glow-warm {
+    left: 50%;
+    top: 43%;
+    width: 560px;
+    height: 560px;
+    background: rgba(245, 158, 11, 0.08);
+    filter: blur(180px);
+    transform: translate(-50%, -50%);
+  }
 }
 
-.suan {
-  background: #f6f8fd;
-  width: 100%;
-  padding-bottom: 150px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+.hero-particles {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
 
-  .itemContentSuan {
-    .itemContentTag {
-      display: flex !important;
-    }
+  span {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: rgba(45, 91, 255, 0.12);
+    border-radius: 50%;
+    animation: particleFloat 8s linear infinite;
 
-    .netTagUl {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      li {
-        border-radius: 4px;
-        padding: 10px;
-        color: #7a82a0;
-        border: 1px solid #d2d7e6;
-        margin-right: 10px;
+    @for $i from 1 through 30 {
+      &:nth-child(#{$i}) {
+        left: #{($i * 17) % 100}#{'%'};
+        top: #{($i * 29) % 100}#{'%'};
+        width: #{2 + ($i % 4)}px;
+        height: #{2 + ($i % 4)}px;
+        animation-delay: #{($i % 8) * 0.45}s;
+        animation-duration: #{6 + ($i % 6)}s;
       }
     }
 
-    .subTitle {
-      font-size: 18px;
-      font-weight: bold;
-      margin: 15px 0;
-      display: inline-block;
+    &:nth-child(4n) {
+      background: rgba(16, 185, 129, 0.16);
     }
 
-    position: relative;
-    z-index: 10;
-    padding-left: 50px;
-    padding-top: 50px;
-    color: #222f60;
-    padding-bottom: 25px;
-    width: 1400px;
-    margin-top: 55px;
-    background: url("../newImg/netBg.png");
-    background-size: cover;
-    background-position: center;
-
-    .title {
-      font-size: 36px;
-      font-weight: bold;
+    &:nth-child(4n + 1) {
+      background: rgba(59, 130, 246, 0.16);
     }
 
-    .description {
-      width: 960px;
-      color: #7a82a0;
-      font-size: 16px;
-      line-height: 2.8 !important;
-      margin-bottom: 0 !important;
+    &:nth-child(4n + 2) {
+      background: rgba(139, 92, 246, 0.16);
     }
 
-    .itemContentTag {
-      padding-top: 20px;
-      min-height: 180px;
-      width: 1300px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-
-      li {
-        width: 50%;
-        margin-top: 10px;
-        margin-bottom: 15px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        .tagTitle {
-          font-size: 16px;
-          padding: 0 10px;
-          border-right: 1px solid #d2d7e6;
-        }
-
-        .tagContent {
-          padding-left: 10px;
-          color: #7a82a0;
-        }
-      }
-
-      img {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .basePrice {
-      display: inline-block;
-      margin: 25px 0;
-      margin-top: 50px;
-      font-size: 16px;
-      color: #f62424;
-
-      * {
-        color: #f62424;
-      }
-    }
-
-    .butStyle {
-      font-weight: bold;
-      width: fit-content;
-      color: white;
-      padding: 16px 80px;
-      border-radius: 12px;
-      transition: all 0.3s ease-in-out;
-      background: linear-gradient(90deg, #275aff 0%, #2ebdfa 100%);
-
-      &:hover {
-        background: linear-gradient(90deg, #275aff 0%, #2d7c9c 100%);
-        cursor: pointer !important;
-      }
-    }
-
-    .lookDetailStyle {
-      background: linear-gradient(to right, #275aff, #2ebdfa);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-      display: inline-block;
-      font-weight: bold;
-      margin-left: 85px;
-      border-radius: 12px;
-
-      &:hover {
-        cursor: pointer !important;
-      }
-    }
-
-    .twoBtn {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      margin-top: 50px;
-      padding-right: 100px;
-      padding-bottom: 30px;
+    &:nth-child(4n + 3) {
+      background: rgba(236, 72, 153, 0.14);
     }
   }
 }
 
-.itemTitle {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: column;
-
-  .topText {
-    color: #222f60;
-    font-size: 48px;
-    font-weight: bold;
+@keyframes particleFloat {
+  0% {
+    transform: translateY(0) scale(0);
+    opacity: 0;
   }
 
-  .bottomText {
+  10% {
+    transform: translateY(-20px) scale(1);
+    opacity: 1;
+  }
+
+  90% {
+    transform: translateY(-200px) scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-240px) scale(0.5);
+    opacity: 0;
+  }
+}
+
+.hero-service-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 72px;
+  width: 100%;
+  max-width: 900px;
+}
+
+.circle-item {
+  cursor: pointer;
+  color: #111827;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &:hover {
+    transform: scale(1.08) translateY(-10px);
+  }
+
+  h3 {
+    margin: 24px 0 12px;
+    color: #1a1a1a;
     font-size: 24px;
-    color: #7a82a0;
-    margin-top: 15px;
+    font-weight: 700;
+  }
+
+  p {
+    min-height: 52px;
+    max-width: 210px;
+    margin: 0 auto 18px;
+    color: #666666;
+    font-size: 15px;
+    line-height: 1.7;
+  }
+
+  button {
+    height: 36px;
+    padding: 0 24px;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.76);
+    border: 1px solid rgba(45, 91, 255, 0.12);
+    border-radius: 999px;
+    transition: all 0.25s ease;
+  }
+}
+
+.circle-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 192px;
+  height: 192px;
+  margin: 0 auto;
+  border: 2px solid rgba(45, 91, 255, 0.15);
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(45, 91, 255, 0.06), rgba(45, 91, 255, 0.02));
+  box-shadow: 0 4px 12px rgba(45, 91, 255, 0.06), 0 0 20px rgba(45, 91, 255, 0.12);
+  animation: rhythmPulse 2.5s ease-in-out infinite;
+}
+
+.circle-core {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 156px;
+  height: 156px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
+
+  svg {
+    width: 86px;
+    height: 86px;
+  }
+}
+
+.circle-item.token button {
+  color: #2d5bff;
+  border-color: rgba(45, 91, 255, 0.16);
+
+  &:hover {
+    background: rgba(45, 91, 255, 0.06);
+  }
+}
+
+.circle-item.workshop {
+  .circle-ring {
+    border-color: rgba(124, 58, 237, 0.15);
+    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(236, 72, 153, 0.02));
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.06), 0 0 20px rgba(139, 92, 246, 0.12);
+    animation-name: rhythmPulse2;
+    animation-duration: 2.8s;
+  }
+
+  button {
+    color: #7c3aed;
+    border-color: rgba(124, 58, 237, 0.16);
+
+    &:hover {
+      background: rgba(124, 58, 237, 0.06);
+    }
+  }
+}
+
+.circle-item.base {
+  .circle-ring {
+    border-color: rgba(5, 150, 105, 0.15);
+    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(45, 91, 255, 0.02));
+    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.06), 0 0 20px rgba(16, 185, 129, 0.12);
+    animation-name: rhythmPulse3;
+    animation-duration: 3s;
+  }
+
+  button {
+    color: #059669;
+    border-color: rgba(5, 150, 105, 0.16);
+
+    &:hover {
+      background: rgba(5, 150, 105, 0.06);
+    }
+  }
+}
+
+.hero-stat-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px;
+  width: 100%;
+  max-width: 1180px;
+  margin-top: 72px;
+}
+
+.hero-stat-item {
+  position: relative;
+  min-height: 118px;
+  padding: 20px 18px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(45, 91, 255, 0.08);
+  backdrop-filter: blur(20px);
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    pointer-events: none;
+  }
+
+  &::before {
+    top: 0;
+    left: -100%;
+    background: linear-gradient(90deg, transparent, #2d5bff, transparent);
+    animation: borderMove 3s linear infinite;
+  }
+
+  &::after {
+    right: -100%;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, #7c3aed, transparent);
+    animation: borderMoveReverse 3s linear infinite;
+  }
+
+  strong {
+    display: block;
+    margin: 8px 0 10px;
+    background: linear-gradient(135deg, #2d5bff 0%, #7c3aed 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 36px;
+    line-height: 1;
+  }
+
+  span {
+    color: #666666;
+    font-size: 13px;
+  }
+
+  &.highlight strong {
+    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+
+@keyframes float1 {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+
+  33% {
+    transform: translate(50px, -50px);
+  }
+
+  66% {
+    transform: translate(-30px, 30px);
+  }
+}
+
+@keyframes float2 {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+
+  33% {
+    transform: translate(-40px, 40px);
+  }
+
+  66% {
+    transform: translate(60px, -30px);
+  }
+}
+
+@keyframes float3 {
+  0%,
+  100% {
+    transform: translate(-50%, -50%);
+  }
+
+  33% {
+    transform: translate(calc(-50% + 40px), calc(-50% - 40px));
+  }
+
+  66% {
+    transform: translate(calc(-50% - 30px), calc(-50% + 30px));
+  }
+}
+
+@keyframes sloganShine {
+  0% {
+    background-position: -200% center;
+  }
+
+  100% {
+    background-position: 200% center;
+  }
+}
+
+@keyframes rhythmPulse {
+  0%,
+  100% {
+    box-shadow: 0 4px 12px rgba(45, 91, 255, 0.06), 0 0 20px rgba(59, 130, 246, 0.18);
+  }
+
+  50% {
+    box-shadow: 0 8px 20px rgba(45, 91, 255, 0.1), 0 0 38px rgba(59, 130, 246, 0.25);
+  }
+}
+
+@keyframes rhythmPulse2 {
+  0%,
+  100% {
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.06), 0 0 20px rgba(139, 92, 246, 0.18);
+  }
+
+  50% {
+    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.1), 0 0 38px rgba(139, 92, 246, 0.25);
+  }
+}
+
+@keyframes rhythmPulse3 {
+  0%,
+  100% {
+    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.06), 0 0 20px rgba(16, 185, 129, 0.18);
+  }
+
+  50% {
+    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.1), 0 0 38px rgba(16, 185, 129, 0.25);
+  }
+}
+
+@keyframes borderMove {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes borderMoveReverse {
+  0% {
+    right: -100%;
+  }
+
+  100% {
+    right: 100%;
+  }
+}
+
+@media (max-width: 1100px) {
+  .public-hero h1 {
+    font-size: 48px;
+  }
+
+  .hero-service-list {
+    gap: 34px;
+  }
+
+  .hero-stat-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    padding: 0;
+  }
+
+  .hero-inner {
+    padding: 56px 24px;
+  }
+
+  .hero-service-list {
+    grid-template-columns: 1fr;
+    gap: 48px;
+    max-width: 420px;
+  }
+}
+
+/* 产品列表区域 */
+.productList {
+  position: relative;
+  width: 100%;
+  max-width: 1600px;
+  margin: -8px auto 0;
+  padding: 44px 20px 40px;
+  background: linear-gradient(180deg, rgba(247, 250, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 42%, rgba(248, 250, 252, 0.96) 100%);
+  border-radius: 28px 28px 0 0;
+
+  @media (max-width: 768px) {
+    padding: 32px 10px 30px;
   }
 }
 
 .myTab {
-  width: fit-content;
-  margin-top: 35px;
+  width: 100%;
   font-size: 18px;
   border-radius: 16px;
-  background: white;
+  background: #f7f8fc;
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 0;
+  flex-wrap: wrap;
+  box-shadow: 0 10px 30px rgba(45, 91, 255, 0.06);
+
+  @media (max-width: 768px) {
+    margin-top: 30px;
+    font-size: 16px;
+  }
 
   .activeMenu {
-    background: linear-gradient(90deg, #275aff 0%, #2ebdfa 100%);
+    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
     color: white;
   }
 
   li {
-    transition: all 0.2s ease-in-out;
+    transition: all .2s ease-in-out;
     z-index: 2;
-    padding: 10px 20px;
-    margin-right: 45px;
+    padding: 10px 100px;
+    margin: 5px;
     border-radius: 8px;
     display: flex;
-        justify-content: center;
-    align-items: center;
-
-    &:hover {
-      cursor: pointer !important;
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-      margin-right: 5px;
-    }
-  }
-}
-
-.itemContent {
-  padding-bottom: 30px;
-  position: relative;
-  z-index: 10;
-  padding-left: 50px;
-  padding-top: 50px;
-  color: #222f60;
-  width: 1400px;
-  height: 680px;
-  margin-top: 55px;
-  background-size: cover;
-  background-position: center;
-
-  .title {
-    font-size: 36px;
-    font-weight: bold;
-  }
-
-  .description {
-    width: 960px;
-    color: #7a82a0;
-    font-size: 16px;
-    line-height: 2.8 !important;
-    margin-bottom: 0 !important;
-  }
-
-  .itemContentTag {
-    min-height: 250px;
-    padding-top: 10px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: column;
-
-    li {
-      width: 100%;
-      margin-top: 10px;
-      margin-bottom: 15px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      .tagTitle {
-        width: fit-content !important;
-        font-size: 16px;
-        padding: 0 10px;
-        border-right: 1px solid #d2d7e6;
-      }
-
-      .tagContent {
-        padding-left: 10px;
-        color: #7a82a0;
-      }
-    }
-
-    img {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .basePrice {
-    display: inline-block;
-    margin: 15px 0;
-    margin-top: 15px;
-    font-size: 16px;
-    color: #f62424;
-
-    * {
-      color: #f62424;
-    }
-  }
-
-  .butStyle {
-    font-weight: bold;
-    width: fit-content;
-    color: white;
-    padding: 16px 80px;
-    border-radius: 12px;
-    transition: all 0.3s ease-in-out;
-    background: linear-gradient(90deg, #275aff 0%, #2ebdfa 100%);
-
-    &:hover {
-      background: linear-gradient(90deg, #275aff 0%, #2d7c9c 100%);
-      cursor: pointer !important;
-    }
-  }
-
-  .lookDetailStyle {
-    background: linear-gradient(to right, #275aff, #2ebdfa);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    display: inline-block;
-    font-weight: bold;
-    margin-left: 85px;
-
-    &:hover {
-      cursor: pointer !important;
-    }
-  }
-
-  .twoBtn {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .discountStyle {
-    position: absolute;
-    top: 20px;
-    right: 11px;
-    color: white;
-
-    * {
-      color: white;
-    }
-  }
-}
-
-.net {
-  padding-bottom: 50px;
-  background: #f5f7fd;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  .itemContentNet {
-    .netTagUl {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-
-      li {
-        border-radius: 4px;
-        padding: 10px;
-        color: #7a82a0;
-        border: 1px solid #d2d7e6;
-        margin-right: 10px;
-      }
-    }
-
-    .subTitle {
-      font-size: 18px;
-      font-weight: bold;
-      margin: 15px 0;
-      display: inline-block;
-    }
-
-    position: relative;
-    z-index: 10;
-    padding-left: 50px;
-    padding-top: 50px;
-    color: #222f60;
-    padding-bottom: 25px;
-    width: 1400px;
-    margin-top: 55px;
-    background: url("../newImg/netBg.png");
-    background-size: cover;
-    background-position: center;
-
-    .title {
-      font-size: 36px;
-      font-weight: bold;
-    }
-
-    .description {
-      width: 960px;
-      color: #7a82a0;
-      font-size: 16px;
-      line-height: 2.8 !important;
-      margin-bottom: 0 !important;
-    }
-
-    .itemContentTag {
-      min-height: 180px;
-      width: 1300px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-direction: column;
-
-      li {
-        width: 100%;
-        margin-top: 10px;
-        margin-bottom: 15px;
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        .tagTitle {
-          font-size: 16px;
-          padding: 0 10px;
-          border-right: 1px solid #d2d7e6;
-        }
-
-        .tagContent {
-          padding-left: 10px;
-          color: #7a82a0;
-        }
-      }
-
-      img {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .basePrice {
-      display: inline-block;
-      margin: 25px 0;
-      margin-top: 50px;
-      font-size: 16px;
-      color: #f62424;
-
-      * {
-        color: #f62424;
-      }
-    }
-
-    .butStyle {
-      font-weight: bold;
-      width: fit-content;
-      color: white;
-      padding: 16px 80px;
-      border-radius: 12px;
-      transition: all 0.3s ease-in-out;
-      background: linear-gradient(90deg, #275aff 0%, #2ebdfa 100%);
-
-      &:hover {
-        background: linear-gradient(90deg, #275aff 0%, #2d7c9c 100%);
-        cursor: pointer !important;
-      }
-    }
-
-    .lookDetailStyle {
-      background: linear-gradient(to right, #275aff, #2ebdfa);
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-      display: inline-block;
-      font-weight: bold;
-      margin-left: 85px;
-      border-radius: 12px;
-
-      &:hover {
-        cursor: pointer !important;
-      }
-    }
-
-    .twoBtn {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      margin-top: 50px;
-      padding-right: 100px;
-    }
-  }
-}
-
-.resources {
-  * {
-    z-index: 1;
-  }
-
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  .bg {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    background: url("../newImg/rescourceBg.png");
-    background-size: 100% 100%;
-    background-position: center;
-  }
-
-  .mapBox {
-    margin-top: 15px;
-    width: 1400px;
-    display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
 
-    .map {
-      width: 680px;
-      height: 500px;
-      background: url("../newImg/map.png");
-      background-size: cover;
-      background-position: center;
-      position: relative;
-
-      .mapItem {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-
-        .title {
-          margin-bottom: 5px;
-        }
-
-        img {
-          width: 30px;
-          height: 25px;
-        }
-      }
-    }
-
-    .content {
-      height: 500px;
-      width: calc(100% - 680px);
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-
-      li {
-        width: 40%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: flex-start;
-        padding-left: 80px;
-      }
-
-      .numberStyle {
-        position: relative;
-        background: linear-gradient(to right, #275aff, #2ebdfa);
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-        display: inline-block;
-
-        .mapTag {
-          font-size: 24px;
-          position: absolute;
-          right: -20px;
-          top: 0;
-          background: linear-gradient(to right, #275aff, #2ebdfa);
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          display: inline-block;
-        }
-      }
+    @media (max-width: 768px) {
+      padding: 8px 15px;
+      margin: 3px;
     }
   }
 }
 
-.logoImg {
-  display: flex;
-  width: 1200px;
-  margin: 25px 0;
-  background: white;
-  border-radius: 16px;
-  overflow: hidden;
-  justify-content: space-around;
-
-  img {
-    width: 150px;
-    height: 100px;
-  }
-}
-
-.numberStyle {
-  font-size: 36px;
-}
-
-.tiyan {
-  width: 100%;
-  height: 350px;
-  background: url("./img/tiyanBg.png");
-  background-position: center;
-  background-size: cover;
+/* 分页样式 */
+.el-pagination {
+  padding: 20px 0;
   display: flex;
   justify-content: center;
-  align-items: center;
-}
 
-::v-deep .custom-input {
-  margin-top: 25px;
-  width: 790px;
-  height: 82px;
-  font-size: 24px;
+  @media (max-width: 768px) {
 
-  input {
-    position: relative;
-    width: 790px;
-    height: 82px;
-    border-radius: 16px;
-  }
-
-  * {
-    border: none !important;
+    ::v-deep .el-pagination__total,
+    ::v-deep .el-pagination__jump {
+      display: none;
+    }
   }
 }
 
-::v-deep .custom-input .el-input-group__append {
-  padding: 0;
-  background: none;
-  border: none;
-}
-
-::v-deep .experience-btn {
-  display: inline-block;
-  color: white;
-  cursor: pointer;
-  font-size: 24px;
-  padding: 5px 15px;
-  line-height: 40px;
-  position: absolute;
-  top: 15px;
-  right: 25px;
-  background: linear-gradient(90deg, #275aff 0%, #2ebdfa 100%);
-  border-radius: 12px 12px 12px 12px;
-}
-
-::v-deep .experience-btn:hover {
-  background: linear-gradient(90deg, #1546ea 0%, #1e85b1 100%);
-}
-
-::v-deep .msgDialog {
-  top: 20px;
-  background: transparent;
-  background: url("../newImg/netBg.png");
-  width: 1253px !important;
-  height: 504px;
-  background-size: cover;
-  background-position: center;
-  color: #090909 !important;
-  padding: 0 35px;
-
-  p {
-    margin: 25px 0;
+/* 响应式设计 */
+@media (max-width: 576px) {
+  .jd-homepage {
+    padding-top: 80px;
   }
 
-  .footerBox {
-    display: flex;
-    justify-content: space-between;
+  .main-content {
+    padding: 0;
+  }
 
-    .item {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
+  .hero-inner {
+    padding: 42px 18px;
+  }
+
+  .public-hero {
+    min-height: auto;
+  }
+
+  .public-hero h1 {
+    font-size: 34px;
+  }
+
+  .hero-subtitle {
+    margin-bottom: 32px;
+    font-size: 16px;
+  }
+
+  .hero-service-list,
+  .hero-stat-list {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .circle-ring {
+    width: 156px;
+    height: 156px;
+  }
+
+  .circle-core {
+    width: 126px;
+    height: 126px;
+
+    svg {
+      width: 72px;
+      height: 72px;
     }
   }
 
-  * {
-    color: #090909 !important;
+  .myTab {
+    font-size: 14px;
+    margin-top: 20px;
   }
-
-  .title {
-    font-size: 36px;
-  }
-
-  .el-dialog__header {
-    border: none;
-  }
-}
-.position{
-  width: 100%;
-  height: 100%;
-  position: sticky;
-  top: 0px;
-  z-index: 999;
-
 }
 </style>
-- 
2.34.1