态势感知平台-全球开源风险态势感知监控中心数据概览接口对接
This commit is contained in:
fmk1023
@@ -7,44 +7,7 @@
|
||||
<div class="index-module__NV_5cW__floatingElement"></div>
|
||||
<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__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"-->
|
||||
<!-- class="lucide lucide-users" aria-hidden="true">-->
|
||||
<!-- <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>-->
|
||||
<!-- <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>-->
|
||||
<!-- <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>-->
|
||||
<!-- <circle cx="9" cy="7" r="4"></circle>-->
|
||||
<!-- </svg>-->
|
||||
<!-- <span>汇聚武汉开源力量，共建城市开源生态</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- 武汉4项核心开源数据统计 -->
|
||||
<div class="stats-glass-bar">
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">8000+</span>
|
||||
<span class="stat-desc">全球开源企业</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">600+</span>
|
||||
<span class="stat-desc">全球高校参与</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">10000+</span>
|
||||
<span class="stat-desc">全球社区活动</span>
|
||||
</div>
|
||||
<div class="stat-separator"></div>
|
||||
<div class="stat-node">
|
||||
<span class="stat-value">4亿+</span>
|
||||
<span class="stat-desc">全球开源项目</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<StatsGlass />
|
||||
</div>
|
||||
|
||||
<!-- 内容区域：ECharts图表模块 + 项目列表 -->
|
||||
@@ -172,6 +135,7 @@ import { onMounted, ref, nextTick, watch, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { usePageResize } from '@/utils/hooks/usePageResize';
|
||||
import ThreatIntelMap from './components/ThreatIntelMap.vue';
|
||||
import StatsGlass from '@/views/Jyh/security/StatsGlass.vue';
|
||||
|
||||
// 页面尺寸响应式
|
||||
const { widthType } = usePageResize();
|
||||
@@ -1423,16 +1387,6 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__titleSection {
|
||||
color: #333;
|
||||
z-index: 2;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.index-module__NV_5cW__titleContainer {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -2025,110 +1979,4 @@ onMounted(() => {
|
||||
.chartCard__actionBtn--active:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.stats-glass-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
/* 布局控制：撑满容器并增加内边距 */
|
||||
width: 100%;
|
||||
padding: 2rem 4rem;
|
||||
//margin: 2rem 0;
|
||||
|
||||
/* 深色玻璃拟态背景 */
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
|
||||
/* 极细微的边框勾勒 */
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* 外阴影与内发光，增加悬浮感 */
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.02);
|
||||
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(56, 189, 248, 0.4);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
.stat-value {
|
||||
text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
/* 科技感亮蓝渐变 */
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
/* 基础发光效果 */
|
||||
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
/* 在黑底上使用半透明白色，更有高级感 */
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-separator {
|
||||
/* 渐隐分割线 */
|
||||
width: 1px;
|
||||
height: 3rem;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0),
|
||||
rgba(255, 255, 255, 0.2),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 1024px) {
|
||||
.stats-glass-bar {
|
||||
padding: 2rem;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-glass-bar {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
.stat-separator {
|
||||
width: 50%;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user