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 = [ ...@@ -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
浏览文件 @ 0aad93fd
...@@ -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
浏览文件 @ 0aad93fd
...@@ -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
浏览文件 @ 0aad93fd
...@@ -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
浏览文件 @ 0aad93fd
<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
浏览文件 @ 0aad93fd
...@@ -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
浏览文件 @ 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 @@ ...@@ -46,7 +46,14 @@
</div> </div>
</div> </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>
</div> </div>
...@@ -96,6 +103,7 @@ ...@@ -96,6 +103,7 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
// 政策建议落实情况
const box1Data = ref([ const box1Data = ref([
{ {
id: 1, id: 1,
...@@ -249,6 +257,7 @@ const box1Data = ref([ ...@@ -249,6 +257,7 @@ const box1Data = ref([
} }
]); ]);
// 相关政策动态
const box2Data = ref([ const box2Data = ref([
{ {
title: "这是示例标题a", title: "这是示例标题a",
...@@ -359,11 +368,11 @@ const box2Data = ref([ ...@@ -359,11 +368,11 @@ const box2Data = ref([
} }
} }
.left { .left {
height: 1412px; height: 1442px;
.box1 { .box1 {
margin-top: 16px; margin-top: 16px;
width: 1104px; width: 1104px;
height: 1380px; height: 1405px;
margin-bottom: 16px; margin-bottom: 16px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -503,6 +512,22 @@ const box2Data = ref([ ...@@ -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([ ...@@ -597,17 +622,17 @@ const box2Data = ref([
} }
} }
.box2-footer { .box2-footer {
margin: 10px auto; margin: 10px auto;
width: 108px; width: 108px;
height: 32px; height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.text { .text {
color: var(--color-main-active); color: var(--color-main-active);
height: 22px; height: 22px;
...@@ -617,14 +642,14 @@ const box2Data = ref([ ...@@ -617,14 +642,14 @@ const box2Data = ref([
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
} }
.icon{ .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
} }
} }
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 0aad93fd
...@@ -15,10 +15,7 @@ ...@@ -15,10 +15,7 @@
</div> </div>
</div> </div>
<div class="box1-main"> <div class="box1-main">
{{ {{ box1Data }}
`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`
}}
</div> </div>
<div class="box1-footer"> <div class="box1-footer">
<div class="text">{{ "查看更多" }}</div> <div class="text">{{ "查看更多" }}</div>
...@@ -42,7 +39,15 @@ ...@@ -42,7 +39,15 @@
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-tag-box"> <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>
<div class="box2-content" id="box2Chart"></div> <div class="box2-content" id="box2Chart"></div>
</div> </div>
...@@ -90,7 +95,14 @@ ...@@ -90,7 +95,14 @@
</div> </div>
</div> </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>
<div class="box3-footer"> <div class="box3-footer">
<div class="footer-left"> <div class="footer-left">
...@@ -112,9 +124,56 @@ ...@@ -112,9 +124,56 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
// 内容摘要
const box1Data =
ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
// 涉及科技领域
const areaList = ref(["人工智能", "半导体与高科技", "经济与贸易", "地缘政治", "军事与安全", "国际规则与多边体系"]); 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([ const majorOpinions = ref([
{ {
id: 1, id: 1,
...@@ -132,7 +191,7 @@ const majorOpinions = ref([ ...@@ -132,7 +191,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 2,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -143,7 +202,7 @@ const majorOpinions = ref([ ...@@ -143,7 +202,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 3,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -154,7 +213,7 @@ const majorOpinions = ref([ ...@@ -154,7 +213,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 4,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -169,7 +228,7 @@ const majorOpinions = ref([ ...@@ -169,7 +228,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 5,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -184,7 +243,7 @@ const majorOpinions = ref([ ...@@ -184,7 +243,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 6,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -199,7 +258,7 @@ const majorOpinions = ref([ ...@@ -199,7 +258,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 7,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -210,7 +269,7 @@ const majorOpinions = ref([ ...@@ -210,7 +269,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 8,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -225,7 +284,7 @@ const majorOpinions = ref([ ...@@ -225,7 +284,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 9,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -240,22 +299,7 @@ const majorOpinions = ref([ ...@@ -240,22 +299,7 @@ const majorOpinions = ref([
] ]
}, },
{ {
id: 1, id: 10,
title: "我是示例标题",
desc: "我是示例内容",
tagList: [
{
name: "关税",
status: 2
},
{
name: "跨境电商",
status: 1
}
]
},
{
id: 1,
title: "我是示例标题", title: "我是示例标题",
desc: "我是示例内容", desc: "我是示例内容",
tagList: [ tagList: [
...@@ -270,6 +314,11 @@ const majorOpinions = ref([ ...@@ -270,6 +314,11 @@ const majorOpinions = ref([
] ]
} }
]); ]);
onMounted(() => {
const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart");
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -415,11 +464,18 @@ const majorOpinions = ref([ ...@@ -415,11 +464,18 @@ const majorOpinions = ref([
gap: 8px; gap: 8px;
.tag { .tag {
height: 28px; height: 28px;
line-height: 28px;
padding: 0 8px; padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1); border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); 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 { .box2-content {
...@@ -437,7 +493,7 @@ const majorOpinions = ref([ ...@@ -437,7 +493,7 @@ const majorOpinions = ref([
margin-top: 17px; margin-top: 17px;
.box3 { .box3 {
width: 1103px; width: 1103px;
height: 936px; height: 946px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
...@@ -445,10 +501,11 @@ const majorOpinions = ref([ ...@@ -445,10 +501,11 @@ const majorOpinions = ref([
position: relative; position: relative;
.box3-main { .box3-main {
width: 1057px; width: 1057px;
height: 780px; height: 800px;
margin: 0 auto; margin: 0 auto;
.box3-main-main { .box3-main-main {
height: 720px; height: 720px;
overflow: hidden;
.box3-item { .box3-item {
width: 1057px; width: 1057px;
height: 72px; height: 72px;
...@@ -538,6 +595,21 @@ const majorOpinions = ref([ ...@@ -538,6 +595,21 @@ const majorOpinions = ref([
background: rgba(247, 248, 249, 1); 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 { .box3-footer {
position: absolute; 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"; ...@@ -157,6 +157,7 @@ import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png"; import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png"; import Img4 from "./images/img4.png";
// 提出建议领域分布
const box1Data = ref([ const box1Data = ref([
{ {
name: "半导体", name: "半导体",
...@@ -211,6 +212,7 @@ const box1YearList = ref([ ...@@ -211,6 +212,7 @@ const box1YearList = ref([
} }
]); ]);
// 相关政策领域分布
const box2Data = ref([ const box2Data = ref([
{ {
name: "集成电路", name: "集成电路",
...@@ -272,6 +274,7 @@ const box2YearList = ref([ ...@@ -272,6 +274,7 @@ const box2YearList = ref([
} }
]); ]);
// 热门研究方向变化趋势
const box3Data = ref({ const box3Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"], title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [ data: [
...@@ -306,6 +309,7 @@ const box3YearList = ref([ ...@@ -306,6 +309,7 @@ const box3YearList = ref([
} }
]); ]);
// 搜索政策建议
const searchPolicy = ref(""); const searchPolicy = ref("");
const yearList = ref([ const yearList = ref([
...@@ -325,6 +329,7 @@ const yearList = ref([ ...@@ -325,6 +329,7 @@ const yearList = ref([
const selectedYear = ref("近一年发布"); const selectedYear = ref("近一年发布");
// 科技领域
const areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]); const areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]);
const selectedAreaList = ref(["人工智能", "半导体/芯片"]); const selectedAreaList = ref(["人工智能", "半导体/芯片"]);
...@@ -686,12 +691,12 @@ onMounted(() => { ...@@ -686,12 +691,12 @@ onMounted(() => {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.title { .title {
height: 24px; height: 26px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 26px;
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
} }
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ 0aad93fd
...@@ -18,18 +18,18 @@ ...@@ -18,18 +18,18 @@
<div class="select-box"> <div class="select-box">
<div class="select-box-header"> <div class="select-box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "地区筛选" }}</div> <div class="title">{{ "报告类型" }}</div>
</div> </div>
<div class="select-main"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox
v-for="region in filters.regions" v-for="type in reportTypeList"
:key="region.id" :key="type.id"
v-model="activeFilters.regions" v-model="selectedReportTypeList"
:label="region.id" :label="type.id"
class="filter-checkbox" class="filter-checkbox"
> >
{{ region.name }} {{ type.name }}
</el-checkbox> </el-checkbox>
</div> </div>
</div> </div>
...@@ -37,14 +37,14 @@ ...@@ -37,14 +37,14 @@
<div class="select-box"> <div class="select-box">
<div class="select-box-header"> <div class="select-box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "智库类型" }}</div> <div class="title">{{ "研究类型" }}</div>
</div> </div>
<div class="select-main select-main1"> <div class="select-main">
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox <el-checkbox
v-for="type in filters.types" v-for="type in researchTypeList"
:key="type.id" :key="type.id"
v-model="activeFilters.types" v-model="selectedResearchTypeList"
:label="type.id" :label="type.id"
class="filter-checkbox" class="filter-checkbox"
> >
...@@ -53,23 +53,13 @@ ...@@ -53,23 +53,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<div class="select-box-header"> <div class="select-box-header">
<div class="icon"></div> <div class="icon"></div>
<div class="title">{{ "研究领域" }}</div> <div class="title">{{ "作者" }}</div>
</div> </div>
<div class="select-main"> <div class="input-main">
<div class="checkbox-group"> <el-input placeholder="输入作者名字" v-model="author" />
<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> </div>
</div> </div>
</div> </div>
...@@ -119,67 +109,55 @@ import Img12 from "./images/img12.png"; ...@@ -119,67 +109,55 @@ import Img12 from "./images/img12.png";
const handleToReportDetail = () => { const handleToReportDetail = () => {
const route = router.resolve({ const route = router.resolve({
path: "/thinkTank/report/1", name: 'ReportDetail',
params: {
id: 1
}
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
} }
const activeFilters = reactive({ const reportTypeList = ref([
regions: ["north_america"], {
types: ["gov"], id: '研究报告',
researches: ["全部领域"] name: '研究报告',
}); },
{
id: '简报',
name: '简报',
},
{
id: '会议记录',
name: '会议记录',
},
{
id: '期刊文章',
name: '期刊文章',
},
])
const selectedReportTypeList = ref(['研究报告'])
const filters = reactive({ const researchTypeList = ref([
regions: [ {
{ id: "north_america", name: "北美" }, id: '研究报告',
{ id: "europe", name: "欧洲" }, name: '研究报告',
{ id: "asia", name: "亚洲" }, },
{ id: "other", name: "其他地区" } {
], id: '简报',
types: [ name: '简报',
{ id: "gov", name: "政府背景" }, },
{ id: "university", name: "高校附属" }, {
{ id: "independent", name: "独立智库" }, id: '会议记录',
{ id: "corporate", name: "企业视景" } name: '会议记录',
], },
researches: [ {
{ id: '期刊文章',
id: "全部领域", name: '期刊文章',
name: "全部领域" },
}, ])
{ const selectedResearchTypeList = ref(['研究报告'])
id: "人工智能",
name: "人工智能"
},
{
id: "通信网络",
name: "通信网络"
},
{
id: "量子科技",
name: "量子科技"
},
{
id: "能源",
name: "能源"
},
{
id: "生物技术",
name: "生物技术"
},
{ const author = ref('') // 作者
id: "新材料",
name: "新材料"
},
{
id: "海洋",
name: "海洋"
}
]
});
const curFooterList = ref([ const curFooterList = ref([
{ {
...@@ -309,7 +287,7 @@ const selectedYear = ref("近一年发布"); ...@@ -309,7 +287,7 @@ const selectedYear = ref("近一年发布");
gap: 16px; gap: 16px;
.left { .left {
width: 300px; width: 300px;
height: 806px; height: 520px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -329,12 +307,12 @@ const selectedYear = ref("近一年发布"); ...@@ -329,12 +307,12 @@ const selectedYear = ref("近一年发布");
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.title { .title {
height: 24px; height: 26px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 26px;
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
} }
...@@ -345,6 +323,13 @@ const selectedYear = ref("近一年发布"); ...@@ -345,6 +323,13 @@ const selectedYear = ref("近一年发布");
.select-main1 { .select-main1 {
width: 100px; width: 100px;
} }
.input-main{
margin: 10px auto;
width: 250px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230, 231, 232, 1);
}
} }
} }
.right { .right {
...@@ -421,4 +406,8 @@ const selectedYear = ref("近一年发布"); ...@@ -421,4 +406,8 @@ const selectedYear = ref("近一年发布");
} }
} }
} }
.filter-checkbox {
width: 180px;
}
</style> </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"; ...@@ -189,6 +189,7 @@ import Icon3 from "./images/icon3.png";
import Icon4 from "./images/icon4.png"; import Icon4 from "./images/icon4.png";
import Icon5 from "./images/icon5.png"; import Icon5 from "./images/icon5.png";
// 基本信息
const basicInfo = ref({ const basicInfo = ref({
img: InfoImg, img: InfoImg,
country: "美国", country: "美国",
...@@ -198,7 +199,7 @@ const basicInfo = ref({ ...@@ -198,7 +199,7 @@ const basicInfo = ref({
num: "约1,700名员工 ", num: "约1,700名员工 ",
money: "约3.5亿美元 " money: "约3.5亿美元 "
}); });
// 全球分支机构
const worldInfo = ref({ const worldInfo = ref({
position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿", position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
position2: "英国剑桥、比利时布鲁塞尔", position2: "英国剑桥、比利时布鲁塞尔",
...@@ -206,6 +207,7 @@ const worldInfo = ref({ ...@@ -206,6 +207,7 @@ const worldInfo = ref({
position4: "堪培拉 " position4: "堪培拉 "
}); });
// 经费来源
const box1LeftData = ref({ const box1LeftData = ref({
total: "4.358亿美元", total: "4.358亿美元",
gov: "3.271亿美元", gov: "3.271亿美元",
...@@ -250,6 +252,7 @@ const box1ChartData = ref([ ...@@ -250,6 +252,7 @@ const box1ChartData = ref([
} }
]); ]);
// 研究领域演变
const timeLineList = ref([ const timeLineList = ref([
{ {
time: "2025年7月25日", time: "2025年7月25日",
...@@ -273,39 +276,8 @@ const timeLineList = ref([ ...@@ -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 handleBox3Chart = () => {
// 将分类数据转换为树状图格式 // 将分类数据转换为树状图格式
const treemapData = []; const treemapData = [];
...@@ -356,6 +328,39 @@ const handleBox3Chart = () => { ...@@ -356,6 +328,39 @@ const handleBox3Chart = () => {
setChart(box3Chart, "box3Chart"); 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(() => { onMounted(() => {
const box1Chart = getPieChart(box1ChartData.value); const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart"); 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论