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

168
src/views/Jyh/ecosystem/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">200万 +</span>
<span class="index-module__NV_5cW__statLabel">活跃开发者</span>
<div class="stats-glass-bar">
<div class="stat-node">
<span class="stat-value">200万+</span>
<span class="stat-desc">活跃开发者</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-separator"></div>
<div class="stat-node">
<span class="stat-value">300万+</span>
<span class="stat-desc">开源项目</span>
</div>
<div class="index-module__NV_5cW__statDivider"></div>
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">500 +</span>
<span class="index-module__NV_5cW__statLabel">开源企业</span>
<div class="stat-separator"></div>
<div class="stat-node">
<span class="stat-value">500+</span>
<span class="stat-desc">开源企业</span>
</div>
<div class="index-module__NV_5cW__statDivider"></div>
<div class="index-module__NV_5cW__stat">
<span class="index-module__NV_5cW__statNumber">2800亿</span>
<span class="index-module__NV_5cW__statLabel">产业估值</span>
<div class="stat-separator"></div>
<div class="stat-node">
<span class="stat-value">2800亿</span>
<span class="stat-desc">产业估值</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">
@@ -2361,7 +2361,7 @@ onMounted(() => {
<style lang="scss" scoped>
.index-module__NV_5cW__container {
background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
//background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
min-height: 100vh;
padding: 2rem 1rem;
position: relative;
@@ -4158,4 +4158,110 @@ onMounted(() => {
}
}
}
.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>