Skip to content

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

科技人物观点-概览页(地图样式待修改，部分按钮待添加)

上级 11282794
显示空白字符变更
内嵌 并排
正在显示 包含 1882 行增加 和 645 行删除
src/views/technologyFigures/component/PersonNewsCard.vue 0 → 100644
浏览文件 @ 0dac5ad6
<!-- PersonNewsCard.vue -->
<template>
<div class="person-news-card">
<!-- 左侧：头像 -->
<div class="avatar">
<img :src="person.image_url" alt="人物头像" />
</div>
<!-- 事件列表 -->
<div class="events">
<!-- 头部区域 -->
<div class="header">
<!-- 右侧：信息 -->
<div class="info" style="display: flex; width: 100%; justify-content: space-between">
<div>
<h2>{{ person.name }}</h2>
<p class="title">{{ person.title }}</p>
</div>
<div class="source-tag">{{ source }}</div>
</div>
</div>
<div class="line"></div>
<div style="height: 289px; width: 688px">
<el-timeline style="margin-top: 14px">
<el-timeline-item placement="top" v-for="(activity, index) in events" :key="index" type="primary"
:hollow="true">
<template #dot>
<div style="
display: flex;
justify-content: space-between;
width: 688px;
text-align: center;
align-items: center;
margin-bottom: 12px;
">
<div style="display: flex">
<img src="../assets/images/dot1.png" alt="" style="width: 10px; height: 10px" />
<div style="
margin-left: 16px;
margin-top: -6px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-align: left;
">
{{ activity.date }}
</div>
</div>
<img src="../assets/images/dot2.png" alt="" style="width: 20px; height: 18px" />
</div>
</template>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
<!-- <div v-for="(event, index) in events" :key="index" class="event-item">
<div class="event-date">{{ event.date }}</div>
<div class="event-content">
<span class="icon">{{ event.icon }}</span>
<span>{{ event.content }}</span>
</div>
</div> -->
</div>
</div>
</template>
<script>
// 导入数据
import data from "../json/personUpdates"; // 假设你把 JSON 存在 data.json 文件中
export default {
name: "PersonNewsCard",
data() {
return {
person: data.person,
events: data.events,
source: data.source
};
}
};
</script>
<style scoped>
.person-news-card {
width: 1016px;
height: 354px;
display: flex;
}
.header {
display: flex;
height: 73px;
}
.avatar {
/* 容器 552 */
width: 266px;
height: 352px;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info h2 {
color: rgba(5, 95, 194, 1);
margin: 0;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.info .title {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
margin-top: 4px;
}
.source-tag {
/* 数据展示/Tag标签/亮色/蓝 */
width: 100px;
height: 24px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px 6px 1px 6px;
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
.line {
/* 矩形 277 */
width: 686px;
height: 1px;
background: rgba(234, 236, 238, 1);
}
.events {
margin-left: 24px;
width: 710px;
}
.event-item {
margin-bottom: 16px;
padding: 12px;
background-color: #fff;
border-left: 4px solid #007bff;
border-radius: 6px;
position: relative;
}
.event-date {
font-size: 0.85em;
color: #999;
margin-bottom: 8px;
display: inline-block;
}
.event-content {
display: flex;
align-items: flex-start;
line-height: 1.5;
}
.event-content .icon {
margin-right: 8px;
font-size: 1.2em;
color: #ff6b00;
vertical-align: middle;
}
.event-content span {
color: #333;
font-size: 0.95em;
}
:deep(.el-timeline) {
max-width: 688px !important;
padding: 0;
}
:deep(.el-timeline-item__wrapper) {
padding-left: 16px;
}
:deep(.el-timeline-item__timestamp.is-top) {
margin-bottom: 0;
padding-top: 0;
height: 12px;
}
:deep(.el-timeline-item__content) {
margin-left: 10px;
}
:deep(.el-timeline-item__wrapper) {
padding-top: 6px;
top: 0;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
</style>
src/views/technologyFigures/component/PersonTable.vue 0 → 100644
浏览文件 @ 0dac5ad6
<template>
<div class="person-table-container">
<!-- 表头 -->
<div class="table-header">
<div class="header-item" style="width: 332px;padding-left: 78px;">人物</div>
<div class="header-item" style="width: 197px;">涉华观点次数</div>
<div class="header-item" style="width: 209px;">主流媒体引用次数</div>
</div>
<!-- 表格内容 -->
<div class="table-body">
<div class="table-row" v-for="(item, index) in personList" :key="index">
<!-- 人物信息列 -->
<div class="row-col col-person">
<div style="margin: 7px 12px 7px 24px">
<img :src="item.avatar" class="avatar" alt="avatar" />
<div class="person-tags">
<div class="person-tag-bg" v-for="(tag, tIdx) in item.tags" :key="tIdx">
<img :src="'/public/icon/header-icon' + tag + '.png'" class="tag-icon" alt="tag" />
</div>
</div>
</div>
<div class="person-info">
<div class="person-name">{{ item.name }}</div>
<div class="person-position">{{ item.position }}</div>
</div>
</div>
<!-- 涉华观点次数列 -->
<div class="row-col col-count">
<el-progress :percentage="getProgress(item.mediaQuoteCount)" :show-text="false"
style="/* 矩形 244 */ width: 82px; height: 8px" :status="getStatus(getProgress(item.mediaQuoteCount))" />
<span class="count-text">{{ item.mediaQuoteCount }}次</span>
</div>
<!-- 媒体引用次数列 -->
<div class="row-col col-count">
<el-progress :percentage="getProgress(item.mediaQuoteCount)" :show-text="false"
style="/* 矩形 244 */ width: 82px; height: 8px" :status="getStatus(getProgress(item.mediaQuoteCount))" />
<span class="count-text">{{ item.mediaQuoteCount }}次</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import personData from "../json/personData.json"; // 引入JSON数据
const personList = ref(personData);
// 进度条状态
const getStatus = _percent => {
const percent = _percent;
if (percent >= 90) {
return "exception";
} else if (percent >= 50) {
return "warning";
} else {
return "success";
}
};
// 计算进度条宽度（基于最大值的百分比）
const getMaxCount = () => {
const counts = personList.value.flatMap(item => [item.chinaRelatedCount, item.mediaQuoteCount]);
return Math.max(...counts);
};
const getProgress = count => (count / getMaxCount()) * 100;
</script>
<style scoped>
.person-table-container {
width: 738px;
height: 360px;
margin: 24px 27px;
font-family: "Microsoft YaHei", sans-serif;
}
/* 表头样式 */
.table-header {
/* 容器 47 */
display: flex;
width: 738px;
height: 60px;
box-sizing: border-box;
border-top: 1px solid rgba(230, 231, 232, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 22px;
letter-spacing: 0px;
align-items: center;
text-align: center;
}
.header-item {
/* flex: 1; */
text-align: left;
}
/* 表格内容样式 */
.table-body {
/* background-color: #fff; */
}
.table-row {
display: flex;
align-items: center;
padding: 0;
/* 容器 92 */
width: 738px;
height: 60px;
}
.table-body .table-row:nth-of-type(odd) {
background-color: rgba(247, 248, 249, 1);
}
.table-body .table-row:nth-of-type(even) {
background-color: #ffffff;
}
.row-col {
flex: 1;
display: flex;
align-items: center;
}
/* 人物列样式 */
.col-person {
align-items: flex-start;
}
.avatar {
/* 椭圆形 */
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
.person-info {
display: flex;
flex-direction: column;
}
.person-name {
margin-top: 5px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.person-position {
width: 253px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.person-tags {
display: flex;
margin-top: -20px;
width: 42px;
text-align: center;
}
.person-tag-bg {
/* 椭圆 6 */
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.tag-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
/* 次数列样式 */
.col-count {
gap: 11px;
}
.progress-bar {
height: 8px;
border-radius: 4px;
background-color: #ccc;
min-width: 20px;
}
.count-text {
font-size: 14px;
color: #333;
white-space: nowrap;
}
</style>
src/views/technologyFigures/component/SourceLibrary.vue 0 → 100644
浏览文件 @ 0dac5ad6
<!-- SourceLibrary.vue -->
<template>
<div class="source-library-container">
<div class="source-library-grid">
<div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card">
<div class="source-library-avatar-wrapper">
<img :src="item.avatar" alt="" class="source-library-avatar" />
</div>
<div class="source-library-text-content">
<div style=" width: 240px;">
<h3 class="source-library-name">{{ item.name }}</h3>
<p class="source-library-title">{{ item.title }}</p>
<p class="source-library-tag" :style="{
background: item.colorArray[2],
color: item.colorArray[0],
borderColor: item.colorArray[1],
}">{{ item.tag }}</p>
</div>
</div>
</div>
</div>
<div class="page">
<div class="count">共1205项调查</div>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next"
background @current-change="handlePageChange" />
</div>
</div>
</template>
<script setup>
// 导入数据（建议使用更具语义的变量名）
import sourceLibraryData from '../json/source.json';
import { ref } from 'vue'
const total = ref(1205);
const pageSize = ref(121);
const currentPage = ref(5);
const handlePageChange = p => {
currentPage.value = p;
};
</script>
<style scoped>
.source-library-container {
width: 1530px;
margin: 0;
}
.source-library-grid {
width: 1600px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px 16px;
}
.source-library-card {
width: 388px;
height: 160px;
box-sizing: border-box;
display: flex;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---10, 10px);
padding: 20px 18px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
}
.source-library-card:hover {
transform: translateY(-2px);
}
.source-library-avatar-wrapper {
flex-shrink: 0;
margin-right: 18px;
}
.source-library-avatar {
/* 椭圆 142 */
width: 88px;
height: 88px;
border-radius: 50%;
}
.source-library-text-content {
width: 656px;
flex: 1;
}
.source-library-name {
color: rgba(59, 65, 75, 1);
margin: 0;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.source-library-title {
width: 240px;
height: 48px;
color: rgba(59, 65, 75, 1);
margin: 11px 0 14px 0;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.source-library-tag {
/* width: 72px; */
height: 22px;
/* 自动布局 */
display: inline-block;
/* 关键：把块级盒子变成行内块 */
align-items: center;
padding: 1px 8px 1px 8px;
box-sizing: border-box;
border: 1px solid rgba(255, 229, 143, 1);
border-radius: 4px;
background: rgba(255, 251, 230, 1);
color: rgba(22, 119, 255, 1);
margin: 0;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
.page {
width: 1221px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 36px 0 0 0;
padding-left: 11px;
.count {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
</style>
\ No newline at end of file
src/views/technologyFigures/component/TimelineMap.vue 0 → 100644
浏览文件 @ 0dac5ad6
<template>
<div class="timeline-map">
<!-- 地图容器 -->
<div ref="chartRef" style="width: 100%; height: 600px;"></div>
<!-- 控制栏 -->
<div class="controls" style="margin-top: 16px; text-align: center;">
<button @click="play" :disabled="isPlaying">播放</button>
<button @click="pause" :disabled="!isPlaying">暂停</button>
<span style="margin: 0 16px;">速度：</span>
<input type="range" min="0.5" max="3" step="0.5" v-model.number="speed" />
<span>{{ speed }}x</span>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GeoComponent } from 'echarts/components';
import { ScatterChart } from 'echarts/charts';
import { TooltipComponent } from 'echarts/components';
// 注册必要组件
echarts.use([CanvasRenderer, GeoComponent, ScatterChart, TooltipComponent]);
// 导入中国地图 GeoJSON
import chinaJson from '@/assets/json/China.json';
// 事件数据（模拟）
const events = [
{
date: '2024-09-23',
desc: '在北京会见科技企业代表',
avatar: 'https://via.placeholder.com/32?text=BJ',
lng: 116.4074,
lat: 39.9042 // 北京
},
{
date: '2024-09-24',
desc: '在上海考察集成电路产业',
avatar: 'https://via.placeholder.com/32?text=SH',
lng: 121.4737,
lat: 31.2304 // 上海
},
{
date: '2024-09-25',
desc: '在深圳调研人工智能发展',
avatar: 'https://via.placeholder.com/32?text=SZ',
lng: 114.0579,
lat: 22.5431 // 深圳
},
{
date: '2024-09-26',
desc: '在成都出席科技创新论坛',
avatar: 'https://via.placeholder.com/32?text=CD',
lng: 104.0665,
lat: 30.5728 // 成都
}
];
// 响应式状态
const chartRef = ref(null);
const currentIndex = ref(0);
const isPlaying = ref(false);
const speed = ref(1);
let intervalId = null;
let myChart = null;
// 初始化图表
onMounted(() => {
// 注册中国地图（关键！）
echarts.registerMap('China', chinaJson);
myChart = echarts.init(chartRef.value);
const option = getOption();
myChart.setOption(option);
});
onUnmounted(() => {
if (intervalId) clearInterval(intervalId);
if (myChart) myChart.dispose();
});
// 获取 ECharts 配置
function getOption() {
return {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#ccc',
borderRadius: 6,
textStyle: { color: '#333', fontSize: 12 },
formatter(params) {
const data = params.data;
return `
<div style="padding:8px; line-height:1.4;">
<img src="${data.avatar}" width="24" height="24" style="border-radius:50%; vertical-align:middle; margin-right:6px;" />
<strong>${data.date}</strong><br/>
${data.desc}
</div>
`;
}
},
geo: {
map: 'China', // 使用注册的地图名
roam: true,
zoom: 1.2,
center: [105, 35], // 中国大致中心
label: {
show: false
},
itemStyle: {
areaColor: '#f0f9ff',
borderColor: '#a0cfff'
},
emphasis: {
itemStyle: {
areaColor: '#e6f7ff'
}
}
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
data: getCurrentData(),
symbolSize: 12,
itemStyle: {
color: '#1890ff'
},
label: {
show: false
}
}
]
};
}
// 获取当前要显示的数据
function getCurrentData() {
return [events[currentIndex.value]];
}
// 播放
function play() {
if (isPlaying.value) return;
isPlaying.value = true;
intervalId = setInterval(() => {
currentIndex.value = (currentIndex.value + 1) % events.length;
myChart.setOption({
series: [{ data: getCurrentData() }]
});
}, 1000 / speed.value);
}
// 暂停
function pause() {
if (!isPlaying.value) return;
isPlaying.value = false;
clearInterval(intervalId);
intervalId = null;
}
// 监听速度变化
watch(speed, () => {
if (isPlaying.value) {
pause();
play();
}
});
</script>
<style scoped>
.controls button {
margin: 0 8px;
padding: 6px 12px;
font-size: 14px;
}
</style>
\ No newline at end of file
src/views/technologyFigures/component/speechStance.vue 0 → 100644
浏览文件 @ 0dac5ad6
<!-- SpeechStance.vue -->
<template>
<div class="speech-stance-container">
<div class="speech-stance-grid">
<div v-for="(item, index) in speechStance" :key="index" class="speech-stance-card">
<div class="speech-stance-avatar-wrapper">
<img :src="item.avatar" alt="" class="speech-stance-avatar" />
</div>
<div class="speech-stance-text-content">
<div style="display: flex; width: 683px;">
<h3 class="speech-stance-name">{{ item.name }}</h3>
<p class="speech-stance-title">{{ item.title }}</p>
</div>
<p class="speech-stance-content">{{ item.content }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
// 导入数据
import speechStance from '../json/speechStance.json';
</script>
<style scoped>
.speech-stance-container {
width: 1530px;
/* max-width: 900px; */
margin: 0 auto;
margin: 5px 35px;
}
.speech-stance-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 9px;
}
/* 响应式：小屏变一列 */
@media (max-width: 768px) {
.speech-stance-grid {
grid-template-columns: 1fr;
}
}
.speech-stance-card {
/* 容器 553 */
width: 768px;
height: 50px;
display: flex;
}
.speech-stance-avatar-wrapper {
flex-shrink: 0;
}
.speech-stance-avatar {
/* 椭圆 141 */
width: 48px;
height: 48px;
border-radius: 50%;
}
.speech-stance-text-content {
width: 656px;
flex: 1;
margin-left: 13px;
}
.speech-stance-name {
color: rgba(34, 41, 52, 1);
margin: 0;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.speech-stance-title {
color: rgba(95, 101, 108, 1);
margin: 0;
margin-left: 12px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.speech-stance-content {
color: rgba(95, 101, 108, 1);
margin: 0;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 隐藏溢出内容 */
text-overflow: ellipsis;
/* 溢出部分显示省略号 */
}
</style>
\ No newline at end of file
src/views/technologyFigures/index.vue
浏览文件 @ 0dac5ad6
...@@ -84,7 +84,9 @@ ...@@ -84,7 +84,9 @@
{{ "查看详情 >" }} {{ "查看详情 >" }}
</div> </div>
</div> </div>
<div class="box1-main"></div> <div class="box1-main">
<PersonNewsCard />
</div>
</div> </div>
<div class="box2"> <div class="box2">
<div class="box2-header"> <div class="box2-header">
...@@ -98,13 +100,10 @@ ...@@ -98,13 +100,10 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index"> <div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div <div class="item-left" :class="{
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险', itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险' itemLeftStatus2: item.status === '重大风险'
}" }">
>
{{ item.status }} {{ item.status }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -131,19 +130,48 @@ ...@@ -131,19 +130,48 @@
<div class="box3-header-icon"> <div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" /> <img src="./assets/images/header-news.png" alt="" />
</div> </div>
<div class="box3-header-title">{{ "人物动向" }}</div> <!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
<div class="header-title"
style="width: 1560px;display: flex;justify-content: space-between;margin-top: 10px;">
<div class="box3-header-title">
{{ "人物动向" }}
</div>
<div style="display: flex;gap: 8px;margin-right: 12px;">
<div v-for="value in peoDateList"
:class="peoDate !== value ? 'btn-box-samll' : 'btn-box-select-samll'">
{{ value }}
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="box3-main"></div> <div class="box3-main">
<TimelineMap />
</div>
</div> </div>
<div class="box4"> <div class="box4">
<div class="box4-header"> <div class="box4-header">
<div class="header-icon"> <div class="header-icon">
<img src="./assets/images/header-message.png" alt="" /> <img src="./assets/images/header-message.png" alt="" />
</div> </div>
<div class="header-title">{{ "重要人物言论及立场" }}</div> <div class="header-title"
style="width: 1595px;display: flex;justify-content: space-between;margin-top: 10px;">
<div>
{{ "重要人物言论及立场" }}
</div>
<div style="display: flex;gap: 8px;margin-right: 12px;">
<div v-for="value in fields"
:class="fieldSelect !== value ? 'btn-box-samll' : 'btn-box-select-samll'">
{{ value }}
</div>
</div>
</div>
</div>
<div class="box4-main">
<SpeechStance />
</div> </div>
<div class="box4-main"></div>
</div> </div>
</div> </div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader> <DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
...@@ -151,11 +179,26 @@ ...@@ -151,11 +179,26 @@
<div class="box5"> <div class="box5">
<div class="box5-header"> <div class="box5-header">
<div class="box5-header-left"> <div class="box5-header-left">
<div class="box5-header-icon"> <div class="box5-header-icon" style="display: flex ">
<img src="./assets/images/box3-header-icon.png" alt="" /> <img src="./assets/images/box3-header-icon.png" alt="" style="/* 云端,云,云服务 1 */
</div> width: 22px;
height: 22px;" />
<div class="box5-header-title">{{ "科技人物观点词云" }}</div> <div class="box5-header-title">{{ "科技人物观点词云" }}</div>
</div> </div>
<div>
<div style="display: flex">
<el-select v-model="wordCloudvalue" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="wordCloudfield" class="select">
<el-option v-for="item in fieldSelect" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</div>
</div>
</div> </div>
<div class="box5-main" id="box5Chart"></div> <div class="box5-main" id="box5Chart"></div>
</div> </div>
...@@ -190,7 +233,9 @@ ...@@ -190,7 +233,9 @@
<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div> <div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
</div> </div>
</div> </div>
<div class="box8-main"></div> <div class="box8-main">
<PersonTable />
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -199,18 +244,15 @@ ...@@ -199,18 +244,15 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader> <DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-box">
<div <div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
class="btn" :key="index" @click="handleClickCate(cate)">
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }} {{ cate }}
</div> </div>
</div> </div>
</div> </div>
<div class="home-main-footer-main"></div> <div class="home-main-footer-main">
<SourceLibrary />
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -218,211 +260,172 @@ ...@@ -218,211 +260,172 @@
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
// 图表工具函数（仅保留用到的）
import getWordCloudChart from "./utils/worldCloudChart";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart"; import getDonutChart from './utils/donutChart.js';
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart"; // 组件
import getBarChart from "./utils/barChart"; import TimelineMap from "./component/TimelineMap.vue";
import PersonNewsCard from './component/PersonNewsCard.vue';
import SpeechStance from "./component/speechStance.vue";
import PersonTable from './component/PersonTable.vue';
import SourceLibrary from './component/SourceLibrary.vue';
const router = useRouter();
// 搜索输入
const input = ref("");
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({ path: "/overview" });
path: "/overview"
});
}; };
const handleClickToDetail = id => { // 查看详情
const handleClickToDetail = (id) => {
const route = router.resolve({ const route = router.resolve({
path: "/marketAccessLayout", path: "/marketAccessLayout",
query: { query: { id }
id: id
}
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 风险信号 // 风险信号
const warningList = ref([ const warningList = ref([
{ { title: "关于对中华人民共和国合成阿片类药物供应链...", time: "一天前", status: "特别重大" },
title: "关于对中华人民共和国合成阿片类药物供应链...", { title: "关于调整汽车及汽车零部件进口的公告", time: "一天前", status: "特别重大" },
time: "一天前", { title: "关于调整钢铁进口的公告", time: "一天前", status: "重大风险" },
status: "特别重大" { title: "关于使用互惠关税规范进口以纠正导致大规模...", time: "一天前", status: "重大风险" },
}, { title: "关于修订对中华人民共和国低价值进口商品适...", time: "一天前", status: "一般风险" }
{
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大"
},
{
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险"
},
{
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险"
},
{
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险"
}
]); ]);
//人物动向
const peoDate = ref('今天')
const peoDateList = [
"今天",
"昨天",
"近三天",
"本周",
"本月"
]
//重要人物言论及立场选择按钮
const fieldSelect = ref('全部领域')
const fields = ["全部领域", "集成电路", "能源", "生物科技", "量子科技", "人工智能", "通信网络", "航空航天", "海洋", "新材料", "先进制造"];
// 资源库分类
const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]); const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]);
const activeCate = ref("全部人物"); const activeCate = ref("全部人物");
const activeHylyId = ref("");
const handleClickCate = cate => {
console.log(cate);
activeCate.value = cate.hylymc; const handleClickCate = (cate) => {
activeHylyId.value = cate.hylyid; activeCate.value = cate;
handleGetBillsByType();
}; };
const chart1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "337调查",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
},
{
name: "301调查",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
},
{
name: "232调查",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
}
]
});
// 查看更多风险信号 // 查看更多风险信号
const handleToMoreRiskSignal = () => { const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal"); const route = router.resolve("/riskSignal");
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
const box7Chart1Data = ref([ // === 图表数据 ===
{
name: "337调查",
data: [
{ name: "北京", value: 10, coord: [115.46, 39.92] },
{ name: "上海", value: 9, coord: [120.48, 31.22] },
{ name: "广东", value: 15, coord: [114.23, 23.16] },
{ name: "江苏", value: 30, coord: [117.78, 32.04] },
{ name: "浙江", value: 20, coord: [121.19, 30.26] },
{ name: "四川", value: 4, coord: [105.06, 30.67] },
{ name: "陕西", value: 1, coord: [106.95, 34.27] },
{ name: "辽宁", value: 3, coord: [122.38, 41.8] }
]
},
{
name: "301调查",
data: [
{ name: "北京", value: 10, coord: [112.48, 38.95] },
{ name: "上海", value: 9, coord: [121.5, 33.25] },
{ name: "广东", value: 15, coord: [118.25, 21.18] },
{ name: "江苏", value: 30, coord: [115.8, 34.06] },
{ name: "浙江", value: 20, coord: [124.21, 31.28] },
{ name: "四川", value: 4, coord: [114.08, 32.69] },
{ name: "陕西", value: 1, coord: [109.97, 30.29] },
{ name: "辽宁", value: 3, coord: [113.4, 40.82] }
]
},
{
name: "232调查",
data: [
{ name: "北京", value: 10, coord: [116.44, 39.9] },
{ name: "上海", value: 9, coord: [121.46, 31.2] },
{ name: "广东", value: 15, coord: [113.21, 23.14] },
{ name: "江苏", value: 30, coord: [118.76, 32.02] },
{ name: "浙江", value: 20, coord: [120.19, 30.24] },
{ name: "四川", value: 4, coord: [104.04, 30.67] },
{ name: "陕西", value: 1, coord: [108.95, 34.25] },
{ name: "辽宁", value: 3, coord: [123.36, 41.8] }
]
}
]);
const box7Chart2Data = ref([ // 词云数据
{ const wordCloudData = ref([
name: "广东省", { "name": "人工智能 (AI)", "value": 100 },
value: 42 { "name": "进行可再生能源税收减免", "value": 85 },
}, { "name": "减少燃料对外依赖", "value": 80 },
{ { "name": "评估中美现代化技术", "value": 75 },
name: "上海市", { "name": "应对中国制造2025战略", "value": 70 },
value: 35 { "name": "加强供应链风险管理", "value": 68 },
}, { "name": "补贴和税收抵免", "value": 65 },
{ { "name": "评估中美能源技术", "value": 60 },
name: "浙江省", { "name": "实施能源税收延期", "value": 58 },
value: 28 { "name": "投资基础设施", "value": 55 },
}, { "name": "禁止资助中国能源项目", "value": 53 },
{ { "name": "限制采购中国产电池", "value": 50 },
name: "江苏省", { "name": "加强美国在核能领域得到领导力", "value": 48 },
value: 19 { "name": "技术出口限制", "value": 45 },
}, { "name": "出口管制与投资审查", "value": 42 },
{ { "name": "供应链调整", "value": 40 },
name: "北京市", { "name": "左岸外包", "value": 38 },
value: 15 { "name": "空域主权与安全", "value": 36 },
}, { "name": "抵制外国人才争夺", "value": 34 },
{ { "name": "无人机先进空中交通", "value": 32 },
name: "四川省", { "name": "能源与基础设施", "value": 30 }
value: 12 ]);
}, const wordCloudfield = ref('全部领域')
const wordCloudvalue = ref("近十年");
const options = [
{ {
name: "山东省", value: "近十年",
value: 11 label: "近十年"
}, },
{ {
name: "福建省", value: "近五年",
value: 8 label: "近五年"
} }
]); ];
// 领域趋势数据
const box6Chart = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{ name: "人工智能", value: [150, 70, 80, 90, 75, 85, 100, 140, 130, 150, 190, 170] },
{ name: "集成电路", value: [70, 85, 120, 115, 100, 120, 160, 160, 160, 160, 165, 175] },
{ name: "量子科技", value: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 15] },
{ name: "生物科技", value: [5, 0, 10, 15, 18, 20, 25, 30, 30, 35, 40, 45] },
{ name: "通信网络", value: [40, 35, 45, 48, 45, 45, 50, 55, 50, 50, 55, 50] },
{ name: "能源", value: [90, 70, 75, 70, 65, 75, 80, 80, 75, 85, 80, 70] }
]
});
onMounted(async () => { // 科技人物类型
let chart1 = getMultiLineChart( const chart7Data = ref({
chart1Data.value.title, name: ['国会议员', '行政主官', '科技领袖', '顶尖科学家', '其他'],
chart1Data.value.data[0].value, value: [482, 41, 83, 201, 25]
chart1Data.value.data[1].value, });
chart1Data.value.data[2].value
);
setChart(chart1, "chart1");
let chart2 = getRadarChart(); onMounted(() => {
setChart(chart2, "chart2"); // 词云
const wordCloudChart = getWordCloudChart(wordCloudData.value);
setChart(wordCloudChart, "box5Chart");
let box7Chart1 = getMapChart(box7Chart1Data.value); // 领域趋势
setChart(box7Chart1, "box7Chart1"); const chart6 = getMultiLineChart(
box6Chart.value.title,
...box6Chart.value.data.map(d => d.value)
);
setChart(chart6, "box6Chart");
let box7Chart2 = getBarChart(box7Chart2Data.value); // 人物类型
setChart(box7Chart2, "box7Chart2"); const chart7 = getDonutChart(chart7Data.value.name, chart7Data.value.value, true);
setChart(chart7, "box7Chart");
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 样式保持不变（已无冗余） */
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
} }
.home-wrapper { .home-wrapper {
.home-main { .home-main {
width: 1920px; width: 1920px;
margin: 0 auto; margin: 0 auto;
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-repeat: no-repeat;
background-color: #fff;
background-size: contain;
.home-main-header { .home-main-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.home-main-header-top { .home-main-header-top {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
...@@ -439,16 +442,20 @@ onMounted(async () => { ...@@ -439,16 +442,20 @@ onMounted(async () => {
color: #fff; color: #fff;
padding-left: 160px; padding-left: 160px;
display: flex; display: flex;
.header-item { .header-item {
margin: 0 3px; margin: 0 3px;
} }
.back-item { .back-item {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #ccc; color: #ccc;
} }
} }
} }
.home-main-header-center { .home-main-header-center {
margin-top: 48px; margin-top: 48px;
width: 960px; width: 960px;
...@@ -460,9 +467,11 @@ onMounted(async () => { ...@@ -460,9 +467,11 @@ onMounted(async () => {
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
} }
.search { .search {
position: absolute; position: absolute;
right: -1px; right: -1px;
...@@ -475,14 +484,17 @@ onMounted(async () => { ...@@ -475,14 +484,17 @@ onMounted(async () => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
...@@ -494,6 +506,7 @@ onMounted(async () => { ...@@ -494,6 +506,7 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-footer { .home-main-header-footer {
margin-top: 38px; margin-top: 38px;
width: 688px; width: 688px;
...@@ -501,9 +514,11 @@ onMounted(async () => { ...@@ -501,9 +514,11 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.home-main-header-footer-item { .home-main-header-footer-item {
padding: 0 10px; padding: 0 10px;
text-align: center; text-align: center;
.item-top { .item-top {
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
...@@ -512,6 +527,7 @@ onMounted(async () => { ...@@ -512,6 +527,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.item-footer { .item-footer {
margin-top: 10px; margin-top: 10px;
height: 30px; height: 30px;
...@@ -523,12 +539,14 @@ onMounted(async () => { ...@@ -523,12 +539,14 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-btn-box { .home-main-header-btn-box {
width: 688px; width: 688px;
margin: 0 auto; margin: 0 auto;
margin-top: 39px; margin-top: 39px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -541,9 +559,11 @@ onMounted(async () => { ...@@ -541,9 +559,11 @@ onMounted(async () => {
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
.btn-text { .btn-text {
width: 80px; width: 80px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -554,12 +574,14 @@ onMounted(async () => { ...@@ -554,12 +574,14 @@ onMounted(async () => {
margin-left: 36px; margin-left: 36px;
text-align: center; text-align: center;
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 19px; right: 19px;
width: 6px; width: 6px;
height: 12px; height: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -571,11 +593,13 @@ onMounted(async () => { ...@@ -571,11 +593,13 @@ onMounted(async () => {
.home-main-center { .home-main-center {
margin-top: 34px; margin-top: 34px;
.center-top { .center-top {
height: 450px; height: 450px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
.box1 { .box1 {
width: 1064px; width: 1064px;
height: 450px; height: 450px;
...@@ -583,6 +607,7 @@ onMounted(async () => { ...@@ -583,6 +607,7 @@ onMounted(async () => {
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.box1-left { .box1-left {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -590,11 +615,13 @@ onMounted(async () => { ...@@ -590,11 +615,13 @@ onMounted(async () => {
width: 24px; width: 24px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box1-right { .box1-right {
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -602,11 +629,13 @@ onMounted(async () => { ...@@ -602,11 +629,13 @@ onMounted(async () => {
width: 24px; width: 24px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box1-header { .box1-header {
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -614,17 +643,21 @@ onMounted(async () => { ...@@ -614,17 +643,21 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding-left: 31px; padding-left: 31px;
padding-right: 41px; padding-right: 41px;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-top: 19px; margin-top: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
width: 152px; width: 152px;
height: 53px; height: 53px;
...@@ -638,6 +671,7 @@ onMounted(async () => { ...@@ -638,6 +671,7 @@ onMounted(async () => {
text-align: center; text-align: center;
} }
} }
.box1-header-right { .box1-header-right {
margin-top: 19px; margin-top: 19px;
height: 16px; height: 16px;
...@@ -649,39 +683,46 @@ onMounted(async () => { ...@@ -649,39 +683,46 @@ onMounted(async () => {
cursor: pointer; cursor: pointer;
} }
} }
.box1-main { .box1-main {
width: 1064px; width: 1009px;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 28px;
margin-left: 31px; margin-left: 40px;
} }
} }
.box2 { .box2 {
width: 521px; width: 521px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 33px; margin-left: 33px;
margin-top: 13px; margin-top: 13px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
display: flex; display: flex;
width: 148px; width: 148px;
height: 48px; height: 48px;
background: rgba(206, 79, 81, 1); background: rgba(206, 79, 81, 1);
margin-left: 25px; margin-left: 25px;
.text { .text {
margin-left: 15px; margin-left: 15px;
margin-top: 13px; margin-top: 13px;
...@@ -692,6 +733,7 @@ onMounted(async () => { ...@@ -692,6 +733,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.num { .num {
width: 24px; width: 24px;
height: 20px; height: 20px;
...@@ -706,38 +748,34 @@ onMounted(async () => { ...@@ -706,38 +748,34 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
} }
.more {
margin-top: 16px;
margin-left: 200px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
} }
.box2-main { .box2-main {
margin-top: 2px; margin-top: 2px;
height: 330px; height: 330px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
margin-left: 23px; margin-left: 23px;
height: 47px; height: 47px;
width: 464px; width: 464px;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important; color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important; background: rgba(246, 255, 237, 1) !important;
} }
.itemLeftStatus2 { .itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important; color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important; background: rgba(255, 247, 230, 1) !important;
} }
.item-left { .item-left {
margin-top: 4px; margin-top: 4px;
margin-left: 2px; margin-left: 2px;
...@@ -754,12 +792,14 @@ onMounted(async () => { ...@@ -754,12 +792,14 @@ onMounted(async () => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.item-right { .item-right {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
height: 47px; height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
width: 348px; width: 348px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -768,6 +808,7 @@ onMounted(async () => { ...@@ -768,6 +808,7 @@ onMounted(async () => {
font-weight: 400; font-weight: 400;
line-height: 47px; line-height: 47px;
} }
.time { .time {
margin-left: 10px; margin-left: 10px;
line-height: 47px; line-height: 47px;
...@@ -779,6 +820,7 @@ onMounted(async () => { ...@@ -779,6 +820,7 @@ onMounted(async () => {
} }
} }
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 30px; left: 30px;
...@@ -793,14 +835,17 @@ onMounted(async () => { ...@@ -793,14 +835,17 @@ onMounted(async () => {
background: var(--color-main-active); background: var(--color-main-active);
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -811,16 +856,19 @@ onMounted(async () => { ...@@ -811,16 +856,19 @@ onMounted(async () => {
} }
} }
} }
.center-center { .center-center {
width: 1600px; width: 1600px;
margin: 0 auto; margin: 0 auto;
margin-top: 21px; margin-top: 21px;
.box3 { .box3 {
width: 1600px; width: 1600px;
height: 640px; height: 640px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box3-header { .box3-header {
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -829,20 +877,24 @@ onMounted(async () => { ...@@ -829,20 +877,24 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.box3-header-left { .box3-header-left {
display: flex; display: flex;
.box3-header-icon { .box3-header-icon {
margin-top: 16px; margin-top: 16px;
width: 19px; width: 19px;
height: 19px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box3-header-title { .box3-header-title {
margin-top: 16px; margin-top: 3px;
margin-left: 19px; margin-left: 20px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -850,21 +902,9 @@ onMounted(async () => { ...@@ -850,21 +902,9 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
} }
} }
.box3-main { .box3-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
...@@ -872,6 +912,7 @@ onMounted(async () => { ...@@ -872,6 +912,7 @@ onMounted(async () => {
padding-top: 6px; padding-top: 6px;
} }
} }
.box4 { .box4 {
margin-top: 16px; margin-top: 16px;
width: 1600px; width: 1600px;
...@@ -879,23 +920,28 @@ onMounted(async () => { ...@@ -879,23 +920,28 @@ onMounted(async () => {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2); box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box4-header { .box4-header {
width: 792px; width: 1595px;
height: 48px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding-left: 22px; padding-left: 22px;
position: relative; position: relative;
.header-icon { .header-icon {
margin-top: 15px; margin-top: 15px;
width: 20px; width: 20px;
height: 20px; height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 18px; margin-left: 18px;
...@@ -906,20 +952,8 @@ onMounted(async () => { ...@@ -906,20 +952,8 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
} }
.box4-main { .box4-main {
height: 402px; height: 402px;
overflow-y: auto; overflow-y: auto;
...@@ -928,20 +962,23 @@ onMounted(async () => { ...@@ -928,20 +962,23 @@ onMounted(async () => {
} }
} }
} }
.center-footer { .center-footer {
margin-top: 21px; margin-top: 21px;
height: 460px; height: 460px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 15px; gap: 15px;
.box5 { .box5 {
width: 1064px; width: 792px;
height: 460px; height: 460px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box5-header { .box5-header {
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -950,70 +987,42 @@ onMounted(async () => { ...@@ -950,70 +987,42 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.box5-header-left { .box5-header-left {
display: flex; display: flex;
.box5-header-icon { .box5-header-icon {
margin-top: 15px; padding: 13px 21px 13px 21px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
} }
.box5-header-title { .box5-header-title {
margin-top: 12px; width: 190px;
margin-left: 19px; color: rgba(5, 95, 194, 1);
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
line-height: 48px;
} }
} }
} }
.box5-main { .box5-main {
height: 397px; height: 397px;
} }
} }
.box6 { .box6 {
width: 521px; width: 792px;
height: 460px; height: 460px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box6-header { .box6-header {
width: 521px; width: 521px;
height: 53px; height: 53px;
...@@ -1022,15 +1031,18 @@ onMounted(async () => { ...@@ -1022,15 +1031,18 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
position: relative; position: relative;
.header-icon { .header-icon {
margin-top: 18px; margin-top: 18px;
width: 19px; width: 19px;
height: 19px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 15px; margin-left: 15px;
...@@ -1041,53 +1053,30 @@ onMounted(async () => { ...@@ -1041,53 +1053,30 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
} }
.box6-main { .box6-main {
margin-top: 15px;
height: 360px; height: 360px;
} }
} }
} }
.center-footer1 { .center-footer1 {
margin-top: 16px; margin-top: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 15px; gap: 15px;
.box7 { .box7 {
width: 1064px; width: 792px;
height: 460px; height: 460px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box7-header { .box7-header {
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -1096,18 +1085,22 @@ onMounted(async () => { ...@@ -1096,18 +1085,22 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.box7-header-left { .box7-header-left {
display: flex; display: flex;
.box7-header-icon { .box7-header-icon {
margin-top: 15px; margin-top: 15px;
margin-left: 2px; margin-left: 2px;
width: 19px; width: 19px;
height: 19px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box7-header-title { .box7-header-title {
margin-top: 12px; margin-top: 12px;
margin-left: 19px; margin-left: 19px;
...@@ -1119,47 +1112,23 @@ onMounted(async () => { ...@@ -1119,47 +1112,23 @@ onMounted(async () => {
line-height: 26px; line-height: 26px;
} }
} }
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
} }
.box7-main { .box7-main {
height: 412px; height: 405px;
margin: 0 59px 0 59px;
} }
} }
.box8 { .box8 {
width: 521px; width: 792px;
height: 460px; height: 460px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box8-header { .box8-header {
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -1168,18 +1137,22 @@ onMounted(async () => { ...@@ -1168,18 +1137,22 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.box8-header-left { .box8-header-left {
display: flex; display: flex;
.box8-header-icon { .box8-header-icon {
margin-top: 15px; margin-top: 15px;
margin-left: 2px; margin-left: 2px;
width: 19px; width: 19px;
height: 19px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box8-header-title { .box8-header-title {
margin-top: 12px; margin-top: 12px;
margin-left: 19px; margin-left: 19px;
...@@ -1191,35 +1164,8 @@ onMounted(async () => { ...@@ -1191,35 +1164,8 @@ onMounted(async () => {
line-height: 26px; line-height: 26px;
} }
} }
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
} }
.box8-main { .box8-main {
width: 469px; width: 469px;
height: 360px; height: 360px;
...@@ -1227,19 +1173,22 @@ onMounted(async () => { ...@@ -1227,19 +1173,22 @@ onMounted(async () => {
} }
} }
} }
.home-main-footer { .home-main-footer {
height: 1149px; height: 1149px;
overflow: hidden; overflow: hidden;
.home-main-footer-header { .home-main-footer-header {
width: 1600px; width: 1600px;
height: 42px; height: 42px;
margin: 36px auto; margin: 36px auto;
// background: orange;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
width: 1000px; width: 1000px;
display: flex; display: flex;
.btn { .btn {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1251,302 +1200,97 @@ onMounted(async () => { ...@@ -1251,302 +1200,97 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(20, 89, 187, 0.1); background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .btnActive {
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
} }
} }
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
} }
.home-main-footer-main { .home-main-footer-main {
width: 1600px; width: 1600px;
margin-bottom: 20px; margin-bottom: 20px;
height: 985px; height: 985px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); margin: 0 160px;
// background: rgba(255, 255, 255, 1);
margin: 0 auto;
box-sizing: border-box;
// padding: 20px;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
}
}
}
}
.right {
margin-left: 16px;
width: 1284px;
height: 899px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box; box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
}
.right-main {
height: 780px;
// background: orange;
.item {
display: flex;
padding: 16px 0;
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: flex; display: flex;
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
} }
} }
} }
} }
.divide-header { .divide-header {
margin: 0 auto; margin: 0 auto;
margin-top: 52px; margin-top: 52px;
margin-bottom: 36px; margin-bottom: 36px;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper.is-focus) { :deep(.el-input__wrapper.is-focus) {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-box-samll {
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 1px 8px 1px 8px;
color: rgba(59, 65, 75, 1);
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.btn-box-select-samll {
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8;
padding: 1px 8px 1px 8px;
color: rgba(5, 95, 194, 1);
box-sizing: border-box;
border: 1px solid rgba(5, 95, 194, 1);
border-radius: 4px;
background: rgba(231, 243, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
</style> </style>
\ No newline at end of file
src/views/technologyFigures/json/personData.json 0 → 100644
浏览文件 @ 0dac5ad6
[
{
"name": "唐纳德·特朗普",
"position": "参议院情报委员会主席",
"avatar": "/public/testData/data2.png",
"tags": ["1", "2"],
"chinaRelatedCount": 129,
"mediaQuoteCount": 1140,
"color": "#C82333"
},
{
"name": "汤姆·科顿",
"position": "参议院情报委员会主席",
"avatar": "/public/testData/data2.png",
"tags": ["1", "2"],
"chinaRelatedCount": 47,
"mediaQuoteCount": 203,
"color": "#FD7E14"
},
{
"name": "马尔科·卢比奥",
"position": "国务卿",
"avatar": "/public/testData/data2.png",
"tags": ["1", "2"],
"chinaRelatedCount": 34,
"mediaQuoteCount": 180,
"color": "#FFC107"
},
{
"name": "詹姆斯·戴维·万斯",
"position": "副总统",
"avatar": "/public/testData/data2.png",
"tags": ["1", "2"],
"chinaRelatedCount": 25,
"mediaQuoteCount": 129,
"color": "#28A745"
},
{
"name": "克丽斯蒂·诺姆",
"position": "国土安全部部长",
"avatar": "/public/testData/data2.png",
"tags": ["1", "2"],
"chinaRelatedCount": 22,
"mediaQuoteCount": 101,
"color": "#28A745"
}
]
src/views/technologyFigures/json/personUpdates.json 0 → 100644
浏览文件 @ 0dac5ad6
{
"person": {
"name": "黄仁勋",
"title": "NVIDIA公司创始人及首席执行官",
"image_url": "/public/testData/data1.png"
},
"events": [
{
"date": "2025-08-15",
"content": "承认美国对华芯片管制导致英伟达在华份额近半、损失150亿美元销售额，并警告若制裁继续，第二季度将再损失80亿美元收入。",
"icon": "🔥"
},
{
"date": "2025-08-15",
"content": "英伟达创始人兼 CEO 黄仁勋在上周四举行的全体员工大会上表示，希望员工在可能的情况下多使用 AI，并强调员工对此不必有疑虑。",
"icon": "🔥"
},
{
"date": "2025-08-15",
"content": "NVIDIA首席执行官黄仁勋近日在英国剑桥大学获颁2025年‘史蒂芬·霍金教授院士奖’，成为首位获此殊荣的半导体企业领袖。",
"icon": "🔥"
}
],
"source": "科技企业领袖"
}
src/views/technologyFigures/json/source.json 0 → 100644
浏览文件 @ 0dac5ad6
[
{
"name": "唐纳德·特朗普",
"title": "美国总统（2017-2021、2025-至今），共和党党员",
"tag": "行政主管",
"avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"]
},
{
"name": "詹姆斯·戴维·万斯",
"title": "美国副总统、参议院议长、共和党全国委员会财务主席",
"tag": "行政主管",
"avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"]
},
{
"name": "黄仁勋",
"title": "NVIDIA公司创始人兼首席执行官，美国工程院院士",
"tag": "科技企业领袖",
"avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"]
},
{
"name": "马尔科·鲁比奥",
"title": "美国国务卿，美国总统国家安全事务临时助理",
"tag": "行政主管",
"avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"]
},
{
"name": "埃隆·马斯克",
"title": "特斯拉创始人兼首席执行官、SpaceX、美国党创始人",
"tag": "科技企业领袖",
"avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"]
},
{
"name": "乔迪·阿灵顿",
"title": "共和党党员，美国国会众议院议员，预算委员会主席",
"tag": "国会议员",
"avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"]
},
{
"name": "霍华德·卢特尼克",
"title": "美国商务部长",
"tag": "行政主管",
"avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"]
},
{
"name": "蒂姆·库克",
"title": "苹果公司首席执行官，清华大学经济管理学院顾问委员会主席",
"tag": "科技企业领袖",
"avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"]
},
{
"name": "朱棣文",
"title": "第12任美国能源部部长，主要研究领域为原子物理、激光科学",
"tag": "顶级科学家",
"avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"]
},
{
"name": "约翰·图恩",
"title": "共和党党员，美国国会众议院议员",
"tag": "国会议员",
"avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"]
},
{
"name": "珍妮弗·道德纳",
"title": "主要研究领域为RNA领域和基因编辑技术",
"tag": "顶级科学家",
"avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"]
},
{
"name": "迈克·约翰逊",
"title": "美国众议院议长",
"tag": "国会议员",
"avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"]
},
{
"name": "亚当·史密斯",
"title": "美国国会众议院议员，众议院军事委员会民主党领袖",
"tag": "国会议员",
"avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"]
},
{
"name": "查尔斯·本内特",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家",
"avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"]
},
{
"name": "桑达尔·皮查伊",
"title": "谷歌母公司Alphabet首席执行官",
"tag": "科技企业领袖",
"avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"]
},
{
"name": "威康·汤姆逊",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家",
"avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"]
}
]
src/views/technologyFigures/json/speechStance.json 0 → 100644
浏览文件 @ 0dac5ad6
[
{
"name": "黄仁勋",
"title": "NVIDIA公司创始人及首席执行官",
"avatar": "/public/testData/data2.png",
"content": "宣布美国政府已批准H20芯片销往中国，并表示“中国AI市场无论有没有英伟达都会进步”。"
},
{
"name": "斯里拉姆·克里希南",
"title": "白宫人工智能高级政策顾问",
"avatar": "/public/testData/data2.png",
"content": "声称特朗普政府会继续阻止中国获取先进AI技术，但将重新审视对主要贸易伙伴的限制。"
},
{
"name": "大卫·萨克斯",
"title": "白宫人工智能与加密货币主管",
"avatar": "/public/testData/data2.png",
"content": "为允许英伟达出口H20芯片辩护，称此举有助于美国同中国有效竞争为允许英伟达出口H20芯片辩护，称此举有助于美国同中国有效竞争。。"
},
{
"name": "霍华德·卢特尼克",
"title": "美国商务部长",
"avatar": "/public/testData/data2.png",
"content": "解释对华芯片出口策略是只卖“第四好”的芯片（如H20），让中国开发者依赖美国技术生态系统。"
},
{
"name": "斯科特·贝森特",
"title": "美国财政部长",
"avatar": "/public/testData/data2.png",
"content": "将H20芯片的出口管制描述为中美贸易谈判中的“平衡筹码”。"
},
{
"name": "斯里拉姆·克里希南",
"title": "白宫人工智能高级政策顾问",
"avatar": "/public/testData/data2.png",
"content": "声称特朗普政府会继续阻止中国获取先进AI技术，但将重新审视对主要贸易伙伴的限制。"
},
{
"name": "大卫·萨克斯",
"title": "白宫人工智能与加密货币主管",
"avatar": "/public/testData/data2.png",
"content": "为允许英伟达出口H20芯片辩护，称此举有助于美国同中国有效竞争。"
},
{
"name": "霍华德·卢特尼克",
"title": "美国商务部长",
"avatar": "/public/testData/data2.png",
"content": "解释对华芯片出口策略是只卖“第四好”的芯片（如H20），让中国开发者依赖美国技术生态系统。"
},
{
"name": "斯科特·贝森特",
"title": "美国财政部长",
"avatar": "/public/testData/data2.png",
"content": "将H20芯片的出口管制描述为中美贸易谈判中的“平衡筹码”。"
}
]
src/views/technologyFigures/utils/donutChart.js 0 → 100644
浏览文件 @ 0dac5ad6
// donutChart.js
import * as echarts from 'echarts';
/**
* 环形图（donut / pie）
* @param {Array<string>} nameList 名称数组
* @param {Array<number>} valueList 数值数组
* @returns {Object} echarts option
*/
const getDonutChart = (nameList, valueList) => {
// 使用与折线图一致的配色（6色，取前5个）
const colors = [
'#87E8DE', // 原“集成电路”青绿 → 可替换为更协调色
'#69B1FF', // 浅蓝
'#FF7875', // 红
'#B37FEB', // 紫
'#FFD666' // 新增黄色，用于第5项（避免重复）
];
const data = nameList.map((name, i) => ({
name,
value: valueList[i]
}));
return {
color: colors,
tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
series: [
{
type: "pie",
radius: [96, 120],
center: ["50%", "50%"],
avoidLabelOverlap: true,
itemStyle: { borderWidth: 0 },
label: {
show: true,
position: "outside",
alignTo: "edge",
formatter: ({ name, value, percent }) => `{name|${name}} {value|${value}项} {percent|${percent}%}`,
minMargin: 50,
edgeDistance: 10,
lineHeight: 15,
rich: {
name: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
color: "rgb(59, 65, 75)"
},
value: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
},
percent: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
labelLine: {
show: true,
length: 30,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 380;
const points = params.labelLinePoints;
// 导航线终点在标签下方
const lineY = params.labelRect.y + params.labelRect.height;
points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
points[2][1] = lineY;
points[1][1] = lineY;
return {
labelLinePoints: points
};
},
data: data.map((d, i) => ({
...d,
labelLine: { lineStyle: { color: colors[i], width: 1 } }
}))
}
]
};
};
export default getDonutChart;
\ No newline at end of file
src/views/technologyFigures/utils/multiLineChart.js
浏览文件 @ 0dac5ad6
import * as echarts from 'echarts' import * as echarts from "echarts";
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => { const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5, dataY6) => {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross', type: "cross",
label: { label: {
backgroundColor: '#6a7985' backgroundColor: "#6a7985"
} }
} }
}, },
grid: { grid: {
top: '15%', top: "15px",
right: '5%', right: "50px",
bottom: '5%', bottom: "0px",
left: '5%', left: "40px",
containLabel: true containLabel: true
}, },
legend: { legend: {
data: ["人工智能", "集成电路", "量子科技", "生物科技", "通信网络", "能源"],
show: true, show: true,
top: 10, textStyle: {
left:'5%' color: "rgba(95, 101, 108, 1)",
fontFamily: "Microsoft YaHei",
fontSize: "16px"
}, // 设置图例标记为圆形
icon: "circle",
itemWidth: 10, // 圆的直径
itemHeight: 10, // 圆的直径
itemGap: 20 // 图例项之间的间距
}, },
color: ['#0A57A6', '#FA8C16','#722ED1'], color: [
"rgba(10, 87, 166, 1)", // 人工智能（深蓝色）
"rgba(64, 196, 181, 1)", // 集成电路（青绿色）
"rgba(114, 46, 209, 1)", // 量子科技（紫色）
"rgba(245, 141, 46, 1)", // 生物科技（橙色）
"rgba(111, 180, 255, 1)", // 通信网络（浅蓝色）
"rgba(196, 92, 68, 1)" // 能源（红褐色）
],
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: dataX data: dataX,
axisLabel: {
fontSize: 14 // 设置X轴字体大小
}
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLabel: {
fontSize: 14 // 设置X轴字体大小
},
} }
], ],
series: [ series: [
{ {
name: '337调查', name: "人工智能",
type: 'line', type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: 'rgba(10, 87, 166, 0.7)' // 起始颜色 color: "rgba(10, 87, 166, 0.2)" // 起始颜色
}, { },
{
offset: 1, offset: 1,
color: 'rgba(10, 87, 166, 0)' // 结束颜色 color: "rgba(10, 87, 166, 0)" // 结束颜色
}]) }
])
}, },
emphasis: { emphasis: {
focus: 'series' focus: "series"
}, },
data: dataY1 data: dataY1
}, },
{ {
name: '301调查', name: "集成电路",
type: 'line', type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: 'rgba(255, 172, 77, 0.7)' // 起始颜色 color: "rgba(64, 196, 181, 0.2)" // 起始颜色
}, { },
{
offset: 1, offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色 color: "rgba(64, 196, 181, 0)" // 结束颜色
}]) }
])
}, },
emphasis: { emphasis: {
focus: 'series' focus: "series"
}, },
data: dataY2 data: dataY2
}, },
{ {
name: '232调查', name: "量子科技",
type: 'line', type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: 'rgba(114, 46, 209, 0.7)' // 起始颜色 color: "rgba(114, 46, 209, 1)" // 起始颜色
}, { },
{
offset: 1, offset: 1,
color: 'rgba(114, 46, 209, 0)' // 结束颜色 color: "rgba(114, 46, 209, 0)" // 结束颜色
}]) }
])
}, },
emphasis: { emphasis: {
focus: 'series' focus: "series"
}, },
data: dataY3 data: dataY3
},
{
name: "生物科技",
type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(245, 141, 46, 0.2)" // 起始颜色
},
{
offset: 1,
color: "rgba(245, 141, 46, 0)" // 结束颜色
} }
] ])
},
emphasis: {
focus: "series"
},
data: dataY4
},
{
name: "通信网络",
type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(111, 180, 255, 0.2)" // 起始颜色
},
{
offset: 1,
color: "rgba(111, 180, 255, 0)" // 结束颜色
} }
} ])
},
emphasis: {
focus: "series"
},
data: dataY5
},
{
name: "能源",
type: "line",
lineStyle: {
width: 1.5 // 单位：px，数值越大线条越粗
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(196, 92, 68, 0.2)" // 起始颜色
},
{
offset: 1,
color: "rgba(196, 92, 68, 0)" // 结束颜色
}
])
},
emphasis: {
focus: "series"
},
data: dataY6
}
]
};
};
export default getMultiLineChart export default getMultiLineChart;
\ No newline at end of file
src/views/technologyFigures/utils/worldCloudChart.js 0 → 100644
浏览文件 @ 0dac5ad6
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 20, // 网格大小，影响词间距。
sizeRange: [18, 32], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 10,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
normal: {
fontWeight: 'bold', // 字体加粗
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
},
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论