Skip to content

Commit 15c0aa1

Browse files
author
Jiahe114514
committed
feat: init
1 parent 0b63ef7 commit 15c0aa1

File tree

10 files changed

+260
-72
lines changed

10 files changed

+260
-72
lines changed

‎public/test/test.png‎

48.5 KB
Loading

‎public/test_output/test_edges.webp‎

60.8 KB
Loading

‎public/test_output/test_resized.webp‎

71.1 KB
Loading

‎public/test_webp/test.webp‎

36.1 KB
Loading

‎src/components/CardinalDisplay.vue‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/components/CompetitionSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import 'swiper/css/navigation';
2626
type: Array as () => Competition[],
2727
default: () => [
2828
{
29-
title: "梦想凌武杯",
29+
title: "梦想·凌武杯",
3030
image: "/competition/梦想凌武杯.webp",
3131
summary: "网络安全技能竞赛，培养和选拔优秀的安全人才"
3232
},

‎src/components/FeatureSection.vue‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<template>
2+
<section id="features" class="py-16 bg-gradient-to-br from-black via-blue-900 to-black">
3+
<div class="container mx-auto px-4">
4+
<div class="text-center mb-12">
5+
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">特色功能</h2>
6+
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
7+
凌云竞赛平台的核心功能与特色
8+
</p>
9+
</div>
10+
11+
<!-- 功能特性列表 -->
12+
<div class="space-y-20">
13+
<!-- 第一个特性：全面覆盖风险类型 -->
14+
<div class="flex flex-col lg:flex-row items-center gap-12">
15+
<!-- 图片区域 -->
16+
<div class="lg:w-1/2">
17+
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-8 shadow-lg feature-card relative overflow-hidden">
18+
<img src="/bg.webp" alt="背景图片" class="absolute inset-0 w-full h-full object-cover opacity-40" />
19+
<div class="relative z-10">
20+
<div class="flex flex-col space-y-4">
21+
<!-- 左侧安全评估按钮 -->
22+
<div class="flex flex-col space-y-3">
23+
<div class="flex items-center space-x-3 bg-white rounded-lg p-3 shadow-sm">
24+
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center icon-animate">
25+
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
26+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
27+
</svg>
28+
</div>
29+
<span class="text-sm font-medium text-gray-700">这是优点</span>
30+
</div>
31+
<div class="flex items-center space-x-3 bg-white rounded-lg p-3 shadow-sm">
32+
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center icon-animate">
33+
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
34+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
35+
</svg>
36+
</div>
37+
<span class="text-sm font-medium text-gray-700">这是优点</span>
38+
</div>
39+
<div class="flex items-center space-x-3 bg-white rounded-lg p-3 shadow-sm">
40+
<div class="w-8 h-8 bg-purple-500 rounded-lg flex items-center justify-center icon-animate">
41+
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
42+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
43+
</svg>
44+
</div>
45+
<span class="text-sm font-medium text-gray-700">这是优点</span>
46+
</div>
47+
<div class="flex items-center space-x-3 bg-white rounded-lg p-3 shadow-sm">
48+
<div class="w-8 h-8 bg-yellow-500 rounded-lg flex items-center justify-center icon-animate">
49+
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
50+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
51+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
52+
</svg>
53+
</div>
54+
<span class="text-sm font-medium text-gray-700">这是优点</span>
55+
</div>
56+
</div>
57+
58+
<!-- 风险评测报告 -->
59+
<div class="bg-blue-100 rounded-lg p-4">
60+
<h4 class="text-sm font-semibold text-blue-800 mb-2">风险评测报告</h4>
61+
<div class="space-y-1 text-xs text-blue-700">
62+
<div>注入风险: 20</div>
63+
<div>幻觉风险: 12</div>
64+
<div>RAG风险: 5</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<!-- 文字区域 -->
73+
<div class="lg:w-1/2 lg:pl-8">
74+
<h3 class="text-2xl md:text-3xl font-bold text-blue-400 mb-4">全面覆盖风险类型</h3>
75+
<p class="text-gray-400 mb-6 text-lg">
76+
支持对生成式人工智能进行全方位多角度的风险评测
77+
</p>
78+
<ul class="space-y-3">
79+
<li class="flex items-start">
80+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
81+
<span class="text-gray-300">提供模型输出内容安全评测</span>
82+
</li>
83+
<li class="flex items-start">
84+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
85+
<span class="text-gray-300">支持对模型进行注入攻击评测</span>
86+
</li>
87+
<li class="flex items-start">
88+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
89+
<span class="text-gray-300">提供模型隐私安全评测</span>
90+
</li>
91+
<li class="flex items-start">
92+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
93+
<span class="text-gray-300">支持模型幻觉评测</span>
94+
</li>
95+
</ul>
96+
</div>
97+
</div>
98+
99+
<!-- 第二个特性：严格遵循行业标准 -->
100+
<div class="flex flex-col lg:flex-row-reverse items-center gap-12">
101+
<!-- 图片区域 -->
102+
<div class="lg:w-1/2">
103+
<div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-2xl p-8 shadow-lg feature-card relative overflow-hidden">
104+
<img src="/nuclear.webp" alt="核能背景图片" class="absolute inset-0 w-full h-full object-cover opacity-20" />
105+
<div class="relative z-10">
106+
<div class="flex items-center justify-center space-x-4">
107+
<!-- 重叠的文档图标 -->
108+
<div class="relative">
109+
<div class="w-16 h-16 bg-white rounded-lg shadow-md border-2 border-gray-200 flex items-center justify-center transform rotate-12">
110+
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
111+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
112+
</svg>
113+
</div>
114+
<div class="w-16 h-16 bg-white rounded-lg shadow-md border-2 border-gray-200 flex items-center justify-center transform -rotate-6 absolute top-2 left-2">
115+
<svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
116+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
117+
</svg>
118+
</div>
119+
<div class="w-16 h-16 bg-white rounded-lg shadow-md border-2 border-blue-300 flex items-center justify-center transform rotate-3 absolute top-1 left-1">
120+
<svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
121+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
122+
</svg>
123+
</div>
124+
</div>
125+
126+
<!-- 行业标准列表 -->
127+
<div class="bg-green-100 rounded-lg p-4">
128+
<h4 class="text-sm font-semibold text-green-800 mb-3">展示优点</h4>
129+
<div class="space-y-2">
130+
<div class="flex items-center space-x-2">
131+
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
132+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
133+
</svg>
134+
<span class="text-sm text-green-700">这是优点</span>
135+
</div>
136+
<div class="flex items-center space-x-2">
137+
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
138+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
139+
</svg>
140+
<span class="text-sm text-green-700">这是优点</span>
141+
</div>
142+
<div class="flex items-center space-x-2">
143+
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
144+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
145+
</svg>
146+
<span class="text-sm text-green-700">这是优点</span>
147+
</div>
148+
<div class="flex items-center space-x-2">
149+
<svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
150+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
151+
</svg>
152+
<span class="text-sm text-green-700">这是优点</span>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
161+
<!-- 文字区域 -->
162+
<div class="lg:w-1/2 lg:pr-8">
163+
<h3 class="text-2xl md:text-3xl font-bold text-green-600 mb-4">严格遵循行业标准</h3>
164+
<p class="text-gray-400 mb-6 text-lg">
165+
严格依照相关法规标准开展评测，同时满足企业个性化标准设定需求
166+
</p>
167+
<ul class="space-y-3">
168+
<li class="flex items-start">
169+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
170+
<span class="text-gray-300">符合《生成式人工智能服务安全基本要求》</span>
171+
</li>
172+
<li class="flex items-start">
173+
<span class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0">✓</span>
174+
<span class="text-gray-300">支持自定义标准配置</span>
175+
</li>
176+
</ul>
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
</section>
182+
</template>
183+
184+
<script setup lang="ts">
185+
import { ref, onMounted } from 'vue';
186+
187+
const isVisible = ref(false);
188+
189+
onMounted(() => {
190+
// 添加滚动动画
191+
const observer = new IntersectionObserver(
192+
(entries) => {
193+
entries.forEach((entry) => {
194+
if (entry.isIntersecting) {
195+
isVisible.value = true;
196+
}
197+
});
198+
},
199+
{
200+
threshold: 0.1,
201+
rootMargin: '0px 0px -100px 0px'
202+
}
203+
);
204+
205+
const element = document.querySelector('#features');
206+
if (element) {
207+
observer.observe(element);
208+
}
209+
});
210+
</script>
211+
212+
<style scoped>
213+
.feature-enter {
214+
opacity: 0;
215+
transform: translateY(30px);
216+
transition: all 0.6s ease-out;
217+
}
218+
219+
.feature-enter-active {
220+
opacity: 1;
221+
transform: translateY(0);
222+
}
223+
224+
/* 添加悬停效果 */
225+
.feature-card {
226+
transition: all 0.3s ease;
227+
}
228+
229+
.feature-card:hover {
230+
transform: translateY(-5px);
231+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
232+
}
233+
234+
/* 图标动画 */
235+
.icon-animate {
236+
transition: all 0.3s ease;
237+
}
238+
239+
.icon-animate:hover {
240+
transform: scale(1.1);
241+
}
242+
</style>

‎src/components/InfiniteScroll.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
v-for="logo in logos"
99
:key="`first-${logo.index}`"
1010
:src="logo.url"
11-
class="h-full w-auto object-contain flex-shrink-0 mx-4 opacity-30 max-h-[30vh]"
11+
class="max-h-[25vh] min-w-[20vw] max-w-[40vh] object-contain flex-shrink-0 mx-4 opacity-30"
1212
/>
1313
</div>
1414
<div class="flex flex-nowrap h-[15vh] animate-reverse-scroll items-center absolute bottom-0">
1515
<img
1616
v-for="logo in logos.slice().reverse()"
1717
:key="`third-${logo.index}`"
1818
:src="logo.url"
19-
class="h-full w-auto object-contain flex-shrink-0 mx-4 opacity-10"
19+
class="max-h-[25vh] min-w-[20vw] max-w-[40vh] w-auto object-contain flex-shrink-0 mx-4 opacity-10"
2020
/>
2121
</div>
2222
</div>
@@ -164,14 +164,14 @@
164164
}
165165
166166
.animate-scroll {
167-
animation: scroll 40s linear infinite;
167+
animation: scroll 150s linear infinite;
168168
&:hover {
169169
animation-play-state: paused;
170170
}
171171
}
172172
173173
.animate-reverse-scroll {
174-
animation: reverse-scroll 40s linear infinite;
174+
animation: reverse-scroll 150s linear infinite;
175175
&:hover {
176176
animation-play-state: paused;
177177
}

‎src/components/Train.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
<!-- Hero Section -->
44
<section class="py-20 px-4">
55
<div class="container mx-auto text-center">
6-
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
7-
网络安全实训平台
6+
<h1
7+
class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-tr from-slate-50 to-blue-500 bg-clip-text text-transparent"
8+
>
9+
凌云竞赛平台
810
</h1>
911
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">
10-
集课程培训、练习训练、技能考核等功能于一体的网络安全实战培训系统
12+
多类型赛事平台，助力人才培养
1113
</p>
1214
<div class="flex flex-col sm:flex-row gap-4 justify-center">
1315
<button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-colors">

‎src/pages/competition.astro‎

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
import BaseLayout from "../layouts/BaseLayout.astro";
33
import HeroSectionVue from "../components/HeroSection.vue";
4-
import AboutSection from "../components/AboutSection.vue";
54
import SermonList from "../components/SermonList.vue";
65
import CompetitionSection from "../components/CompetitionSection.vue";
76
import InfiniteScroll from "../components/InfiniteScroll.vue";
8-
import CardinalDisplay from "../components/CardinalDisplay.vue";
7+
import FeatureSection from "../components/FeatureSection.vue";
8+
import Train from "../components/Train.vue";
99
---
1010

1111
<BaseLayout
@@ -19,31 +19,12 @@ import CardinalDisplay from "../components/CardinalDisplay.vue";
1919
client:visible
2020
/>
2121

22-
<div id="about">
23-
<AboutSection
24-
title="凌云竞赛平台"
25-
description="凌云竞赛平台是集夺旗解题赛、AWD攻防赛、知识竞赛等多类型赛事为一体的专业化安全竞赛平台。可满足单位对培养、选拔网络安全人才、组织实操演练、举办网络安全大赛等多方面需求"
26-
:images="['/city.webp', '/bg.webp', '/nuclear.webp']"
27-
buttonText="查看定价"
28-
buttonLink="/price"
29-
layout="left"
30-
client:visible
31-
/>
32-
</div>
33-
34-
<div id="sermon-list">
35-
<SermonList client:visible />
36-
</div>
37-
38-
<div id="competitions">
39-
<CompetitionSection client:visible/>
40-
</div>
22+
<SermonList client:visible />
23+
24+
<FeatureSection client:visible/>
25+
26+
<CompetitionSection client:visible/>
4127

42-
<div id="cardinal">
43-
<CardinalDisplay client:visible/>
44-
</div>
28+
<InfiniteScroll client:visible/>
4529

46-
<div id="infinite">
47-
<InfiniteScroll client:visible/>
48-
</div>
4930
</BaseLayout>

0 commit comments

Comments
 (0)