Merge branch 'dev' of https://gitee.com/fumk/open-repo_-portal into dev

2025-12-18 17:15:57 +08:00
parent 38f8b376af 0f0cbb9998
commit dda0aecfa7
27 changed files with 941 additions and 192 deletions
--- a/src/views/Jyh/Home/component/ComProject/index.vue
+++ b/src/views/Jyh/Home/component/ComProject/index.vue
@@ -53,10 +53,10 @@ const activeIndex = ref(0);

 // 定义菜单列表数据
 const menuList = [
-  { name: '可信开源态势感知平台(源感)' },
-  { name: '金银湖代码安全大模型(源鉴)' },
-  { name: '供应链安全检测系统(源链)' },
-  { name: '智能终端应用安全监测平台(源端)' }
+  { name: '可信开源态势感知平台（源感）' },
+  { name: '金银湖代码安全大模型（源鉴）' },
+  { name: '供应链安全检测系统（源链）'},
+  { name: '智能终端应用安全监测平台（源端）' }
 ];

 const changeTab = (index) => {
@@ -106,7 +106,7 @@ const changeTab = (index) => {
  padding: 18px 19px;
  margin: 0 10px;
  position: relative;
-  font-size: 18px;
+  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
 }
--- a/src/views/Jyh/Home/component/ComProject/product1.vue
+++ b/src/views/Jyh/Home/component/ComProject/product1.vue
@@ -24,7 +24,7 @@
        </div>

        <div class="hadoopCode activeCode" :ref="(el) => setTargetRef(el, 'hadoop')">
-          <img src="@/assets/v3/Line/taishi.png" alt="态势感知运行结果" class="activeImg">
+          <img src="@/assets/v3/Line/sec2.png" alt="态势感知运行结果" class="activeImg">
        </div>
      </div>

@@ -34,10 +34,7 @@
    <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">
+          <img src="@/assets/v3/Line/sec3.jpeg" alt="" width="700px" class="osleftPosi">
        </div>
        <div class="osRightMain">
          <p class="osRightTitle">技术优势</p>
@@ -64,11 +61,7 @@
        <b>d.实时风险预警与应急响应：</b>智能感知异常事件的人工分析与现场处置，可视化决策支持
      </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><img src="@/assets/v3/Line/sec10.png" alt="" width="1200px">
        </div>
      </div>
    </div>
@@ -96,11 +89,11 @@
              <b>风险感知服务：</b>态势大屏、情报推送、攻击面管理
            </p>
          </div>
-          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/2-6-1.302b729e.png" alt=""
+          <div style="width: 820px; margin-left: 34px;"><img src="@/assets/v3/Line/sec5.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=""
+          <div style="width: 614px; margin-right: 40px;"><img src="@/assets/v3/Line/sec11.png" alt=""
              width="614px"></div>
          <div>
            <p><b>数据定制服务：</b>情报订阅、深度分析、API对接<br><br>
@@ -523,7 +516,7 @@ onUnmounted(() => {
 .secondEdition .secondEditionContent .multipleAnalyse {
  background: url(@/assets/v3/Line/2-4bg.45478d20.png) no-repeat 50%;
  background-size: cover;
-  height: 710px;
+  height: 850px;
  padding-left: 58px;
  display: flex;
  align-items: center;
@@ -555,8 +548,8 @@ onUnmounted(() => {

 .secondEdition .secondEditionContent .multipleAnalyse .maContent {
  height: 400px;
-  width: 723px;
-  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  width: 1000px;
+  background: url(@/assets/v3/Line/sec7.png) no-repeat;
  background-size: 100% 100%;
  margin: 26px 0;
  transition: 3s
--- a/src/views/Jyh/ProductServices/ModBanner.vue
+++ b/src/views/Jyh/ProductServices/ModBanner.vue
@@ -1,41 +1,103 @@
 <template>
  <div class="mod-banner">
-    <div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">全栈式开源安全检测与治理工具链</p></div>
+    <div class="banner-container">
+      <div class="txt-content wow fadeInUp">
+        <h1 class="zh-title">全栈式开源安全检测<br/>与治理工具链</h1>
+        <p class="en-desc">
+          构建国家级开源安全数据底座，聚合全球漏洞情报。基于安全数据湖仓，<br/>
+          实现全景风险实时感知。
+        </p>
+        <a href="javascript:void(0);" class="action-btn">
+          了解研究方向
+        </a>
+      </div>
+    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "ModBanner"
-}
+<script setup>
+// 使用 script setup 语法
 </script>

-<style scoped>
-.pg-evaluate .mod-banner {
-  background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
-  background-size: auto 100%;
-  height: 460px;
-  position: relative
+<style scoped lang="scss">
+.mod-banner {
+  /* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
+  background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
+  background-size: cover;
+  height: 520px; /* 增加高度以匹配大屏视觉 */
+  position: relative;
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+  overflow: hidden;
+
+  /* 增加一个深色遮罩，确保文字更清晰（可选） */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
+    z-index: 1;
+  }
 }

-.pg-evaluate .mod-banner .txt {
-  left: 50%;
-  position: absolute;
-  top: 177px;
-  width: 1292px
+.banner-container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+  position: relative;
+  z-index: 2; /* 位于遮罩层上方 */
 }

-.pg-evaluate .mod-banner .txt .zh {
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 56px;
-  text-align: left
+.txt-content {
+  max-width: 800px;
+  color: #ffffff;
+  text-align: left;
 }

-.xCenter {
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+.zh-title {
+  font-size: 48px; /* 增大字号 */
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.en-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
+.action-btn {
+  display: inline-block;
+  background-color: #C8161D;
+  color: #ffffff;
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #A01218;
+    box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
+    transform: translateY(-2px);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .mod-banner { height: 400px; }
+  .zh-title { font-size: 32px; }
+  .en-desc { font-size: 14px; }
+  .banner-container { padding: 0 20px; }
 }
 </style>
--- a/src/views/Jyh/ProductServices/ModContent.vue
+++ b/src/views/Jyh/ProductServices/ModContent.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="product-section">
+    <div class="container">
+      <div class="product-grid">
+        <div
+          v-for="(item, index) in products"
+          :key="index"
+          class="product-card-wrapper"
+        >
+          <div class="badge-number">{{ index + 1 }}</div>
+
+          <d-card class="custom-product-card">
+            <template #title>
+              <div class="card-header">
+                <h3 class="product-title">{{ item.title }}</h3>
+              </div>
+            </template>
+
+            <template #content>
+              <div class="card-body">
+                <ul class="feature-list">
+                  <li v-for="(feature, fIdx) in item.features" :key="fIdx">
+                    <div class="feature-icon-wrapper">
+                      <span v-if="feature.emoji" class="feature-emoji">{{ feature.emoji }}</span>
+                      <div v-else class="icon-check-circle"></div>
+                    </div>
+                    <div class="feature-text">
+                      <strong>{{ feature.label }}：</strong>
+                      <span>{{ feature.desc }}</span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </template>
+
+            <template #actions>
+              <div class="card-footer">
+                <d-button
+                  variant="solid"
+                  color="danger"
+                  class="more-btn"
+                  @click="goToDetail(index + 1)"
+                >
+                  了解详情 >
+                </d-button>
+              </div>
+            </template>
+          </d-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+// 编程式导航函数
+const goToDetail = (id) => {
+  router.push(`/ProductServices/${id}`);
+};
+
+const products = ref([
+  {
+    title: '可信开源态势感知平台 (源感)',
+    features: [
+      { emoji: '🕹️', label: '数据标签', desc: '基于机器学习与知识图谱技术，智能化为全量开源项目提供精准分类与多维度评分。' },
+      { emoji: '🛡️', label: '风险感知', desc: '基于3D地球与热力图技术，实时可视化展示全球开源漏洞、投毒攻击的爆发点及受影响行业分布。' },
+      { emoji: '📊', label: '数据定制', desc: '提供情报订阅中心、深度分析报告、API数据对接等服务，满足企业个性化威胁情报需求。' }
+    ]
+  },
+  {
+    title: '金银湖安全大模型 (源鉴)',
+    features: [
+      { emoji: '🔍', label: '漏洞检测', desc: '基于AST与CPG图构建，结合静态分析、动态增量分析、AI语义理解，检测准确率提升85%以上。' },
+      { emoji: '🩹', label: '漏洞修复', desc: '基于多智能体协同修复技术，自动生成修复方案并完成验证测试，修复准确率提升75%以上。' },
+      { emoji: '💬', label: '安全知识问答', desc: '基于漏洞知识图谱与RAG检索增强技术，提供高质量、可解释的漏洞分析，问答准确率达92%以上。' },
+      { emoji: '🛠️', label: '安全工具调用', desc: '基于Function Calling技术，智能调用第三方安全工具，实现漏洞扫描、代码审计等自动化任务编排。' }
+    ]
+  },
+  {
+    title: '软件供应链检测平台 (源链)',
+    features: [
+      { emoji: '⚙️', label: '平台管理与数据服务', desc: '提供用户友好的Web界面和API，确保数据准确性与时效性。' },
+      { emoji: '📦', label: '包管理器成分分析', desc: '针对常见包管理器（如npm、PyPI、Maven）的依赖分析引擎，自动识别组件及其版本。' },
+      { emoji: '💻', label: 'C/C++/项目成分分析', desc: '专门处理C/C++项目的成分分析，识别第三方库和潜在风险。' },
+      { emoji: '📑', label: '二进制文件成分分析', desc: '针对二进制文件的分析引擎，通过反编译和特征匹配识别成分和漏洞。' },
+      { emoji: '🛡️', label: '供应测链安全检测', desc: '精准漏洞检测、恶意代码防护、合规性保障。' },
+      { emoji: '⚖️', label: '合规性检测', desc: '分析软件组件的许可证信息，检查兼容性和合规性，避免法律冲突。' }
+    ]
+  },
+  {
+    title: '智能终端安全监测平台 (源端)',
+    features: [
+      { emoji: '🔍', label: '极速扫描服务', desc: '百万级样本秒级初筛能力，支持海量应用快速筛查，检测准确率高达99%。' },
+      { emoji: '🔬', label: '深度分析服务', desc: '精准定位恶意逻辑核心，可视化展示攻击路径，分析准确率达88%以上。' },
+      { emoji: '🛡️', label: '持续免疫服务', desc: '自适应进化检测模型，秒级响应恶意变种，支持跨平台识别演进。' },
+      { emoji: '🌐', label: '威胁情报服务', desc: 'Zero-day预警能力，已挖掘498个普通及31个高隐蔽性Zero-day恶意软件。' }
+    ]
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.product-section {
+  background-color: #f8faff;
+  padding: 80px 0;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px;
+
+  @media (max-width: 992px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.product-card-wrapper {
+  position: relative;
+  transition: transform 0.3s ease;
+  &:hover { transform: translateY(-5px); }
+}
+
+.badge-number {
+  position: absolute;
+  top: 0; left: 0;
+  width: 44px; height: 44px;
+  background-color: #c8161d;
+  color: white;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 20px; font-weight: bold;
+  border-bottom-right-radius: 20px;
+  z-index: 10;
+}
+
+.custom-product-card {
+  height: 100%;
+  min-height: 520px;
+  border: none !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 8px !important;
+  overflow: visible !important;
+  background: white;
+  padding: 20px;
+}
+
+.product-title {
+  font-size: 18px;
+  color: #333;
+  font-weight: 600;
+  margin: 15px 0 25px 25px;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0; margin: 0;
+  li {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 18px;
+    line-height: 1.6;
+  }
+}
+
+.feature-icon-wrapper {
+  margin-right: 12px;
+  margin-top: 2px;
+  min-width: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.feature-emoji {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.feature-text {
+  font-size: 14px;
+  color: #666;
+  strong { color: #444; }
+}
+
+.card-footer {
+  position: absolute;
+  bottom: 25px;
+  right: 25px;
+}
+
+.more-btn {
+  background-color: #c8161d !important;
+  border-color: #c8161d !important;
+  border-radius: 4px !important;
+  padding: 0 20px !important;
+  height: 36px !important;
+  font-weight: bold !important;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #a01218 !important;
+  }
+}
+</style>
--- a/src/views/Jyh/ProductServices/ProductServices1/ModBanner.vue
+++ b/src/views/Jyh/ProductServices/ProductServices1/ModBanner.vue
@@ -1,41 +1,102 @@
 <template>
  <div class="mod-banner">
-    <div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">全网态势，一屏尽览</p></div>
+    <div class="banner-container">
+      <div class="txt-content wow fadejinzhiInUp">
+        <h1 class="zh-title">可信开源态势感知平台 (源感)</h1>
+        <p class="en-desc">
+          全网态势，一屏尽览
+        </p>
+        <a href="javascript:void(0);" class="action-btn">
+          了解研究方向
+        </a>
+      </div>
+    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "ModBanner"
-}
+<script setup>
+// 使用 script setup 语法
 </script>

-<style scoped>
-.pg-evaluate .mod-banner {
-  background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
-  background-size: auto 100%;
-  height: 460px;
-  position: relative
+<style scoped lang="scss">
+.mod-banner {
+  /* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
+  background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
+  background-size: cover;
+  height: 520px; /* 增加高度以匹配大屏视觉 */
+  position: relative;
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+  overflow: hidden;
+
+  /* 增加一个深色遮罩，确保文字更清晰（可选） */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
+    z-index: 1;
+  }
 }

-.pg-evaluate .mod-banner .txt {
-  left: 50%;
-  position: absolute;
-  top: 177px;
-  width: 1292px
+.banner-container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+  position: relative;
+  z-index: 2; /* 位于遮罩层上方 */
 }

-.pg-evaluate .mod-banner .txt .zh {
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 56px;
-  text-align: left
+.txt-content {
+  max-width: 800px;
+  color: #ffffff;
+  text-align: left;
 }

-.xCenter {
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+.zh-title {
+  font-size: 48px; /* 增大字号 */
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.en-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
+.action-btn {
+  display: inline-block;
+  background-color: #C8161D;
+  color: #ffffff;
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #A01218;
+    box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
+    transform: translateY(-2px);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .mod-banner { height: 400px; }
+  .zh-title { font-size: 32px; }
+  .en-desc { font-size: 14px; }
+  .banner-container { padding: 0 20px; }
 }
 </style>
--- a/src/views/Jyh/ProductServices/ProductServices1/index.vue
+++ b/src/views/Jyh/ProductServices/ProductServices1/index.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="pg-evaluate">
-    <ModBanner />
-    <ModTabs :defaultTab="activeTab" />
-    <ModTotal />
+
+  <div class="secondEdition">
+    <div class="product-content pg-evaluate">
+      <ModBanner />
+      <div  class="component-box">
+        <Product1 />
+      </div>
+      <ModTotal />
+    </div>
  </div>
 </template>

@@ -11,6 +16,10 @@ import { ref, onMounted } from 'vue';
 import ModBanner from './ModBanner.vue';
 import ModTabs from './ModTabs.vue';
 import ModTotal from './ModTotal.vue';
+import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
+import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
+import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
+import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'

 const activeTab = ref<string | number>('');

@@ -34,7 +43,7 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
-.pg-evaluate {
+.product-content {
  background-color: #fafafa;
  color: #333;
 }
--- a/src/views/Jyh/ProductServices/ProductServices1/indexOld.vue
+++ b/src/views/Jyh/ProductServices/ProductServices1/indexOld.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="pg-evaluate">
+    <ModBanner />
+    <ModTabs :defaultTab="activeTab" />
+    <ModTotal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ModBanner from './ModBanner.vue';
+import ModTabs from './ModTabs.vue';
+import ModTotal from './ModTotal.vue';
+
+const activeTab = ref<string | number>('');
+
+// 解析URL参数的方法
+const getUrlParam = (paramName: string): string | null => {
+  // 获取当前URL的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  // 返回指定参数的值
+  return searchParams.get(paramName);
+};
+
+onMounted(() => {
+  // 获取url中tab参数的值
+  const tabParam = getUrlParam('tab');
+  if (tabParam) {
+    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
+  } else {
+    activeTab.value = 0;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pg-evaluate {
+  background-color: #fafafa;
+  color: #333;
+}
+</style>
--- a/src/views/Jyh/ProductServices/ProductServices2/ModBanner.vue
+++ b/src/views/Jyh/ProductServices/ProductServices2/ModBanner.vue
@@ -1,41 +1,102 @@
 <template>
  <div class="mod-banner">
-    <div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">懂代码，更懂安全的 AI 专家</p></div>
+    <div class="banner-container">
+      <div class="txt-content wow fadejinzhiInUp">
+        <h1 class="zh-title">金银湖安全大模型 (源鉴)</h1>
+        <p class="en-desc">
+          懂代码，更懂安全的 AI 专家
+        </p>
+        <a href="javascript:void(0);" class="action-btn">
+          了解研究方向
+        </a>
+      </div>
+    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "ModBanner"
-}
+<script setup>
+// 使用 script setup 语法
 </script>

-<style scoped>
-.pg-evaluate .mod-banner {
-  background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
-  background-size: auto 100%;
-  height: 460px;
-  position: relative
+<style scoped lang="scss">
+.mod-banner {
+  /* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
+  background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
+  background-size: cover;
+  height: 520px; /* 增加高度以匹配大屏视觉 */
+  position: relative;
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+  overflow: hidden;
+
+  /* 增加一个深色遮罩，确保文字更清晰（可选） */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
+    z-index: 1;
+  }
 }

-.pg-evaluate .mod-banner .txt {
-  left: 50%;
-  position: absolute;
-  top: 177px;
-  width: 1292px
+.banner-container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+  position: relative;
+  z-index: 2; /* 位于遮罩层上方 */
 }

-.pg-evaluate .mod-banner .txt .zh {
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 56px;
-  text-align: left
+.txt-content {
+  max-width: 800px;
+  color: #ffffff;
+  text-align: left;
 }

-.xCenter {
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+.zh-title {
+  font-size: 48px; /* 增大字号 */
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.en-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
+.action-btn {
+  display: inline-block;
+  background-color: #C8161D;
+  color: #ffffff;
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #A01218;
+    box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
+    transform: translateY(-2px);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .mod-banner { height: 400px; }
+  .zh-title { font-size: 32px; }
+  .en-desc { font-size: 14px; }
+  .banner-container { padding: 0 20px; }
 }
 </style>
--- a/src/views/Jyh/ProductServices/ProductServices2/index.vue
+++ b/src/views/Jyh/ProductServices/ProductServices2/index.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="pg-evaluate">
-    <ModBanner />
-    <ModTabs :defaultTab="activeTab" />
-    <ModTotal />
+
+  <div class="secondEdition">
+    <div class="product-content pg-evaluate">
+      <ModBanner />
+      <div  class="component-box">
+        <Product2 />
+      </div>
+      <ModTotal />
+    </div>
  </div>
 </template>

@@ -11,6 +16,10 @@ import { ref, onMounted } from 'vue';
 import ModBanner from './ModBanner.vue';
 import ModTabs from './ModTabs.vue';
 import ModTotal from './ModTotal.vue';
+import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
+import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
+import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
+import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'

 const activeTab = ref<string | number>('');

@@ -34,7 +43,7 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
-.pg-evaluate {
+.product-content {
  background-color: #fafafa;
  color: #333;
 }
--- a/src/views/Jyh/ProductServices/ProductServices2/indexOld.vue
+++ b/src/views/Jyh/ProductServices/ProductServices2/indexOld.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="pg-evaluate">
+    <ModBanner />
+    <ModTabs :defaultTab="activeTab" />
+    <ModTotal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ModBanner from './ModBanner.vue';
+import ModTabs from './ModTabs.vue';
+import ModTotal from './ModTotal.vue';
+
+const activeTab = ref<string | number>('');
+
+// 解析URL参数的方法
+const getUrlParam = (paramName: string): string | null => {
+  // 获取当前URL的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  // 返回指定参数的值
+  return searchParams.get(paramName);
+};
+
+onMounted(() => {
+  // 获取url中tab参数的值
+  const tabParam = getUrlParam('tab');
+  if (tabParam) {
+    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
+  } else {
+    activeTab.value = 0;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pg-evaluate {
+  background-color: #fafafa;
+  color: #333;
+}
+</style>
--- a/src/views/Jyh/ProductServices/ProductServices3/ModBanner.vue
+++ b/src/views/Jyh/ProductServices/ProductServices3/ModBanner.vue
@@ -1,41 +1,102 @@
 <template>
  <div class="mod-banner">
-    <div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">透视黑盒，溯源无忧</p></div>
+    <div class="banner-container">
+      <div class="txt-content wow fadejinzhiInUp">
+        <h1 class="zh-title">软件供应链检测平台 (源链)</h1>
+        <p class="en-desc">
+          透视黑盒，溯源无忧
+        </p>
+        <a href="javascript:void(0);" class="action-btn">
+          了解研究方向
+        </a>
+      </div>
+    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "ModBanner"
-}
+<script setup>
+// 使用 script setup 语法
 </script>

-<style scoped>
-.pg-evaluate .mod-banner {
-  background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
-  background-size: auto 100%;
-  height: 460px;
-  position: relative
+<style scoped lang="scss">
+.mod-banner {
+  /* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
+  background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
+  background-size: cover;
+  height: 520px; /* 增加高度以匹配大屏视觉 */
+  position: relative;
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+  overflow: hidden;
+
+  /* 增加一个深色遮罩，确保文字更清晰（可选） */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
+    z-index: 1;
+  }
 }

-.pg-evaluate .mod-banner .txt {
-  left: 50%;
-  position: absolute;
-  top: 177px;
-  width: 1292px
+.banner-container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+  position: relative;
+  z-index: 2; /* 位于遮罩层上方 */
 }

-.pg-evaluate .mod-banner .txt .zh {
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 56px;
-  text-align: left
+.txt-content {
+  max-width: 800px;
+  color: #ffffff;
+  text-align: left;
 }

-.xCenter {
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+.zh-title {
+  font-size: 48px; /* 增大字号 */
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.en-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
+.action-btn {
+  display: inline-block;
+  background-color: #C8161D;
+  color: #ffffff;
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #A01218;
+    box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
+    transform: translateY(-2px);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .mod-banner { height: 400px; }
+  .zh-title { font-size: 32px; }
+  .en-desc { font-size: 14px; }
+  .banner-container { padding: 0 20px; }
 }
 </style>
--- a/src/views/Jyh/ProductServices/ProductServices3/index.vue
+++ b/src/views/Jyh/ProductServices/ProductServices3/index.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="pg-evaluate">
-    <ModBanner />
-    <ModTabs :defaultTab="activeTab" />
-    <ModTotal />
+
+  <div class="secondEdition">
+    <div class="product-content pg-evaluate">
+      <ModBanner />
+      <div  class="component-box">
+        <Product3 />
+      </div>
+      <ModTotal />
+    </div>
  </div>
 </template>

@@ -11,6 +16,10 @@ import { ref, onMounted } from 'vue';
 import ModBanner from './ModBanner.vue';
 import ModTabs from './ModTabs.vue';
 import ModTotal from './ModTotal.vue';
+import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
+import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
+import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
+import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'

 const activeTab = ref<string | number>('');

@@ -34,7 +43,7 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
-.pg-evaluate {
+.product-content {
  background-color: #fafafa;
  color: #333;
 }
--- a/src/views/Jyh/ProductServices/ProductServices3/indexOld.vue
+++ b/src/views/Jyh/ProductServices/ProductServices3/indexOld.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="pg-evaluate">
+    <ModBanner />
+    <ModTabs :defaultTab="activeTab" />
+    <ModTotal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ModBanner from './ModBanner.vue';
+import ModTabs from './ModTabs.vue';
+import ModTotal from './ModTotal.vue';
+
+const activeTab = ref<string | number>('');
+
+// 解析URL参数的方法
+const getUrlParam = (paramName: string): string | null => {
+  // 获取当前URL的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  // 返回指定参数的值
+  return searchParams.get(paramName);
+};
+
+onMounted(() => {
+  // 获取url中tab参数的值
+  const tabParam = getUrlParam('tab');
+  if (tabParam) {
+    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
+  } else {
+    activeTab.value = 0;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pg-evaluate {
+  background-color: #fafafa;
+  color: #333;
+}
+</style>
--- a/src/views/Jyh/ProductServices/ProductServices4/ModBanner.vue
+++ b/src/views/Jyh/ProductServices/ProductServices4/ModBanner.vue
@@ -1,41 +1,102 @@
 <template>
  <div class="mod-banner">
-    <div class="txt xCenter"><p class="zh wow animated" style="visibility: visible;">守护终端，运行无界</p></div>
+    <div class="banner-container">
+      <div class="txt-content wow fadejinzhiInUp">
+        <h1 class="zh-title">智能终端安全监测平台 (源端)</h1>
+        <p class="en-desc">
+          守护终端，运行无界
+        </p>
+        <a href="javascript:void(0);" class="action-btn">
+          了解研究方向
+        </a>
+      </div>
+    </div>
  </div>
 </template>

-<script>
-export default {
-  name: "ModBanner"
-}
+<script setup>
+// 使用 script setup 语法
 </script>

-<style scoped>
-.pg-evaluate .mod-banner {
-  background: #eceded url(@/assets/v3/banner.DfCkZ1gw.png) no-repeat 100%;
-  background-size: auto 100%;
-  height: 460px;
-  position: relative
+<style scoped lang="scss">
+.mod-banner {
+  /* 背景图替换为 image_b14311.jpg，使用 cover 确保全屏覆盖 */
+  background: #001529 url('@/assets/v3/bj11.png') no-repeat center center;
+  background-size: cover;
+  height: 520px; /* 增加高度以匹配大屏视觉 */
+  position: relative;
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+  overflow: hidden;
+
+  /* 增加一个深色遮罩，确保文字更清晰（可选） */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: linear-gradient(90deg, rgba(0, 21, 41, 0.4) 0%, transparent 100%);
+    z-index: 1;
+  }
 }

-.pg-evaluate .mod-banner .txt {
-  left: 50%;
-  position: absolute;
-  top: 177px;
-  width: 1292px
+.banner-container {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 40px;
+  position: relative;
+  z-index: 2; /* 位于遮罩层上方 */
 }

-.pg-evaluate .mod-banner .txt .zh {
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 56px;
-  text-align: left
+.txt-content {
+  max-width: 800px;
+  color: #ffffff;
+  text-align: left;
 }

-.xCenter {
-  -webkit-transform: translate(-50%);
-  transform: translate(-50%);
+.zh-title {
+  font-size: 48px; /* 增大字号 */
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.en-desc {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.6;
+  margin-bottom: 40px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+}
+
+/* 红色操作按钮：完全还原 image_932d00.jpg 风格 */
+.action-btn {
+  display: inline-block;
+  background-color: #C8161D;
+  color: #ffffff;
+  padding: 12px 32px;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+
+  &:hover {
+    background-color: #A01218;
+    box-shadow: 0 4px 15px rgba(200, 22, 29, 0.4);
+    transform: translateY(-2px);
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .mod-banner { height: 400px; }
+  .zh-title { font-size: 32px; }
+  .en-desc { font-size: 14px; }
+  .banner-container { padding: 0 20px; }
 }
 </style>
--- a/src/views/Jyh/ProductServices/ProductServices4/index.vue
+++ b/src/views/Jyh/ProductServices/ProductServices4/index.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="pg-evaluate">
-    <ModBanner />
-    <ModTabs :defaultTab="activeTab" />
-    <ModTotal />
+
+  <div class="secondEdition">
+    <div class="product-content pg-evaluate">
+      <ModBanner />
+      <div  class="component-box">
+        <Product4 />
+      </div>
+      <ModTotal />
+    </div>
  </div>
 </template>

@@ -11,6 +16,10 @@ import { ref, onMounted } from 'vue';
 import ModBanner from './ModBanner.vue';
 import ModTabs from './ModTabs.vue';
 import ModTotal from './ModTotal.vue';
+import Product1 from '@/views/Jyh/Home/component/ComProject/product1.vue'
+import Product2 from '@/views/Jyh/Home/component/ComProject/product2.vue'
+import Product3 from '@/views/Jyh/Home/component/ComProject/product3.vue'
+import Product4 from '@/views/Jyh/Home/component/ComProject/product4.vue'

 const activeTab = ref<string | number>('');

@@ -34,7 +43,7 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
-.pg-evaluate {
+.product-content {
  background-color: #fafafa;
  color: #333;
 }
--- a/src/views/Jyh/ProductServices/ProductServices4/indexOld.vue
+++ b/src/views/Jyh/ProductServices/ProductServices4/indexOld.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="pg-evaluate">
+    <ModBanner />
+    <ModTabs :defaultTab="activeTab" />
+    <ModTotal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ModBanner from './ModBanner.vue';
+import ModTabs from './ModTabs.vue';
+import ModTotal from './ModTotal.vue';
+
+const activeTab = ref<string | number>('');
+
+// 解析URL参数的方法
+const getUrlParam = (paramName: string): string | null => {
+  // 获取当前URL的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  // 返回指定参数的值
+  return searchParams.get(paramName);
+};
+
+onMounted(() => {
+  // 获取url中tab参数的值
+  const tabParam = getUrlParam('tab');
+  if (tabParam) {
+    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
+  } else {
+    activeTab.value = 0;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pg-evaluate {
+  background-color: #fafafa;
+  color: #333;
+}
+</style>
--- a/src/views/Jyh/ProductServices/index.vue
+++ b/src/views/Jyh/ProductServices/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="pg-evaluate">
    <ModBanner />
-    <ModTabs :defaultTab="activeTab" />
+    <ModContent />
    <ModTotal />
  </div>
 </template>
@@ -9,28 +9,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import ModBanner from './ModBanner.vue';
-import ModTabs from './ModTabs.vue';
+import ModContent from './ModContent.vue';
 import ModTotal from './ModTotal.vue';

-const activeTab = ref<string | number>('');
-
-// 解析URL参数的方法
-const getUrlParam = (paramName: string): string | null => {
-  // 获取当前URL的查询参数
-  const searchParams = new URLSearchParams(window.location.search);
-  // 返回指定参数的值
-  return searchParams.get(paramName);
-};
-
-onMounted(() => {
-  // 获取url中tab参数的值
-  const tabParam = getUrlParam('tab');
-  if (tabParam) {
-    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
-  } else {
-    activeTab.value = '1';
-  }
-});
 </script>

 <style lang="scss" scoped>
--- a/src/views/Jyh/ProductServices/indexOld.vue
+++ b/src/views/Jyh/ProductServices/indexOld.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="pg-evaluate">
+    <ModBanner />
+    <ModTabs :defaultTab="activeTab" />
+    <ModTotal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import ModBanner from './ModBanner.vue';
+import ModTabs from './ModTabs.vue';
+import ModTotal from './ModTotal.vue';
+
+const activeTab = ref<string | number>('');
+
+// 解析URL参数的方法
+const getUrlParam = (paramName: string): string | null => {
+  // 获取当前URL的查询参数
+  const searchParams = new URLSearchParams(window.location.search);
+  // 返回指定参数的值
+  return searchParams.get(paramName);
+};
+
+onMounted(() => {
+  // 获取url中tab参数的值
+  const tabParam = getUrlParam('tab');
+  if (tabParam) {
+    activeTab.value = /^\d+$/.test(tabParam) ? Number(tabParam) : tabParam;
+  } else {
+    activeTab.value = '1';
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.pg-evaluate {
+  background-color: #fafafa;
+  color: #333;
+}
+</style>