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

13
src/router/config/home.ts
View File

@@ -371,19 +371,6 @@ export default [
asideMenu: 'drawer' // 左侧菜单抽屉模式
}
},
{
path: '/security',
name: 'security',
component: () => import('@/views/Jyh/security/index.vue'),
meta: {
title: '全球开源风险态势感知监控中心',
reportTitle: 'Community',
className: 'w-full min-w-full',
hiddenFooter: true,
hasMobile: true,
asideMenu: 'drawer' // 左侧菜单抽屉模式
}
},
{
path: '/ecosystem',
name: 'ecosystem',

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

@@ -1,164 +1,166 @@
<template>
<div class="coc-container">
<!-- 标题区域 -->
<header class="coc-header">
<h1>态势感知指挥中心 (COC)</h1>
<p class="coc-desc">连接全球风险数据与开源生态价值的双模态视图</p>
<div class="situation-main-container">
<header class="header-section">
<div class="title-wrapper">
<h1 class="main-title">态势感知中心</h1>
<div class="sub-title-container">
<div class="title-line left"></div>
<p class="sub-title">连接全球风险数据与开源生态价值的双模态视图</p>
<div class="title-line right"></div>
</div>
</div>
</header>
<!-- 演示视频占位区 -->
<div class="video-placeholder">
<BigScreen />
</div>
<nav class="tabs-nav">
<div
v-for="tab in tabs"
:key="tab.id"
class="tab-item"
:class="{ active: activeTab === tab.id }"
@click="activeTab = tab.id"
>
<span class="tab-icon"><i :class="tab.icon"></i></span>
<span class="tab-text">{{ tab.label }}</span>
<div class="active-bar"></div>
</div>
</nav>
<!-- 双屏入口按钮区 -->
<!-- <div class="screen-entrance">-->
<!-- <div-->
<!-- class="entrance-card"-->
<!-- @click="navigateTo('screen-a')"-->
<!-- >-->
<!-- <div class="card-icon">🖥️</div>-->
<!-- <h3>全球开源风险态势感知监控中心</h3>-->
<!-- </div>-->
<!-- <div-->
<!-- class="entrance-card"-->
<!-- @click="navigateTo('screen-b')"-->
<!-- >-->
<!-- <div class="card-icon">🖥️</div>-->
<!-- <h3>进入开源生态与贡献价值全景</h3>-->
<!-- </div><div-->
<!-- class="entrance-card"-->
<!-- @click="navigateTo('screen-b')"-->
<!-- >-->
<!-- <div class="card-icon">🖥️</div>-->
<!-- <h3>进入开源生态与贡献价值全景</h3>-->
<!-- </div>-->
<!-- </div>-->
<main class="content-wrapper">
<transition name="fade-scale" mode="out-in">
<RiskMonitor v-if="activeTab === 'risk'" />
<EcoValuePan v-else-if="activeTab === 'eco'" />
</transition>
</main>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import BigScreen from './indexold.vue'
import { ref } from 'vue';
import RiskMonitor from '@/views/Jyh/security/index.vue'; // 刚才写的地图大屏
import EcoValuePan from '@/views/Jyh/ecosystem/index.vue'; // 另一个统计面板
const activeTab = ref('risk');
const tabs = [
{ id: 'risk', label: '全球开源风险态势感知监控中心', icon: 'fas fa-shield-virus' },
{ id: 'eco', label: '开源生态与贡献价值全景', icon: 'fas fa-chart-network' }
];
</script>
<style scoped>
/* 全局容器 */
.coc-container {
<style lang="scss" scoped>
.situation-main-container {
min-height: 100vh;
background: #0a0f25;
background: #020617; /* 深蓝黑底色 */
color: #fff;
padding: 2rem 4rem;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
padding: 20px;
display: flex;
flex-direction: column;
}
/* 标题区域 */
.coc-header {
/* 头部标题样式 */
.header-section {
text-align: center;
margin-bottom: 3rem;
margin-bottom: 30px;
.main-title {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: 4px;
background: linear-gradient(to bottom, #fff 30%, #38bdf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.sub-title-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
.sub-title {
font-size: 1rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 2px;
}
.title-line {
width: 100px;
height: 1px;
background: linear-gradient(to right, transparent, #38bdf8, transparent);
&.left { transform: rotate(0deg); }
&.right { transform: rotate(0deg); }
}
}
}
.coc-header h1 {
font-size: 2.8rem;
margin: 0 0 1rem;
color: #38bdf8;
}
.coc-desc {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
/* 视频占位区 */
.video-placeholder {
width: 90%;
height: 850px;
margin: 0 auto 4rem;
/*border: 2px dashed #475569;*/
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.8);
}
.video-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.video-placeholder p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.7);
}
/* 双屏入口区 */
.screen-entrance {
/* 科技 Tabs 样式 */
.tabs-nav {
display: flex;
justify-content: center;
gap: 4rem;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(56, 189, 248, 0.1);
.tab-item {
position: relative;
padding: 15px 30px;
cursor: pointer;
transition: all 0.3s;
color: #64748b;
display: flex;
align-items: center;
gap: 10px;
&:hover {
color: #38bdf8;
}
&.active {
color: #fff;
text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
.active-bar {
width: 100%;
opacity: 1;
}
}
.active-bar {
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 3px;
background: #38bdf8;
box-shadow: 0 0 15px #38bdf8;
transition: all 0.4s ease;
opacity: 0;
}
.tab-text {
font-weight: 600;
font-size: 1.1rem;
}
}
}
/* 入口卡片 */
.entrance-card {
width: 350px;
height: 200px;
background: linear-gradient(135deg, #1e293b, #0f172a);
border-radius: 12px;
border: 1px solid #38bdf8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
.content-wrapper {
flex: 1;
position: relative;
}
.entrance-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
border-color: #60a5fa;
/* 切换动画 */
.fade-scale-enter-active, .fade-scale-leave-active {
transition: all 0.4s ease;
}
.card-icon {
font-size: 3rem;
margin-bottom: 1rem;
.fade-scale-enter-from {
opacity: 0;
transform: scale(0.98);
}
.entrance-card h3 {
font-size: 1.4rem;
margin: 0;
color: #f8fafc;
}
/* 响应式适配 */
@media (max-width: 768px) {
.coc-container {
padding: 1.5rem 2rem;
}
.coc-header h1 {
font-size: 2rem;
}
.video-placeholder {
width: 100%;
height: 200px;
}
.screen-entrance {
gap: 2rem;
}
.entrance-card {
width: 100%;
max-width: 300px;
}
.fade-scale-leave-to {
opacity: 0;
transform: scale(1.02);
}
</style>

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>

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>