Tcode平台改造升级-首屏样式修改开发
This commit is contained in:
fmk1023
@@ -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>
|
||||
|
||||
157
src/views/Jyh/Home/component/ComAuthorityOld.vue
Normal file
157
src/views/Jyh/Home/component/ComAuthorityOld.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
140
src/views/Jyh/Home/component/ComProject/index.vue
Normal file
140
src/views/Jyh/Home/component/ComProject/index.vue
Normal file
@@ -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>
|
||||
781
src/views/Jyh/Home/component/ComProject/product1.vue
Normal file
781
src/views/Jyh/Home/component/ComProject/product1.vue
Normal file
@@ -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>
|
||||
781
src/views/Jyh/Home/component/ComProject/product2.vue
Normal file
781
src/views/Jyh/Home/component/ComProject/product2.vue
Normal file
@@ -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>
|
||||
779
src/views/Jyh/Home/component/ComProject/product3.vue
Normal file
779
src/views/Jyh/Home/component/ComProject/product3.vue
Normal file
@@ -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>
|
||||
779
src/views/Jyh/Home/component/ComProject/product4.vue
Normal file
779
src/views/Jyh/Home/component/ComProject/product4.vue
Normal file
@@ -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>
|
||||
@@ -1,13 +1,34 @@
|
||||
<template>
|
||||
<div class="com-rank">
|
||||
<div class="rank-item wow xsddhxg animated" style="visibility: visible;"><h5 class="JBFont">
|
||||
<span>Top </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 {
|
||||
|
||||
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user