diff --git a/src/assets/v3/Line/2-2-1.bcb33d47.png b/src/assets/v3/Line/2-2-1.bcb33d47.png
new file mode 100644
index 0000000..f1278c5
Binary files /dev/null and b/src/assets/v3/Line/2-2-1.bcb33d47.png differ
diff --git a/src/assets/v3/bg3.png b/src/assets/v3/bg3.png
new file mode 100644
index 0000000..4b23220
Binary files /dev/null and b/src/assets/v3/bg3.png differ
diff --git a/src/views/Jyh/Home/component/ComAuthority.vue b/src/views/Jyh/Home/component/ComAuthority.vue
index 6ce2967..a4ef1af 100644
--- a/src/views/Jyh/Home/component/ComAuthority.vue
+++ b/src/views/Jyh/Home/component/ComAuthority.vue
@@ -1,157 +1,149 @@
 <template>
-  <div class="com-authority"><h5 class="wow xsddhxg animated" style="visibility: visible;">屡获国际权威认证，硬核技术驱动智能安全</h5>
-    <ul class="wow xsddhxg animated" style="visibility: visible;">
-      <li><img
-        src="http://chaitin-marketing-public.oss-cn-beijing.aliyuncs.com/images/2025/06/20/42f9989f44fb422db95349647b15409c">
-        <p class="num">/ 01</p>
-        <p class="title MultiLine">Tcode雷池：WAF 软硬件市场营收规模，国内安全厂商第一</p>
-        <p class="line"></p>
-        <p class="desc MultiLine">近日，国际权威咨询机构 IDC 发布针对中国 Web 应用防火墙产品的市场份额系列研究报告。报告显示，在 2024 年中国硬件 WAF 市场份额排名中，Tcode科技以
-          10.6% 的市场份额跃居至第二，全面领先于市场主流水平；在 2024 年私有云WAF市场份额排名中，Tcode科技位列第三，连续三年稳居前三，持续占据领先地位；与此同时，2024 年国内 WAF
-          软硬件市场总营收规模，Tcode科技位列安全厂商第一。</p><a class="EASE btn-more LNK"
-                                         href="https://mp.weixin.qq.com/s/0oEiHBJuIALEcEcXqjK-iA" target="_blank">了解更多
-          <i class="EASE ICO ic-arow"></i></a></li>
-      <li><img
-        src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/06/94e1522a576e485abaa30473984a07db.jpg">
-        <p class="num">/ 02</p>
-        <p class="title MultiLine">攻防技术标杆Tcode荣获 Gartner 三项权威认可</p>
-        <p class="line"></p>
-        <p class="desc MultiLine">Tcode科技在攻击面管理（ASM）、入侵和攻击模拟（BAS）、云工作负载保护平台（CWPP）领域的技术被列入报告，被 Gartner 认可为推荐厂商（Sample
-          Vendor）。</p><a class="EASE btn-more LNK" href="https://mp.weixin.qq.com/s/EKov7PEEhkyHP9tOd600hQ"
-                         target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a></li>
-      <li><img
-        src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/03/6d7c4427b1874cb2950764d5ff12c9a0.jpg">
-        <p class="num">/ 03</p>
-        <p class="title MultiLine">安全咨询能力获认可！Tcode入选国际权威报告</p>
-        <p class="line"></p>
-        <p class="desc MultiLine">全球权威咨询机构 Forrester 发布报告《The Cybersecurity Consulting Services Landscape In Asia
-          Pacific, Q3 2023》，Tcode科技安全咨询服务得到国际权威专家的高度认可。</p><a class="EASE btn-more LNK"
-                                                           href="https://mp.weixin.qq.com/s/oFXXhpP2RjBAo6UWH5JVyQ"
-                                                           target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a>
-      </li>
-    </ul>
+  <div class="com-authority">
+    <!-- 主文案 -->
+    <h5 class="main-title wow xsddhxg animated" style="visibility: visible;">
+      准备好构建您的软件安全免疫系统了吗？
+    </h5>
+    <!-- 描述文本 -->
+    <p class="sub-desc wow xsddhxg animated" style="visibility: visible;">
+      无论您是初创团队还是关基单位，Tcode 灵活的订阅模式都能满足您的安全需求。
+    </p>
+    <!-- 按钮组 -->
+    <div class="btn-group wow xsddhxg animated" style="visibility: visible;">
+      <a
+        class="btn-trial LNK"
+        @click="handleLogin('login')"
+      >
+      免费试用基础版
+      <span class="tag">（面向中小企业）</span>
+      </a>
+      <a
+        class="btn-custom LNK"
+        @click="handleLogin('login')"
+      >
+      联系专家定制方案
+      <span class="tag">（面向大型关基单位）</span>
+      </a>
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "ComAuthority"
-}
+<script setup lang="ts">
+import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
+import {emitEvent} from "@/utils/eventBus";
+
+const handleLogin = (type) => {
+  emitEvent('login', {type, triggerType: '主动注册'});
+};
+
+
 </script>
 
 <style scoped lang="scss">
 .com-authority {
   background-color: #f5f5f5;
-  padding-bottom: 50px;
-  padding-top: 50px;
-  text-align: center
-}
-
-.com-authority h5 {
-  color: #333;
-  font-size: 28px;
-  font-weight: 400;
-  letter-spacing: 1.7px;
-  line-height: 40px
-}
-
-.com-authority ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin: 54px 0 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center
-}
-
-.com-authority li {
-  background: #fff;
-  border-radius: 24px;
-  -webkit-box-shadow: 0 2px 26px 7px rgba(50,50,50,.06);
-  box-shadow: 0 2px 26px 7px #3232320f;
-  list-style: none;
-  margin: 0 14px;
-  padding: 33px;
-  text-align: left;
-  width: 436px
-}
-
-.com-authority li img {
-  border-radius: 10px;
-  display: block;
-  height: 327px;
-  -o-object-fit: cover;
-  object-fit: cover;
-  width: 100%
-}
-
-.com-authority li .num {
-  color: #969696;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  margin: 47px 0 0
-}
-
-.com-authority li .title {
-  color: #333;
-  font-size: 20px;
-  font-weight: 400;
-  height: 60px;
-  letter-spacing: .5px;
-  line-height: 30px;
-  margin: 14px 0 0
-}
-
-.com-authority li .desc {
-  color: #4d4d4d;
-  font-size: 14px;
-  font-weight: 400;
-  height: 96px;
-  line-height: 24px;
-  -webkit-line-clamp: 4;
-  letter-spacing: .5px
-}
-
-.com-authority li .line {
-  background-color: #969696;
-  height: 2px;
-  margin: 21px 0 29px
-}
-
-.com-authority li .btn-more {
-  background-color: #4bad52;
-  border-radius: 8px;
-  color: #fff;
-  display: block;
-  height: 44px;
-  line-height: 44px;
-  margin: 20px 0 0;
+  padding: 80px 20px; // 优化内边距，提升视觉效果
   text-align: center;
-  width: 155px
 }
 
