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

态势感知平台-增加武汉市开源建设生态页面展示

Browse Source
This commit is contained in:
fmk1023
2026-01-04 15:29:42 +08:00
parent 31da7bdea9
commit 4d9c8ed52c
4 changed files with 1508 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/Jyh/Community/StatsBar.vue
View File

@@ -1,23 +1,23 @@
<template> <template>
<div class="stats-bar-container"> <div class="stats-glass-bar">
<div class="stats-bar-item"> <div class="stat-node">
<span class="stats-number">150+</span> <span class="stat-value">150+</span>
<span class="stats-label">开源企业</span> <span class="stat-desc">开源企业</span>
</div> </div>
<div class="stats-divider"></div> <div class="stat-separator"></div>
<div class="stats-bar-item"> <div class="stat-node">
<span class="stats-number">30+</span> <span class="stat-value">30+</span>
<span class="stats-label">高校参与</span> <span class="stat-desc">高校参与</span>
</div> </div>
<div class="stats-divider"></div> <div class="stat-separator"></div>
<div class="stats-bar-item"> <div class="stat-node">
<span class="stats-number">120+</span> <span class="stat-value">120+</span>
<span class="stats-label">社区活动</span> <span class="stat-desc">社区活动</span>
</div> </div>
<div class="stats-divider"></div> <div class="stat-separator"></div>
<div class="stats-bar-item"> <div class="stat-node">
<span class="stats-number">200+</span> <span class="stat-value">200+</span>
<span class="stats-label">开源项目</span> <span class="stat-desc">开源项目</span>
</div> </div>
</div> </div>
</template> </template>
@@ -29,91 +29,109 @@ name: "StatsBar"
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.stats-bar-container { .stats-glass-bar {
/* 基础布局 */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
flex-wrap: wrap;
/* 布局控制：撑满容器并增加内边距 */
width: 100%; width: 100%;
padding: 1.5rem 2rem; padding: 2rem 4rem;
margin-top: 1rem; //margin: 2rem 0;
gap: 1rem;
/* 玻璃拟态增强 */ /* 深色玻璃拟态背景 */
background: rgba(255, 255, 255, 0.1); // 降低透明度更显高级 background: rgba(255, 255, 255, 0.02);
-webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(20px);
backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1.25rem;
/* 增加一个非常细微的内阴影，增加厚度感 */ /* 极细微的边框勾勒 */
box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05), border-radius: 1rem;
0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease; /* 外阴影与内发光，增加悬浮感 */
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
&:hover { inset 0 0 20px rgba(255, 255, 255, 0.02);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
}
.stats-bar-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
min-width: 100px;
transition: transform 0.3s ease;
&:hover { &:hover {
border-color: rgba(56, 189, 248, 0.4);
background: rgba(255, 255, 255, 0.04);
transform: translateY(-2px); transform: translateY(-2px);
} }
} }
.stats-number { .stat-node {
/* 使用渐变色让数字更有科技感 */ flex: 1;
background: #C8161D; 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-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-size: 1.75rem; // 略微调大 /* 基础发光效果 */
font-weight: 800; filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
letter-spacing: -0.02em; letter-spacing: -1px;
line-height: 1.2;
} }
.stats-label { .stat-desc {
/* 颜色改为深灰带点蓝调，或者纯白(如果在深色背景下) */ /* 在黑底上使用半透明白色，更有高级感 */
color: #4b5563; color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 500;
margin-top: 0.25rem; letter-spacing: 0.1rem;
opacity: 0.9; text-transform: uppercase;
letter-spacing: 0.05em;
} }
.stats-divider { .stat-separator {
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent); /* 渐隐分割线 */
width: 1px; width: 1px;
height: 2.5rem; height: 3rem;
flex-shrink: 0; 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: 640px) { @media (max-width: 1024px) {
display: none; .stats-glass-bar {
padding: 2rem;
}
.stat-value {
font-size: 1.75rem;
} }
} }
/* 响应式微调 */
@media (max-width: 768px) { @media (max-width: 768px) {
.stats-bar-container { .stats-glass-bar {
padding: 1rem; flex-direction: column;
gap: 1.5rem; gap: 2rem;
} }
.stats-number { .stat-separator {
font-size: 1.5rem; width: 50%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
} }
} }
</style> </style>

