Skip to content

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

update

上级 912920f8
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 582 行增加 和 1260 行删除
src/router/modules/thinktank.js
浏览文件 @ 0aad93fd
......@@ -14,7 +14,7 @@ const thinktankRoutes = [
}
},
{
path: "/think-tank/:id",
path: "/thinkTank/thinkTankDetail/:id",
name: "ThinkTankDetail",
component: ThinkTankDetail,
meta: {
......@@ -22,7 +22,7 @@ const thinktankRoutes = [
}
},
{
path: "/thinkTank/report/:id",
path: "/thinkTank/reportDetail/:id",
name: "ReportDetail",
component: ReportDetail,
meta: {
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 0aad93fd
......@@ -272,193 +272,6 @@
</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>
<div class="center-footer">
<div class="box3">
......
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ 0aad93fd
......@@ -25,9 +25,10 @@
<div class="box1-tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in tabList"
:class="{ tabActive: box1BtnActiveName === item }"
v-for="(item, index) in box1BtnList"
:key="index"
@click="handleClickBox1Btn(item)"
>
{{ item }}
</div>
......@@ -51,7 +52,7 @@
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共105家企业` }}</div>
<div class="box1-footer-left">{{ `共${companyTotalNum}家企业` }}</div>
<div class="box1-footer-right">
<el-pagination
background
......@@ -100,7 +101,7 @@
</div>
<div class="box2-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
......@@ -108,7 +109,7 @@
}}
</div>
<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>
......@@ -147,7 +148,7 @@
</div>
<div class="box3-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="footer-center">
{{
......@@ -155,7 +156,7 @@
}}
</div>
<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>
......@@ -165,17 +166,21 @@
<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
// 企业影响分析
const chart1Data = ref({
title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
value: [109, 95, 79, 25, 11],
});
const tabActiveIndex = ref(0);
const tabList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const box1BtnActiveName = ref('集成电路');
const box1BtnList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const handleClickBox1Btn = btn => {
box1BtnActiveName.value = btn
}
const companyList = ref([
{
name: "宁德时代新能源科技股份有限公司",
......@@ -218,11 +223,36 @@ const companyList = ref([
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([
{
type: "科技法案",
......@@ -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(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1");
......@@ -492,13 +490,12 @@ onMounted(() => {
left: 0;
top: 114px;
height: 8px;
width: 1556px;
width: 1054px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
// background: pink;
position: relative;
box-sizing: border-box;
padding-left: 13px;
......@@ -607,12 +604,10 @@ onMounted(() => {
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
width: 100%;
height: 100%;
}
}
}
......@@ -753,12 +748,10 @@ onMounted(() => {
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
width: 100%;
height: 100%;
}
}
}
......
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 0aad93fd
......@@ -6,13 +6,14 @@
<div class="header-left"></div>
<div class="title">提出背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
<el-button type="info" plain v-else>全部背景</el-button>
<div
class="btn"
:class="{ btnActive: box1ActiveBtn === item }"
v-for="(item, index) in box1BtnList"
:key="index"
@click="handleClickBox1Btn(item)"
>
{{ item }}
</div>
</div>
<div class="header-right">
......@@ -109,8 +110,12 @@ import Img3 from "./assets/images/box2-img3.png";
import Img4 from "./assets/images/box2-img4.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([
{
title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
......@@ -129,6 +134,7 @@ const backgroundList = ref([
}
]);
// 相关事件
const relatedEvents = ref([
{
image: Img1,
......@@ -165,6 +171,8 @@ const relatedEvents = ref([
}
]);
// 法律依据
const laws = ref([
{
name: "《美国法典》",
......@@ -226,8 +234,26 @@ const laws = ref([
top: 14px;
right: 84px;
display: flex;
justify-content: flex-end;
gap: 8px;
.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 {
......@@ -347,12 +373,16 @@ const laws = ref([
margin-top: -5px;
}
.content {
width: 892px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.item-right {
......
src/views/decree/decreeLayout/overview/index.vue
浏览文件 @ 0aad93fd
<template>
<div class="decree-overview-wrap">
<div class="left">
<div
class="sider-btn"
:class="{ siderBtnActive: siderBtnActive === item.name }"
@click="handleClickLeftSiderBtn(item)"
v-for="(item, index) in siderList"
:key="index"
>
<div class="btn-text">{{ item.name }}</div>
<div class="btn-icon">
<el-icon v-if="siderBtnActive === item.name" color="#fff"
><CaretRight
/></el-icon>
</div>
</div>
</div>
<div class="main">
<router-view />
</div>
</div>
<div class="decree-overview-wrap">
<div class="left">
<div
class="sider-btn"
:class="{ siderBtnActive: siderBtnActive === item.name }"
@click="handleClickLeftSiderBtn(item)"
v-for="(item, index) in siderList"
:key="index"
>
<div class="btn-text">{{ item.name }}</div>
<div class="btn-icon">
<el-icon v-if="siderBtnActive === item.name" color="#fff"><CaretRight /></el-icon>
</div>
</div>
</div>
<div class="main">
<router-view />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from '@/router'
import { ref, onMounted, onUnmounted } from "vue";
import router from "@/router";
const siderList = ref([
{
name: "政令简介",
path: "/decreeLayout/overview/introduction",
},
{
name: "政令背景",
path: "/decreeLayout/overview/background",
},
{
name: "政令简介",
path: "/decreeLayout/overview/introduction"
},
{
name: "政令背景",
path: "/decreeLayout/overview/background"
}
]);
const siderBtnActive = ref("政令简介");
const handleClickLeftSiderBtn = (item) => {
siderBtnActive.value = item.name
router.push(item.path)
}
const handleClickLeftSiderBtn = item => {
window.sessionStorage.setItem("siderBarActiveName", item.name);
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>
<style lang="scss" scoped>
.decree-overview-wrap {
width: 1920px;
height: 100%;
overflow: hidden;
background: rgba(247, 248, 249, 1);
display: flex;
.left {
width: 160px;
padding-top: 16px;
.sider-btn {
margin-top: 20px;
margin-left: 20px;
width: 120px;
height: 32px;
display: flex;
border-radius: 16px;
cursor: pointer;
.btn-text {
margin-left: 28px;
width: 68px;
height: 32px;
line-height: 32px;
text-align: left;
box-sizing: border-box;
font-size: 16px;
font-family: Microsoft YaHei;
color: rgba(95, 101, 108, 1);
}
.btn-icon {
width: 22px;
padding-top: 9px;
}
}
.siderBtnActive {
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
}
}
.main{
width: 1760px;
height: 901px;
}
width: 1920px;
height: 100%;
overflow: hidden;
background: rgba(247, 248, 249, 1);
display: flex;
.left {
width: 160px;
padding-top: 16px;
.sider-btn {
margin-top: 20px;
margin-left: 20px;
width: 120px;
height: 32px;
display: flex;
border-radius: 16px;
cursor: pointer;
.btn-text {
margin-left: 28px;
width: 68px;
height: 32px;
line-height: 32px;
text-align: left;
box-sizing: border-box;
font-size: 16px;
font-family: Microsoft YaHei;
color: rgba(95, 101, 108, 1);
}
.btn-icon {
width: 22px;
padding-top: 9px;
}
}
.siderBtnActive {
background: var(--color-main-active);
.btn-text {
color: #fff !important;
}
}
}
.main {
width: 1760px;
height: 901px;
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 0aad93fd
......@@ -22,42 +22,42 @@
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
<div class="item-right">{{ basicInfo.name }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text">
{{ "Promoting the Export of the American AI Technology Stack" }}
{{ basicInfo.eName }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<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 }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ "2025年7月23日" }}</div>
<div class="item-right text">{{ basicInfo.signTime }}</div>
</div>
<div class="item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right text">
{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
{{ basicInfo.signPeople }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ "第14320号行政命令 (EO 14320)" }}
{{ basicInfo.bh }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ "签署后90天内建立机制并开始实施" }}
{{ basicInfo.deadline }}
</div>
</div>
</div>
......@@ -99,13 +99,14 @@
<div class="header-left"></div>
<div class="title">执行机构</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1">商务部</el-button>
<el-button type="info" plain v-else>商务部</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2">经济外交行动组</el-button>
<el-button type="info" plain v-else>经济外交行动组</el-button>
<div
class="btn"
:class="{ btnActive: box3ActiveBtn === item }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(item)"
>
{{ item }}
</div>
</div>
<div class="header-right">
......@@ -120,11 +121,11 @@
<div class="box3-top">
<div class="box3-top-top">
<div class="left">
<img src="./assets/images/box3-img.png" alt="" />
<img :src="box3TopData.logo" alt="" />
</div>
<div class="right">
<div class="name">{{ "美国商务部" }}</div>
<div class="ename">{{ "United States Department of Commerce" }}</div>
<div class="name">{{ box3TopData.name }}</div>
<div class="ename">{{ box3TopData.eName }}</div>
</div>
<!-- <div class="more">
<div class="text">{{ "查看官网" }}</div>
......@@ -138,26 +139,26 @@
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "成立时间:" }}</div>
<div class="item-right">{{ "1903年2月14日" }}</div>
<div class="item-right">{{ box3TopData.clsj }}</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "主要职责:" }}</div>
<div class="item-right">
{{ "国际贸易、进出口管制（R-TX-19）" }}
{{ box3TopData.zyzz }}
</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "总部地址:" }}</div>
<div class="item-right">
{{ "华盛顿宪法大道1401号胡佛大楼" }}
{{ box3TopData.zbdz }}
</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "部长:" }}</div>
<div class="item-right">{{ "霍华德·卢特尼克" }}</div>
<div class="item-right">{{ box3TopData.bz }}</div>
</div>
</div>
</div>
......@@ -194,10 +195,21 @@
<script setup>
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([
{
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
......@@ -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([
{
time: "2025-07-31",
......@@ -269,8 +298,26 @@ const eventList = ref([
top: 14px;
right: 84px;
display: flex;
justify-content: flex-end;
gap: 8px;
.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 {
......@@ -327,6 +374,8 @@ const eventList = ref([
.tag-box {
display: flex;
.tag {
height: 24px;
line-height: 24px;
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
......
src/views/decree/header.vue deleted 100644 → 0
浏览文件 @ 912920f8
<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
浏览文件 @ 912920f8
<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/thinkTank/ReportDetail/policyTracking/index.vue
浏览文件 @ 0aad93fd
......@@ -46,7 +46,14 @@
</div>
</div>
</div>
<div class="box1-footer"></div>
<div class="box1-footer">
<div class="info">
{{ `共105项调查` }}
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
</div>
</div>
</div>
</div>
......@@ -96,6 +103,7 @@
<script setup>
import { ref, onMounted } from "vue";
// 政策建议落实情况
const box1Data = ref([
{
id: 1,
......@@ -249,6 +257,7 @@ const box1Data = ref([
}
]);
// 相关政策动态
const box2Data = ref([
{
title: "这是示例标题a",
......@@ -359,11 +368,11 @@ const box2Data = ref([
}
}
.left {
height: 1412px;
height: 1442px;
.box1 {
margin-top: 16px;
width: 1104px;
height: 1380px;
height: 1405px;
margin-bottom: 16px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -503,6 +512,22 @@ const box2Data = ref([
}
}
}
.box1-footer {
height: 50px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 20px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
}
......@@ -597,17 +622,17 @@ const box2Data = ref([
}
}
.box2-footer {
margin: 10px auto;
margin: 10px auto;
width: 108px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
&:hover{
background: var(--color-bg-hover);
}
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.text {
color: var(--color-main-active);
height: 22px;
......@@ -617,14 +642,14 @@ const box2Data = ref([
line-height: 22px;
letter-spacing: 0px;
}
.icon{
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 0aad93fd
......@@ -15,10 +15,7 @@
</div>
</div>
<div class="box1-main">
{{
`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`
}}
{{ box1Data }}
</div>
<div class="box1-footer">
<div class="text">{{ "查看更多" }}</div>
......@@ -42,7 +39,15 @@
</div>
<div class="box2-main">
<div class="box2-main-tag-box">
<div class="tag" v-for="(item, index) in areaList" :key="index">{{ item }}</div>
<div
class="tag"
:class="{ tagActive: activeArea === item }"
v-for="(item, index) in areaList"
:key="index"
@click="handleClickArea(item)"
>
{{ item }}
</div>
</div>
<div class="box2-content" id="box2Chart"></div>
</div>
......@@ -90,7 +95,14 @@
</div>
</div>
</div>
<div class="box3-main-footer"></div>
<div class="box3-main-footer">
<div class="info">
{{ `共105项调查` }}
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
</div>
</div>
</div>
<div class="box3-footer">
<div class="footer-left">
......@@ -112,9 +124,56 @@
<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
// 内容摘要
const box1Data =
ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
// 涉及科技领域
const areaList = ref(["人工智能", "半导体与高科技", "经济与贸易", "地缘政治", "军事与安全", "国际规则与多边体系"]);
const activeArea = ref("人工智能");
const handleClickArea = area => {
activeArea.value = area;
};
const box2Data = ref([
{
name: "通用人工智能",
value: 100
},
{
name: "AI芯片",
value: 66
},
{
name: "计算能力又是",
value: 72
},
{
name: "基准测试",
value: 88
},
{
name: "出口管制",
value: 78
},
{
name: "军事AI",
value: 85
},
{
name: "生态系统",
value: 88
},
{
name: "模型能力",
value: 89
}
]);
// 主要观点
const majorOpinions = ref([
{
id: 1,
......@@ -132,7 +191,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 2,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -143,7 +202,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 3,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -154,7 +213,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 4,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -169,7 +228,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 5,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -184,7 +243,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 6,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -199,7 +258,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 7,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -210,7 +269,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 8,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -225,7 +284,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
id: 9,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -240,22 +299,7 @@ const majorOpinions = ref([
]
},
{
id: 1,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
{
name: "关税",
status: 2
},
{
name: "跨境电商",
status: 1
}
]
},
{
id: 1,
id: 10,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
......@@ -270,6 +314,11 @@ const majorOpinions = ref([
]
}
]);
onMounted(() => {
const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart");
});
</script>
<style lang="scss" scoped>
......@@ -415,11 +464,18 @@ const majorOpinions = ref([
gap: 8px;
.tag {
height: 28px;
line-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);
cursor: pointer;
}
.tagActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
background: rgba(231, 243, 255, 1);
}
}
.box2-content {
......@@ -437,7 +493,7 @@ const majorOpinions = ref([
margin-top: 17px;
.box3 {
width: 1103px;
height: 936px;
height: 946px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......@@ -445,10 +501,11 @@ const majorOpinions = ref([
position: relative;
.box3-main {
width: 1057px;
height: 780px;
height: 800px;
margin: 0 auto;
.box3-main-main {
height: 720px;
overflow: hidden;
.box3-item {
width: 1057px;
height: 72px;
......@@ -538,6 +595,21 @@ const majorOpinions = ref([
background: rgba(247, 248, 249, 1);
}
}
.box3-main-footer {
height: 80px;
display: flex;
justify-content: space-between;
padding: 30px 5px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box3-footer {
position: absolute;
......
src/views/thinkTank/ReportDetail/reportAnalysis/utils/worldCloudChart.js 0 → 100644
浏览文件 @ 0aad93fd
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
shape: "circle", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 30, // 网格大小，影响词间距。
sizeRange: [10, 25], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 15,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// 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: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ 0aad93fd
......@@ -157,6 +157,7 @@ import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png";
// 提出建议领域分布
const box1Data = ref([
{
name: "半导体",
......@@ -211,6 +212,7 @@ const box1YearList = ref([
}
]);
// 相关政策领域分布
const box2Data = ref([
{
name: "集成电路",
......@@ -272,6 +274,7 @@ const box2YearList = ref([
}
]);
// 热门研究方向变化趋势
const box3Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
......@@ -306,6 +309,7 @@ const box3YearList = ref([
}
]);
// 搜索政策建议
const searchPolicy = ref("");
const yearList = ref([
......@@ -325,6 +329,7 @@ const yearList = ref([
const selectedYear = ref("近一年发布");
// 科技领域
const areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]);
const selectedAreaList = ref(["人工智能", "半导体/芯片"]);
......@@ -686,12 +691,12 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 24px;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ 0aad93fd
......@@ -18,18 +18,18 @@
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "地区筛选" }}</div>
<div class="title">{{ "报告类型" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="region in filters.regions"
:key="region.id"
v-model="activeFilters.regions"
:label="region.id"
v-for="type in reportTypeList"
:key="type.id"
v-model="selectedReportTypeList"
:label="type.id"
class="filter-checkbox"
>
{{ region.name }}
{{ type.name }}
</el-checkbox>
</div>
</div>
......@@ -37,14 +37,14 @@
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "智库类型" }}</div>
<div class="title">{{ "研究类型" }}</div>
</div>
<div class="select-main select-main1">
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="type in filters.types"
v-for="type in researchTypeList"
:key="type.id"
v-model="activeFilters.types"
v-model="selectedResearchTypeList"
:label="type.id"
class="filter-checkbox"
>
......@@ -53,23 +53,13 @@
</div>
</div>
</div>
<div class="select-box">
<div class="select-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究领域" }}</div>
<div class="title">{{ "作者" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="research in filters.researches"
:key="research.id"
v-model="activeFilters.researches"
:label="research.id"
class="filter-checkbox"
>
{{ research.name }}
</el-checkbox>
</div>
<div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" />
</div>
</div>
</div>
......@@ -119,67 +109,55 @@ import Img12 from "./images/img12.png";
const handleToReportDetail = () => {
const route = router.resolve({
path: "/thinkTank/report/1",
name: 'ReportDetail',
params: {
id: 1
}
});
window.open(route.href, "_blank");
}
const activeFilters = reactive({
regions: ["north_america"],
types: ["gov"],
researches: ["全部领域"]
});
const reportTypeList = ref([
{
id: '研究报告',
name: '研究报告',
},
{
id: '简报',
name: '简报',
},
{
id: '会议记录',
name: '会议记录',
},
{
id: '期刊文章',
name: '期刊文章',
},
])
const selectedReportTypeList = ref(['研究报告'])
const filters = reactive({
regions: [
{ id: "north_america", name: "北美" },
{ id: "europe", name: "欧洲" },
{ id: "asia", name: "亚洲" },
{ id: "other", name: "其他地区" }
],
types: [
{ id: "gov", name: "政府背景" },
{ id: "university", name: "高校附属" },
{ id: "independent", name: "独立智库" },
{ id: "corporate", name: "企业视景" }
],
researches: [
{
id: "全部领域",
name: "全部领域"
},
{
id: "人工智能",
name: "人工智能"
},
{
id: "通信网络",
name: "通信网络"
},
{
id: "量子科技",
name: "量子科技"
},
{
id: "能源",
name: "能源"
},
{
id: "生物技术",
name: "生物技术"
},
const researchTypeList = ref([
{
id: '研究报告',
name: '研究报告',
},
{
id: '简报',
name: '简报',
},
{
id: '会议记录',
name: '会议记录',
},
{
id: '期刊文章',
name: '期刊文章',
},
])
const selectedResearchTypeList = ref(['研究报告'])
{
id: "新材料",
name: "新材料"
},
{
id: "海洋",
name: "海洋"
}
]
});
const author = ref('') // 作者
const curFooterList = ref([
{
......@@ -309,7 +287,7 @@ const selectedYear = ref("近一年发布");
gap: 16px;
.left {
width: 300px;
height: 806px;
height: 520px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -329,12 +307,12 @@ const selectedYear = ref("近一年发布");
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
line-height: 26px;
letter-spacing: 1px;
text-align: left;
}
......@@ -345,6 +323,13 @@ const selectedYear = ref("近一年发布");
.select-main1 {
width: 100px;
}
.input-main{
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
}
}
.right {
......@@ -421,4 +406,8 @@ const selectedYear = ref("近一年发布");
}
}
}
.filter-checkbox {
width: 180px;
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/thinkInfo/index.vue
浏览文件 @ 0aad93fd
......@@ -189,6 +189,7 @@ import Icon3 from "./images/icon3.png";
import Icon4 from "./images/icon4.png";
import Icon5 from "./images/icon5.png";
// 基本信息
const basicInfo = ref({
img: InfoImg,
country: "美国",
......@@ -198,7 +199,7 @@ const basicInfo = ref({
num: "约1,700名员工 ",
money: "约3.5亿美元 "
});
// 全球分支机构
const worldInfo = ref({
position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
position2: "英国剑桥、比利时布鲁塞尔",
......@@ -206,6 +207,7 @@ const worldInfo = ref({
position4: "堪培拉 "
});
// 经费来源
const box1LeftData = ref({
total: "4.358亿美元",
gov: "3.271亿美元",
......@@ -250,6 +252,7 @@ const box1ChartData = ref([
}
]);
// 研究领域演变
const timeLineList = ref([
{
time: "2025年7月25日",
......@@ -273,39 +276,8 @@ const timeLineList = ref([
}
]);
const box3RightData = ref([
{
img: Icon1,
name: "杰森·马西尼 ​",
postion: "兰德公司总裁兼首席执行官",
desc: "曾任职于哈佛大学经济学院、美国财政部"
},
{
img: Icon2,
name: "安德鲁·R·霍恩 ​",
postion: "高级副总裁,研究与分析",
desc: "曾任职于白宫科技政策顾问办公室"
},
{
img: Icon3,
name: "杰森·马西尼 ​",
postion: "兰德公司总裁兼首席执行官",
desc: "日籍研究院，毕业于斯坦福大学"
},
{
img: Icon4,
name: "梅丽莎·罗 ​",
postion: "副总裁,全球研究人才",
desc: "曾任职于美国国防部"
},
{
img: Icon5,
name: "安妮塔·钱德拉 ​ ​",
postion: "副总裁兼主任,兰德社会和经济福祉",
desc: "曾任职于哈佛大学经济学院、美国商务部"
}
]);
// 核心研究人员
const handleBox3Chart = () => {
// 将分类数据转换为树状图格式
const treemapData = [];
......@@ -356,6 +328,39 @@ const handleBox3Chart = () => {
setChart(box3Chart, "box3Chart");
};
const box3RightData = ref([
{
img: Icon1,
name: "杰森·马西尼 ​",
postion: "兰德公司总裁兼首席执行官",
desc: "曾任职于哈佛大学经济学院、美国财政部"
},
{
img: Icon2,
name: "安德鲁·R·霍恩 ​",
postion: "高级副总裁,研究与分析",
desc: "曾任职于白宫科技政策顾问办公室"
},
{
img: Icon3,
name: "杰森·马西尼 ​",
postion: "兰德公司总裁兼首席执行官",
desc: "日籍研究院，毕业于斯坦福大学"
},
{
img: Icon4,
name: "梅丽莎·罗 ​",
postion: "副总裁,全球研究人才",
desc: "曾任职于美国国防部"
},
{
img: Icon5,
name: "安妮塔·钱德拉 ​ ​",
postion: "副总裁兼主任,兰德社会和经济福祉",
desc: "曾任职于哈佛大学经济学院、美国商务部"
}
]);
onMounted(() => {
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
......
src/views/thinkTank/components/ReportList.vue deleted 100644 → 0
浏览文件 @ 912920f8
<template>
<div class="report-page-container">
<!-- 顶部过滤区域 -->
<div class="top-filters">
<div class="filter-left">
<span class="filter-label" :class="{ 'active': activeTab === 'report' }" @click="activeTab = 'report'">智库报告</span>
<span class="filter-label" :class="{ 'active': activeTab === 'policy' }" @click="activeTab = 'policy'">政策建议</span>
</div>
<div class="filter-right">
<el-select v-model="selectedDateRange" placeholder="请选择" class="filter-select">
<el-option label="近一年发布" value="last_year"></el-option>
<el-option label="近三年发布" value="last_three_years"></el-option>
</el-select>
<el-select v-model="selectedSort" placeholder="请选择" class="filter-select">
<el-option label="发布时间" value="publish_time"></el-option>
<el-option label="热度" value="popularity"></el-option>
</el-select>
</div>
</div>
<el-row :gutter="24" v-if="activeTab === 'report'">
<el-col :span="5">
<div class="sidebar-filters">
<div class="filter-group">
<CardTitle title="地区筛选" style="margin-bottom: 10px"/>
<div class="checkbox-group">
<el-checkbox
v-for="region in filters.regions"
:key="region.id"
v-model="activeFilters.regions"
:label="region.id"
class="filter-checkbox"
>
{{ region.name }}
</el-checkbox>
</div>
</div>
<div class="filter-group">
<CardTitle title="智库类型" style="margin-bottom: 10px"/>
<div class="checkbox-group">
<el-checkbox
v-for="type in filters.types"
:key="type.id"
v-model="activeFilters.types"
:label="type.id"
class="filter-checkbox"
>
{{ type.name }}
</el-checkbox>
</div>
</div>
<div class="filter-group">
<CardTitle title="研究类型" style="margin-bottom: 10px"/>
<div class="checkbox-group">
<el-checkbox
v-for="research in filters.researches"
:key="research.id"
v-model="activeFilters.researches"
:label="research.id"
class="filter-checkbox"
>
{{ research.rtypeName }}
</el-checkbox>
</div>
</div>
<div class="subscription-box">
<h3>动态订阅</h3>
<p>选择您感兴趣的研究领域，获取最新报告和相关书目。</p>
<el-button type="primary" style="width: 100%;">保存订阅设置</el-button>
</div>
</div>
</el-col>
<el-col :span="19">
<div class="main-content">
<el-row :gutter="20">
<el-col :span="8" v-for="report in reportList" :key="report.id" class="card-col"
@click="handleReportClick(report)">
<el-card shadow="hover" class="report-card" :body-style="{ padding: '0px' }">
<el-image :src="$withFallbackImage(report.imageUrl, report.id) " fit="cover" class="card-image" lazy></el-image>
<div class="card-content">
<h4 class="card-title">{{ report.name }}</h4>
<div class="card-meta">
<span class="card-date">{{ report.times }}</span>
<span class="card-source">{{ report.thinkTankName }}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<PolicyTab v-if="activeTab === 'policy'" :showSearch="false" />
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import PolicyTab from '@/components/PolicyTab.vue'
import { getOverviewReport, getThinkTankResearchType } from '@/api'
import { mockReportList } from '../mockData';
const router = useRouter()
const activeTab = ref('report')
// --- Reactive Data for Filters ---
const filters = reactive({
regions: [
{ id: 'north_america', name: '北美' },
{ id: 'europe', name: '欧洲' },
{ id: 'asia', name: '亚洲' },
{ id: 'other', name: '其他地区' },
],
types: [
{ id: 'gov', name: '政府背景' },
{ id: 'university', name: '高校附庸' },
{ id: 'independent', name: '独立智库' },
{ id: 'corporate', name: '企业视景' },
],
researches: [],
});
const activeFilters = reactive({
regions: ['north_america'],
types: ['gov'],
researches: [],
});
// --- Reactive Data for Right Content ---
const selectedDateRange = ref('last_year');
const selectedSort = ref('publish_time');
const reportList = ref([]);
const getReports = async () => {
const { data } = await getOverviewReport({
areas: activeFilters.regions,
researchTypeIds: activeFilters.researches,
})
// reportList.value = data
reportList.value = mockReportList
}
const handleReportClick = (report) => {
router.push({ name: 'ReportDetail', params: { id: report.id } })
}
const getResearchType = async () => {
const { data } = await getThinkTankResearchType()
console.log('getResearchType', data)
filters.researches = data
}
onMounted(() => {
getReports()
getResearchType()
})
</script>
<style scoped>
.report-page-container {
/* padding: 24px; */
margin-top: 20px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
/* --- Left Sidebar Styles --- */
.sidebar-filters {
background-color: #fff;
padding: 20px;
border-radius: 4px;
}
.filter-group {
margin-bottom: 25px;
}
.filter-title {
font-size: 16px;
font-weight: 600;
color: #303133;
margin: 0 0 15px 0;
display: flex;
align-items: center;
}
.filter-title .icon-square {
display: inline-block;
width: 4px;
height: 16px;
background-color: #409EFF;
margin-right: 8px;
border-radius: 2px;
}
/* 复选框组样式 */
.checkbox-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.filter-checkbox {
margin: 0 !important;
border-radius: 4px;
transition: all 0.3s ease;
width: 100%;
display: flex;
align-items: center;
}
.filter-checkbox:hover {
background-color: #f0f2f5;
}
.subscription-box {
background-color: #f5f7fa;
border-radius: 4px;
padding: 15px;
text-align: center;
}
.subscription-box p {
font-size: 13px;
color: #909399;
line-height: 1.6;
margin: 10px 0 15px 0;
}
/* --- Right Content Styles --- */
.main-content {
/* background-color: #fff; */
/* padding: 20px; */
border-radius: 4px;
}
/* 顶部过滤区域样式 */
.top-filters {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
/* background: #fff; */
border-radius: 8px;
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
margin-bottom: 10px;
}
.filter-left {
display: flex;
align-items: center;
gap: 32px;
}
.filter-label {
font-size: 16px;
color: #606266;
cursor: pointer;
position: relative;
padding: 8px 0;
transition: color 0.3s ease;
border-radius: 14px;
padding: 4px 10px;
}
.filter-label.active {
color: #fff;
background: #1459BB;
}
.filter-label:hover {
color: #409EFF;
}
.filter-right {
display: flex;
align-items: center;
gap: 12px;
}
.filter-select {
width: 140px;
}
.filter-select :deep(.el-input__wrapper) {
border-radius: 6px;
box-shadow: 0 0 0 1px #dcdfe6;
transition: box-shadow 0.3s ease;
}
.filter-select :deep(.el-input__wrapper:hover) {
box-shadow: 0 0 0 1px #409EFF;
}
.card-col {
margin-bottom: 20px;
}
.report-card {
cursor: pointer;
border-radius: 10px;
padding: 10px;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.report-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-image {
width: 100%;
height: 160px;
display: block;
}
.card-content {
padding: 16px;
}
.card-title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin: 0 0 10px 0;
line-height: 1.4;
/* For multi-line ellipsis */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #909399;
}
/* 响应式设计 */
@media (max-width: 768px) {
.top-filters {
flex-direction: column;
gap: 16px;
padding: 16px;
}
.filter-left {
width: 100%;
justify-content: center;
gap: 24px;
}
.filter-right {
width: 100%;
justify-content: center;
gap: 8px;
}
.filter-select {
width: 120px;
}
}
@media (max-width: 480px) {
.filter-left {
gap: 16px;
}
.filter-label {
font-size: 14px;
}
.filter-right {
flex-direction: column;
gap: 8px;
}
.filter-select {
width: 100%;
max-width: 200px;
}
}
</style>
\ No newline at end of file
src/views/thinkTank/utils/barChart.js deleted 100644 → 0
浏览文件 @ 912920f8
差异被折叠。
src/views/thinkTank/utils/mapChart.js deleted 100644 → 0
浏览文件 @ 912920f8
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论