165 lines
3.2 KiB
Vue
165 lines
3.2 KiB
Vue
<template>
|
||
<div class="coc-container">
|
||
<!-- 标题区域 -->
|
||
<header class="coc-header">
|
||
<h1>态势感知指挥中心 (COC)</h1>
|
||
<p class="coc-desc">连接全球风险数据与开源生态价值的双模态视图</p>
|
||
</header>
|
||
|
||
<!-- 演示视频占位区 -->
|
||
<div class="video-placeholder">
|
||
<BigScreen />
|
||
</div>
|
||
|
||
<!-- 双屏入口按钮区 -->
|
||
<!-- <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>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useRouter } from 'vue-router'
|
||
import BigScreen from './indexold.vue'
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 全局容器 */
|
||
.coc-container {
|
||
min-height: 100vh;
|
||
background: #0a0f25;
|
||
color: #fff;
|
||
padding: 2rem 4rem;
|
||
box-sizing: border-box;
|
||
font-family: "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
/* 标题区域 */
|
||
.coc-header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.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 {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 4rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* 入口卡片 */
|
||
.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);
|
||
}
|
||
|
||
.entrance-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 0 30px rgba(56, 189, 248, 0.4);
|
||
border-color: #60a5fa;
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style>
|