链路平台

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) => {

src/views/Jyh/Home/component/ComProject/product3.vue

@@ -33,10 +33,10 @@
     <div class="oneStop" :ref="(el) => setTargetRef(el, 'oneStop')" id="oneStop">
       <div class="oneStopContent">
         <div class="osLeftMain">
-          <img src="@/assets/v3/Line/jushu1.png" alt="技术优势图1" width="560px" class="osleftPosi">
+          <img src="@/assets/v3/Line/jishu4.png" alt="技术优势图4" width="500px" height="300px" class="img1">
-          <img src="@/assets/v3/Line/jushu2.png" alt="技术优势图2" width="240px" class="jushuCenter">
+          <!-- <img src="@/assets/v3/Line/jishu3.png" alt="技术优势图3" width="180px" class="img2"> -->
-          <img src="@/assets/v3/Line/jushu3.png" alt="技术优势图3" width="680px" class="osleftPosi1">
+          <img src="@/assets/v3/Line/jishu2.png" alt="技术优势图2" width="540px" height="350px" class="img3">
-          <img src="@/assets/v3/Line/jushu4.png" alt="技术优势图4" width="400px" class="osleftPosi2">
+          <img src="@/assets/v3/Line/jishu1.png" alt="技术优势图1" width="360px" height="300px" class="img4">
         </div>
         <div class="osRightMain">
           <p class="osRightTitle">💡 技术优势</p>
@@ -62,24 +62,20 @@
         <b>03.</b>以组件知识图谱与漏洞知识图谱为核心，构建影响软件版本节点与组件节点的关联，形成完整供应链知识图谱
       </div>
       <div class="highDoContent">
-        <div><img src="@/assets/v3/Line/2-3-1.bcb33d47.png" alt="" width="794px">
+        <div>
-          <div style="margin-bottom: 100px; margin-top: 25px; position: relative;"><img
+          <img src="@/assets/v3/Line/chuangxin1.png" alt="" width="600px">
-              src="@/assets/v3/Line/2-3-2.57ef08ae.png" alt="" width="520px"></div>
+          <img src="@/assets/v3/Line/chuangxin2.png" alt="" width="600px">
-          <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>
       </div>
     </div>
 
     <div class="multipleAnalyse" :ref="(el) => setTargetRef(el, 'multipleAnalyse')" id="multipleAnalyse">
-      <span class="title">🎯 市场推广</span>
+      <span class="title">🎯 客户群体</span>
       <div class="maContent">
       </div>
 
-      <p class="desc">
+
-        <b>面向客户：</b>强合规型（能源、金融、运营商、政务/信创等）、高敏捷型（互联网大厂、车联网、AI厂商等）<br>
-        <b>收费模式：</b>订阅服务（定期按月/年支付费用，获取软件的使用权、更新和支持服务）、解决方案服务（一次性支付费用，满足定制化、高安全和完全内网部署需求）
-      </p>
     </div>
 
     <div class="multidimensional" style="opacity: 1">
@@ -93,12 +89,12 @@
               <b>包管理器SCA引擎：</b>针对常见包管理器（如npm、PyPI、Maven）的依赖分析引擎，自动识别组件及其版本
             </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/chanpin1.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/chanpin2.png" alt=""
-              width="614px"></div>
+              width="714px" class="wdsdsf"></div>
           <div>
             <p><b>C/C++ SCA引擎：</b>处理C/C++项目成分分析，支持源代码和编译依赖扫描<br><br>
               <b>二进制SCA引擎：</b>针对二进制文件分析，通过反编译和特征匹配识别成分和漏洞<br><br>
@@ -289,7 +285,7 @@ onUnmounted(() => {
   font-weight: 500;
   color: #fff;
   line-height: 36px;
-  margin-top: 90px
+  margin-top: 90px;
 }
 
 .secondEdition .secondEditionContent .hadoop .hadoopdesc {
@@ -311,20 +307,29 @@ onUnmounted(() => {
 }
 
 .secondEdition .secondEditionContent .oneStop .oneStopContent {
-  display: flex
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start
 }
 
 .secondEdition .secondEditionContent .oneStop .oneStopContent .osLeftMain {
-  display: flex;
+  display: grid;
-  justify-content: flex-start;
+  grid-template-columns: 1fr 1fr;
-  align-items: flex-start;
+  grid-template-rows: 1fr 1fr;
+  gap: 15px;
   position: relative;
-  margin-bottom: 182px
+  margin-bottom: 182px;
+  margin-left: 290px;
+  width: 450px;
+  height: 320px;
+  flex-shrink: 0
 }
 
 .secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain {
-  margin-left: 22px;
+  margin-left: 30px;
-  text-align: left
+  text-align: left;
+  flex: 1
 }
 
 .secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain .osRightTitle {
@@ -336,7 +341,7 @@ onUnmounted(() => {
   background: -webkit-linear-gradient(112deg, #ff8b75, #dd2476);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin-top: 28px
+  margin-top: 0
 }
 
 .secondEdition .secondEditionContent .oneStop .oneStopContent .osRightMain p {
@@ -352,42 +357,74 @@ onUnmounted(() => {
   font-weight: 500
 }
 
-.secondEdition .secondEditionContent .oneStop .imgring,
+.secondEdition .secondEditionContent .oneStop .imgring {
-.secondEdition .secondEditionContent .oneStop .osleftPosi {
   transition: 3s;
   opacity: 0
 }
 
-.secondEdition .secondEditionContent .oneStop .osleftPosi1,
+.secondEdition .secondEditionContent .oneStop .osLeftMain img {
-.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
-  position: absolute;
-  right: -200px;
-  top: 102px;
-  transition: 2s;
   opacity: 0;
+  transition: all 2s ease-out;
+  position: absolute;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12)
+}
+
+.secondEdition .secondEditionContent .oneStop .osLeftMain .img1 {
+  left: -150px;
+  top: 10px;
   z-index: 1
 }
 
-.secondEdition .secondEditionContent .oneStop .osleftPosi2 {
+.secondEdition .secondEditionContent .oneStop .osLeftMain .img2 {
-  top: 317px;
+  right: -150px;
-  right: 10px;
+  top: 0;
-  transition: 2.5s;
+  z-index: 3;
-  z-index: 2
+  transition-delay: 0.3s
 }
 
-.secondEdition .secondEditionContent .oneStop.activeCode,
+.secondEdition .secondEditionContent .oneStop .osLeftMain .img3 {
-.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi,
+  left: -150px;
-.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1,
+  bottom: -50px;
-.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+  z-index: 2;
+  transition-delay: 0.2s
+}
+
+.secondEdition .secondEditionContent .oneStop .osLeftMain .img4 {
+  right: -150px;
+  bottom: 20px;
+  z-index: 4;
+  transition-delay: 0.4s
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode {
   opacity: 1
 }
 
-.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi1 {
+.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain img {
-  right: 10px
+  opacity: 1
 }
 
-.secondEdition .secondEditionContent .oneStop.activeCode .osleftPosi2 {
+.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img1 {
-  top: 217px
+  left: -190px;
+  top: 15px
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img2 {
+  right: 30px;
+  top: 0
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img3 {
+  left: -150px;
+  bottom: 15px;
+  top: 100px;
+}
+
+.secondEdition .secondEditionContent .oneStop.activeCode .osLeftMain .img4 {
+  right: 15px;
+  bottom: 20px;
+  top: 200px;
 }
 
 .secondEdition .secondEditionContent .oneStop.activeCode .imgring {
@@ -399,7 +436,8 @@ onUnmounted(() => {
 }
 
 .secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img {
-  opacity: 1
+  opacity: 1;
+  padding-top:10px;
 }
 
 .secondEdition .secondEditionContent .highDevops.activeCode .highDoContent img.highImg1 {
@@ -550,13 +588,13 @@ onUnmounted(() => {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   line-height: 50px;
-  margin-top: 20px
+  margin-top: -20px
 }
 
 .secondEdition .secondEditionContent .multipleAnalyse .maContent {
-  height: 400px;
+  height: 150px;
-  width: 723px;
+  width: 600px;
-  background: url(@/assets/v3/Line/2-4-1.802eb322.png) no-repeat;
+  background: url(@/assets/v3/Line/kehu.png) no-repeat;
   background-size: 100% 100%;
   margin: 26px 0;
   transition: 3s
@@ -628,7 +666,8 @@ onUnmounted(() => {
 
 .secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalPart img {
   left: 0;
-  opacity: 1
+  opacity: 1;
+  top:10
 }
 
 .secondEdition .secondEditionContent .multidimensional .activeCode .multidimensinalhalf img {
@@ -650,7 +689,7 @@ onUnmounted(() => {
   left: 620px;
   bottom: -20px;
   opacity: 0;
-  transition: 3s
+  transition: 3s;
 }
 
 .secondEdition .secondEditionContent .multidimensinalPart p {
@@ -729,7 +768,9 @@ onUnmounted(() => {
   transform: translateX(-50%);
   transition: top 0.3s ease-in-out;
 }
-
+.wdsdsf{
+  margin-left: -100px;
+}
 html li {
   list-style: none;
 }
@@ -796,7 +837,7 @@ video {
 
 .activeCode>img.activeImg {
   right: 0;
-  top: 0px;
+  top: 30px;
   opacity: 1;
   width: 705px;
   transition: 1s;