-.com-authority li .btn-more:hover {
-  background-color: #7aba4a;
-  color: #fff
+// 主标题样式
+.main-title {
+  color: #333;
+  font-size: 32px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  line-height: 48px;
+  margin: 0 0 20px;
 }
 
-.com-authority li .btn-more:hover .ICO {
-  left: 15px
+// 描述文本样式
+.sub-desc {
+  color: #666;
+  font-size: 18px;
+  line-height: 30px;
+  margin: 0 0 40px;
+  max-width: 800px; // 限制宽度，避免文字过宽
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.com-authority li .btn-more .ICO {
-  left: 7px;
-  position: relative
+// 按钮组样式
+.btn-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px; // 按钮间距
+  flex-wrap: wrap; // 响应式换行
 }
 
-.MultiLine {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+// 按钮通用样式
+.btn-group a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  white-space: nowrap; // 防止文字换行
+}
+
+// 免费试用按钮样式
+.btn-trial {
+  background-color: #4bad52;
+  color: #fff;
+
+  .tag {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 8px;
+    opacity: 0.9;
+  }
+
+  &:hover {
+    background-color: #7aba4a;
+    transform: translateY(-2px); // 轻微上浮效果
+    box-shadow: 0 4px 12px rgba(75, 173, 82, 0.2); // 阴影增强
+  }
+}
+
+// 定制方案按钮样式
+.btn-custom {
+  background-color: #fff;
+  color: #4bad52;
+  border: 1px solid #4bad52;
+
+  .tag {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 8px;
+    opacity: 0.9;
+  }
+
+  &:hover {
+    background-color: #f0f9f1;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(75, 173, 82, 0.1);
+  }
+}
+
+// 响应式适配（移动端）
+@media (max-width: 768px) {
+  .main-title {
+    font-size: 24px;
+    line-height: 36px;
+  }
+
+  .sub-desc {
+    font-size: 16px;
+    line-height: 28px;
+  }
+
+  .btn-group a {
+    padding: 14px 24px;
+    font-size: 14px;
+  }
 }
 </style>
diff --git a/src/views/Jyh/Home/component/ComAuthorityOld.vue b/src/views/Jyh/Home/component/ComAuthorityOld.vue
new file mode 100644
index 0000000..6ce2967
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComAuthorityOld.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="com-authority"><h5 class="wow xsddhxg animated" style="visibility: visible;">屡获国际权威认证，硬核技术驱动智能安全</h5>
+    <ul class="wow xsddhxg animated" style="visibility: visible;">
+      <li><img
+        src="http://chaitin-marketing-public.oss-cn-beijing.aliyuncs.com/images/2025/06/20/42f9989f44fb422db95349647b15409c">
+        <p class="num">/ 01</p>
+        <p class="title MultiLine">Tcode雷池：WAF 软硬件市场营收规模，国内安全厂商第一</p>
+        <p class="line"></p>
+        <p class="desc MultiLine">近日，国际权威咨询机构 IDC 发布针对中国 Web 应用防火墙产品的市场份额系列研究报告。报告显示，在 2024 年中国硬件 WAF 市场份额排名中，Tcode科技以
+          10.6% 的市场份额跃居至第二，全面领先于市场主流水平；在 2024 年私有云WAF市场份额排名中，Tcode科技位列第三，连续三年稳居前三，持续占据领先地位；与此同时，2024 年国内 WAF
+          软硬件市场总营收规模，Tcode科技位列安全厂商第一。</p><a class="EASE btn-more LNK"
+                                         href="https://mp.weixin.qq.com/s/0oEiHBJuIALEcEcXqjK-iA" target="_blank">了解更多
+          <i class="EASE ICO ic-arow"></i></a></li>
+      <li><img
+        src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/06/94e1522a576e485abaa30473984a07db.jpg">
+        <p class="num">/ 02</p>
+        <p class="title MultiLine">攻防技术标杆Tcode荣获 Gartner 三项权威认可</p>
+        <p class="line"></p>
+        <p class="desc MultiLine">Tcode科技在攻击面管理（ASM）、入侵和攻击模拟（BAS）、云工作负载保护平台（CWPP）领域的技术被列入报告，被 Gartner 认可为推荐厂商（Sample
+          Vendor）。</p><a class="EASE btn-more LNK" href="https://mp.weixin.qq.com/s/EKov7PEEhkyHP9tOd600hQ"
+                         target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a></li>
+      <li><img
+        src="http://chaitin-bbs-test.oss-cn-beijing.aliyuncs.com/images/2025/01/03/6d7c4427b1874cb2950764d5ff12c9a0.jpg">
+        <p class="num">/ 03</p>
+        <p class="title MultiLine">安全咨询能力获认可！Tcode入选国际权威报告</p>
+        <p class="line"></p>
+        <p class="desc MultiLine">全球权威咨询机构 Forrester 发布报告《The Cybersecurity Consulting Services Landscape In Asia
+          Pacific, Q3 2023》，Tcode科技安全咨询服务得到国际权威专家的高度认可。</p><a class="EASE btn-more LNK"
+                                                           href="https://mp.weixin.qq.com/s/oFXXhpP2RjBAo6UWH5JVyQ"
+                                                           target="_blank">了解更多 <i class="EASE ICO ic-arow"></i></a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComAuthority"
+}
+</script>
+
+<style scoped lang="scss">
+.com-authority {
+  background-color: #f5f5f5;
+  padding-bottom: 50px;
+  padding-top: 50px;
+  text-align: center
+}
+
+.com-authority h5 {
+  color: #333;
+  font-size: 28px;
+  font-weight: 400;
+  letter-spacing: 1.7px;
+  line-height: 40px
+}
+
+.com-authority ul {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 54px 0 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center
+}
+
+.com-authority li {
+  background: #fff;
+  border-radius: 24px;
+  -webkit-box-shadow: 0 2px 26px 7px rgba(50,50,50,.06);
+  box-shadow: 0 2px 26px 7px #3232320f;
+  list-style: none;
+  margin: 0 14px;
+  padding: 33px;
+  text-align: left;
+  width: 436px
+}
+
+.com-authority li img {
+  border-radius: 10px;
+  display: block;
+  height: 327px;
+  -o-object-fit: cover;
+  object-fit: cover;
+  width: 100%
+}
+
+.com-authority li .num {
+  color: #969696;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 47px 0 0
+}
+
+.com-authority li .title {
+  color: #333;
+  font-size: 20px;
+  font-weight: 400;
+  height: 60px;
+  letter-spacing: .5px;
+  line-height: 30px;
+  margin: 14px 0 0
+}
+
+.com-authority li .desc {
+  color: #4d4d4d;
+  font-size: 14px;
+  font-weight: 400;
+  height: 96px;
+  line-height: 24px;
+  -webkit-line-clamp: 4;
+  letter-spacing: .5px
+}
+
+.com-authority li .line {
+  background-color: #969696;
+  height: 2px;
+  margin: 21px 0 29px
+}
+
+.com-authority li .btn-more {
+  background-color: #4bad52;
+  border-radius: 8px;
+  color: #fff;
+  display: block;
+  height: 44px;
+  line-height: 44px;
+  margin: 20px 0 0;
+  text-align: center;
+  width: 155px
+}
+
+.com-authority li .btn-more:hover {
+  background-color: #7aba4a;
+  color: #fff
+}
+
+.com-authority li .btn-more:hover .ICO {
+  left: 15px
+}
+
+.com-authority li .btn-more .ICO {
+  left: 7px;
+  position: relative
+}
+
+.MultiLine {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/src/views/Jyh/Home/component/ComEntry.vue b/src/views/Jyh/Home/component/ComEntry.vue
index 7c88a3a..6238c04 100644
--- a/src/views/Jyh/Home/component/ComEntry.vue
+++ b/src/views/Jyh/Home/component/ComEntry.vue
@@ -3,7 +3,48 @@
     <div class="com-slider">
       <div class="swiper swiper-creative swiper-3d" ref="swiperContainer">
         <div class="swiper-wrapper">
+
           <div class="swiper-slide" data-swiper-slide-index="0">
+            <div class="banner-container">
+              <div class="sImg">
+                <img src="@/assets/v3/bg3.png" class="bg-image" />
+                <div class="overlay-mask"></div>
+              </div>
+
+              <div class="content-wrapper">
+                <div class="title-group animate-up">
+                  <h1 class="main-headline">
+                    Tcode：构建数字世界的<span class="gradient-text">免疫系统</span>
+                  </h1>
+                  <h2 class="sub-headline">
+                    AI 驱动的软件供应链安全全链路治理平台
+                  </h2>
+                </div>
+
+                <p class="description animate-up delay-1">
+                  以<span class="highlight">金银湖安全大模型</span>为核心，打通
+                  <span class="tech-tag">开源感知</span> -
+                  <span class="tech-tag">代码审计</span> -
+                  <span class="tech-tag">供应链治理</span> -
+                  <span class="tech-tag">终端监测</span>
+                  <br>全生命周期，让每一行代码都可信、可控、可追溯。
+                </p>
+
+                <div class="cta-group animate-up delay-2">
+                  <button class="btn btn-primary" @click="handleLogin('login')">
+                    <span class="btn-text">立即体验 SaaS 版</span>
+                    <span class="btn-glow"></span>
+                  </button>
+
+                  <button class="btn btn-secondary" @click="handleLogin('login')">
+                    <span class="btn-text">申请私有化演示</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-slide" data-swiper-slide-index="1">
             <div class="sVdo">
               <video
                 class="full-bg-video"
@@ -13,17 +54,11 @@
               </video>
             </div>
           </div>
-
-          <div class="swiper-slide" data-swiper-slide-index="1">
-            <div class="sImg">
-              <img src="@/assets/v3/4b518ec439454e7a85d261de0c833c6e.png" />
-            </div>
-          </div>
-          <div class="swiper-slide" data-swiper-slide-index="2">
-            <div class="sImg">
-              <img src="@/assets/v3/09d1ab34dd334323a1bb50e4a298bcfb.jpg" />
-            </div>
-          </div>
+<!--          <div class="swiper-slide" data-swiper-slide-index="2">-->
+<!--            <div class="sImg">-->
+<!--              <img src="@/assets/v3/09d1ab34dd334323a1bb50e4a298bcfb.jpg" />-->
+<!--            </div>-->
+<!--          </div>-->
         </div>
 
         <div class="swiper-button-prev swiper-button-white" ref="prevButton"></div>
@@ -56,6 +91,7 @@ import Swiper from 'swiper';
 // 导入 Swiper 样式和模块
 import 'swiper/swiper-bundle.css';
 import { Navigation, Pagination, EffectCreative,Autoplay } from 'swiper/modules';
+import {emitEvent} from "@/utils/eventBus";
 
 const featureCards = [
   {
@@ -137,7 +173,11 @@ onMounted(() => {
   }
 });
 
-// 在组件销毁时销毁 Swiper 实例，防止内存泄漏 (可选但推荐)
+
+const handleLogin = (type) => {
+  emitEvent('login', {type, triggerType: '主动注册'});
+};
+
 onBeforeUnmount(() => {
   if (mySwiper) {
     mySwiper.destroy();
@@ -285,4 +325,173 @@ onBeforeUnmount(() => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
+
+.banner-container {
+  position: relative;
+  width: 84vw;
+  margin: 0 auto;
+  height: 840px;
+  overflow: hidden;
+  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  /* 背景图样式优化 */
+  .sImg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  .bg-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 确保图片覆盖整个区域且不变形 */
+    object-position: center top;
+  }
+
+  /* 暗色遮罩：防止背景过亮导致文字看不清 */
+  .overlay-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
+  }
+
+  /* 内容层布局 */
+  .content-wrapper {
+    position: relative;
+    z-index: 10; /* 确保内容在背景之上 */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: #ffffff;
+    padding: 0 20px;
+    margin-top: -50px; /* 视觉微调，稍微向上提一点 */
+  }
+
+  /* 标题样式 */
+  .main-headline {
+    font-size: 64px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    margin-bottom: 16px;
+    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+
+    .gradient-text {
+      /* 科技感蓝紫渐变 */
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 800;
+    }
+  }
+
+  .sub-headline {
+    font-size: 32px;
+    font-weight: 400;
+    color: #e0e0e0;
+    margin-bottom: 40px;
+    letter-spacing: 1px;
+  }
+
+  /* 描述文字样式 */
+  .description {
+    font-size: 18px;
+    line-height: 1.8;
+    color: #cccccc;
+    max-width: 800px;
+    margin-bottom: 60px;
+
+    .highlight {
+      color: #fff;
+      font-weight: bold;
+      color: #4facfe;
+    }
+
+    .tech-tag {
+      display: inline-block;
+      padding: 0 4px;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+
+  /* 按钮组样式 */
+  .cta-group {
+    display: flex;
+    gap: 30px;
+  }
+
+  .btn {
+    position: relative;
+    padding: 14px 40px;
+    font-size: 18px;
+    font-weight: 600;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    letter-spacing: 1px;
+  }
+
+  /* 主要按钮：SaaS 体验 (高亮) */
+  .btn-primary {
+    background: linear-gradient(90deg, #2b5876 0%, #4e4376 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    box-shadow: 0 0 20px rgba(78, 67, 118, 0.4);
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 30px rgba(78, 67, 118, 0.6);
+    background: linear-gradient(90deg, #356b8f 0%, #5f5291 100%);
+  }
+
+  /* 次要按钮：私有化演示 (玻璃拟态/描边) */
+  .btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    color: white;
+  }
+
+  .btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: #fff;
+    transform: translateY(-2px);
+  }
+
+  /* 简单的入场动画 */
+  .animate-up {
+    animation: fadeInUp 1s ease-out forwards;
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  .delay-1 { animation-delay: 0.2s; }
+  .delay-2 { animation-delay: 0.4s; }
+
+  @keyframes fadeInUp {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* 响应式适配 */
+  @media (max-width: 768px) {
+    .banner-container { height: 800px; }
+    .main-headline { font-size: 36px; }
+    .sub-headline { font-size: 20px; }
+    .cta-group { flex-direction: column; gap: 15px; }
+  }
+}
 </style>
diff --git a/src/views/Jyh/Home/component/ComProject/index.vue b/src/views/Jyh/Home/component/ComProject/index.vue
new file mode 100644
index 0000000..fc65fc7
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComProject/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="secondEdition">
+    <p class="theTitle">核心产品</p>
+    <div>
+      <div class="" style="">
+        <div class="ant-anchor-wrapper" style="max-height: 100vh;">
+          <div class="ant-anchor">
+            <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
+
+            <li
+              v-for="(item, index) in menuList"
+              :key="index"
+              :class="{ active: activeIndex === index }"
+              @click="changeTab(index)"
+            >
+              <a>{{ item.name }}</a>
+            </li>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="product-content">
+
+      <div v-if="activeIndex === 0" class="component-box">
+        <Product1 />
+      </div>
+
+      <div v-if="activeIndex === 1" class="component-box">
+        <Product2 />
+      </div>
+
+      <div v-if="activeIndex === 2" class="component-box">
+        <Product3 />
+      </div>
+
+      <div v-if="activeIndex === 3" class="component-box">
+        <Product4 />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Product1 from './product1.vue';
+import Product2 from './product2.vue';
+import Product3 from './product3.vue';
+import Product4 from './product4.vue';
+
+const activeIndex = ref(0);
+
+// 定义菜单列表数据
+const menuList = [
+  { name: '可信开源态势感知平台' },
+  { name: '金银湖安全大模型' },
+  { name: '软件供应链检测平台' },
+  { name: '智能终端安全监测平台' }
+];
+
+const changeTab = (index) => {
+  activeIndex.value = index;
+};
+</script>
+
+<style lang="scss" scoped>
+.secondEdition .theTitle {
+  height: 53px;
+  line-height: 53px;
+  font-size: 38px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-align: center;
+  margin: 42px 0 30px !important
+}
+
+.secondEdition .ant-affix {
+  background-color: #fff;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
+}
+
+.secondEdition .ant-anchor-wrapper {
+  width: 1200px;
+  margin: 0 auto;
+  padding-left: 0
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style: none;
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .5);
+  bottom: 0;
+  top: auto;
+  display: none;
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li {
+  padding: 18px 19px;
+  margin: 0 10px;
+  position: relative;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li a {
+  color: #333 !important;
+  display: block;
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 3px;
+  background-color: #466aff;
+  content: "";
+  width: 100%;
+  transition: all 0.3s;
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active a {
+  color: #466aff !important;
+  font-weight: 600;
+}
+
+.product-content {
+  //width: 1200px;
+  //margin: 40px auto;
+  //min-height: 300px;
+}
+</style>
diff --git a/src/views/Jyh/Home/component/ComProject/product1.vue b/src/views/Jyh/Home/component/ComProject/product1.vue
new file mode 100644
index 0000000..88be890
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComProject/product1.vue
@@ -0,0 +1,781 @@
+<template>
+  <div class="secondEditionContent">
+
+    <div class="hadoop" id="hadoop">
+      <div class="hadoopCon">
+        <div class="descBox">
+          <p class="desc1">可信开源态势感知</p>
+
+          <p class="desc2">
+            构建**国家级开源安全数据底座**，聚合全球漏洞情报。基于安全数据湖仓，实现全景风险实时感知。
+          </p>
+
+          <p class="desc3">
+            提供高精度、高覆盖的开源组件、版本、许可证和漏洞数据 ，确保风险溯源的准确性与权威性。
+          </p>
+        </div>
+
+        <div class="hadoopCode activeCode"  :ref="(el) => setTargetRef(el, 'hadoop')">
+          <img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="态势感知运行结果" class="activeImg">
+        </div>
+      </div>
+
+      <p class="hadoopdesc">全网态势，一屏尽览！</p>
+    </div>
+
+    <div class="oneStop"  :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
+      <div class="oneStopContent">
+        <div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
+                                     class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
+                                                             width="213px" style="margin-left: -12px;"><img
+          src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
+          src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
+        <div class="osRightMain">
+          <p class="osRightTitle">🛡️ 全景大屏</p>
+
+          <p>基于**3D地球与热力图**技术，可视化展示全球开源风险分布 。</p>
+
+          <p>大屏实时同步<span>漏洞爆发态势、热点地区分布、在野攻击趋势、组件风险排名</span>等关键信息；</p>
+          <p>同时提供<span>定制化资产视图、风险聚合分析</span>等功能，为您搭建一站式的宏观风险监控环境；</p>
+          <p><span>让您的风险监测更直观、威胁感知更具国家级视野！</span></p>
+        </div>
+      </div>
+      <img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
+    </div>
+
+    <div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
+      <div class="highDoTitle"><span>⚡ 极速预警</span></div>
+
+      <div class="highDoSubtitle">实现漏洞披露感知响应时间 **≤ 5分钟** 。通过自动化流程，将情报快速**打通至开发运维环节**；支持<span>自定义告警策略、代码静态扫描即时触发、CI/CD 自动阻断</span>等功能，同时支持接入企业现有安全系统。
+      </div>
+      <div class="highDoContent">
+        <div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
+          <div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
+            src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
+          <img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
+            src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
+        <p class="highDoBottondesc">将安全能力左移，让您的威胁响应速度远超攻击者！</p>
+      </div>
+    </div>
+
+    <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
+      <span class="title">🌐 多维图谱：深度关联分析</span>
+      <div class="maContent">
+      </div>
+
+      <p class="desc">
+        构建**组件-版本-漏洞-厂商四层知识图谱** 。提供**供应链穿透分析、风险影响路径回溯**，精确识别隐藏在多级依赖中的间接风险。
+      </p>
+    </div>
+
+    <div class="multidimensional" style="opacity: 1">
+      <div style="height: 168px;"></div>
+      <div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
+        <div class="multidimensinalhalf">
+          <div>
+            <p class="halfTitle">智能安全治理决策</p>
+            <p class="halfsubTitle"><span>基于全面的风险感知数据，提供智能化的合规和治理决策建议。</span>通过用户画像和风险评分
+
+              [Image of a cybersecurity risk assessment scorecard]
+              , 协助企业建立完善的开源安全管理体系；</p>
+          </div>
+          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
+                                                             width="820px"></div>
+        </div>
+        <div class="multidimensinalPart">
+          <div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
+                                                              width="614px"></div>
+          <div>
+            <p><span>提供</span>风险趋势分析、漏洞修复优先级排序、**SBOM (软件物料清单)**一键生成<span>等功能。</span></p>
+            <p>让您的安全治理工作有据可依、高效合规！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
+const targetElements = ref({});
+// 2. 存储交叉观察者实例
+let observer = null;
+
+// 3. 规范的 ref 收集函数：处理元素挂载/卸载
+const setTargetRef = (el, key) => {
+  if (el) {
+    // 元素挂载：存入对象
+    targetElements.value[key] = el;
+  } else {
+    // 元素卸载：从对象中移除
+    delete targetElements.value[key];
+  }
+};
+
+// 4. 初始化交叉观察者（批量监听）
+const initObserver = () => {
+  // 获取所有元素的数组
+  const elements = Object.values(targetElements.value);
+  if (elements.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+  };
+
+  const observerCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('activeCode');
+      } else {
+        // 可选：离开视口时移除类
+        // entry.target.classList.remove('activeCode');
+      }
+    });
+  };
+
+  observer = new IntersectionObserver(observerCallback, observerOptions);
+  // 批量监听所有元素
+  elements.forEach((el) => {
+    observer.observe(el);
+  });
+};
+
+// 5. 组件挂载时：等待DOM渲染完成后初始化
+onMounted(async () => {
+  // 清空原有元素（防止重渲染重复）
+  targetElements.value = {};
+  await nextTick(); // 等待DOM渲染完成
+  initObserver();
+});
+
+// 6. 组件卸载时：批量销毁观察者
+onUnmounted(() => {
+  if (observer) {
+    // 停止监听所有元素
+    Object.values(targetElements.value).forEach((el) => {
+      observer.unobserve(el);
+    });
+    observer.disconnect();
+    observer = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.secondEdition .theTitle {
+  height: 53px;
+  line-height: 53px;
+  font-size: 38px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-align: center;
+  margin: 42px 0 30px !important
+}
+
+.secondEdition .ant-affix {
+  background-color: #fff;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
+}
+
+.secondEdition .ant-anchor-wrapper {
+  width: 1200px;
+  margin: 0 auto;
+  padding-left: 0
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .5);
+  bottom: 0;
+  top: auto
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li {
+  padding: 18px 19px;
+  margin: 0 10px;
+  position: relative;
+  font-size: 18px
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li a {
+  color: #333 !important
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: #466aff;
+  content: "";
+  width: 100%
+}
+
+.secondEdition .secondEditionContent {
+  padding: 65px 0;
+  width: 1200px;
+  margin: 0 auto
+}
+
+.secondEdition .secondEditionContent .hadoop {
+  background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
+  background-size: cover;
+  min-height: 753px;
+  padding: 50px 56px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopCon {
+  display: flex;
+  width: 100%
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox {
+  max-width: 352px;
+  word-break: break-all
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
+  height: 50px;
+  line-height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  background: -webkit-linear-gradient(90deg, #50edff, #557cff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
+  height: 72px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #69daf5;
+  line-height: 36px;
+  margin-top: 97px
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
+  height: 108px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+  line-height: 36px;
+  margin-top: 70px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopdesc {
+  color: #fff;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 40px
+}
+
+.secondEdition .secondEditionContent .oneStop {
+  text-align: center;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent {
+  display: flex
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 182px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
+  margin-left: 22px;
+  text-align: left
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-top: 28px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
+  font-size: 20px;
+  color: #637497;
+  line-height: 36px;
+  margin-top: 50px;
+  margin-bottom: 0 !important
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
+  transition: 3s;
+  opacity: 0
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  position: absolute;
+  right: -200px;
+  top: 102px;
+  transition: 2s;
+  opacity: 0;
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  top: 317px;
+  right: 10px;
+  transition: 2.5s;
+  z-index: 2
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
+  right: 10px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  top: 217px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops {
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
+  bottom: 62px
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
+  bottom: 215px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle {
+  position: relative;
+  padding: 2px;
+  width: 384px;
+  height: 90px;
+  margin: 7px auto 0;
+  border-radius: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle span {
+  position: absolute;
+  z-index: 3;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  border-radius: 10px;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
+  position: absolute;
+  z-index: 2;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  background-color: #fff;
+  border-radius: 10px;
+  content: "";
+  top: 2px;
+  left: 2px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
+  color: #637497;
+  font-size: 20px;
+  line-height: 36px;
+  max-width: 950px;
+  margin: 30px auto 28px;
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent {
+  background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
+  background-size: cover;
+  height: 920px;
+  padding: 20px 0 114px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent img {
+  opacity: 0;
+  transition: 2.4s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
+  position: absolute;
+  bottom: 0;
+  transition: 1s;
+  transition-delay: 1s;
+  left: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  transition: 2s;
+  transition-delay: 1s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
+  font-size: 20px;
+  font-weight: 500;
+  color: #000;
+  line-height: 39px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse {
+  background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
+  background-size: cover;
+  height: 710px;
+  padding-left: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
+  transform: rotateY(1turn)
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .title {
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  margin-bottom: 26px;
+  background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 50px;
+  margin-top: 20px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .maContent {
+  height: 400px;
+  width: 723px;
+  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 26px 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .desc {
+  text-align: center;
+  max-width: 869px;
+  line-height: 30px;
+  color: #69daf5;
+  font-weight: 400;
+  font-size: 18px
+}
+
+.secondEdition .secondEditionContent .multidimensional {
+  background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
+  background-size: cover;
+  height: 1139px;
+  padding: 100px 0 0;
+  display: flex;
+  flex-direction: column;
+  opacity: .3;
+  transition: 1s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 447px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
+  position: absolute;
+  left: 0;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 70px !important
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 36px;
+  color: #000;
+  max-width: 350px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
+  left: 0;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart {
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+  position: relative;
+  height: 396px;
+  transition: 4s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart img {
+  position: absolute;
+  left: 620px;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p {
+  max-width: 422px;
+  text-align: left;
+  font-weight: 500;
+  line-height: 32px;
+  color: #000;
+  font-size: 20px
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
+  margin-bottom: 55px !important
+}
+
+.ant-anchor-wrapper {
+  margin-left: -4px;
+  padding-left: 4px;
+  overflow: auto;
+  background-color: #fff;
+}
+
+.ant-anchor-wrapper {
+  padding-left: 2px !important
+}
+
+.ant-anchor-wrapper .ant-anchor-ink:before {
+  background-color: #fff
+}
+
+.ant-anchor {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  padding-left: 2px;
+}
+
+.ant-anchor-ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.ant-anchor-ink::before {
+  position: relative;
+  display: block;
+  width: 2px;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #e8e8e8;
+  content: ' ';
+}
+
+.ant-anchor-ink-ball {
+  position: absolute;
+  left: 50%;
+  display: none;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #466aff;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  transition: top 0.3s ease-in-out;
+}
+
+html li {
+  list-style: none;
+}
+
+a {
+  color: #466aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+
+div, img, tr, td, table {
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+div {
+  display: block;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+img, video {
+  max-width: none;
+  height: revert-layer;
+  display: inline;
+}
+
+.hadoopCode {
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
+  border-radius: 10px;
+  padding: 18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+}
+
+.hadoopCode>img {
+  position: absolute;
+  right: -50px;
+  bottom: -50px;
+  width: 805px;
+  border-radius: 4px;
+  opacity: 0;
+  z-index: 1;
+}
+
+.activeCode>img.activeImg {
+  right: 0;
+  bottom: -20px;
+  opacity: 1;
+  width: 705px;
+  transition: 1s;
+  transition-delay: 3s;
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1;
+}
+
+</style>
diff --git a/src/views/Jyh/Home/component/ComProject/product2.vue b/src/views/Jyh/Home/component/ComProject/product2.vue
new file mode 100644
index 0000000..c380bbb
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComProject/product2.vue
@@ -0,0 +1,781 @@
+<template>
+  <div class="secondEditionContent">
+
+    <div class="hadoop" id="hadoop">
+      <div class="hadoopCon">
+        <div class="descBox">
+          <p class="desc1">金银湖安全大模型</p>
+
+          <p class="desc2">
+            基于**亿级代码库和安全知识图谱**训练而成，具备深度代码理解和安全分析能力。
+          </p>
+
+          <p class="desc3">
+            深度融合**自然语言处理 (NLP)** 和**代码分析技术** ，提供多模态输入支持，是您代码安全领域的可靠 AI 专家。
+          </p>
+        </div>
+
+        <div class="hadoopCode activeCode"  :ref="(el) => setTargetRef(el, 'hadoop')">
+          <img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="金银湖安全大模型架构示意图" class="activeImg">
+        </div>
+      </div>
+
+      <p class="hadoopdesc">懂代码，更懂安全的 AI 专家！</p>
+    </div>
+
+    <div class="oneStop"  :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
+      <div class="oneStopContent">
+        <div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
+                                     class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
+                                                             width="213px" style="margin-left: -12px;"><img
+          src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
+          src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
+        <div class="osRightMain">
+          <p class="osRightTitle">🤖 智能修复</p>
+
+          <p>多智能体协同，不仅发现漏洞，更**自动生成修复补丁**  。</p>
+
+          <p>大模型深度理解代码上下文和漏洞语义，<span>自动评估最佳修复方案，并生成可直接合并的修复代码片段</span>；</p>
+          <p>同时支持<span>修复方案比对、漏洞原理深度解析</span>等功能，大幅降低人工修复成本；</p>
+          <p><span>让您的漏洞闭环管理更高效、代码更安全！</span></p>
+        </div>
+      </div>
+      <img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
+  </div>
+
+    <div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
+      <div class="highDoTitle"><span>🧠 精准识别</span></div>
+
+      <div class="highDoSubtitle">基于大模型深度语义理解，漏洞检测**准确率 ≥ 95%**，大幅降低传统工具的误报干扰 。实现**全生命周期持续检测**，从需求、编码到部署环节全覆盖。
+      </div>
+      <div class="highDoContent">
+        <div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
+          <div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
+            src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
+          <img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
+            src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
+        <p class="highDoBottondesc">让安全能力左移，将漏洞消灭在代码编写的最初阶段！</p>
+      </div>
+    </div>
+
+    <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
+      <span class="title">💬 安全问答</span>
+      <div class="maContent">
+      </div>
+
+      <p class="desc">
+        支持**自然语言交互**，快速解答代码安全合规难题 。无论是漏洞原理、合规标准还是最佳实践，大模型都能秒级响应。
+      </p>
+    </div>
+
+    <div class="multidimensional" style="opacity: 1">
+      <div style="height: 168px;"></div>
+      <div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
+        <div class="multidimensinalhalf">
+          <div>
+            <p class="halfTitle">智能决策与合规报告</p>
+            <p class="halfsubTitle"><span>基于全面的风险感知数据，提供智能化的合规和治理决策建议。</span>大模型自动分析资产风险评分
+
+              [Image of a cybersecurity risk assessment scorecard]
+              和监管要求，协助企业建立完善的安全管理体系；</p>
+          </div>
+          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
+                                                             width="820px"></div>
+        </div>
+        <div class="multidimensinalPart">
+          <div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
+                                                              width="614px"></div>
+          <div>
+            <p><span>提供</span>风险趋势预测、漏洞修复优先级排序、**SBOM (软件物料清单)**一键生成<span>等功能。</span></p>
+            <p>让您的安全治理工作有据可依、高效合规！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
+const targetElements = ref({});
+// 2. 存储交叉观察者实例
+let observer = null;
+
+// 3. 规范的 ref 收集函数：处理元素挂载/卸载
+const setTargetRef = (el, key) => {
+  if (el) {
+    // 元素挂载：存入对象
+    targetElements.value[key] = el;
+  } else {
+    // 元素卸载：从对象中移除
+    delete targetElements.value[key];
+  }
+};
+
+// 4. 初始化交叉观察者（批量监听）
+const initObserver = () => {
+  // 获取所有元素的数组
+  const elements = Object.values(targetElements.value);
+  if (elements.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+  };
+
+  const observerCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('activeCode');
+      } else {
+        // 可选：离开视口时移除类
+        // entry.target.classList.remove('activeCode');
+      }
+    });
+  };
+
+  observer = new IntersectionObserver(observerCallback, observerOptions);
+  // 批量监听所有元素
+  elements.forEach((el) => {
+    observer.observe(el);
+  });
+};
+
+// 5. 组件挂载时：等待DOM渲染完成后初始化
+onMounted(async () => {
+  // 清空原有元素（防止重渲染重复）
+  targetElements.value = {};
+  await nextTick(); // 等待DOM渲染完成
+  initObserver();
+});
+
+// 6. 组件卸载时：批量销毁观察者
+onUnmounted(() => {
+  if (observer) {
+    // 停止监听所有元素
+    Object.values(targetElements.value).forEach((el) => {
+      observer.unobserve(el);
+    });
+    observer.disconnect();
+    observer = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.secondEdition .theTitle {
+  height: 53px;
+  line-height: 53px;
+  font-size: 38px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-align: center;
+  margin: 42px 0 30px !important
+}
+
+.secondEdition .ant-affix {
+  background-color: #fff;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
+}
+
+.secondEdition .ant-anchor-wrapper {
+  width: 1200px;
+  margin: 0 auto;
+  padding-left: 0
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .5);
+  bottom: 0;
+  top: auto
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li {
+  padding: 18px 19px;
+  margin: 0 10px;
+  position: relative;
+  font-size: 18px
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li a {
+  color: #333 !important
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: #466aff;
+  content: "";
+  width: 100%
+}
+
+.secondEdition .secondEditionContent {
+  padding: 65px 0;
+  width: 1200px;
+  margin: 0 auto
+}
+
+.secondEdition .secondEditionContent .hadoop {
+  background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
+  background-size: cover;
+  min-height: 753px;
+  padding: 50px 56px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopCon {
+  display: flex;
+  width: 100%
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox {
+  max-width: 352px;
+  word-break: break-all
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
+  height: 50px;
+  line-height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  background: -webkit-linear-gradient(90deg, #50edff, #557cff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
+  height: 72px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #69daf5;
+  line-height: 36px;
+  margin-top: 97px
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
+  height: 108px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+  line-height: 36px;
+  margin-top: 70px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopdesc {
+  color: #fff;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 40px
+}
+
+.secondEdition .secondEditionContent .oneStop {
+  text-align: center;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent {
+  display: flex
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 182px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
+  margin-left: 22px;
+  text-align: left
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-top: 28px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
+  font-size: 20px;
+  color: #637497;
+  line-height: 36px;
+  margin-top: 50px;
+  margin-bottom: 0 !important
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
+  transition: 3s;
+  opacity: 0
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  position: absolute;
+  right: -200px;
+  top: 102px;
+  transition: 2s;
+  opacity: 0;
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  top: 317px;
+  right: 10px;
+  transition: 2.5s;
+  z-index: 2
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
+  right: 10px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  top: 217px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops {
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
+  bottom: 62px
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
+  bottom: 215px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle {
+  position: relative;
+  padding: 2px;
+  width: 384px;
+  height: 90px;
+  margin: 7px auto 0;
+  border-radius: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle span {
+  position: absolute;
+  z-index: 3;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  border-radius: 10px;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
+  position: absolute;
+  z-index: 2;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  background-color: #fff;
+  border-radius: 10px;
+  content: "";
+  top: 2px;
+  left: 2px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
+  color: #637497;
+  font-size: 20px;
+  line-height: 36px;
+  max-width: 950px;
+  margin: 30px auto 28px;
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent {
+  background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
+  background-size: cover;
+  height: 920px;
+  padding: 20px 0 114px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent img {
+  opacity: 0;
+  transition: 2.4s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
+  position: absolute;
+  bottom: 0;
+  transition: 1s;
+  transition-delay: 1s;
+  left: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  transition: 2s;
+  transition-delay: 1s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
+  font-size: 20px;
+  font-weight: 500;
+  color: #000;
+  line-height: 39px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse {
+  background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
+  background-size: cover;
+  height: 710px;
+  padding-left: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
+  transform: rotateY(1turn)
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .title {
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  margin-bottom: 26px;
+  background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 50px;
+  margin-top: 20px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .maContent {
+  height: 400px;
+  width: 723px;
+  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 26px 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .desc {
+  text-align: center;
+  max-width: 869px;
+  line-height: 30px;
+  color: #69daf5;
+  font-weight: 400;
+  font-size: 18px
+}
+
+.secondEdition .secondEditionContent .multidimensional {
+  background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
+  background-size: cover;
+  height: 1139px;
+  padding: 100px 0 0;
+  display: flex;
+  flex-direction: column;
+  opacity: .3;
+  transition: 1s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 447px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
+  position: absolute;
+  left: 0;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 70px !important
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 36px;
+  color: #000;
+  max-width: 350px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
+  left: 0;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart {
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+  position: relative;
+  height: 396px;
+  transition: 4s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart img {
+  position: absolute;
+  left: 620px;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p {
+  max-width: 422px;
+  text-align: left;
+  font-weight: 500;
+  line-height: 32px;
+  color: #000;
+  font-size: 20px
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
+  margin-bottom: 55px !important
+}
+
+.ant-anchor-wrapper {
+  margin-left: -4px;
+  padding-left: 4px;
+  overflow: auto;
+  background-color: #fff;
+}
+
+.ant-anchor-wrapper {
+  padding-left: 2px !important
+}
+
+.ant-anchor-wrapper .ant-anchor-ink:before {
+  background-color: #fff
+}
+
+.ant-anchor {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  padding-left: 2px;
+}
+
+.ant-anchor-ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.ant-anchor-ink::before {
+  position: relative;
+  display: block;
+  width: 2px;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #e8e8e8;
+  content: ' ';
+}
+
+.ant-anchor-ink-ball {
+  position: absolute;
+  left: 50%;
+  display: none;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #466aff;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  transition: top 0.3s ease-in-out;
+}
+
+html li {
+  list-style: none;
+}
+
+a {
+  color: #466aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+
+div, img, tr, td, table {
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+div {
+  display: block;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+img, video {
+  max-width: none;
+  height: revert-layer;
+  display: inline;
+}
+
+.hadoopCode {
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
+  border-radius: 10px;
+  padding: 18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+}
+
+.hadoopCode>img {
+  position: absolute;
+  right: -50px;
+  bottom: -50px;
+  width: 805px;
+  border-radius: 4px;
+  opacity: 0;
+  z-index: 1;
+}
+
+.activeCode>img.activeImg {
+  right: 0;
+  bottom: -20px;
+  opacity: 1;
+  width: 705px;
+  transition: 1s;
+  transition-delay: 3s;
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1;
+}
+
+</style>
diff --git a/src/views/Jyh/Home/component/ComProject/product3.vue b/src/views/Jyh/Home/component/ComProject/product3.vue
new file mode 100644
index 0000000..3bb9663
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComProject/product3.vue
@@ -0,0 +1,779 @@
+<template>
+  <div class="secondEditionContent">
+
+    <div class="hadoop" id="hadoop">
+      <div class="hadoopCon">
+        <div class="descBox">
+          <p class="desc1">软件供应链检测平台</p>
+
+          <p class="desc2">
+            提供**全方位的软件组成分析（SCA）**和**供应链风险深度溯源**能力。
+          </p>
+
+          <p class="desc3">
+            基于**权威的开源安全数据湖仓** ，精准识别项目中所有直接和间接的依赖组件，构建完整的软件资产图谱。
+          </p>
+        </div>
+
+        <div class="hadoopCode activeCode"  :ref="(el) => setTargetRef(el, 'hadoop')">
+          <img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="软件供应链检测平台资产视图" class="activeImg">
+        </div>
+      </div>
+
+      <p class="hadoopdesc">透视黑盒，溯源无忧</p>
+    </div>
+
+    <div class="oneStop"  :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
+      <div class="oneStopContent">
+        <div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
+                                     class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
+                                                             width="213px" style="margin-left: -12px;"><img
+          src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
+          src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
+        <div class="osRightMain">
+          <p class="osRightTitle">🔍 双模引擎：SCA深度分析</p>
+
+          <p>支持**源码**及**二进制文件（Binary）**的深度成分分析（SCA）。</p>
+
+          <p>采用**特征匹配、指纹识别和依赖图谱分析**技术，实现对各类编程语言和封闭组件的**精准穿透**；</p>
+          <p>同时支持<span>C/C++、Java、Python、Go 等主流生态</span>，覆盖**应用、容器、固件**等多种资产形态；</p>
+          <p><span>有效解决商业闭源组件的黑盒溯源难题！</span></p>
+        </div>
+      </div>
+      <img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
+    </div>
+
+    <div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
+      <div class="highDoTitle"><span>📜 合规落地</span></div>
+
+      <div class="highDoSubtitle">
+        一键生成符合国家/行业标准的 **SBOM (软件物料清单)** ，并实时支持**开源许可证合规检测**。
+      </div>
+      <div class="highDoContent">
+        <div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
+          <div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
+            src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
+          <img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
+            src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
+        <p class="highDoBottondesc">实现从风险识别到合规交付的全流程自动化管理！</p>
+      </div>
+    </div>
+
+    <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
+      <span class="title">🚀 高效检测：DevSecOps 融合</span>
+      <div class="maContent">
+      </div>
+
+      <p class="desc">
+        标准场景**检测耗时 ≤ 30分钟** ，确保平台能够快速适配 **DevSecOps 流水线**，实现**不中断开发流程**的持续安全检测。
+      </p>
+    </div>
+
+    <div class="multidimensional" style="opacity: 1">
+      <div style="height: 168px;"></div>
+      <div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
+        <div class="multidimensinalhalf">
+          <div>
+            <p class="halfTitle">风险治理与智能闭环</p>
+            <p class="halfsubTitle"><span>平台提供集中的风险仪表盘，支持多维度资产分类和风险态势感知。</span>自动分析漏洞严重性和资产关键性 ，协助企业制定精准的修复策略；</p>
+          </div>
+          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
+                                                             width="820px"></div>
+        </div>
+        <div class="multidimensinalPart">
+          <div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
+                                                              width="614px"></div>
+          <div>
+            <p><span>提供</span>漏洞影响路径可视化、版本升级推荐、**资产风险趋势预测**<span>等功能。</span></p>
+            <p>让您的软件供应链安全管理高效、可视化、可控！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
+const targetElements = ref({});
+// 2. 存储交叉观察者实例
+let observer = null;
+
+// 3. 规范的 ref 收集函数：处理元素挂载/卸载
+const setTargetRef = (el, key) => {
+  if (el) {
+    // 元素挂载：存入对象
+    targetElements.value[key] = el;
+  } else {
+    // 元素卸载：从对象中移除
+    delete targetElements.value[key];
+  }
+};
+
+// 4. 初始化交叉观察者（批量监听）
+const initObserver = () => {
+  // 获取所有元素的数组
+  const elements = Object.values(targetElements.value);
+  if (elements.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+  };
+
+  const observerCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('activeCode');
+      } else {
+        // 可选：离开视口时移除类
+        // entry.target.classList.remove('activeCode');
+      }
+    });
+  };
+
+  observer = new IntersectionObserver(observerCallback, observerOptions);
+  // 批量监听所有元素
+  elements.forEach((el) => {
+    observer.observe(el);
+  });
+};
+
+// 5. 组件挂载时：等待DOM渲染完成后初始化
+onMounted(async () => {
+  // 清空原有元素（防止重渲染重复）
+  targetElements.value = {};
+  await nextTick(); // 等待DOM渲染完成
+  initObserver();
+});
+
+// 6. 组件卸载时：批量销毁观察者
+onUnmounted(() => {
+  if (observer) {
+    // 停止监听所有元素
+    Object.values(targetElements.value).forEach((el) => {
+      observer.unobserve(el);
+    });
+    observer.disconnect();
+    observer = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.secondEdition .theTitle {
+  height: 53px;
+  line-height: 53px;
+  font-size: 38px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-align: center;
+  margin: 42px 0 30px !important
+}
+
+.secondEdition .ant-affix {
+  background-color: #fff;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
+}
+
+.secondEdition .ant-anchor-wrapper {
+  width: 1200px;
+  margin: 0 auto;
+  padding-left: 0
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .5);
+  bottom: 0;
+  top: auto
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li {
+  padding: 18px 19px;
+  margin: 0 10px;
+  position: relative;
+  font-size: 18px
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li a {
+  color: #333 !important
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: #466aff;
+  content: "";
+  width: 100%
+}
+
+.secondEdition .secondEditionContent {
+  padding: 65px 0;
+  width: 1200px;
+  margin: 0 auto
+}
+
+.secondEdition .secondEditionContent .hadoop {
+  background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
+  background-size: cover;
+  min-height: 753px;
+  padding: 50px 56px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopCon {
+  display: flex;
+  width: 100%
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox {
+  max-width: 352px;
+  word-break: break-all
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
+  height: 50px;
+  line-height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  background: -webkit-linear-gradient(90deg, #50edff, #557cff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
+  height: 72px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #69daf5;
+  line-height: 36px;
+  margin-top: 97px
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
+  height: 108px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+  line-height: 36px;
+  margin-top: 70px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopdesc {
+  color: #fff;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 40px
+}
+
+.secondEdition .secondEditionContent .oneStop {
+  text-align: center;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent {
+  display: flex
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 182px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
+  margin-left: 22px;
+  text-align: left
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-top: 28px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
+  font-size: 20px;
+  color: #637497;
+  line-height: 36px;
+  margin-top: 50px;
+  margin-bottom: 0 !important
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
+  transition: 3s;
+  opacity: 0
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  position: absolute;
+  right: -200px;
+  top: 102px;
+  transition: 2s;
+  opacity: 0;
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  top: 317px;
+  right: 10px;
+  transition: 2.5s;
+  z-index: 2
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
+  right: 10px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  top: 217px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops {
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
+  bottom: 62px
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
+  bottom: 215px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle {
+  position: relative;
+  padding: 2px;
+  width: 384px;
+  height: 90px;
+  margin: 7px auto 0;
+  border-radius: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle span {
+  position: absolute;
+  z-index: 3;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  border-radius: 10px;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
+  position: absolute;
+  z-index: 2;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  background-color: #fff;
+  border-radius: 10px;
+  content: "";
+  top: 2px;
+  left: 2px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
+  color: #637497;
+  font-size: 20px;
+  line-height: 36px;
+  max-width: 950px;
+  margin: 30px auto 28px;
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent {
+  background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
+  background-size: cover;
+  height: 920px;
+  padding: 20px 0 114px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent img {
+  opacity: 0;
+  transition: 2.4s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
+  position: absolute;
+  bottom: 0;
+  transition: 1s;
+  transition-delay: 1s;
+  left: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  transition: 2s;
+  transition-delay: 1s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
+  font-size: 20px;
+  font-weight: 500;
+  color: #000;
+  line-height: 39px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse {
+  background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
+  background-size: cover;
+  height: 710px;
+  padding-left: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
+  transform: rotateY(1turn)
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .title {
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  margin-bottom: 26px;
+  background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 50px;
+  margin-top: 20px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .maContent {
+  height: 400px;
+  width: 723px;
+  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 26px 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .desc {
+  text-align: center;
+  max-width: 869px;
+  line-height: 30px;
+  color: #69daf5;
+  font-weight: 400;
+  font-size: 18px
+}
+
+.secondEdition .secondEditionContent .multidimensional {
+  background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
+  background-size: cover;
+  height: 1139px;
+  padding: 100px 0 0;
+  display: flex;
+  flex-direction: column;
+  opacity: .3;
+  transition: 1s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 447px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
+  position: absolute;
+  left: 0;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 70px !important
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 36px;
+  color: #000;
+  max-width: 350px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
+  left: 0;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart {
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+  position: relative;
+  height: 396px;
+  transition: 4s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart img {
+  position: absolute;
+  left: 620px;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p {
+  max-width: 422px;
+  text-align: left;
+  font-weight: 500;
+  line-height: 32px;
+  color: #000;
+  font-size: 20px
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
+  margin-bottom: 55px !important
+}
+
+.ant-anchor-wrapper {
+  margin-left: -4px;
+  padding-left: 4px;
+  overflow: auto;
+  background-color: #fff;
+}
+
+.ant-anchor-wrapper {
+  padding-left: 2px !important
+}
+
+.ant-anchor-wrapper .ant-anchor-ink:before {
+  background-color: #fff
+}
+
+.ant-anchor {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  padding-left: 2px;
+}
+
+.ant-anchor-ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.ant-anchor-ink::before {
+  position: relative;
+  display: block;
+  width: 2px;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #e8e8e8;
+  content: ' ';
+}
+
+.ant-anchor-ink-ball {
+  position: absolute;
+  left: 50%;
+  display: none;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #466aff;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  transition: top 0.3s ease-in-out;
+}
+
+html li {
+  list-style: none;
+}
+
+a {
+  color: #466aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+
+div, img, tr, td, table {
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+div {
+  display: block;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+img, video {
+  max-width: none;
+  height: revert-layer;
+  display: inline;
+}
+
+.hadoopCode {
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
+  border-radius: 10px;
+  padding: 18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+}
+
+.hadoopCode>img {
+  position: absolute;
+  right: -50px;
+  bottom: -50px;
+  width: 805px;
+  border-radius: 4px;
+  opacity: 0;
+  z-index: 1;
+}
+
+.activeCode>img.activeImg {
+  right: 0;
+  bottom: -20px;
+  opacity: 1;
+  width: 705px;
+  transition: 1s;
+  transition-delay: 3s;
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1;
+}
+
+</style>
diff --git a/src/views/Jyh/Home/component/ComProject/product4.vue b/src/views/Jyh/Home/component/ComProject/product4.vue
new file mode 100644
index 0000000..3cd52ad
--- /dev/null
+++ b/src/views/Jyh/Home/component/ComProject/product4.vue
@@ -0,0 +1,779 @@
+<template>
+  <div class="secondEditionContent">
+
+    <div class="hadoop" id="hadoop">
+      <div class="hadoopCon">
+        <div class="descBox">
+          <p class="desc1">智能终端安全监测平台</p>
+
+          <p class="desc2">
+            面向**车联网、无人机及 IoT 生态**，提供应用逆向分析与运行时安全监测，确保设备在真实环境下的安全运行 。
+          </p>
+
+          <p class="desc3">
+            平台深度整合**终端行为分析、固件逆向、和安全情报**，全面覆盖**从固件到应用层**的潜在威胁，构建智能终端安全壁垒。
+          </p>
+        </div>
+
+        <div class="hadoopCode activeCode"  :ref="(el) => setTargetRef(el, 'hadoop')">
+          <img src="@/assets/v3/Line/codeafter.c3088c74.png" alt="智能终端安全监测平台威胁分析界面" class="activeImg">
+        </div>
+      </div>
+
+      <p class="hadoopdesc">守护终端，运行无界</p>
+    </div>
+
+    <div class="oneStop"  :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
+      <div class="oneStopContent">
+        <div class="osLeftMain"><img src="@/assets/v3/Line/2-2-1.afd0f2f5.png" alt="" width="520px"
+                                     class="osleftPosi"><img src="@/assets/v3/Line/2-2-head.5e69dbb2.png" alt=""
+                                                             width="213px" style="margin-left: -12px;"><img
+          src="@/assets/v3/Line/2-2-2.26bc3301.png" alt="" width="653px" class="osleftPosi1"><img
+          src="@/assets/v3/Line/2-2-3.6d6ce99c.png" alt="" width="367px" class="osleftPosi2"></div>
+        <div class="osRightMain">
+          <p class="osRightTitle">🚗 全场景适配</p>
+
+          <p>覆盖**车联网、智慧城市、工业 IoT** 等 **15+ 行业场景**，提供专业化的检测模型 。</p>
+
+          <p>针对不同芯片架构和操作系统（如 **Linux、QNX、RTOS**），提供定制化的**固件逆向与安全分析引擎**；</p>
+          <p>同时支持<span>车机系统、车载 T-Box、边缘计算设备、智能模组</span>等多种终端设备的深入检测；</p>
+          <p><span>确保您的多品类终端资产安全合规！</span></p>
+        </div>
+      </div>
+      <img src="@/assets/v3/Line/2-2-1.bcb33d47.png" alt="" height="83px" class="imgring">
+    </div>
+
+    <div class="highDevops" :ref="(el) => setTargetRef(el, 'highDevops')" id="highDevops">
+      <div class="highDoTitle"><span>📡 动态防御：运行时安全</span></div>
+
+      <div class="highDoSubtitle">
+        通过 **RASP/Agent** 技术，实时监测 **OTA 升级包**完整性及终端异常行为 。在不影响终端性能的前提下，实现应用层的深度自我保护。
+      </div>
+      <div class="highDoContent">
+        <div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
+          <div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
+            src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
+          <img src="@/assets/v3/Line/2-3-3.52733627.png" alt="" width="427px" class="highImg2"><img
+            src="@/assets/v3/Line/2-3-4.339b2f1c.png" alt="" width="413px" class="highImg1"></div>
+        <p class="highDoBottondesc">实现**终端安全事件的可视化、可追溯、可阻断**！</p>
+      </div>
+    </div>
+
+    <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
+      <span class="title">⏱ 秒级响应：威胁情报联动</span>
+      <div class="maContent">
+      </div>
+
+      <p class="desc">
+        依托全球威胁情报和沙箱分析能力，**异常行为识别预警响应 ≤ 10分钟** 。保障在 0-day 或新型攻击爆发时，快速下发处置策略。
+      </p>
+    </div>
+
+    <div class="multidimensional" style="opacity: 1">
+      <div style="height: 168px;"></div>
+      <div class="" :ref="(el) => setTargetRef(el, 'multidimensional')" id="multidimensional">
+        <div class="multidimensinalhalf">
+          <div>
+            <p class="halfTitle">风险闭环与合规管理</p>
+            <p class="halfsubTitle"><span>平台提供集中的风险仪表盘，支持多维度资产分类和风险态势感知。</span>自动分析漏洞严重性和资产关键性 ，协助企业制定精准的修复策略；</p>
+          </div>
+          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
+                                                             width="820px"></div>
+        </div>
+        <div class="multidimensinalPart">
+          <div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/2-6-2.b262b91e.png" alt=""
+                                                              width="614px"></div>
+          <div>
+            <p><span>提供</span>漏洞影响路径可视化、安全基线合规报告、**远程安全策略下发**<span>等功能。</span></p>
+            <p>让您的智能终端产品满足**国家及行业安全标准**要求！</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+// 1. 定义响应式对象存储所有目标元素（键：标识，值：DOM元素）
+const targetElements = ref({});
+// 2. 存储交叉观察者实例
+let observer = null;
+
+// 3. 规范的 ref 收集函数：处理元素挂载/卸载
+const setTargetRef = (el, key) => {
+  if (el) {
+    // 元素挂载：存入对象
+    targetElements.value[key] = el;
+  } else {
+    // 元素卸载：从对象中移除
+    delete targetElements.value[key];
+  }
+};
+
+// 4. 初始化交叉观察者（批量监听）
+const initObserver = () => {
+  // 获取所有元素的数组
+  const elements = Object.values(targetElements.value);
+  if (elements.length === 0) return;
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1,
+  };
+
+  const observerCallback = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('activeCode');
+      } else {
+        // 可选：离开视口时移除类
+        // entry.target.classList.remove('activeCode');
+      }
+    });
+  };
+
+  observer = new IntersectionObserver(observerCallback, observerOptions);
+  // 批量监听所有元素
+  elements.forEach((el) => {
+    observer.observe(el);
+  });
+};
+
+// 5. 组件挂载时：等待DOM渲染完成后初始化
+onMounted(async () => {
+  // 清空原有元素（防止重渲染重复）
+  targetElements.value = {};
+  await nextTick(); // 等待DOM渲染完成
+  initObserver();
+});
+
+// 6. 组件卸载时：批量销毁观察者
+onUnmounted(() => {
+  if (observer) {
+    // 停止监听所有元素
+    Object.values(targetElements.value).forEach((el) => {
+      observer.unobserve(el);
+    });
+    observer.disconnect();
+    observer = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.secondEdition .theTitle {
+  height: 53px;
+  line-height: 53px;
+  font-size: 38px;
+  font-weight: 500;
+  color: #1e1e1e;
+  text-align: center;
+  margin: 42px 0 30px !important
+}
+
+.secondEdition .ant-affix {
+  background-color: #fff;
+  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .09)
+}
+
+.secondEdition .ant-anchor-wrapper {
+  width: 1200px;
+  margin: 0 auto;
+  padding-left: 0
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor .ant-anchor-ink {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid hsla(0, 0%, 60%, .5);
+  bottom: 0;
+  top: auto
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li {
+  padding: 18px 19px;
+  margin: 0 10px;
+  position: relative;
+  font-size: 18px
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li a {
+  color: #333 !important
+}
+
+.secondEdition .ant-anchor-wrapper .ant-anchor li.active:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  background-color: #466aff;
+  content: "";
+  width: 100%
+}
+
+.secondEdition .secondEditionContent {
+  padding: 65px 0;
+  width: 1200px;
+  margin: 0 auto
+}
+
+.secondEdition .secondEditionContent .hadoop {
+  background: url(@/assets/v3/Line/2-1bg.d22a63b9.png) no-repeat 50%;
+  background-size: cover;
+  min-height: 753px;
+  padding: 50px 56px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopCon {
+  display: flex;
+  width: 100%
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox {
+  max-width: 352px;
+  word-break: break-all
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc1 {
+  height: 50px;
+  line-height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  background: -webkit-linear-gradient(90deg, #50edff, #557cff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc2 {
+  height: 72px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #69daf5;
+  line-height: 36px;
+  margin-top: 97px
+}
+
+.secondEdition .secondEditionContent .hadoop .descBox .desc3 {
+  height: 108px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+  line-height: 36px;
+  margin-top: 70px
+}
+
+.secondEdition .secondEditionContent .hadoop .hadoopdesc {
+  color: #fff;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 500;
+  text-align: center;
+  margin-top: 40px
+}
+
+.secondEdition .secondEditionContent .oneStop {
+  text-align: center;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent {
+  display: flex
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 182px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
+  margin-left: 22px;
+  text-align: left
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-top: 28px
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
+  font-size: 20px;
+  color: #637497;
+  line-height: 36px;
+  margin-top: 50px;
+  margin-bottom: 0 !important
+}
+
+.secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .oneStop .imgring, .secondEdition .secondEditionContent .oneStop .osleftPosi {
+  transition: 3s;
+  opacity: 0
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi1, .secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  position: absolute;
+  right: -200px;
+  top: 102px;
+  transition: 2s;
+  opacity: 0;
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+  top: 317px;
+  right: 10px;
+  transition: 2.5s;
+  z-index: 2
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1, .secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
+  right: 10px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  top: 217px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .imgring {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops {
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
+  bottom: 62px
+}
+
+.secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg2 {
+  bottom: 215px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle {
+  position: relative;
+  padding: 2px;
+  width: 384px;
+  height: 90px;
+  margin: 7px auto 0;
+  border-radius: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle span {
+  position: absolute;
+  z-index: 3;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  border-radius: 10px;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:before {
+  position: absolute;
+  z-index: 2;
+  width: 380px;
+  height: 86px;
+  line-height: 86px;
+  background-color: #fff;
+  border-radius: 10px;
+  content: "";
+  top: 2px;
+  left: 2px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoTitle:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  background: -webkit-linear-gradient(1deg, #d57ca0 12%, #4877f3 57%, #20c3ef 76%);
+  z-index: 1
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle {
+  color: #637497;
+  font-size: 20px;
+  line-height: 36px;
+  max-width: 950px;
+  margin: 30px auto 28px;
+  text-align: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoSubtitle span {
+  color: #000;
+  font-weight: 500
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent {
+  background: url(@/assets/v3/Line/2-3bg.deef1b07.png) no-repeat 50%;
+  background-size: cover;
+  height: 920px;
+  padding: 20px 0 114px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent img {
+  opacity: 0;
+  transition: 2.4s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg1 {
+  position: absolute;
+  bottom: 0;
+  transition: 1s;
+  transition-delay: 1s;
+  left: 10px
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highImg2 {
+  position: absolute;
+  bottom: 0;
+  right: 10px;
+  transition: 2s;
+  transition-delay: 1s
+}
+
+.secondEdition .secondEditionContent .highDevops .highDoContent .highDoBottondesc {
+  font-size: 20px;
+  font-weight: 500;
+  color: #000;
+  line-height: 39px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse {
+  background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
+  background-size: cover;
+  height: 710px;
+  padding-left: 58px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  opacity: .3;
+  transition: 2s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse.activeCode .maContent {
+  transform: rotateY(1turn)
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .title {
+  display: inline-block;
+  font-size: 36px;
+  font-weight: 600;
+  margin-bottom: 26px;
+  background: -webkit-linear-gradient(1deg, #6d66ff 12%, #c148ff 57%, #f59f77 76%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 50px;
+  margin-top: 20px
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .maContent {
+  height: 400px;
+  width: 723px;
+  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 26px 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multipleAnalyse .desc {
+  text-align: center;
+  max-width: 869px;
+  line-height: 30px;
+  color: #69daf5;
+  font-weight: 400;
+  font-size: 18px
+}
+
+.secondEdition .secondEditionContent .multidimensional {
+  background: url(@/assets/v3/Line/2-5bg.9cca3de1.png) no-repeat 50%;
+  background-size: cover;
+  height: 1139px;
+  padding: 100px 0 0;
+  display: flex;
+  flex-direction: column;
+  opacity: .3;
+  transition: 1s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 447px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf img {
+  position: absolute;
+  left: 0;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfTitle {
+  height: 50px;
+  font-size: 36px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 50px;
+  background: -webkit-linear-gradient(112deg, #d57ca0, #4877f3 51%, #20c3ef);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 70px !important
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 36px;
+  color: #000;
+  max-width: 350px
+}
+
+.secondEdition .secondEditionContent .multidimensional .multidimensinalhalf .halfsubTitle span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode {
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
+  left: 0;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart {
+  display: flex;
+  align-items: center;
+  margin-top: 50px;
+  position: relative;
+  height: 396px;
+  transition: 4s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart img {
+  position: absolute;
+  left: 620px;
+  bottom: -20px;
+  opacity: 0;
+  transition: 3s
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p {
+  max-width: 422px;
+  text-align: left;
+  font-weight: 500;
+  line-height: 32px;
+  color: #000;
+  font-size: 20px
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p span {
+  color: #637497;
+  font-weight: 400
+}
+
+.secondEdition .secondEditionContent .multidimensinalPart p:first-child {
+  margin-bottom: 55px !important
+}
+
+.ant-anchor-wrapper {
+  margin-left: -4px;
+  padding-left: 4px;
+  overflow: auto;
+  background-color: #fff;
+}
+
+.ant-anchor-wrapper {
+  padding-left: 2px !important
+}
+
+.ant-anchor-wrapper .ant-anchor-ink:before {
+  background-color: #fff
+}
+
+.ant-anchor {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  padding-left: 2px;
+}
+
+.ant-anchor-ink {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.ant-anchor-ink::before {
+  position: relative;
+  display: block;
+  width: 2px;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #e8e8e8;
+  content: ' ';
+}
+
+.ant-anchor-ink-ball {
+  position: absolute;
+  left: 50%;
+  display: none;
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #466aff;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  transition: top 0.3s ease-in-out;
+}
+
+html li {
+  list-style: none;
+}
+
+a {
+  color: #466aff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+  -webkit-text-decoration-skip: objects;
+}
+
+div, img, tr, td, table {
+  border: 0;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+div {
+  display: block;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+img, video {
+  max-width: none;
+  height: revert-layer;
+  display: inline;
+}
+
+.hadoopCode {
+  margin-left: 32px;
+  box-shadow: 0 0 0 2px hsla(0,0%,100%,.1);
+  border-radius: 10px;
+  padding: 18px 20px;
+  flex: 1;
+  margin-top: 60px;
+  position: relative;
+}
+
+.hadoopCode>img {
+  position: absolute;
+  right: -50px;
+  bottom: -50px;
+  width: 805px;
+  border-radius: 4px;
+  opacity: 0;
+  z-index: 1;
+}
+
+.activeCode>img.activeImg {
+  right: 0;
+  bottom: -20px;
+  opacity: 1;
+  width: 705px;
+  transition: 1s;
+  transition-delay: 3s;
+}
+
+.secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
+  left: 380px;
+  opacity: 1;
+}
+
+</style>
diff --git a/src/views/Jyh/Home/component/ComRank.vue b/src/views/Jyh/Home/component/ComRank.vue
index 347d9b6..769ef84 100644
--- a/src/views/Jyh/Home/component/ComRank.vue
+++ b/src/views/Jyh/Home/component/ComRank.vue
@@ -1,13 +1,34 @@
 <template>
   <div class="com-rank">
-    <div class="rank-item wow xsddhxg animated" style="visibility: visible;"><h5 class="JBFont">
-      <span>Top&nbsp;</span><span class="comStatistic" data-animation-running="false">3</span></h5>
-      <p>国内大型攻防演练<br>前 3 成绩保持者</p></div>
-    <div class="rank-item wow xsddhxg animated" style="visibility: visible;"><h5 class="JBFont"><span
-      class="comStatistic" data-animation-running="false">99.99</span> % </h5>
-      <p>入侵攻击检出率<br>99.9956%<br>攻击拦截性能行业领先</p></div>
-    <div class="rank-item wow xsddhxg animated" style="visibility: visible;"><h5 class="JBFont"><span>"大满贯"</span></h5>
-      <!----><p>3 大国际权威咨询机构<br>大满贯认可</p></div>
+
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <h5 class="JBFont">
+        <span class="comStatistic" data-animation-running="false">95</span>%
+      </h5>
+      <p>漏洞识别**高**准确率<br>确保威胁分析的可靠性</p>
+    </div>
+
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <h5 class="JBFont">
+        <span class="comStatistic" data-animation-running="false">15</span>+
+      </h5>
+      <p>覆盖**车联网、IoT、金融**<br>等 15+ 行业场景</p>
+    </div>
+
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <h5 class="JBFont">
+        <span class="comStatistic" data-animation-running="false">60</span>+
+      </h5>
+      <p>SaaS订阅企业目标<br>助力中小企业实现安全左移</p>
+    </div>
+
+    <div class="rank-item wow xsddhxg animated" style="visibility: visible;">
+      <h5 class="JBFont">
+        ≥<span class="comStatistic" data-animation-running="false">98</span>%
+      </h5>
+      <p>**零**风险场景仿真相似度<br>高度还原真实攻击环境</p>
+    </div>
+
   </div>
 </template>
 
@@ -18,6 +39,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// 样式保持不变，以确保排版一致
 .com-rank {
   background-color: #f5f5f5;
   display: -webkit-box;
@@ -29,12 +51,12 @@ export default {
   -ms-flex-pack: center;
   background: url(@/assets/v3/index-top-bg.D8cqOFJJ.png) no-repeat bottom;
   background-size: cover;
-  justify-content: center
+  justify-content: center; /* 确保内容居中 */
 }
 
 .com-rank .rank-item {
-  padding: 0 63px;
-  width: 460px
+  padding: 0 40px; /* 调整间距以容纳四个指标 */
+  width: 360px; /* 调整宽度以容纳四个指标 */
 }
 
 .com-rank .rank-item h5 {
diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index 6f628dc..7d20ac0 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="pg-home">
     <ComEntry />
-    <ComSystem />
+    <ComProject />
+<!--    <ComSystem />-->
     <ComRank />
     <ComAuthority />
-    <ComSafe />
-    <ComVideo />
+<!--    <ComSafe />-->
+<!--    <ComVideo />-->
     <ComBank />
     <ComNews />
   </div>
 </template>
 
 <script setup lang="ts">
-// 保持原有的逻辑和数据定义
 import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
 import {useRoute, useRouter} from 'vue-router';
 import {useAccount} from '@/utils/hooks/useAccount';
@@ -21,6 +21,7 @@ import {DChart} from 'vue-devui/echarts';
 import {reactive} from 'vue';
 import ComEntry from './component/ComEntry.vue';
 import ComSystem from './component/ComSystem.vue';
+import ComProject from './component/ComProject/index.vue';
 import ComRank from './component/ComRank.vue';
 import ComAuthority from './component/ComAuthority.vue';
 import ComSafe from './component/ComSafe.vue';