cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tcode运营平台改造升级-态势感知页面样式优化

Browse Source
This commit is contained in:
fmk1023
2025-12-18 19:47:06 +08:00
parent 5e9c7686e5
commit 75a2b30776
4 changed files with 387 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/views/Jyh/security/index.vue
View File

@@ -8,9 +8,9 @@
<div class="index-module__NV_5cW__floatingElement"></div>
</div>
<div class="index-module__NV_5cW__titleSection">
<div class="index-module__NV_5cW__titleContainer">
<h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>
</div>
<!-- <div class="index-module__NV_5cW__titleContainer">-->
<!-- <h1 class="index-module__NV_5cW__title">全球开源风险态势感知监控中心</h1>-->
<!-- </div>-->
<!-- <div class="index-module__NV_5cW__subtitle">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
<!-- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
@@ -23,25 +23,25 @@
<!-- <span>汇聚武汉开源力量，共建城市开源生态</span>-->
<!-- </div>-->
<!-- 武汉4项核心开源数据统计 -->
<div class="index-module__NV_5cW__statsBar">
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">120+</span>
<span class="index-module__NV_5cW__statLabel">开源企业</span>
<div class="stats-bar-container">
<div class="stat-item">
<span class="stat-number">120+</span>
<span class="stat-label">开源企业</span>
</div>
<div class="index-module__NV_5cW__statDivider"></div>
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">32+</span>
<span class="index-module__NV_5cW__statLabel">高校参与</span>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number">32+</span>
<span class="stat-label">高校参与</span>
</div>
<div class="index-module__NV_5cW__statDivider"></div>
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">300+</span>
<span class="index-module__NV_5cW__statLabel">社区活动</span>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number">300+</span>
<span class="stat-label">社区活动</span>
</div>
<div class="index-module__NV_5cW__statDivider"></div>
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">200+</span>
<span class="index-module__NV_5cW__statLabel">开源项目</span>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number">200+</span>
<span class="stat-label">开源项目</span>
</div>
</div>
</div>
@@ -51,17 +51,17 @@
<div class="index-module__NV_5cW__content">
<!-- ECharts图表区域 -->
<div class="index-module__NV_5cW__chartsSection">
<div class="index-module__NV_5cW__sectionHeader">
<h2 class="index-module__NV_5cW__sectionTitle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chart-pie" aria-hidden="true">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
<span>全球开源风险态势感知监控中心数据可视化</span>
</h2>
</div>
<!-- <div class="index-module__NV_5cW__sectionHeader">-->
<!-- <h2 class="index-module__NV_5cW__sectionTitle">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"-->
<!-- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
<!-- class="lucide lucide-chart-pie" aria-hidden="true">-->
<!-- <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>-->
<!-- <circle cx="12" cy="10" r="3"></circle>-->
<!-- </svg>-->
<!-- <span>全球开源风险态势感知监控中心数据可视化</span>-->
<!-- </h2>-->
<!-- </div>-->
<!-- 图表网格布局：新增多个模块 -->
<div class="index-module__NV_5cW__chartsGrid">
@@ -1355,7 +1355,7 @@ onMounted(() => {
<style lang="scss" scoped>
.index-module__NV_5cW__container {
background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
background: #020617;
min-height: 100vh;
padding: 2rem 1rem;
position: relative;
@@ -2024,4 +2024,85 @@ onMounted(() => {
.chartCard__actionBtn--active:hover {
background-color: #2563eb;
}
.stats-bar-container {
display: flex;
align-items: center;
justify-content: space-around; // 平均分布
flex-wrap: wrap;
// 宽度与边距优化
width: 100%;
max-width: 1400px; // 设置一个较大的上限适配超大屏，或设为 100%
margin: 1.5rem auto;
padding: 1.5rem 3rem;
// 背景设计：深色玻璃拟态
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border-radius: 1.5rem;
// 关键：针对黑底增加微弱的白边勾勒，增加精致感
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 0 10px rgba(255, 255, 255, 0.02);
transition: all 0.4s ease;
&:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(56, 189, 248, 0.3); // 悬停时边框微亮（天蓝色）
}
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 120px;
gap: 0.5rem;
}
.stat-number {
// 数字发光效果
color: #60a5fa; // 保持你偏好的蓝色
font-size: 2rem; // 略微放大
font-weight: 800;
line-height: 1;
text-shadow: 0 0 15px rgba(96, 165, 250, 0.4); // 核心：增加数字呼吸感
letter-spacing: -1px;
}
.stat-label {
// 标签颜色改为高亮白/浅灰，在黑底上才清晰
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.stat-divider {
// 分割线改为渐变，避免生硬
height: 2.5rem;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.15),
transparent
);
@media (max-width: 768px) {
display: none; // 移动端隐藏分割线
}
}
// 移动端适配
@media (max-width: 640px) {
.stats-bar-container {
padding: 1.5rem 1rem;
gap: 1.5rem;
}
}
</style>