14
src/views/Jyh/Community/index.vue
View File

@@ -13,7 +13,7 @@
<div class="flex items-center justify-center mb-5"> <div class="flex items-center justify-center mb-5">
<div class="title-arrow-left"></div> <div class="title-arrow-left"></div>
<h2 class="text-[32px] md:text-[40px] font-bold text-[#1a1a1a] px-5 tracking-[0.05em] leading-tight"> <h2 class="text-[32px] md:text-[40px] font-bold text-white px-5 tracking-[0.05em] leading-tight">
开源 · 武汉 开源 · 武汉
</h2> </h2>
@@ -750,10 +750,11 @@ onMounted(() => {
} }
.index-module__NV_5cW__header { .index-module__NV_5cW__header {
width: 1400px;
text-align: center; text-align: center;
margin-bottom: 3rem; padding: 1rem;
padding: 2rem 1rem 1rem;
position: relative; position: relative;
margin: 0 auto 3rem;
} }
.index-module__NV_5cW__floatingElements { .index-module__NV_5cW__floatingElements {
@@ -809,7 +810,6 @@ onMounted(() => {
} }
} }
// 加宽标题区域：移除max-width限制，调整宽度为100%，增加内边距
.index-module__NV_5cW__titleSection { .index-module__NV_5cW__titleSection {
color: #333; color: #333;
z-index: 2; z-index: 2;
@@ -818,10 +818,6 @@ onMounted(() => {
gap: 1rem; gap: 1rem;
display: flex; display: flex;
position: relative; position: relative;
width: 100%;
max-width: 1200px; // 增加最大宽度，适配大屏
margin: 0 auto; // 居中显示
padding: 0 2rem; // 增加左右内边距
} }
.index-module__NV_5cW__titleContainer { .index-module__NV_5cW__titleContainer {
@@ -1084,7 +1080,7 @@ onMounted(() => {
} }
.index-module__NV_5cW__sectionTitle { .index-module__NV_5cW__sectionTitle {
color: #333; //color: #333;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

1408
src/views/Jyh/Community/indexOld.vue Normal file
View File

File diff suppressed because it is too large Load Diff

4
src/views/Jyh/Situation/index.vue
View File

@@ -29,6 +29,7 @@
<transition name="fade-scale" mode="out-in"> <transition name="fade-scale" mode="out-in">
<RiskMonitor v-if="activeTab === 'risk'" /> <RiskMonitor v-if="activeTab === 'risk'" />
<EcoValuePan v-else-if="activeTab === 'eco'" /> <EcoValuePan v-else-if="activeTab === 'eco'" />
<Community v-else-if="activeTab === 'whky'" />
</transition> </transition>
</main> </main>
</div> </div>
@@ -38,13 +39,14 @@
import { ref,onMounted,onUnmounted } from 'vue'; import { ref,onMounted,onUnmounted } from 'vue';
import RiskMonitor from '@/views/Jyh/security/index.vue'; import RiskMonitor from '@/views/Jyh/security/index.vue';
import EcoValuePan from '@/views/Jyh/ecosystem/index.vue'; import EcoValuePan from '@/views/Jyh/ecosystem/index.vue';
import Community from '@/views/Jyh/Community/index.vue';
const activeTab = ref('risk'); const activeTab = ref('risk');
const tabs = [ const tabs = [
{ id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' }, { id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
{ id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' }, { id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' },
{ id: 'whky', label: '开源武汉', icon: 'fas fa-chart-network' }, { id: 'whky', label: '武汉市开源生态建设', icon: 'fas fa-chart-network' },
]; ];
const isFixed = ref(false); const isFixed = ref(false);