Skip to content

R
risk-monitor
提交 b614d3d3 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

Merge branch 'master' into yp-dev

上级 2fecb118 27588a66
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1014 行增加 和 966 行删除
src/api/influence.js
浏览文件 @ b614d3d3
...@@ -24,7 +24,7 @@ export function getIndustryHyly(params) { ...@@ -24,7 +24,7 @@ export function getIndustryHyly(params) {
}) })
} }
// 根据行业领域字典列表 // 行业领域字典列表
export function getHylyList() { export function getHylyList() {
return request({ return request({
method: 'GET', method: 'GET',
......
src/router/modules/thinktank.js
浏览文件 @ b614d3d3
...@@ -14,7 +14,7 @@ const thinktankRoutes = [ ...@@ -14,7 +14,7 @@ const thinktankRoutes = [
} }
}, },
{ {
path: "/think-tank/:id", path: "/thinkTank/thinkTankDetail/:id",
name: "ThinkTankDetail", name: "ThinkTankDetail",
component: ThinkTankDetail, component: ThinkTankDetail,
meta: { meta: {
...@@ -22,7 +22,7 @@ const thinktankRoutes = [ ...@@ -22,7 +22,7 @@ const thinktankRoutes = [
} }
}, },
{ {
path: "/thinkTank/report/:id", path: "/thinkTank/reportDetail/:id",
name: "ReportDetail", name: "ReportDetail",
component: ReportDetail, component: ReportDetail,
meta: { meta: {
......
src/views/decree/decreeHome/index.vue
浏览文件 @ b614d3d3
...@@ -272,193 +272,6 @@ ...@@ -272,193 +272,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="center-center1">
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 0 }"
@click="handleClickCenter1Item(0)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div class="name" :class="{ nameActive: center1ActiveIndex === 0 }">
{{ "唐纳德·特朗普任期" }}
</div>
<div class="time" :class="{ timeActive: center1ActiveIndex === 0 }">
{{ "2025.1.20-至今" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 1 }"
@click="handleClickCenter1Item(1)"
>
<div class="left">
<img src="./assets/images/p2.png" alt="" />
</div>
<div class="right">
<div class="name" :class="{ nameActive: center1ActiveIndex === 1 }">
{{ "乔·拜登任期" }}
</div>
<div class="time" :class="{ timeActive: center1ActiveIndex === 1 }">
{{ "2021.1.20-2025.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 2 }"
@click="handleClickCenter1Item(2)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div class="name" :class="{ nameActive: center1ActiveIndex === 2 }">
{{ "唐纳德·特朗普任期" }}
</div>
<div class="time" :class="{ timeActive: center1ActiveIndex === 2 }">
{{ "2017.1.20-2021.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 3 }"
@click="handleClickCenter1Item(3)"
>
<div class="left">
<img src="./assets/images/p3.png" alt="" />
</div>
<div class="right">
<div class="name" :class="{ nameActive: center1ActiveIndex === 3 }">
{{ "贝拉克·奥巴马任期" }}
</div>
<div class="time" :class="{ timeActive: center1ActiveIndex === 3 }">
{{ "2013.1.20-2017.1.20" }}
</div>
</div>
</div>
</div> -->
<!-- <div class="center-center2">
<div class="center2-header">
<div class="center2-header-left">
<div class="left">
<div class="icon">
<img src="./assets/images/p1.png" alt="" />
</div>
</div>
<div class="right">
<div class="right-item1">{{ "唐纳德·特朗普" }}</div>
<div class="right-item2">
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">{{ "共和党" }}</div>
</div>
<div class="right-item3">{{ "美国第45任总统" }}</div>
<div class="right-item4">{{ "2025.1.20-至今" }}</div>
</div>
</div>
<div class="center2-header-right">
<div class="top">
<div class="top-box">
<div class="item1">{{ "本月发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "1项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "4项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "今年发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "7项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "29项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "任期内发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "20项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "96项" }}</div>
</div>
</div>
</div>
<div class="bottom">
<div class="icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="text">{{ "涉华政令数量/政令总数" }}</div>
</div>
</div>
</div>
<div class="center2-mid" id="chartCalendar"></div>
<div class="center2-footer">
<div class="center2-footer-left">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon2.png" alt="" />
</div>
<div class="text">{{ "主要内阁成员" }}</div>
</div>
<div class="main">
<div class="item" v-for="(item, index) in personList" :key="index">
<div class="item-left">
<img :src="item.avator" alt="" />
</div>
<div class="item-right">
<div class="item-right-box1">{{ item.name }}</div>
<div class="item-right-box2">{{ item.posi }}</div>
</div>
</div>
</div>
</div>
<div class="center2-footer-right">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon1.png" alt="" />
</div>
<div class="tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</div>
</div>
<div class="right">
<div class="btn">
<img src="./assets/images/left-btn.png" alt="" />
</div>
<div class="btn">
<img src="./assets/images/right-btn.png" alt="" />
</div>
</div>
</div>
<div class="main">
<div class="main-item" v-for="(val, idx) in list[tabActiveIndex].data" :key="idx">
<div class="id">{{ idx + 1 }}</div>
<div class="info">
<div class="info-header">
<div class="title">{{ val.title }}</div>
<div class="tag">{{ val.tag }}</div>
</div>
<div class="info-content">
{{ val.content }}
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader> <DivideHeader id="position3" class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer"> <div class="center-footer">
<div class="box3"> <div class="box3">
......
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ b614d3d3
...@@ -25,9 +25,10 @@ ...@@ -25,9 +25,10 @@
<div class="box1-tab-box"> <div class="box1-tab-box">
<div <div
class="tab" class="tab"
:class="{ tabActive: tabActiveIndex === index }" :class="{ tabActive: box1BtnActiveName === item }"
v-for="(item, index) in tabList" v-for="(item, index) in box1BtnList"
:key="index" :key="index"
@click="handleClickBox1Btn(item)"
> >
{{ item }} {{ item }}
</div> </div>
...@@ -51,7 +52,7 @@ ...@@ -51,7 +52,7 @@
</div> </div>
</div> </div>
<div class="box1-footer"> <div class="box1-footer">
<div class="box1-footer-left">{{ `共105家企业` }}</div> <div class="box1-footer-left">{{ `共${companyTotalNum}家企业` }}</div>
<div class="box1-footer-right"> <div class="box1-footer-right">
<el-pagination <el-pagination
background background
...@@ -100,7 +101,7 @@ ...@@ -100,7 +101,7 @@
</div> </div>
<div class="box2-footer"> <div class="box2-footer">
<div class="footer-left"> <div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
<div class="footer-center"> <div class="footer-center">
{{ {{
...@@ -108,7 +109,7 @@ ...@@ -108,7 +109,7 @@
}} }}
</div> </div>
<div class="footer-right"> <div class="footer-right">
<img src="./assets/images/footer-icon2.png" alt="" /> <img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -147,7 +148,7 @@ ...@@ -147,7 +148,7 @@
</div> </div>
<div class="box3-footer"> <div class="box3-footer">
<div class="footer-left"> <div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" /> <img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div> </div>
<div class="footer-center"> <div class="footer-center">
{{ {{
...@@ -155,7 +156,7 @@ ...@@ -155,7 +156,7 @@
}} }}
</div> </div>
<div class="footer-right"> <div class="footer-right">
<img src="./assets/images/footer-icon2.png" alt="" /> <img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -165,17 +166,21 @@ ...@@ -165,17 +166,21 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import * as echarts from "echarts"; import * as echarts from "echarts";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
// 企业影响分析
const chart1Data = ref({ const chart1Data = ref({
title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"], title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
value: [109, 95, 79, 25, 11], value: [109, 95, 79, 25, 11],
}); });
const box1BtnActiveName = ref('集成电路');
const tabActiveIndex = ref(0); const box1BtnList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const tabList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]); const handleClickBox1Btn = btn => {
box1BtnActiveName.value = btn
}
const companyList = ref([ const companyList = ref([
{ {
name: "宁德时代新能源科技股份有限公司", name: "宁德时代新能源科技股份有限公司",
...@@ -218,11 +223,36 @@ const companyList = ref([ ...@@ -218,11 +223,36 @@ const companyList = ref([
status: "up", status: "up",
}, },
]); ]);
const companyTotalNum = ref(105); // 企业数量
const isChecked = ref(true); // 只看中国企业
const companyTotalNum = ref(105);
const isChecked = ref(true); // 政令举措落实情况
const timeLineList = ref([
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。",
},
{
time: "2025年8月9日",
content:"国防部、能源部安全审查流程尚未最终确定。",
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
]);
// 历史相似举措及落实情况
const box3List = ref([ const box3List = ref([
{ {
type: "科技法案", type: "科技法案",
...@@ -268,38 +298,6 @@ const box3List = ref([ ...@@ -268,38 +298,6 @@ const box3List = ref([
}, },
]); ]);
const timeLineList = ref([
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。",
},
{
time: "2025年8月9日",
content:"国防部、能源部安全审查流程尚未最终确定。",
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
]);
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => { onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value); let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
...@@ -492,13 +490,12 @@ onMounted(() => { ...@@ -492,13 +490,12 @@ onMounted(() => {
left: 0; left: 0;
top: 114px; top: 114px;
height: 8px; height: 8px;
width: 1556px; width: 1054px;
background: url("./assets/images/line-bg.png") repeat; background: url("./assets/images/line-bg.png") repeat;
} }
.box2-item { .box2-item {
width: 300px; width: 300px;
height: 120px; height: 120px;
// background: pink;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding-left: 13px; padding-left: 13px;
...@@ -607,12 +604,10 @@ onMounted(() => { ...@@ -607,12 +604,10 @@ onMounted(() => {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 12px; border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px; margin-top: 14px;
img { img {
margin: 6px; width: 100%;
width: 12px; height: 100%;
height: 12px;
} }
} }
} }
...@@ -753,12 +748,10 @@ onMounted(() => { ...@@ -753,12 +748,10 @@ onMounted(() => {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 12px; border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px; margin-top: 14px;
img { img {
margin: 6px; width: 100%;
width: 12px; height: 100%;
height: 12px;
} }
} }
} }
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ b614d3d3
...@@ -6,13 +6,14 @@ ...@@ -6,13 +6,14 @@
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">提出背景</div> <div class="title">提出背景</div>
<div class="header-btn-box"> <div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)"> <div
<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button> class="btn"
<el-button type="info" plain v-else>涉华背景</el-button> :class="{ btnActive: box1ActiveBtn === item }"
</div> v-for="(item, index) in box1BtnList"
<div class="btn" @click="handleClickBox1Btn(2)"> :key="index"
<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button> @click="handleClickBox1Btn(item)"
<el-button type="info" plain v-else>全部背景</el-button> >
{{ item }}
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
...@@ -109,8 +110,12 @@ import Img3 from "./assets/images/box2-img3.png"; ...@@ -109,8 +110,12 @@ import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.png"; import Img4 from "./assets/images/box2-img4.png";
import Img5 from "./assets/images/box2-img5.png"; import Img5 from "./assets/images/box2-img5.png";
const box1BtnActive = ref(1); // 提出背景
const box1BtnList = ref(["涉华背景", "全部背景"]);
const box1ActiveBtn = ref("涉华背景");
const handleClickBox1Btn = btn => {
box1ActiveBtn.value = btn;
};
const backgroundList = ref([ const backgroundList = ref([
{ {
title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术" title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
...@@ -129,6 +134,7 @@ const backgroundList = ref([ ...@@ -129,6 +134,7 @@ const backgroundList = ref([
} }
]); ]);
// 相关事件
const relatedEvents = ref([ const relatedEvents = ref([
{ {
image: Img1, image: Img1,
...@@ -165,6 +171,8 @@ const relatedEvents = ref([ ...@@ -165,6 +171,8 @@ const relatedEvents = ref([
} }
]); ]);
// 法律依据
const laws = ref([ const laws = ref([
{ {
name: "《美国法典》", name: "《美国法典》",
...@@ -226,8 +234,26 @@ const laws = ref([ ...@@ -226,8 +234,26 @@ const laws = ref([
top: 14px; top: 14px;
right: 84px; right: 84px;
display: flex; display: flex;
justify-content: flex-end;
gap: 8px;
.btn { .btn {
margin-left: 8px; height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
color: var(--color-main-active);
background: rgba(231, 243, 255, 1);
} }
} }
.header-right { .header-right {
...@@ -347,12 +373,16 @@ const laws = ref([ ...@@ -347,12 +373,16 @@ const laws = ref([
margin-top: -5px; margin-top: -5px;
} }
.content { .content {
width: 892px;
height: 30px; height: 30px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.item-right { .item-right {
......
src/views/decree/decreeLayout/overview/index.vue
浏览文件 @ b614d3d3
<template> <template>
<div class="decree-overview-wrap"> <div class="decree-overview-wrap">
<div class="left"> <div class="left">
<div <div
class="sider-btn" class="sider-btn"
:class="{ siderBtnActive: siderBtnActive === item.name }" :class="{ siderBtnActive: siderBtnActive === item.name }"
@click="handleClickLeftSiderBtn(item)" @click="handleClickLeftSiderBtn(item)"
v-for="(item, index) in siderList" v-for="(item, index) in siderList"
:key="index" :key="index"
> >
<div class="btn-text">{{ item.name }}</div> <div class="btn-text">{{ item.name }}</div>
<div class="btn-icon"> <div class="btn-icon">
<el-icon v-if="siderBtnActive === item.name" color="#fff" <el-icon v-if="siderBtnActive === item.name" color="#fff"><CaretRight /></el-icon>
><CaretRight </div>
/></el-icon> </div>
</div> </div>
</div> <div class="main">
</div> <router-view />
<div class="main"> </div>
<router-view /> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import router from '@/router' import router from "@/router";
const siderList = ref([ const siderList = ref([
{ {
name: "政令简介", name: "政令简介",
path: "/decreeLayout/overview/introduction", path: "/decreeLayout/overview/introduction"
}, },
{ {
name: "政令背景", name: "政令背景",
path: "/decreeLayout/overview/background", path: "/decreeLayout/overview/background"
}, }
]); ]);
const siderBtnActive = ref("政令简介"); const siderBtnActive = ref("政令简介");
const handleClickLeftSiderBtn = (item) => { const handleClickLeftSiderBtn = item => {
siderBtnActive.value = item.name window.sessionStorage.setItem("siderBarActiveName", item.name);
router.push(item.path) siderBtnActive.value = item.name;
} router.push(item.path);
};
onMounted(() => {
if (window.sessionStorage.getItem("siderBarActiveName")) {
siderBtnActive.value = window.sessionStorage.getItem("siderBarActiveName");
}
});
onUnmounted(() => {
if (window.sessionStorage.getItem("siderBarActiveName")) {
window.sessionStorage.removeItem("siderBarActiveName");
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.decree-overview-wrap { .decree-overview-wrap {
width: 1920px; width: 1920px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: rgba(247, 248, 249, 1); background: rgba(247, 248, 249, 1);
display: flex; display: flex;
.left { .left {
width: 160px; width: 160px;
padding-top: 16px; padding-top: 16px;
.sider-btn { .sider-btn {
margin-top: 20px; margin-top: 20px;
margin-left: 20px; margin-left: 20px;
width: 120px; width: 120px;
height: 32px; height: 32px;
display: flex; display: flex;
border-radius: 16px; border-radius: 16px;
cursor: pointer; cursor: pointer;
.btn-text { .btn-text {
margin-left: 28px; margin-left: 28px;
width: 68px; width: 68px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
} }
.btn-icon { .btn-icon {
width: 22px; width: 22px;
padding-top: 9px; padding-top: 9px;
} }
} }
.siderBtnActive { .siderBtnActive {
background: var(--color-main-active); background: var(--color-main-active);
.btn-text { .btn-text {
color: #fff !important; color: #fff !important;
} }
} }
} }
.main{ .main {
width: 1760px; width: 1760px;
height: 901px; height: 901px;
} }
} }
</style> </style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ b614d3d3
...@@ -22,42 +22,42 @@ ...@@ -22,42 +22,42 @@
<div class="box1-main-right"> <div class="box1-main-right">
<div class="item"> <div class="item">
<div class="item-left">{{ "政令全称：" }}</div> <div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div> <div class="item-right">{{ basicInfo.name }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "英文全称：" }}</div> <div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text"> <div class="item-right text">
{{ "Promoting the Export of the American AI Technology Stack" }} {{ basicInfo.eName }}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "相关领域：" }}</div> <div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box"> <div class="item-right tag-box">
<div class="tag" v-for="(area, index) in areaList" :key="index"> <div class="tag" v-for="(area, index) in basicInfo.areaList" :key="index">
{{ area }} {{ area }}
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "签署时间：" }}</div> <div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ "2025年7月23日" }}</div> <div class="item-right text">{{ basicInfo.signTime }}</div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "签署总统：" }}</div> <div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right text"> <div class="item-right text">
{{ "唐纳德·约翰·特朗普(Donald John Trump)" }} {{ basicInfo.signPeople }}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "政令编号：" }}</div> <div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text"> <div class="item-right text">
{{ "第14320号行政命令 (EO 14320)" }} {{ basicInfo.bh }}
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item-left">{{ "执行期限：" }}</div> <div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text"> <div class="item-right text">
{{ "签署后90天内建立机制并开始实施" }} {{ basicInfo.deadline }}
</div> </div>
</div> </div>
</div> </div>
...@@ -99,13 +99,14 @@ ...@@ -99,13 +99,14 @@
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">执行机构</div> <div class="title">执行机构</div>
<div class="header-btn-box"> <div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)"> <div
<el-button type="primary" plain v-if="box1BtnActive === 1">商务部</el-button> class="btn"
<el-button type="info" plain v-else>商务部</el-button> :class="{ btnActive: box3ActiveBtn === item }"
</div> v-for="(item, index) in box3BtnList"
<div class="btn" @click="handleClickBox1Btn(2)"> :key="index"
<el-button type="primary" plain v-if="box1BtnActive === 2">经济外交行动组</el-button> @click="handleClickBox3Btn(item)"
<el-button type="info" plain v-else>经济外交行动组</el-button> >
{{ item }}
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
...@@ -120,11 +121,11 @@ ...@@ -120,11 +121,11 @@
<div class="box3-top"> <div class="box3-top">
<div class="box3-top-top"> <div class="box3-top-top">
<div class="left"> <div class="left">
<img src="./assets/images/box3-img.png" alt="" /> <img :src="box3TopData.logo" alt="" />
</div> </div>
<div class="right"> <div class="right">
<div class="name">{{ "美国商务部" }}</div> <div class="name">{{ box3TopData.name }}</div>
<div class="ename">{{ "United States Department of Commerce" }}</div> <div class="ename">{{ box3TopData.eName }}</div>
</div> </div>
<!-- <div class="more"> <!-- <div class="more">
<div class="text">{{ "查看官网" }}</div> <div class="text">{{ "查看官网" }}</div>
...@@ -138,26 +139,26 @@ ...@@ -138,26 +139,26 @@
<div class="main-item"> <div class="main-item">
<div class="item-icon"></div> <div class="item-icon"></div>
<div class="item-left">{{ "成立时间:" }}</div> <div class="item-left">{{ "成立时间:" }}</div>
<div class="item-right">{{ "1903年2月14日" }}</div> <div class="item-right">{{ box3TopData.clsj }}</div>
</div> </div>
<div class="main-item"> <div class="main-item">
<div class="item-icon"></div> <div class="item-icon"></div>
<div class="item-left">{{ "主要职责:" }}</div> <div class="item-left">{{ "主要职责:" }}</div>
<div class="item-right"> <div class="item-right">
{{ "国际贸易、进出口管制（R-TX-19）" }} {{ box3TopData.zyzz }}
</div> </div>
</div> </div>
<div class="main-item"> <div class="main-item">
<div class="item-icon"></div> <div class="item-icon"></div>
<div class="item-left">{{ "总部地址:" }}</div> <div class="item-left">{{ "总部地址:" }}</div>
<div class="item-right"> <div class="item-right">
{{ "华盛顿宪法大道1401号胡佛大楼" }} {{ box3TopData.zbdz }}
</div> </div>
</div> </div>
<div class="main-item"> <div class="main-item">
<div class="item-icon"></div> <div class="item-icon"></div>
<div class="item-left">{{ "部长:" }}</div> <div class="item-left">{{ "部长:" }}</div>
<div class="item-right">{{ "霍华德·卢特尼克" }}</div> <div class="item-right">{{ box3TopData.bz }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -194,10 +195,21 @@ ...@@ -194,10 +195,21 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
const box1BtnActive = ref(1);
const areaList = ref(["人工智能", "出口管制", "半导体产业", "关税", "光伏产业"]); import Box3Logo from "./assets/images/box3-img.png";
// 基本信息
const basicInfo = ref({
name: "推动美国人工智能技术栈出口",
eName: "Promoting the Export of the American AI Technology Stack",
areaList: ["人工智能", "出口管制", "半导体产业", "关税", "光伏产业"],
signTime: "2025年7月23日",
signPeople: "唐纳德·约翰·特朗普(Donald John Trump)",
bh: "第14320号行政命令 (EO 14320)",
deadline: "签署后90天内建立机制并开始实施"
});
// 主要指令
const majorList = ref([ const majorList = ref([
{ {
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。' title: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
...@@ -216,7 +228,24 @@ const majorList = ref([ ...@@ -216,7 +228,24 @@ const majorList = ref([
} }
]); ]);
// 人物动态 // 执行机构
const box3BtnList = ref(["商务部", "经济外交行动组"]);
const box3ActiveBtn = ref("商务部");
const handleClickBox3Btn = btn => {
box3ActiveBtn.value = btn;
};
const box3TopData = ref({
logo: Box3Logo,
name: "美国商务部",
eName: "United States Department of Commerce",
clsj: "1903年2月14日",
zyzz: "国际贸易、进出口管制（R-TX-19）",
zbdz: "华盛顿宪法大道1401号胡佛大楼",
bz: "霍华德·卢特尼克"
});
// 机构动态
const eventList = ref([ const eventList = ref([
{ {
time: "2025-07-31", time: "2025-07-31",
...@@ -269,8 +298,26 @@ const eventList = ref([ ...@@ -269,8 +298,26 @@ const eventList = ref([
top: 14px; top: 14px;
right: 84px; right: 84px;
display: flex; display: flex;
justify-content: flex-end;
gap: 8px;
.btn { .btn {
margin-left: 8px; height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
color: var(--color-main-active);
background: rgba(231, 243, 255, 1);
} }
} }
.header-right { .header-right {
...@@ -327,6 +374,8 @@ const eventList = ref([ ...@@ -327,6 +374,8 @@ const eventList = ref([
.tag-box { .tag-box {
display: flex; display: flex;
.tag { .tag {
height: 24px;
line-height: 24px;
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
......
src/views/decree/header.vue deleted 100644 → 0
浏览文件 @ 2fecb118
<template>
<div class="sanction-container">
<!-- 页面标题区域 -->
<div class="page-header">
<!-- <h1 class="main-title">制裁分析</h1> -->
<img class="page-header-img" src="@/assets/images/decree-national.png" alt="" />
<div class="bill-details">
<div class="main-title">EO 14320-促进美国人工智能技术栈的出口</div>
<div class="bill-name-en">总统行动 | 行政命令 | Ending Crime and Disorder on America’s Streets</div>
</div>
<div class="date-author">
<div class="date">2025年7月23日</div>
<div class="author">唐纳德·约翰·特朗普(Donald John Trump)）</div>
</div>
<!-- <div class="bill-info">
</div> -->
</div>
<!-- 导航标签区域 -->
<!-- <div class="nav-section">
<div class="tabs">
<div class="tab-item active">制裁概况</div>
<div class="tab-item">深度挖掘</div>
<div class="tab-item">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div> -->
<!-- 内容区域 -->
<!-- <div class="content-section">
<div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div>
</div> -->
</div>
</template>
<script setup></script>
<style scoped>
.sanction-container {
width: 100%;
/* max-width: 1200px; */
background-color: #fff;
/* border-radius: 8px; */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}
.page-header {
padding: 24px;
padding-top: 0;
margin-top: 10px;
/* border-bottom: 1px solid #ebeef5; */
display: flex;
justify-content: flex-start;
align-items: center;
gap: 12px;
}
.page-header-img {
width: 64px;
height: 64px;
}
.main-title {
font-size: 20px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
/* color: var(--base-color); */
margin-bottom: 8px;
}
.bill-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.bill-details {
flex: 1;
margin-right: auto;
}
.bill-name {
font-size: 16px;
color: #606266;
margin-bottom: 4px;
}
.bill-name-en {
font-size: 14px;
color: #909399;
font-style: italic;
}
.date-author {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.date {
font-size: 14px;
color: #606266;
margin-bottom: 4px;
}
.author {
font-size: 14px;
color: #606266;
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #f8fafc;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/decree/index.vue deleted 100644 → 0
浏览文件 @ 2fecb118
<template>
<div class="page-container">
<Header />
<!-- 导航标签区域 -->
<div class="nav-section">
<div class="tabs">
<div :class="['tab-item', { active: activeTab === '政令概况' }]" @click="setActiveTab('政令概况')">制裁概况</div>
<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div>
<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div>
</div>
<div class="action-buttons">
<el-button>政令原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div>
<!-- 内容区域 -->
<div class="content-section">
<!-- <div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div> -->
<Survey v-if="activeTab === '政令概况'" />
<DepthMine v-if="activeTab === '深度挖掘'" />
<!-- <ImpactAnalysis v-if="activeTab === '影响分析'" /> -->
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
// import ImpactAnalysis from "./content/impactAnalysis.vue";
const activeTab = ref("政令概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped>
.page-container {
margin: 0px auto;
background-color: rgba(247, 248, 249, 1);
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
padding-left: 6%;
padding-right: 6%;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/finance/index.vue
浏览文件 @ b614d3d3
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
<el-col :span="16"> <el-col :span="16">
<custom-container titleType="primary" title="最新投融资限制政策" :titleIcon="houseIcon" height="450px"> <custom-container titleType="primary" title="最新投融资限制政策" :titleIcon="houseIcon" height="450px">
<template #header-right> <template #header-right>
<el-button type="primary" link @click="handleToDetail"> <el-button type="primary" link>
{{ "查看详情 >" }} {{ "查看详情 >" }}
</el-button> </el-button>
</template> </template>
...@@ -149,7 +149,6 @@ ...@@ -149,7 +149,6 @@
class="box2-main-item" class="box2-main-item"
v-for="(item, index) in warningList" v-for="(item, index) in warningList"
:key="index" :key="index"
@click="handleToDetail"
> >
<div <div
class="item-left" class="item-left"
...@@ -518,6 +517,7 @@ ...@@ -518,6 +517,7 @@
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed } from "vue";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import setChart from "@/utils/setChart";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { DArrowRight, Warning, Search } from "@element-plus/icons-vue"; import { DArrowRight, Warning, Search } from "@element-plus/icons-vue";
import EChart from "@/components/Chart/index.vue"; import EChart from "@/components/Chart/index.vue";
...@@ -587,11 +587,6 @@ const handleBackHome = () => { ...@@ -587,11 +587,6 @@ const handleBackHome = () => {
}); });
}; };
const handleToDetail = () => {
// const route = router.resolve("/exportControl/analysis");
// window.open(route.href, "_blank");
};
// 查看更多风险信号 // 查看更多风险信号
const handleToMoreRiskSignal = () => { const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal"); const route = router.resolve("/riskSignal");
...@@ -1260,63 +1255,6 @@ const handleGetHylyList = async () => { ...@@ -1260,63 +1255,6 @@ const handleGetHylyList = async () => {
} catch (error) {} } catch (error) {}
}; };
const handleClickCate = cate => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
const navList = ref([
{
icon: headerIcon1,
activeIcno: headerIcon1,
name: "首页",
path: "/home"
},
{
icon: headerIcon2,
activeIcno: headerIcon2,
name: "国家",
path: "/country"
},
{
icon: headerIcon3,
activeIcno: headerIcon3,
name: "领域",
path: "/area"
},
{
icon: headerIcon4,
activeIcno: headerIcon4,
name: "要素",
path: "/home"
},
{
icon: headerIcon5,
activeIcno: headerIcon5,
name: "事件",
path: "/home"
}
]);
const activeNavIndex = ref(0);
const handleClickNav = (index, item) => {
activeNavIndex.value = index;
router.push(item.path);
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({ const chart1Data = ref({
title: [ title: [
"2024-09", "2024-09",
......
src/views/gjOverView/component/MeansAnalysis.vue
浏览文件 @ b614d3d3
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="divider"></div> <div class="divider"></div>
<div class="thematic-content"> <div class="thematic-content">
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="../assets/icon1.png"></img>
<div class="item-header-text">科技博弈历程</div> <div class="item-header-text">科技博弈历程</div>
</div> </div>
......
src/views/gjOverView/component/ResourceAnalysis.vue
浏览文件 @ b614d3d3
...@@ -13,8 +13,10 @@ ...@@ -13,8 +13,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科技人才对比分析</div> <div class="item-header-text">科技人才对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
...@@ -31,8 +33,10 @@ ...@@ -31,8 +33,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科研投入对比分析</div> <div class="item-header-text">科研投入对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
...@@ -55,8 +59,10 @@ ...@@ -55,8 +59,10 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">创新主体对比分析</div> <div class="item-header-text">创新主体对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-icon" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
...@@ -73,21 +79,23 @@ ...@@ -73,21 +79,23 @@
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img> <img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">科学数据对比分析</div> <div class="item-header-text">科学数据对比分析</div>
<div class="item-header-btn"> <div class="item-header-btn">
<img class="item-header-ibtn-con" src="@/assets/images/icon/header-btn.png"></img> <img class="item-header-btn-icon" src="@/assets/images/icon/header-btn.png"></img>
数据来源：美国某某发展基金会 <div style="">
数据来源：美国某某发展基金会
</div>
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div style="display: flex;"> <div style="display: flex;">
<div style="display: flex;height: 320px;width: calc(50% - 40px) ;margin: 20px;" id="char7"> <div style="display: flex;height: 360px;width: 433px ; " id="char7">
</div> </div>
<div style="width: 50%;padding-top: 50px;"> <div style="width: 50%;padding-top: 34px;">
<div v-for="value in radar2Data" class="radar2Data-line"> <div v-for="value in radar2Data" class="radar2Data-line">
<div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div> <div class="radar2Data-circle" :style="{ backgroundColor: value.color }"></div>
<div style=" width: 40px;margin: 0 7px">{{ value.name }}</div> <div style=" margin: 0 5px;font-size: 16px;">{{ value.name }}</div>
<div style="width: calc(100% - 150px) ;padding: 10px;"> <el-progress :percentage="value.percent" <div style="width: 168px ; "> <el-progress :percentage="value.percent" :color="value.color"
:color="value.color" :show-text="false" /></div> :show-text="false" /></div>
<div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80 <div style=" width: 70px;text-align: right;">{{ value.percent < 50 ? '低依赖' : value.percent < 80
? '中度依赖' : '高度依赖' }} </div> ? '中度依赖' : '高度依赖' }} </div>
</div> </div>
...@@ -312,7 +320,6 @@ onMounted(() => { ...@@ -312,7 +320,6 @@ onMounted(() => {
display: flex; display: flex;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
width: calc(100% - 210px);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -322,10 +329,23 @@ onMounted(() => { ...@@ -322,10 +329,23 @@ onMounted(() => {
text-align: right; text-align: right;
} }
.item-header-ibtn-con { .item-header-btn-icon {
width: 16px; width: 14px;
height: 16px; height: 16px;
margin-top: 15px; margin-top: 15px;
margin-left: 270px;
margin-right: 4px;
}
.item-header-btn-text {
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;
} }
} }
...@@ -384,13 +404,17 @@ onMounted(() => { ...@@ -384,13 +404,17 @@ onMounted(() => {
width: 100%; width: 100%;
height: 30px; height: 30px;
margin-top: 18px; margin-top: 18px;
align-items: center;
/* 垂直居中 */
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-size: 16px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
align-items: center; text-align: right;
/* 垂直居中 */
} }
...@@ -400,4 +424,9 @@ onMounted(() => { ...@@ -400,4 +424,9 @@ onMounted(() => {
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
} }
:deep(.el-progress-bar__outer) {
height: 8px !important;
}
</style> </style>
src/views/gjOverView/component/Timeline.vue
浏览文件 @ b614d3d3
...@@ -20,13 +20,13 @@ ...@@ -20,13 +20,13 @@
</div> </div>
<!-- 卡片 --> <!-- 卡片 -->
<div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()" <div class="card" :class="[cardPos(item), 'right-side']" @click="$emit('click-card', item)">
@click="$emit('click-card', item)">
<img :src="`/icon/${item.unit}.png`" class="icon"></img> <img :src="`/icon/${item.unit}.png`" class="icon"></img>
<div class="title">{{ item.time }}</div>
<div class="title" :style="{ <div class="title" :style="{
color: item.unit === '中国' ? ' #CF4F51' : '' color: item.unit === '中国' ? ' #CF4F51' : ''
}">{{ item.title }}</div> }">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
<div class="content">{{ item.content }}</div> <div class="content">{{ item.content }}</div>
</div> </div>
</div> </div>
...@@ -50,7 +50,15 @@ export default { ...@@ -50,7 +50,15 @@ export default {
}, },
/* 水平位置：按索引均匀分布 */ /* 水平位置：按索引均匀分布 */
leftStyle(i) { leftStyle(i) {
return { left: `${(i * 100) / (this.data.length - 1)}vw` }; // let pos = ``
// if (i === 0) {
// pos = 0
// } else {
// this.linePos(this.data[i - 1]) !== this.linePos(this.data[i]) ? pos = { left: `${(i * 270) - 125}px` } : pos = { left: `${(i * 270)}px` }
// }
return { left: `${(i * 270)}px` }
// return pos;
}, },
/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */ /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
cardPos(item) { cardPos(item) {
...@@ -166,28 +174,30 @@ export default { ...@@ -166,28 +174,30 @@ export default {
.dot.up::after { .dot.up::after {
bottom: 100%; bottom: 100%;
height: 180px height: 240px
} }
.dot.down::after { .dot.down::after {
top: 100%; top: 100%;
height: 180px height: 240px
} }
.card { .card {
position: absolute; position: absolute;
height: 180px; /* 容器 28 */
width: 220px;
height: 176px;
padding: 8px 20px; padding: 8px 20px;
font-size: 14px; font-size: 14px;
cursor: pointer cursor: pointer
} }
.card.up { .card.up {
bottom: 20px bottom: 86px
} }
.card.down { .card.down {
top: 20px; top: 94px;
} }
...@@ -196,15 +206,39 @@ export default { ...@@ -196,15 +206,39 @@ export default {
} }
.title { .title {
/* 美国进一步收紧对华AI芯片出口限制 */
width: 220px;
color: #055fc2; color: #055fc2;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
line-height: 26px line-height: 26px;
margin-top: -25px;
margin-left: 10px;
}
.time {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
margin-left: 10px;
} }
.content { .content {
color: #5f656c; width: 220px;
height: 90px;
color: rgba(59, 65, 75, 1);
margin-left: 10px;
font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
line-height: 24px font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
} }
</style> </style>
\ No newline at end of file
src/views/gjOverView/index.vue
浏览文件 @ b614d3d3
...@@ -46,13 +46,16 @@ ...@@ -46,13 +46,16 @@
</div> </div>
<div class="item-card-right"> <div class="item-card-right">
<div style="overflow: auto;height: 400px;"> <div style=" height: 400px;">
<div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;"> <div v-for="(item, index) in technologicalTrends.data" :key="index" style="height: 46px;">
<div class="list-row"> <div class="list-row">
<div class="item-list-punblier">{{ item.tag1 }}</div> <div class="item-list-punblier">{{ item.tag1 }}</div>
<div class="item-list-content">{{ item.text }}</div> <div class="item-list-content">{{ item.text }}</div>
<div class="item-list-time">{{ item.time }}</div> <div class="item-list-time">{{ item.time }}</div>
<div class="item-list-punblier">{{ item.tag2 }}</div> <div class="item-list-punblier"
:style="{ color: item.tagColor, backgroundColor: item.tagBg, borderColor: item.color }">{{
item.tag2 }}
</div>
</div> </div>
<div class="item-header-divider" /> <div class="item-header-divider" />
</div> </div>
...@@ -66,7 +69,7 @@ ...@@ -66,7 +69,7 @@
<div class="item-header"> <div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" /> <img class="item-header-icon" src="@/assets/images/icon/waring-card-header-icon.png" />
<div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length <div class="item-header-text" style="background-color: #ce4f51">风险信号 <div class="num">{{ warningList.length
}}</div> }}</div>
</div> </div>
</div> </div>
...@@ -130,14 +133,70 @@ const technologicalTrends = ref({ ...@@ -130,14 +133,70 @@ const technologicalTrends = ref({
txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和', txt: '2025年9月14日，欧盟委员会宣布通过“地平线欧洲”2025年工作计划投入约73亿欧元的专项资金，增强欧洲的科研创新引擎和',
}, },
data: [ data: [
{ tag1: '科研仪器', text: '欧盟投资73亿欧元推进数字化转型', time: '1小时前', tag2: '新能源' }, {
{ tag1: '创新主体', text: '美财政部发布拟议规则限制对华网...', time: '3小时前', tag2: '人工智能' }, "tag1": "科研仪器",
{ tag1: '科技人才', text: '美NIST发布《美国关键和新兴技术....', time: '昨天', tag2: '量子科技' }, "text": "欧盟投资73亿欧元推进数字化转型",
{ tag1: '创新主体', text: '美《开创未来先进计算生态系统:战...', time: '昨天', tag2: '人工智能' }, "time": "1小时前",
{ tag1: '科研仪器', text: '欧盟启动初代“数字地球”系统..', time: '昨天', tag2: '量子科技' }, "tag2": "新能源",
{ tag1: '科研仪器', text: '美NSF投建国家AI可编程云实验室网...', time: '昨天', tag2: '新能源' }, "tagColor": "rgba(250, 140, 22, 1)",
{ tag1: '科研仪器', text: '英启动全球顶尖科技人才引进计划瞄...', time: '昨天', tag2: '新能源' }, "tagBg": "rgba(255, 247, 230, 1)"
{ tag1: '科研仪器', text: '美国家科学基金会致力改进下一代无...', time: '昨天', tag2: '新能源' }, },
{
"tag1": "创新主体",
"text": "美财政部发布拟议规则限制对华网...",
"time": "3小时前",
"tag2": "人工智能",
"tagColor": "rgba(114, 46, 209, 1)",
"tagBg": "rgba(249, 240, 255, 1)"
},
{
"tag1": "科技人才",
"text": "美NIST发布《美国关键和新兴技术....",
"time": "昨天",
"tag2": "量子科技",
"tagColor": "rgba(206, 79, 81, 1)",
"tagBg": "rgba(255, 241, 240, 1)"
},
{
"tag1": "创新主体",
"text": "美《开创未来先进计算生态系统:战...",
"time": "昨天",
"tag2": "人工智能",
"tagColor": "rgba(114, 46, 209, 1)",
"tagBg": "rgba(249, 240, 255, 1)"
},
{
"tag1": "科研仪器",
"text": "欧盟启动初代“数字地球”系统..",
"time": "昨天",
"tag2": "量子科技",
"tagColor": "rgba(206, 79, 81, 1)",
"tagBg": "rgba(255, 241, 240, 1)"
},
{
"tag1": "科研仪器",
"text": "美NSF投建国家AI可编程云实验室网...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
},
{
"tag1": "科研仪器",
"text": "英启动全球顶尖科技人才引进计划瞄...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
},
{
"tag1": "科研仪器",
"text": "美国家科学基金会致力改进下一代无...",
"time": "昨天",
"tag2": "新能源",
"tagColor": "rgba(250, 140, 22, 1)",
"tagBg": "rgba(255, 247, 230, 1)"
}
], ],
}); });
...@@ -158,10 +217,16 @@ const handleToMoreRiskSignal = () => { ...@@ -158,10 +217,16 @@ const handleToMoreRiskSignal = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-main { .content-main {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
overflow: hidden; // overflow: hidden;
font-family: Microsoft YaHei; // font-family: Microsoft YaHei;
width: 1920px;
margin: 0 auto;
background: url("./assets/bg.png");
background-repeat: no-repeat;
background-color: #fff;
background-size: contain;
} }
.content-title { .content-title {
...@@ -355,7 +420,7 @@ const handleToMoreRiskSignal = () => { ...@@ -355,7 +420,7 @@ const handleToMoreRiskSignal = () => {
.list-row { .list-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 5px 0;
height: 40px; height: 40px;
...@@ -382,6 +447,7 @@ const handleToMoreRiskSignal = () => { ...@@ -382,6 +447,7 @@ const handleToMoreRiskSignal = () => {
.item-list-time { .item-list-time {
width: 68px; width: 68px;
text-align: right; text-align: right;
margin-right: 8px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
} }
} }
......
src/views/gjOverView/js/barChart2.js
浏览文件 @ b614d3d3
...@@ -31,14 +31,22 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -31,14 +31,22 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, axisLabel: { show: true, color: '#666' },
splitLine: { show: true, lineStyle: { color: '#ebebeb' } } splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
}, },
series: [ series: [
{ {
name: '研究型大学', name: '研究型大学',
type: 'bar', type: 'bar',
data: series1, data: series1,
barWidth: 8, barWidth: 12,
barGap: '60%', // 同一类别内不同系列的间隔
barCategoryGap: "-60%",
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue } itemStyle: { borderRadius: [8, 8, 0, 0], color: gradBlue }
}, },
...@@ -46,7 +54,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -46,7 +54,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
name: '科技企业', name: '科技企业',
type: 'bar', type: 'bar',
data: series2, data: series2,
barWidth: 8, barWidth: 12,
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan } itemStyle: { borderRadius: [8, 8, 0, 0], color: gradCyan }
}, },
...@@ -54,7 +62,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => { ...@@ -54,7 +62,7 @@ const getColumnChart = (nameList, series1, series2, isPer) => {
name: '研究机构', name: '研究机构',
type: 'bar', type: 'bar',
data: series2, data: series2,
barWidth: 8, barWidth: 12,
label: { show: false }, label: { show: false },
itemStyle: { borderRadius: [8, 8, 0, 0], color: '#FFC63D' } itemStyle: { borderRadius: [8, 8, 0, 0], color: '#FFC63D' }
} }
......
src/views/gjOverView/js/multiLineChart2.js
浏览文件 @ b614d3d3
...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => { ...@@ -67,7 +67,7 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3, dataY4, dataY5) => {
return { return {
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
grid: { top: '5%', right: '0%', bottom: '0%', left: '0%', containLabel: true }, grid: { top: '5%', right: '10%', bottom: '0%', left: '0%', containLabel: true },
xAxis: { type: 'category', boundaryGap: false, data: dataX }, xAxis: { type: 'category', boundaryGap: false, data: dataX },
yAxis: { yAxis: {
......
src/views/gjOverView/js/radarChart2.js
浏览文件 @ b614d3d3
import * as echarts from "echarts"; import * as echarts from "echarts";
const colors = [
const getBarChart = (nameList, valueList, isPer) => { 'rgba(165, 42, 42, 1)', // 红色
'rgba(0, 0, 128, 1)', // 蓝色
'rgba(0, 128, 128, 1)', // 青色
'rgba(75, 0, 130, 1)', // 紫色
'rgba(255, 165, 0, 1)', // 橙色
'rgba(173, 216, 230, 1)' // 浅蓝色
];
const getRadarChart = () => {
const option = { const option = {
title: { text: '' },
tooltip: {},
radar: { radar: {
radius: '50%', // 关键：缩小整个雷达 radius: '50%',
center: ['50%', '45%'], // 可选：再往下挪一点，避免图例挤在一起 center: ['50%', '45%'],
indicator: [ indicator: [
{ name: '能源', max: 6500 }, { name: '能源领域', max: 100 },
{ name: '集成电路', max: 16000 }, { name: '集成电路', max: 100 },
{ name: '人工智能', max: 30000 }, { name: '生物科技', max: 100 },
{ name: '通信网络', max: 38000 }, { name: '人工智能', max: 100 },
{ name: '量子科技', max: 52000 }, { name: '通信网络', max: 100 },
{ name: '生物科技', max: 25000 } { name: '量子科技', max: 100 }
], ],
axisName: { axisName: {
formatter: '{value}', formatter: '{value}',
color: 'rgba(59, 65, 75, 1)', color: 'rgba(59, 65, 75, 1)',
fontSize: 14, fontSize: 16,
fontWeight: 400 fontWeight: 400
} }
}, },
series: [ series: [
{ {
name: 'Budget vs spending', name: '科技领域表现',
type: 'radar', type: 'radar',
symbol: 'none', symbol: 'none',
data: [ data: [
{ {
value: [4200, 3000, 20000, 35000, 50000, 18000], "value": [20, 95, 30, 85, 70, 60],
name: '中国', "name": "中国",
areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } "areaStyle": { "color": "rgba(165, 42, 42, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(165, 42, 42, 1)' // 设置线条颜色
}
}, },
{ {
value: [5000, 14000, 28000, 26000, 42000, 21000], "value": [90, 40, 85, 20, 60, 75],
name: '美国', "name": "美国",
areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } "areaStyle": { "color": "rgba(0, 0, 128, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(0, 0, 128, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [80, 68, 92, 82, 58, 88],
name: '欧盟', "name": "欧盟",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(0, 128, 128, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(0, 128, 128, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [57, 81, 76, 91, 87, 67],
name: '英国', "name": "英国",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(75, 0, 130, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(75, 0, 130, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [93, 59, 79, 89, 69, 83],
name: '日本', "name": "日本",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(255, 165, 0, 0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(255, 165, 0, 1)' // 设置线条颜色
}
}, },
{ {
value: [4000, 14000, 18000, 21000, 32000, 10000], "value": [86, 56, 77, 94, 80, 66],
name: '韩国', "name": "韩国",
areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } "areaStyle": { "color": "rgba(173, 216, 230,0.2)" },
lineStyle: {
width: 1.5, // 设置线条宽度为2
color: 'rgba(173, 216, 230, 1)' // 设置线条颜色
}
} }
] ]
} }
] ]
} };
return option return option;
} };
export default getBarChart export default getRadarChart;
\ No newline at end of file \ No newline at end of file
src/views/overView/index.vue
浏览文件 @ b614d3d3
...@@ -914,8 +914,9 @@ onMounted(() => {}); ...@@ -914,8 +914,9 @@ onMounted(() => {});
} }
.news-box-title { .news-box-title {
height: 48px;
line-height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -936,6 +937,7 @@ onMounted(() => {}); ...@@ -936,6 +937,7 @@ onMounted(() => {});
} }
.news-box-title-small { .news-box-title-small {
margin-top: 3px;
height: 22px; height: 22px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -981,15 +983,18 @@ onMounted(() => {}); ...@@ -981,15 +983,18 @@ onMounted(() => {});
background-position: center center; background-position: center center;
.talk-title { .talk-title {
width: 40%; width: 220px;
height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 1px;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
} }
......
src/views/technologyFigures/component/SourceLibrary.vue
浏览文件 @ b614d3d3
...@@ -5,6 +5,12 @@ ...@@ -5,6 +5,12 @@
<div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card"> <div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card">
<div class="source-library-avatar-wrapper"> <div class="source-library-avatar-wrapper">
<img :src="item.avatar" alt="" class="source-library-avatar" /> <img :src="item.avatar" alt="" class="source-library-avatar" />
<div class="person-tags">
<div class="person-tag-bg" v-for="(tag, tIdx) in item.icon" :key="tIdx">
<img :src="'/public/icon/header-icon' + tag + '.png'" class="tag-icon" alt="tag" />
</div>
</div>
</div> </div>
<div class="source-library-text-content"> <div class="source-library-text-content">
<div style=" width: 240px;"> <div style=" width: 240px;">
...@@ -77,6 +83,28 @@ const handlePageChange = p => { ...@@ -77,6 +83,28 @@ const handlePageChange = p => {
margin-right: 18px; margin-right: 18px;
} }
.person-tags {
display: flex;
margin-top: -20px;
width: 42px;
padding-left: 28px;
text-align: center;
}
.person-tag-bg {
/* 椭圆 6 */
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.tag-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.source-library-avatar { .source-library-avatar {
/* 椭圆 142 */ /* 椭圆 142 */
width: 88px; width: 88px;
...@@ -140,7 +168,7 @@ const handlePageChange = p => { ...@@ -140,7 +168,7 @@ const handlePageChange = p => {
} }
.page { .page {
width: 1221px; width: 1600px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/technologyFigures/component/TimelineMap copy.vue 0 → 100644
浏览文件 @ b614d3d3
<template>
<div ref="map" style="width: 1600px; height: 551px"></div>
<div
style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff);margin-left: 182px">
<div style="width: 1231px; height: 40px; display: flex;justify-content: space-between;">
<div style="display: flex;align-self: center;">
<div class="time-btn">
⏸
</div>
<div class="time-btn">
⏹
</div>
<div class="time-btn">
重置
</div>
</div>
<div style="display: flex;align-self: center;">
<div>
当前时间：
</div>
<input></input>
<div style="margin: 0 10px 0 40px;color: #04295A;"> 刻度</div>
<select name="firstSelect" id="firstSelect">
<option value="option1">周制</option>
</select>
<div style="margin: 0 10px 0 40px;color: #04295A;">速率</div>
<select name="secondSelect" id="secondSelect" style="margin-right: 20px;">
<option value="optionA">1X</option>
<option value="optionB">2X</option>
</select>
</div>
</div>
<div ref=" timeLineChart" style="width: 1231px; height: 30px;background-color: #6091D6; "></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import worldJson from "@/assets/json/world.json";
export default {
name: "MapAnimation",
mounted() {
this.initMap();
},
methods: {
initMap() {
// 注册自定义地图数据
echarts.registerMap("China", worldJson);
const chart = echarts.init(this.$refs.map);
const option = {
// timeline: {
// autoplay: true,
// playInterval: 2000,
// data: ["9月23日"]
// },
grid: {
left: "10%",
right: "10%",
bottom: "10%",
top: "10%",
containLabel: true
},
geo: {
map: "China",
roam: true,
label: {
emphasis: {
show: false,
color: "#fff"
}
},
silent: true,
itemStyle: {
areaColor: "#F6FAFF",
borderColor: "#B9DCFF"
}
},
series: [
{
name: "行程",
type: "effectScatter",
coordinateSystem: "geo",
data: [
{
time: "2025-02-01",
text: "随美国总统特朗普进行国事访问",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "出席中国发展高层论坛2025年年会",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与民主党领导人查克·舒默及哈基姆...",
value: [1.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与阿拉伯国家领导人会晤，商讨加...",
value: [116.46, -44.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "对印度进行为期四天的访问，与总理...",
value: [78.1, 20.7],
itemStyle: { color: "#ffcc00" }
}
],
symbolSize: 10,
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.name;
var value = params.data.datas;
var text = `{fline|${value}}\n{tline|${name}}{img|${img}}`;
return text;
},
color: '#fff',
rich: {
fline: {
padding: [0, 25],
color: '#fff',
textShadowColor: '#030615',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1,
fontSize: 14,
fontWeight: 400,
},
img: {
backgroundColor: {
image: '/testData/image 21.png' // 图片URL
},
height: 50, // 图片高度
width: 50 // 图片宽度
},
tline: {
padding: [0, 27],
color: '#ABF8FF',
fontSize: 12,
},
},
},
emphasis: {
show: true,
},
},
label: {
show: true,
position: "right",
offset: [5, 0],
borderColor: "rgba(174, 214, 255, 1)",
backgroundColor: "rgba(255, 255, 255, 0.8)",
formatter: params => {
const { time, text } = params.data; // 👈 从 params.data 取
return `{time|${time}} \n {text|${text}项}`;
},
rich: {
time: {
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 30,
color: "rgba(5, 95, 194, 1)"
},
text: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
itemStyle: {
color: "#ddb926",
shadowBlur: 10,
shadowColor: "#333"
}
}
]
};
chart.setOption(option);
// const chart2 = echarts.init(this.$refs.timeLineChart);
// const option2 = {
// xAxis: {
// type: "time",
// position: "top",
// axisLine: {
// show: true,
// lineStyle: {
// color: "#000"
// }
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// formatter: "{value}日",
// color: "#000"
// },
// splitLine: {
// show: true
// },
// data: [
// "2024-03-25",
// "2024-04-08",
// "2024-04-15",
// "2024-04-22",
// "2024-04-29",
// "2024-05-06",
// "2024-05-13",
// "2024-05-20",
// "2024-05-27",
// "2024-06-03",
// "2024-06-10",
// "2024-06-17",
// "2024-06-24",
// "2024-07-01",
// "2024-07-08",
// "2024-07-15",
// "2024-07-22",
// "2024-07-29"
// ]
// },
// yAxis: {
// type: "value",
// show: false
// },
// series: [
// {
// data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// type: "line",
// areaStyle: {},
// emphasis: {
// focus: "series"
// }
// }
// ],
// visualMap: {
// show: false,
// dimension: 1,
// pieces: [{ gt: 0, lte: 1, color: "#ffcc00" }]
// }
// };
// chart2.setOption(option2);
}
}
};
</script>
<style scoped>
#map {
width: 1600px;
height: 581px;
}
.time-btn {
color: #04295A;
background-color: #F9FDFE;
border: 1px solid #04295A;
padding: 0 10px;
margin: 0 10px;
}
</style>
src/views/technologyFigures/component/TimelineMap.vue
浏览文件 @ b614d3d3
<template> <template>
<div ref="map" style="width: 1600px; height: 551px"></div> <div ref="map" style="width: 1600px; height: 551px"></div>
<div <div
style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff);margin-left: 182px"> style="width: 1231px; height: 72px; margin-top: -55px; background: linear-gradient(to top, #DAEBFD, #ffffff); margin-left: 182px">
<div style="width: 1231px; height: 40px; display: flex;justify-content: space-between;"> <div style="width: 1231px; height: 40px; display: flex; justify-content: space-between;">
<div style="display: flex;align-self: center;"> <div style="display: flex; align-self: center;">
<div class="time-btn"> <div class="time-btn">
⏸ ⏸
</div> </div>
...@@ -14,16 +14,16 @@ ...@@ -14,16 +14,16 @@
重置 重置
</div> </div>
</div> </div>
<div style="display: flex;align-self: center;"> <div style="display: flex; align-self: center;">
<div> <div>
当前时间： 当前时间：
</div> </div>
<input></input> <input></input>
<div style="margin: 0 10px 0 40px;color: #04295A;"> 刻度</div> <div style="margin: 0 10px 0 40px; color: #04295A;">刻度</div>
<select name="firstSelect" id="firstSelect"> <select name="firstSelect" id="firstSelect">
<option value="option1">周制</option> <option value="option1">周制</option>
</select> </select>
<div style="margin: 0 10px 0 40px;color: #04295A;">速率</div> <div style="margin: 0 10px 0 40px; color: #04295A;">速率</div>
<select name="secondSelect" id="secondSelect" style="margin-right: 20px;"> <select name="secondSelect" id="secondSelect" style="margin-right: 20px;">
<option value="optionA">1X</option> <option value="optionA">1X</option>
<option value="optionB">2X</option> <option value="optionB">2X</option>
...@@ -31,15 +31,13 @@ ...@@ -31,15 +31,13 @@
</div> </div>
</div> </div>
<div ref=" timeLineChart" style="width: 1231px; height: 30px;background-color: #6091D6; "></div> <div ref="timeLineChart" style="width: 1231px; height: 30px; background-color: #6091D6;"></div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import worldJson from "@/assets/json/world.json"; import worldJson from "@/assets/json/world.json";
export default { export default {
name: "MapAnimation", name: "MapAnimation",
mounted() { mounted() {
...@@ -49,15 +47,46 @@ export default { ...@@ -49,15 +47,46 @@ export default {
initMap() { initMap() {
// 注册自定义地图数据 // 注册自定义地图数据
echarts.registerMap("China", worldJson); echarts.registerMap("China", worldJson);
const eventsData = [
{
time: "9月23日",
text: "随美国总统特朗普进行国事访问",
lon: 116.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "出席中国发展高层论坛2025年年会",
lon: 116.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "与民主党领导人查克·舒默及哈基姆...",
lon: 1.46,
lat: 39.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "与阿拉伯国家领导人会晤，商讨加...",
lon: 116.46,
lat: -44.92,
avatar: "/testData/united_states 1 copy.png"
},
{
time: "9月23日",
text: "对印度进行为期四天的访问，与总理...",
lon: 78.1,
lat: 20.7,
avatar: "/testData/united_states 1 copy.png"
}
];
const chart = echarts.init(this.$refs.map); const chart = echarts.init(this.$refs.map);
const option = { const option = {
// timeline: {
// autoplay: true,
// playInterval: 2000,
// data: ["9月23日"]
// },
grid: { grid: {
left: "10%", left: "10%",
right: "10%", right: "10%",
...@@ -85,71 +114,31 @@ export default { ...@@ -85,71 +114,31 @@ export default {
name: "行程", name: "行程",
type: "effectScatter", type: "effectScatter",
coordinateSystem: "geo", coordinateSystem: "geo",
data: [ data: eventsData.map(item => ({
{ value: [item.lon, item.lat],
time: "2025-02-01", time: item.time,
text: "随美国总统特朗普进行国事访问", text: item.text,
value: [116.46, 39.92], avatar: item.avatar,
itemStyle: { color: "#ffcc00" } itemStyle: { color: "#ffcc00" }
}, })),
{
time: "2025-02-01",
text: "出席中国发展高层论坛2025年年会",
value: [116.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与民主党领导人查克·舒默及哈基姆...",
value: [1.46, 39.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "与阿拉伯国家领导人会晤，商讨加...",
value: [116.46, -44.92],
itemStyle: { color: "#ffcc00" }
},
{
time: "2025-02-01",
text: "对印度进行为期四天的访问，与总理...",
value: [78.1, 20.7],
itemStyle: { color: "#ffcc00" }
}
],
symbolSize: 10, symbolSize: 10,
showEffectOn: "render", showEffectOn: "render",
rippleEffect: { rippleEffect: {
brushType: "stroke" brushType: "stroke"
}, },
label: { // label: {
show: true, // normal: {
position: "right", // show: true,
offset: [5, 0], // formatter: params => {
borderColor: "rgba(174, 214, 255, 1)", // const { time, text } = eventsData[params.dataIndex];
// return `{time|${time}} \n {text|${text}}`;
backgroundColor: "rgba(255, 255, 255, 0.8)", // },
formatter: params => { // rich: {
const { time, text } = params.data; // 👈 从 params.data 取 // time: { fontSize: 16, color: 'rgba(5, 95, 194, 1)' },
return `{time|${time}} \n {text|${text}项}`; // text: { fontSize: 14, color: 'rgb(95, 101, 108)' }
}, // }
rich: { // }
time: { // },
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 30,
color: "rgba(5, 95, 194, 1)"
},
text: {
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 22,
color: "rgb(95, 101, 108)"
}
}
},
itemStyle: { itemStyle: {
color: "#ddb926", color: "#ddb926",
shadowBlur: 10, shadowBlur: 10,
...@@ -158,8 +147,16 @@ export default { ...@@ -158,8 +147,16 @@ export default {
} }
] ]
}; };
chart.setOption(option); chart.setOption(option);
// 添加 graphic 元素并设置其位置
this.updateGraphics(chart, eventsData);
// 监听地图缩放和移动事件，以更新 graphic 的位置
chart.on('georoam', () => {
this.updateGraphics(chart, eventsData);
});
const chart2 = echarts.init(this.$refs.timeLineChart); const chart2 = echarts.init(this.$refs.timeLineChart);
const option2 = { const option2 = {
...@@ -225,6 +222,62 @@ export default { ...@@ -225,6 +222,62 @@ export default {
}; };
chart2.setOption(option2); chart2.setOption(option2);
},
updateGraphics(chart, eventsData) {
const graphics = eventsData.map((event, index) => {
const position = chart.convertToPixel({ geoIndex: 0 }, [event.lon, event.lat]);
return {
type: 'group',
position: position,
children: [
{
type: 'image',
x: -170, y: -72,
style: {
image: "/icon/map-text-bg.png",
borderWidth: 2,
borderColor: '#1890ff', width: 339, height: 72
}
},
{
type: 'image',
x: -160, y: -63,
style: {
image: event.avatar,
borderWidth: 2,
borderColor: '#1890ff', width: 42, height: 42
}
}, {
type: 'text',
x: -106, y: -63,
style: {
text: event.time,
fontSize: 16,
fontWeight: '800',
fill: 'rgba(5, 95, 194, 1)', // 文字颜色（ECharts 中用 fill，不是 color）
textAlign: 'left'
}
},
{
type: 'text',
x: -106, y: -40,
style: {
text: event.text,
fontSize: 16,
fontWeight: '400',
fill: 'rgba(59, 65, 75, 1)', // 文字颜色（ECharts 中用 fill，不是 color）
textAlign: 'left'
}
}
]
};
});
chart.setOption({
graphic: graphics
});
chart.resize(); // 强制刷新图表
} }
} }
}; };
...@@ -234,14 +287,14 @@ export default { ...@@ -234,14 +287,14 @@ export default {
#map { #map {
width: 1600px; width: 1600px;
height: 581px; height: 581px;
font-family: Microsoft YaHei;
} }
.time-btn { .time-btn {
color: #04295A; color: #04295A;
background-color: #F9FDFE; background-color: #F9FDFE;
border: 1px solid #04295A; border: 1px solid #04295A;
padding: 0 10px; padding: 0 10px;
margin: 0 10px; margin: 0 10px;
} }
</style> </style>
\ No newline at end of file
src/views/technologyFigures/index.vue
浏览文件 @ b614d3d3
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<div class="box1-header"> <div class="box1-header">
<div class="box1-header-left"> <div class="box1-header-left">
<div class="icon"> <div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon4.png" alt="" />
</div> </div>
<div class="title">{{ "人物新闻动态" }}</div> <div class="title">{{ "人物新闻动态" }}</div>
</div> </div>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
<div class="box3-header"> <div class="box3-header">
<div class="box3-header-left"> <div class="box3-header-left">
<div class="box3-header-icon"> <div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon3.png" alt="" />
</div> </div>
<!-- <div class="box3-header-title">{{ "人物动向" }}</div> --> <!-- <div class="box3-header-title">{{ "人物动向" }}</div> -->
<div class="header-title" <div class="header-title"
...@@ -178,7 +178,7 @@ ...@@ -178,7 +178,7 @@
<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">
<img src="./assets/images/box3-header-icon.png" alt="" <img src="./assets/images/TechnologyFigures-icon1.png" alt=""
style="margin: 13px 21px 13px 21px; height: 22px" /> style="margin: 13px 21px 13px 21px; height: 22px" />
<div class="box5-header-title">{{ "科技人物观点词云" }}</div> <div class="box5-header-title">{{ "科技人物观点词云" }}</div>
</div> </div>
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
<div class="box6"> <div class="box6">
<div class="box6-header" style="width: 790px"> <div class="box6-header" style="width: 790px">
<div class="header-icon"> <div class="header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" /> <img src="./assets/images/box3-header-icon.png" alt="" />
</div> </div>
<div class="header-title" <div class="header-title"
style="display: flex; width: 740px; justify-content: space-between; align-items: center"> style="display: flex; width: 740px; justify-content: space-between; align-items: center">
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
<div class="box7-header"> <div class="box7-header">
<div class="box7-header-left"> <div class="box7-header-left">
<div class="box7-header-icon"> <div class="box7-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
</div> </div>
<div class="box7-header-title">{{ "科技人物类型" }}</div> <div class="box7-header-title">{{ "科技人物类型" }}</div>
</div> </div>
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
<div class="box8-header"> <div class="box8-header">
<div class="box8-header-left"> <div class="box8-header-left">
<div class="box8-header-icon"> <div class="box8-header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" /> <img src="./assets/images/TechnologyFigures-icon2.png" alt="" />
</div> </div>
<div style="display: flex; width: 730px; justify-content: space-between; align-items: center"> <div style="display: flex; width: 730px; justify-content: space-between; align-items: center">
<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div> <div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
...@@ -839,7 +839,7 @@ onMounted(() => { ...@@ -839,7 +839,7 @@ onMounted(() => {
line-height: 47px; line-height: 47px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 400; font-weight: 400;
} }
} }
......
src/views/technologyFigures/json/source.json
浏览文件 @ b614d3d3
...@@ -4,111 +4,127 @@ ...@@ -4,111 +4,127 @@
"title": "美国总统（2017-2021、2025-至今），共和党党员", "title": "美国总统（2017-2021、2025-至今），共和党党员",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": ["1"]
}, },
{ {
"name": "詹姆斯·戴维·万斯", "name": "詹姆斯·戴维·万斯",
"title": "美国副总统、参议院议长、共和党全国委员会财务主席", "title": "美国副总统、参议院议长、共和党全国委员会财务主席",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": []
}, },
{ {
"name": "黄仁勋", "name": "黄仁勋",
"title": "NVIDIA公司创始人兼首席执行官，美国工程院院士", "title": "NVIDIA公司创始人兼首席执行官，美国工程院院士",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "马尔科·鲁比奥", "name": "马尔科·鲁比奥",
"title": "美国国务卿，美国总统国家安全事务临时助理", "title": "美国国务卿，美国总统国家安全事务临时助理",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": []
}, },
{ {
"name": "埃隆·马斯克", "name": "埃隆·马斯克",
"title": "特斯拉创始人兼首席执行官、SpaceX、美国党创始人", "title": "特斯拉创始人兼首席执行官、SpaceX、美国党创始人",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "乔迪·阿灵顿", "name": "乔迪·阿灵顿",
"title": "共和党党员，美国国会众议院议员，预算委员会主席", "title": "共和党党员，美国国会众议院议员，预算委员会主席",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "霍华德·卢特尼克", "name": "霍华德·卢特尼克",
"title": "美国商务部长", "title": "美国商务部长",
"tag": "行政主管", "tag": "行政主管",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"] "colorArray": ["#1677FF", "#BAE0FF", "#E6F4FF"],
"icon": ["1"]
}, },
{ {
"name": "蒂姆·库克", "name": "蒂姆·库克",
"title": "苹果公司首席执行官，清华大学经济管理学院顾问委员会主席", "title": "苹果公司首席执行官，清华大学经济管理学院顾问委员会主席",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": []
}, },
{ {
"name": "朱棣文", "name": "朱棣文",
"title": "第12任美国能源部部长，主要研究领域为原子物理、激光科学", "title": "第12任美国能源部部长，主要研究领域为原子物理、激光科学",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": ["1"]
}, },
{ {
"name": "约翰·图恩", "name": "约翰·图恩",
"title": "共和党党员，美国国会众议院议员", "title": "共和党党员，美国国会众议院议员",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "珍妮弗·道德纳", "name": "珍妮弗·道德纳",
"title": "主要研究领域为RNA领域和基因编辑技术", "title": "主要研究领域为RNA领域和基因编辑技术",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": ["1"]
}, },
{ {
"name": "迈克·约翰逊", "name": "迈克·约翰逊",
"title": "美国众议院议长", "title": "美国众议院议长",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": []
}, },
{ {
"name": "亚当·史密斯", "name": "亚当·史密斯",
"title": "美国国会众议院议员，众议院军事委员会民主党领袖", "title": "美国国会众议院议员，众议院军事委员会民主党领袖",
"tag": "国会议员", "tag": "国会议员",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"] "colorArray": ["#FAAD14", "#FFE58F", "#FFFBE6"],
"icon": ["1"]
}, },
{ {
"name": "查尔斯·本内特", "name": "查尔斯·本内特",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者", "title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": []
}, },
{ {
"name": "桑达尔·皮查伊", "name": "桑达尔·皮查伊",
"title": "谷歌母公司Alphabet首席执行官", "title": "谷歌母公司Alphabet首席执行官",
"tag": "科技企业领袖", "tag": "科技企业领袖",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"] "colorArray": ["#13A8A8", "#87E8DE", "#E6FFFFB"],
"icon": ["1"]
}, },
{ {
"name": "威康·汤姆逊", "name": "威康·汤姆逊",
"title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者", "title": "美国国家科学院院士、美国物理学会院士，量子信息论主要创立者",
"tag": "顶级科学家", "tag": "顶级科学家",
"avatar": "/public/testData/data2.png", "avatar": "/public/testData/data2.png",
"colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"] "colorArray": ["#722ED1", "#D3ADF7", "#F9F0FF"],
"icon": []
} }
] ]
src/views/thinkTank/ReportDetail/index.vue
浏览文件 @ b614d3d3
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
</div> </div>
</div> </div>
<div class="btn-box"> <div class="btn-box">
<div class="btn"> <!-- <div class="btn">
<div class="icon"> <div class="icon">
<img src="./images/btn-icon1.png" alt="" /> <img src="./images/btn-icon1.png" alt="" />
</div> </div>
<div class="text">{{ "查看官网" }}</div> <div class="text">{{ "查看官网" }}</div>
</div> </div> -->
<div class="btn"> <div class="btn">
<div class="icon"> <div class="icon">
<img src="./images/btn-icon2.png" alt="" /> <img src="./images/btn-icon2.png" alt="" />
...@@ -64,7 +64,8 @@ ...@@ -64,7 +64,8 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<ReportAnalysis></ReportAnalysis> <ReportAnalysis v-if="tabActiveName === '报告分析'"></ReportAnalysis>
<PolicyTracking v-else></PolicyTracking>
</div> </div>
</div> </div>
</template> </template>
...@@ -73,6 +74,7 @@ ...@@ -73,6 +74,7 @@
import { ref } from "vue"; import { ref } from "vue";
import ReportAnalysis from './reportAnalysis/index.vue' import ReportAnalysis from './reportAnalysis/index.vue'
import PolicyTracking from './policyTracking/index.vue'
const tabActiveName = ref("报告分析"); const tabActiveName = ref("报告分析");
......
src/views/thinkTank/assets/images/box1-img.png 0 → 100644
浏览文件 @ b614d3d3
差异被折叠。
src/views/thinkTank/assets/images/box1-logo.png 0 → 100644
浏览文件 @ b614d3d3
差异被折叠。
src/views/thinkTank/utils/barChart.js deleted 100644 → 0
浏览文件 @ 2fecb118
差异被折叠。
src/views/thinkTank/utils/mapChart.js deleted 100644 → 0
浏览文件 @ 2fecb118
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论