Skip to content

R
risk-monitor
提交 10b405e6 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

no message

上级 b4e2f8fc
隐藏空白字符变更
内嵌 并排
正在显示 包含 400 行增加 和 0 行删除
src/views/gjOverView/index.vue 0 → 100644
浏览文件 @ 10b405e6
<!-- GJ概览页 -->
<template>
<div class="content-main">
<!-- 头部按钮 -->
<div class="content-title">
<div v-for="(value, index) in pageList" :key="index" @click="page = value">
<div class="content-title-item" :style="{ background: page === value ? 'rgba(5, 95, 194, 1)' : '' }">
<img class="title-icon" :src="`src/assets/images/icon/gjOverPreview-icon-${index + 1}.png`" />
{{ value }}
</div>
</div>
</div>
<div class="content-box">
<div class="title-text">主要国家科技动向监测</div>
<div class="title-text-small">
提供关于国家科技安全战略、各国科技政策体系、核心科技领域及动态风险的系统性、可视化综合信息视图。
</div>
<div class="box">
<!-- 科技动向速递 -->
<div class="item">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/gjOverPreview-icon-4.png" />
<div class="item-header-text">科技动向速递</div>
<div class="item-header-more">更多 +</div>
</div>
<div class="item-header-divider" />
<div class="item-content">
<div class="item-card" :style="{
background: `url(${technologicalTrends.image}) no-repeat center/cover`,
}">
<div class="item-card-content">
<div class="item-card-title">
<span class="item-card-title-text">
{{ technologicalTrends.imageTitle.title }}
</span>
<span class="item-card-title-time">
{{ technologicalTrends.imageTitle.time }}
</span>
</div>
<div class="item-card-title-txt">
{{ technologicalTrends.imageTitle.txt }}
</div>
</div>
</div>
<div class="item-card-right">
<div style="overflow: auto;height: 400px;">
<div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;">
<div class="list-row">
<div class="item-list-punblier">{{ item.tag1 }}</div>
<div class="item-list-content">{{ item.text }}</div>
<div class="item-list-time">{{ item.time }}</div>
<div class="item-list-punblier">{{ item.tag2 }}</div>
</div>
<div class="item-header-divider" />
</div>
</div>
</div>
</div>
</div>
<!-- 风险信号 -->
<div class="item">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #ce4f51">
风险信号
</div>
</div>
<div class="item-header-divider" />
<div class="warning-wrap">
<div v-for="(item, index) in warningList" :key="index" class="waring-item">
<div class="waring-row">
<div class="waring-status" :style="{
color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED',
}">
{{
item.status === 0
? '特别重大'
: item.status === 1
? '重大风险'
: '一般风险'
}}
</div>
<div class="waring-text">{{ item.title }}</div>
<div class="waring-time">{{ item.time }}</div>
</div>
<div class="item-header-divider" />
</div>
</div>
<div class="item-btn">查看更多</div>
</div>
</div>
<div class="title-text">主要国家科技博弈分析</div>
<div class="title-text-small">
从国家层面科技安全风险产生机理出发，围绕国家博弈“支撑资源—博弈手段—胜负标准”，开展风险监测分析工作
</div>
<MeansAnalysis />
<ResourceAnalysis />
<AdvantagesAnalysis />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import MeansAnalysis from './component/MeansAnalysis.vue';
import ResourceAnalysis from './component/ResourceAnalysis.vue'
import AdvantagesAnalysis from './component/AdvantagesAnalysis.vue'
const page = ref('首页');
const pageList = ['首页', '科技动向感知', '中美博弈概览'];
const technologicalTrends = ref({
image: '/testData/gjOverPreview-data-1.png',
imageTitle: {
title: '欧盟投资73亿欧元推进数字化转型',
time: '一小时前',
txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和',
},
data: [
{ tag1: '科研仪器', text: '欧盟投资73亿欧元推进数字化转型', time: '1小时前', tag2: '新能源' },
{ tag1: '创新主体', text: '美财政部发布拟议规则限制对华网...', time: '3小时前', tag2: '人工智能' },
{ tag1: '科技人才', text: '美NIST发布《美国关键和新兴技术....', time: '昨天', tag2: '量子科技' },
{ tag1: '创新主体', text: '美《开创未来先进计算生态系统:战...', time: '昨天', tag2: '人工智能' },
{ tag1: '科研仪器', text: '欧盟启动初代“数字地球”系统..', time: '昨天', tag2: '量子科技' },
{ tag1: '科研仪器', text: '美NSF投建国家AI可编程云实验室网...', time: '昨天', tag2: '新能源' },
{ tag1: '科研仪器', text: '英启动全球顶尖科技人才引进计划瞄...', time: '昨天', tag2: '新能源' },
{ tag1: '科研仪器', text: '美国家科学基金会致力改进下一代无...', time: '昨天', tag2: '新能源' },
],
});
const warningList = ref([
{ title: '美国大而美法案落地，总统签署通过', time: '一天前', status: 2 },
{ title: '美大而美法案7月1日以51:50的票数胜出', time: '一天前', status: 2 },
{ title: '首次提出“限制外国敏感实体获取补', time: '一天前', status: 1 },
{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 1 },
{ title: '首次提出“限制外国敏感实体获取补偿', time: '一天前', status: 0 },
]);
</script>
<style lang="scss" scoped>
.content-main {
width: 100%;
height: 100%;
overflow: hidden;
font-family: Microsoft YaHei;
}
.content-title {
cursor: pointer;
height: 64px;
color: #fff;
display: flex;
font-size: 20px;
font-weight: 700;
line-height: 64px;
background: url('@/assets/images/bg/header-bg.png');
padding-left: 160px;
.content-title-item {
display: flex;
align-items: center;
padding: 0 16px;
.title-icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
}
}
.content-box {
width: 100%;
height: 100%;
overflow-y: auto;
padding: 0 160px;
.title-text {
margin-top: 56px;
color: rgba(5, 95, 194, 1);
font-size: 32px;
font-weight: 700;
text-align: center;
}
.title-text-small {
margin-top: 8px;
color: rgba(59, 65, 75, 1);
font-size: 20px;
text-align: center;
}
}
.box {
margin-top: 57px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
height: 507px;
}
.item {
height: 500px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
.item-header {
height: 48px;
display: flex;
align-items: center;
.item-header-icon {
width: 20px;
height: 20px;
margin: 0 15px;
}
.item-header-text {
width: 152px;
background: #055fc2;
color: #fff;
font-size: 20px;
line-height: 48px;
text-align: center;
}
.item-header-more {
margin-left: auto;
margin-right: 20px;
color: rgba(59, 65, 75, 1);
font-size: 16px;
cursor: pointer;
}
}
.item-header-divider {
width: 100%;
height: 1px;
background: #eaecee;
}
.item-content {
height: calc(100% - 50px);
display: flex;
padding: 20px;
.item-card {
width: 50%;
position: relative;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.3);
.item-card-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 110px;
background: rgba(0, 0, 0, 0.5);
padding: 6px;
border-radius: 0 0 10px 10px;
.item-card-title {
display: flex;
justify-content: space-between;
align-items: flex-start;
.item-card-title-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 8px;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.item-card-title-time {
white-space: nowrap;
color: rgba(255, 255, 255, 0.65);
font-size: 16px;
}
}
.item-card-title-txt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
font-size: 16px;
}
}
}
.item-card-right {
width: 50%;
padding-left: 10px;
.list-row {
display: flex;
align-items: center;
margin: 10px 0;
height: 40px;
.item-list-punblier {
width: 68px;
height: 22px;
line-height: 22px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
text-align: center;
font-size: 14px;
color: rgba(5, 95, 194, 1);
margin-right: 5px;
}
.item-list-content {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-list-time {
width: 68px;
text-align: right;
color: rgba(132, 136, 142, 1);
}
}
}
}
.warning-wrap {
padding: 30px 23px;
height: 350px;
overflow: hidden;
.waring-row {
display: flex;
align-items: center;
height: 40px;
.waring-status {
width: 40px;
height: 40px;
border-radius: 50%;
padding: 2px;
font-size: 12px;
text-align: center;
}
.waring-text {
flex: 1;
padding: 0 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.waring-time {
width: 68px;
text-align: right;
color: rgba(132, 136, 142, 1);
}
}
}
.item-btn {
width: 460px;
height: 42px;
margin: 0 auto 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
background: rgba(5, 95, 194, 1);
color: #fff;
font-size: 16px;
cursor: pointer;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论