Tcode运营平台改造升级-态势感知页面样式优化
This commit is contained in:
fmk1023
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user