Tcode平台改造升级-首屏样式修改开发
This commit is contained in:
fmk1023
@@ -67,21 +67,6 @@
|
||||
<div class="swiper-pagination" ref="paginationEl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="entry-in new-feature-cards">
|
||||
<li v-for="(item, index) in featureCards" :key="index" class="feature-card">
|
||||
|
||||
<h5 class="card-title">{{ item.title }}</h5>
|
||||
|
||||
<a class="EASE LNK MultiLine txt" target="_blank" :href="item.link">
|
||||
{{ item.description1 }}
|
||||
<br>
|
||||
{{ item.description2 }}
|
||||
</a>
|
||||
|
||||
<a class="EASE LNK MultiLine card-link" target="_blank" :href="item.link"><i class="EASE ICO ic-arow"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -263,7 +248,7 @@ onBeforeUnmount(() => {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
height: 990px
|
||||
height: 790px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo {
|
||||
|
||||
497
src/views/Jyh/Home/component/ComEntryOld.vue
Normal file
497
src/views/Jyh/Home/component/ComEntryOld.vue
Normal file
@@ -0,0 +1,497 @@
|
||||
<template>
|
||||
<div class="com-entry">
|
||||
<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"
|
||||
loop muted autoplay
|
||||
playsinline
|
||||
src="@/assets/v3/ab622e07e5f14b23be0d5c2e620ea4be.mp4">
|
||||
</video>
|
||||
</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>
|
||||
<div class="swiper-button-next swiper-button-white" ref="nextButton"></div>
|
||||
|
||||
<div class="swiper-pagination" ref="paginationEl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="entry-in new-feature-cards">
|
||||
<li v-for="(item, index) in featureCards" :key="index" class="feature-card">
|
||||
|
||||
<h5 class="card-title">{{ item.title }}</h5>
|
||||
|
||||
<a class="EASE LNK MultiLine txt" target="_blank" :href="item.link">
|
||||
{{ item.description1 }}
|
||||
<br>
|
||||
{{ item.description2 }}
|
||||
</a>
|
||||
|
||||
<a class="EASE LNK MultiLine card-link" target="_blank" :href="item.link"><i class="EASE ICO ic-arow"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref,onBeforeUnmount} from 'vue';
|
||||
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 = [
|
||||
{
|
||||
title: 'SBOM 自动化分析',
|
||||
description1: '生成标准 CycloneDX/SPDX',
|
||||
description2: '物料清单，透视组件资产。',
|
||||
link: '/sbom-analysis',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '供应链漏洞检测分析',
|
||||
description1: '深度解析依赖树，精准定位',
|
||||
description2: 'CVE 漏洞与传播路径。',
|
||||
link: '/supply-chain-vulnerability',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
{
|
||||
title: '恶意代码投毒检测',
|
||||
description1: '识别依赖混淆、组件篡改',
|
||||
description2: '及后门植入攻击。',
|
||||
link: '/malware-detection',
|
||||
linkText: '[了解详情 >]',
|
||||
},
|
||||
];
|
||||
|
||||
// 1. 定义 ref 引用到 DOM 元素
|
||||
const swiperContainer = ref(null);
|
||||
const prevButton = ref(null);
|
||||
const nextButton = ref(null);
|
||||
const paginationEl = ref(null);
|
||||
let mySwiper = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (swiperContainer.value) {
|
||||
// 2. 初始化 Swiper 实例
|
||||
new Swiper(swiperContainer.value, {
|
||||
// 3. 注册使用的模块（必须）
|
||||
modules: [Navigation, Pagination, EffectCreative,Autoplay],
|
||||
|
||||
// 4. 配置 Swiper 选项
|
||||
loop: true, // 确保轮播循环
|
||||
|
||||
// 5. 配置 3D Creative 效果（必须）
|
||||
effect: 'creative',
|
||||
creativeEffect: {
|
||||
prev: {
|
||||
shadow: true,
|
||||
translate: ['-100%', 0, -1],
|
||||
},
|
||||
next: {
|
||||
translate: ['100%', 0, -1],
|
||||
},
|
||||
},
|
||||
|
||||
// 6. 配置 Navigation (导航按钮)
|
||||
navigation: {
|
||||
// 使用 ref 引用或 CSS 类名指向按钮元素
|
||||
nextEl: nextButton.value, // 使用 ref 引用更精确
|
||||
prevEl: prevButton.value, // 使用 ref 引用更精确
|
||||
// 也可以使用: nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',
|
||||
// 但使用 ref 在 Vue 中更稳定。
|
||||
},
|
||||
|
||||
// 7. 配置 Pagination (分页器)
|
||||
pagination: {
|
||||
el: paginationEl.value, // 使用 ref 引用指向分页器容器
|
||||
clickable: true, // 确保点击分页点可以切换
|
||||
},
|
||||
|
||||
// 自动播放（可选，如果需要）
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
|
||||
// 其他配置，如速度、初始化索引等...
|
||||
initialSlide: 2, // 假设您想从 index=2 的 Slide 开始
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const handleLogin = (type) => {
|
||||
emitEvent('login', {type, triggerType: '主动注册'});
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mySwiper) {
|
||||
mySwiper.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.com-entry {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in {
|
||||
background: #9696964d;
|
||||
border-radius: 12px;
|
||||
bottom: 68px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
padding: 34px 0;
|
||||
position: absolute;
|
||||
-webkit-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
.com-entry .entry-in li {
|
||||
border-right: 1px solid #979797;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
list-style: none;
|
||||
padding: 7px 36px 0 40px;
|
||||
width: 314px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .ic-arow {
|
||||
left: 0;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover h5 {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover a {
|
||||
color: #4bad52
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:hover .ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAAKhQTFRFAAAAAP8AgICAVapVVapVSbZJQJ9gRqJdSaRbUa5RRq5RTKpVSa1SSK9QSa9QSq5RSKpVS65RTK5RS6tUSa5RSa9QSqxTTK5RS6xTS6xTTKxTTK1SS65RS61SSq1STKxTS61SS61SSq1STK1SS65RS61SSq1SSq5RS61SS6xTS65RS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SS61SEkaAMAAAADd0Uk5TAAECAwYHCAsOExYbHCAjJicsOTpCSVlhYmlyeYGCiZGSmaGiqbGyucjP1dze4Obq7/L1+Pv8/muR6mgAAACNSURBVHichZLXDoJQEERXUBALRcGuFEWl2p3//zMTY+LL3b3zeiZbh+gv1yRBvbqMBOxXwCngeXd1xSsd8AYneeK2toQOR6CZdXhDWADnKc+NRQscxrzB3t7x2PV5w2j/xmVpEnngVUY6rNYw+xVXjrYRRjPm0mLfs0wY6OfCUZ1YeIn8UE0cNGFSRfEDg08bjv6UEeIAAAAASUVORK5CYII=);
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li:last-child {
|
||||
border: none
|
||||
}
|
||||
|
||||
.com-entry .entry-in li h5 {
|
||||
color: #4bad52;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
line-height: 30px;
|
||||
margin: 0 0 19px
|
||||
}
|
||||
|
||||
.com-entry .entry-in li .txt {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 48px;
|
||||
letter-spacing: .5px;
|
||||
line-height: 24px
|
||||
}
|
||||
|
||||
.com-slider {
|
||||
background-color: #0c0c0f
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
height: 990px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo video {
|
||||
max-height: 900px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sVdo .btn-play {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////+/379/v49Pr08/rz7vfv6vXr6fXq2O3a1+3Zz+nRxeXHxOTHu+C+ut+9pdaopNanmtGemdGdmNCckM2Uj8yUhsiKhceKfMOBe8OAabtvabtuaLpuZ7ptYrhoXLViWbNgV7JeVrJdT69WT69VTK5TS61ST2RNRwAAABZ0Uk5TAAEJDBYXI1Jyf4KDpaqrv9PZ6PLz/pJYTDUAAAEkSURBVHjanZXHcsMwDERXJbKoqItiepzi9N6chv//rlwyMnvo7JF4QwxAYAkoyvKy6QbeNWWewam0aIWktkitWMK40MRZYnKzXljUzzQsYqOwamSRzMW1cKqKpfsq4VG9upMJr9hUx+gHx9+Kkl78oT4xEl8uz7dcyVO5z59ET3MT5CmATfmEiOj7YtsgCwCtDhK9HulgC2TCBImudzQyQ24F6e1YBXOUdpDodk8OlGhcIL2fSoEGnRMkut+fAh24B6TnKTBg8IEvEuhL/XAgpXYX87FQinG2505rj6vhJ3rD7U94s2s8YfBQhI+ZMrhfRI+HjsFVVuFqeeZchfDlCl7XcANAVPu4SrKp2GM+dfwf2ws30jWsGcBGmNmvvg9u+z5+AJMEhmRVU6aXAAAAAElFTkSuQmCC) no-repeat 50%;
|
||||
background-size: 100% 100%;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.com-slider .swiper-slide .sImg {
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.MultiLine {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.ic-arow {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAMAAADgvdz9AAAAAXNSR0IArs4c6QAAALdQTFRFAAAA////////////////////6urq6+vr8vLy8/Pz6urq6+vr7e3t7+/v7e3t8fHx8fHx7e3t8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw7+/v8PDw8PDw8PDw8PDw8PDw8PDw7+/v7+/v8PDw8PDw7+/v8PDw8PDw8PDw8PDw7+/v7+/v8PDw7+/v7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v8PDw7+/v7+/v7+/v7+/v4uiVIAAAADx0Uk5TAAECAwYHDA0UFRgZHR8qNTc4RlNUVldkZWZnc3R2d4SGh5OUlpekpqe2t8PExsvR093f5+nw8fb3+/z+BY9v3gAAAJtJREFUKM99UkcWglAQ+wKKDcGGXVTsXbGT+5/L0Y0bM9kmb14miTE/eFmjILM/NxW6dAB2Vc5b7QRYeFyQi+54jFwuKM9TXDo2F/hb4FhTPDZOwKrCead/xWta4IJ8/MRtIDG54JCYVDpkxydyfEg6cHpibcas1eWxNXvM3yixfEPt2kolY1KJ1UqQLlmhxc8cAm1MoTa2P1N8A11AHbmJaAv2AAAAAElFTkSuQmCC);
|
||||
margin: 10px 0 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.ic-arow, .ic-down {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.EASE {
|
||||
-webkit-transition: all .4s ease-out;
|
||||
transition: all .4s ease-out;
|
||||
}
|
||||
|
||||
.ICO {
|
||||
background-position: 50%;
|
||||
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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="hadoop" id="hadoop">
|
||||
<div class="hadoopCon">
|
||||
<div class="descBox">
|
||||
<p class="desc1">智能终端安全监测平台</p>
|
||||
<p class="desc1">智能终端安全监测</p>
|
||||
|
||||
<p class="desc2">
|
||||
面向**车联网、无人机及 IoT 生态**，提供应用逆向分析与运行时安全监测，确保设备在真实环境下的安全运行 。
|
||||
|
||||
Reference in New Issue
Block a user