Skip to content

R
risk-monitor
提交 d3de03db authored 作者: 李智林's avatar 李智林
浏览文件
操作

“人物主页12个页面”

上级 71ef59ba
隐藏空白字符变更
内嵌 并排
正在显示 包含 7897 行增加 和 2 行删除
src/router/modules/characterPage.js 0 → 100644
浏览文件 @ d3de03db
// 人物主页
import CharacterPage from "@/views/characterPage/index.vue";
const characterPageRoutes = [
// 人物主页
{
// 根据不同的type跳转到不同的页面，type=1为科技领袖，2为国会议员，3为智库研究人员
path: "/characterPage/:type?",
name: "CharacterPage",
component: CharacterPage,
meta: {
title: "人物主页"
}
}
]
export default characterPageRoutes
src/views/characterPage/components/memberOfCongress/components/characterRelationships/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="character-relationships">
<div class="headerBox">
<span
v-for="(item, index) in list"
:key="index"
class="headerItem"
:class="{ active: item === activeIndex }"
@click="activeIndex = item"
>{{ item }}</span
>
</div>
<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
<!-- 主要内容，人物关系图 -->
<div class="mainBox">
<div class="graph" id="relGraph"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import Center from "./assets/约翰·伦道夫·图恩.png";
import P1 from "./assets/唐纳德·特朗普.png";
import P2 from "./assets/约翰·巴拉索.png";
import P3 from "./assets/布里顿·图恩.png";
import P4 from "./assets/金伯利·韦姆斯·图恩.png";
import P5 from "./assets/乔治·S·米克尔森.png";
import P6 from "./assets/哈罗德·理查德·图恩.png";
import P7 from "./assets/伊冯娜·帕特里夏·图恩.png";
import P8 from "./assets/蒂姆·约翰逊.png";
import P9 from "./assets/吉姆·阿布德诺.png";
import P10 from "./assets/汤姆·达施勒.png";
import P11 from "./assets/拉里莎·图恩.png";
import PS from "./assets/拉里·普雷斯勒.png";
const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局");
const nodes = [
{
id: "c",
name: "约翰·伦道夫·图恩",
category: 0,
symbolSize: 80,
symbol: `image://${Center}`,
label: {
show: true,
position: "bottom",
formatter: "{n|约翰·伦道夫·图恩}",
rich: {
n: {
color: "rgba(5,95,194,1)",
fontSize: 24,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
lineHeight: 36
}
}
}
},
// 从三点钟方向顺时针排序
{ id: "n11", name: "拉里莎·图恩", category: 1, symbolSize: 80, symbol: `image://${P11}` },
{ id: "n7", name: "伊冯娜·帕特里夏·图恩", category: 1, symbolSize: 80, symbol: `image://${P7}`, r: 80 },
{ id: "n6", name: "哈罗德·理查德·图恩", category: 1, symbolSize: 80, symbol: `image://${P6}` },
{ id: "n9", name: "吉姆·阿布德诺", category: 1, symbolSize: 80, symbol: `image://${P9}` },
{ id: "n12", name: "拉里·普雷斯勒", category: 1, symbolSize: 80, symbol: `image://${PS}` },
{ id: "n5", name: "乔治·S·米克尔森", category: 1, symbolSize: 80, symbol: `image://${P5}`, r: 80 },
{ id: "n8", name: "蒂姆·约翰逊", category: 1, symbolSize: 80, symbol: `image://${P8}` },
{ id: "n10", name: "汤姆·达施勒", category: 1, symbolSize: 80, symbol: `image://${P10}`, r: 80 },
{ id: "n2", name: "约翰·巴拉索", category: 1, symbolSize: 80, symbol: `image://${P2}` },
{ id: "n1", name: "唐纳德・特朗普", category: 1, symbolSize: 80, symbol: `image://${P1}` },
{ id: "n4", name: "金伯利·韦姆斯·图恩", category: 1, symbolSize: 80, symbol: `image://${P4}` },
{ id: "n3", name: "布里顿·图恩", category: 1, symbolSize: 80, symbol: `image://${P3}`, r: 80 }
];
const links = [
{ source: "n11", target: "c", label: { show: true, formatter: "次女" } },
{ source: "n7", target: "c", label: { show: true, formatter: "母亲" } },
{ source: "n6", target: "c", label: { show: true, formatter: "父亲" } },
{ source: "n9", target: "c", label: { show: true, formatter: "" } },
{ source: "n12", target: "c", label: { show: true, formatter: "盟友" } },
{ source: "n5", target: "c", label: { show: true, formatter: "前南达科他州州长" } },
{ source: "n8", target: "c", label: { show: true, formatter: "政治对手" } },
{ source: "n10", target: "c", label: { show: true, formatter: "政治对手" } },
{ source: "n2", target: "c", label: { show: true, formatter: "亲密盟友" } },
{ source: "n1", target: "c", label: { show: true, formatter: "政治盟友" } },
{ source: "n4", target: "c", label: { show: true, formatter: "妻子" } },
{ source: "n3", target: "c", label: { show: true, formatter: "长女" } }
];
let chart;
onMounted(() => {
const el = document.getElementById("relGraph");
if (!el) return;
chart = echarts.init(el);
const setOption = () => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 140;
const dataNodes = nodes.map((n, i) => {
if (n.id === "c") {
return { ...n, x: cx, y: cy, fixed: true };
}
// 均匀环形分布
const idx = i - 1;
const angle = (idx / (nodes.length - 1)) * Math.PI * 2;
const rLocal = radius + (n.r || 0);
const x = cx + rLocal * Math.cos(angle);
const y = cy + rLocal * Math.sin(angle);
return { ...n, x, y };
});
chart.setOption({
tooltip: {},
series: [
{
type: "graph",
layout: activeIndex.value === "圆形布局" ? "none" : "force",
circular: { rotateLabel: true },
force: { repulsion: 800, edgeLength: [80, 160] },
roam: true,
data: activeIndex.value === "圆形布局" ? dataNodes : nodes,
links: links,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
edgeLabel: {
show: true,
position: "middle",
distance: -18,
formatter: ({ data }) => data?.label?.formatter || "",
color: "rgb(5, 95, 194)",
fontSize: 12,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
lineHeight: 24,
backgroundColor: "rgba(231, 243, 255, 1)",
borderRadius: 24,
padding: [0, 12]
},
label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
itemStyle: { color: "rgba(5,95,194,1)" },
emphasis: { focus: "adjacency" }
}
]
});
};
setOption();
const onResize = () => chart && chart.resize();
window.addEventListener("resize", onResize);
watch(activeIndex, () => setOption());
onBeforeUnmount(() => {
window.removeEventListener("resize", onResize);
chart && chart.dispose();
});
});
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
.character-relationships {
width: 1600px;
height: 688px;
background-color: #fff;
margin: 0 auto;
position: relative;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.headerBox {
position: absolute;
top: 14px;
right: 96px;
.headerItem {
padding: 1px 8px;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
cursor: pointer;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
margin-right: 8px;
border: 1px solid rgb(230, 231, 232);
}
.active {
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
color: rgb(5, 95, 194);
}
}
.headerBtnBox {
position: absolute;
top: 14px;
right: 12px;
img {
width: 28px;
height: 28px;
margin-right: 4px;
cursor: pointer;
}
}
.mainBox {
width: 100%;
height: 100%;
padding-top: 42px;
.graph {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/characterPage/components/memberOfCongress/components/historicalProposal/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="historical-proposal">
<div class="nav">
<el-input placeholder="搜索关键词" v-model="searchText" :suffix-icon="Search" class="search-input"></el-input>
<div class="select-box">
<el-select v-model="value1" placeholder="请选择" class="select">
<el-option label="全部法案" value="全部法案"></el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择" class="select">
<el-option label="全部领域" value="全部领域"></el-option>
</el-select>
</div>
</div>
<div class="main">
<div v-for="item in list" :key="item.id" class="item">
<div class="img-box">
<img :src="item.img" alt="" class="img" />
<div class="info">
<div class="title">{{ item.title }}</div>
<div>
<span
v-for="(tag, index) in item.tie"
:key="tag"
class="tag"
:class="{ 'tag-1': index == 0, 'tag-2': index == 1 }"
>{{ tag }}</span
>
</div>
</div>
</div>
<div class="info-box">
<div class="box">
<div class="label">法案描述：</div>
<div class="content">{{ item.disc }}</div>
</div>
<div class="box">
<div class="label">法案状态：</div>
<div class="content">{{ item.state }}</div>
</div>
<div class="box">
<div class="label">提案日期：</div>
<div class="content">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
background
layout="prev, pager, next"
:total="100"
v-model:current-page="currentPage"
class="custom-pagination"
/>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import img from "./assets/img.png";
const searchText = ref("");
const value1 = ref("全部法案");
const value2 = ref("全部领域");
const currentPage = ref(2);
const list = ref([
{
id: 1,
title: "FY2025 National Defense Authorization Act (NDAA, S.4638)",
tie: ["法案", "国防与军事"],
disc: "提供2.82亿美元用于Ellsworth空军基地B-21轰炸机任务和军事建设，包括现代化指令。图恩强调这是其领导的条款，确保南达科他州国防投资。",
state: "2024年12月参议院通过，待总统签署。",
time: "2024年6月",
img: img
},
{
id: 2,
title: "Bipartisan Appropriations Bills",
tie: ["法案", "政府预算"],
disc: "推动农业、商务、司法和军事等四项两党拨款法案，恢复“常规程序”以允许修正案辩论，避免年底“全包”法案或继续决议（CR）。图恩公开敦促民主党合作。",
state: "委员会报告，部分进入辩论阶段。",
time: "2025年7月",
img: img
},
{
id: 3,
title: "Tax Relief, Unemployment Insurance Reauthorization, and Job Creation Act",
tie: ["法案", "税收与经济"],
disc: "续推失业保险和就业创造措施，图恩在2024报告中排名共和党第8位影响力，推动小企业税收减免。",
state: "纳入2024报告卡，影响2025税收辩论",
time: "2024年续推",
img: img
},
{
id: 4,
title: "Farm Bill Renewal Provisions",
tie: ["修正案", "农业与农村"],
disc: "加强农村基础设施和作物保险，支持南达科他州农民。图恩强调两党合作，避免拖延。",
state: "纳入2024 Farm Bill讨论，部分通过",
time: "2024年",
img: img
},
{
id: 5,
title: "Regular Order Restoration",
tie: ["修正案", "能源"],
disc: "承诺恢复委员会起草、修正案辩论和投票规范，避免领导层封闭谈判。图恩表示将允许100多项修正案投票。",
state: "实施中，2025年夏季拨款辩论",
time: "2025年1月",
img: img
},
{
id: 6,
title: "S.Amdt.3946 和 S.Amdt.3947",
tie: ["法案", "政府预算"],
disc: "改进政府资金法案，允许参议员就电话记录扣押提起诉讼，保护国会隐私（源于2020选举调查争议）。图恩提议将法院赔偿退回财政部以调整条款。",
state: "2025年11月10日失败",
time: "2025年11月10日",
img: img
}
]);
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.historical-proposal {
width: 1600px;
height: 644px;
.nav {
width: 100%;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.search-input {
width: 300px;
height: 32px;
color: rgb(132, 136, 142);
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
}
.select-box {
width: 332px;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
.select {
width: 160px;
height: 32px;
color: rgb(132, 136, 142);
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
}
}
}
.main {
width: 1600px;
height: 540px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
.item {
width: 523px;
height: 262px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding: 16px 19px 17px 16px;
.img-box {
width: 488px;
height: 77px;
display: flex;
margin-bottom: 12px;
img {
width: 57px;
height: 77px;
margin-right: 15px;
}
.info {
width: 420px;
height: 77px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.tag {
display: inline-block;
padding: 1px 8px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
border-radius: 4px;
border: 1px solid;
margin-right: 8px;
}
.tag-1 {
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
border-color: rgba(217, 247, 190, 1);
}
.tag-2 {
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
border-color: rgba(255, 241, 184, 1);
}
}
}
.info-box {
width: 488px;
height: 140px;
.box {
width: 100%;
margin-bottom: 10px;
display: flex;
.label {
width: 84px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.content {
width:400px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
}
}
}
}
.pagination-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
:deep(.el-pagination.is-background .el-pager li) {
background-color: #fff;
border: 1px solid rgba(229, 230, 235, 1);
border-radius: 4px;
color: rgba(29, 33, 41, 1);
font-weight: 400;
margin: 0 4px;
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
border-color: #165DFF;
color: #165DFF;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
background-color: #fff;
border: 1px solid rgba(229, 230, 235, 1);
border-radius: 4px;
margin: 0 4px;
}
}
}
</style>
src/views/characterPage/components/memberOfCongress/components/relevantSituation/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="relevant-situation">
<div class="left">
<div class="title">
<div class="box"></div>
<div class="text">相关实体</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
<div class="search">
<el-input v-model="searchText" placeholder="搜索内容" :suffix-icon="Search" class="search-input"></el-input>
<el-select
v-model="selectedOption"
placeholder="请选择"
class="search-select"
popper-class="rs-select-popper"
:teleported="false"
size="small"
>
<el-option label="近五年" value="近五年"></el-option>
<el-option label="近十年" value="近十年"></el-option>
<el-option label="近一年" value="近一年"></el-option>
</el-select>
</div>
</div>
<!-- 主要内容-echarts图表 -->
<div class="chart">
<div class="iconBox">
<img src="./assets/icon01.png" alt="" @click="setLayout('circle')" />
<img src="./assets/icon02.png" alt="" @click="setLayout('tree')" />
<img src="./assets/icon03.png" alt="" @click="setLayout('force')" />
</div>
<div class="echarts"></div>
</div>
<div class="bottom">
<img class="img01" src="./assets/AI.png" alt="" />
<span class="text01"
>美国《大而美法案》（OBBBA）通过系统性政策调整，对中国新能源产业链形成多维度冲击，同时倒逼产业链加速重构与技术创新。</span
>
<img class="img02" src="./assets/right.png" alt="" />
</div>
</div>
<div class="right">
<div class="title">
<div class="box"></div>
<div class="text">数据详情</div>
<div class="btn">
<img src="./assets/查看按钮.png" alt="" />
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="right-main">
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon01.png" alt="" class="title-icon" />
<span class="title-text">科技法案</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type" :class="{'type-ai': item.type === '人工智能', 'type-energy': item.type === '能源'}">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon02.png" alt="" class="title-icon" />
<span class="title-text">科技政令</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in twoList" :key="item.id" class="item">
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type-order">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon03.png" alt="" class="title-icon" />
<span class="title-text">科技智库</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList2" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<img :src="item.type" alt="" class="item-type-img" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Search } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import companyIcon from "./assets/company.png";
import companyRedIcon from "./assets/companyred.png";
import book1 from "./assets/book1.png";
import book2 from "./assets/book2.png";
import book3 from "./assets/book3.png";
import book4 from "./assets/book4.png";
import book5 from "./assets/book5.png";
import book6 from "./assets/book6.png";
import type1 from "./assets/type1.png";
import type2 from "./assets/type2.png";
const searchText = ref("");
const selectedOption = ref("近五年");
const billList = ref([
{
id: 1,
name: "大而美法案",
type: "人工智能",
date: "2025年7月4日",
img: book1
},
{
id: 2,
name: "汽车零部件25%关税实施规则",
type: "能源",
date: "2025年7月4日",
img: book2
},
{
id: 3,
name: "小额豁免包裹政策调整",
type: "能源",
date: "2025年7月4日",
img: book3
},
{
id: 4,
name: "NIH预算否决案",
type: "能源",
date: "2025年7月4日",
img: book4
}
]);
const twoList = ref([
{
id: 1,
name: "关于进一步延长TikTok执法宽限期的...",
type: "总统政令",
date: "2025年7月4日"
},
{
id: 2,
name: "修改对等关税税率以反映与中华人民...",
type: "总统政令",
date: "2025年7月4日"
}
]);
const billList2 = ref([
{
id: 1,
name: "中国对AI的转型产业政策",
type: type1,
date: "2025年7月4日",
img: book5
},
{
id: 2,
name: "中美对抗、竞争和合作跨越人工智能...",
type: type2,
date: "2025年7月4日",
img: book6
}
]);
let chart;
let resizeHandler;
const activeLayout = ref("circle");
const labels = [
"大而美法案",
"泰丰先行",
"国轩高科",
"晶科能源",
"容百科技",
"江西紫宸",
"比亚迪",
"长盈精密",
"昆仑化学",
"海辰储能",
"华阳集团",
"嘉源科技",
"天合光能",
"铜陵有色",
"紫江企业",
"格林美",
"德方纳米"
];
const baseNodes = labels.map((name, i) => ({
id: i.toString(),
name
}));
// 构建从外圈指向中心的连线
const baseLinks = baseNodes
.map((n, i) => {
if (i === 0) return null;
// 特殊节点：红色虚线
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
if (isSpecial) {
return {
source: i.toString(),
target: "0",
lineStyle: {
color: "rgb(206, 79, 81)",
type: "dashed"
}
};
}
return { source: i.toString(), target: "0" };
})
.filter(Boolean);
const makeOption = el => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 150;
const positioned = baseNodes.map((n, i) => {
if (activeLayout.value === "circle") {
if (i === 0) return { ...n, x: cx, y: cy, fixed: true };
const angle = ((i - 1) / (baseNodes.length - 1)) * Math.PI * 2;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
return { ...n, x, y };
}
if (activeLayout.value === "tree") {
if (i === 0) return { ...n, x: cx, y: cy - 200, fixed: true };
const totalWidth = Math.min(rect.width, 1000) - 100;
const gap = totalWidth / (baseNodes.length - 2); // 除去根节点后的间隔数
const startX = cx - totalWidth / 2;
// (i-1) 是因为 i 从 1 开始遍历子节点
const x = startX + (i - 1) * gap;
const y = cy + 100;
return { ...n, x, y };
}
return { ...n };
});
const ringSeries = {
type: "graph",
layout: activeLayout.value === "force" ? "force" : "none",
roam: true,
data: positioned.map((n, i) => {
const isForce = activeLayout.value === "force";
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
const icon = isSpecial ? companyRedIcon : companyIcon;
const textColor = isSpecial ? "rgb(206, 79, 81)" : "rgb(59, 65, 75)";
// force 布局保持原样（直接显示图标）；其他布局使用圆圈+RichText Label显示图标和文字
if (isForce) {
return {
...n,
symbol: "image://" + icon,
symbolSize: 18,
draggable: true,
label: {
show: true,
position: "bottom",
color: textColor,
fontSize: i === 0 ? 20 : 16,
fontWeight: i === 0 ? 700 : 400
}
};
}
// Circle/Tree 布局：单层实现（圆圈 + Rich Text Icon + Text）
return {
...n,
symbol: "circle",
symbolSize: 36,
draggable: true,
label: {
show: true,
position: "inside",
formatter:
i === 0
? "{icon|}\n{nameCenter|{b}}"
: isSpecial
? "{icon|}\n{nameRed|{b}}"
: "{icon|}\n{nameNormal|{b}}",
// 微调 offset：[x, y]。y 越大，整体越向下偏移。
offset: i === 0 ? [0, 10] : [0, 10],
rich: {
icon: {
width: 18,
height: 18,
backgroundColor: { image: icon },
align: "center"
},
nameCenter: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 18,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 24
},
nameNormal: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
},
nameRed: {
padding: [16, 0, 0, 0],
color: "rgb(206, 79, 81)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
}
}
},
itemStyle: {
color: "#fff",
borderColor: "rgb(230, 231, 232)",
borderWidth: 1,
shadowBlur: 8,
shadowColor: "rgba(0, 0, 0, 0.1)"
}
};
}),
links: baseLinks,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 6],
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 1
},
emphasis: { focus: "adjacency" },
force: activeLayout.value === "force" ? { repulsion: 800, edgeLength: [80, 160] } : undefined
};
return {
tooltip: {},
series: [ringSeries]
};
};
onMounted(() => {
const el = document.querySelector(".echarts");
if (!el) return;
chart = echarts.init(el);
const option = makeOption(el);
chart.setOption(option);
resizeHandler = () => {
if (!chart) return;
chart.resize();
chart.setOption(makeOption(el));
};
window.addEventListener("resize", resizeHandler);
});
onBeforeUnmount(() => {
if (resizeHandler) window.removeEventListener("resize", resizeHandler);
if (chart) chart.dispose();
});
// 切换布局
const setLayout = type => {
activeLayout.value = type;
const el = document.querySelector(".echarts");
if (!el) return;
const opt = makeOption(el);
chart && chart.setOption(opt, true);
};
</script>
<style scoped lang="scss">
* {
padding: 0;
margin: 0;
}
.relevant-situation {
width: 1600px;
height: 848px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 1068px;
height: 848px;
margin-right: 12px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.search {
width: 312px;
position: absolute;
right: 83px;
top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.search-input {
width: 150px;
height: 24px;
color: rgb(95, 101, 108);
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
}
.search-select {
width: 150px;
height: 24px;
}
}
}
.chart {
width: 1068px;
height: 739px;
padding: 14px 11px;
background-image: url("./assets/background.png");
background-size: cover;
.iconBox {
width: 96px;
height: 28px;
background-color: #fff;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
padding: 0px 7px 0px 14px;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 14px;
height: 14px;
cursor: pointer;
}
img:nth-child(2) {
width: 16px;
height: 16px;
}
}
.echarts {
width: 1046px;
height: 683px;
}
}
.bottom {
width: 1036px;
height: 40px;
margin: 0 auto;
background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
padding: 6px 12px;
display: flex;
align-items: center;
justify-content: space-between;
.img01 {
width: 19px;
height: 20px;
}
.text01 {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.img02 {
width: 24px;
height: 24px;
}
}
}
.right {
width: 520px;
height: 848px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 92px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
img:nth-child(2) {
margin-right: 4px;
}
}
}
.right-main {
width: 100%;
height: 732px;
padding: 15px 19px 0 17px;
.main-box {
width: 484px;
min-height: 190px;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
margin-bottom: 16px;
.main-box-title {
width: 100%;
height: 48px;
background-color: rgb(247, 248, 249);
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.title-icon {
width: 23px;
height: 21px;
margin-left: 20px;
}
.title-bottom {
width: 12px;
height: 8px;
margin-right: 20px;
}
.title-text {
position: absolute;
top: 12px;
left: 58px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.main-box-content {
width: 100%;
min-height: 142px;
padding: 12px 0;
.item {
width: 100%;
height: 53px;
padding: 0 18px 0 19px;
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
.item-img {
width: 36px;
height: 48px;
margin-right: 10px;
}
.item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
.item-date {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
.item-type {
position: absolute;
top: 2px;
right: 18px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 1px 8px;
border-radius: 4px;
border: 1px solid;
}
.type-ai {
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
}
.type-energy {
color: rgba(245, 34, 45, 1);
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
}
.item-type-order {
position: absolute;
top: 1px;
right: 17.58px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 2px 18.21px;
border-radius: 4px;
border: 1px solid rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.item-type-img {
width: 16px;
height: 16px;
position: absolute;
top: 5px;
right: 14px;
}
}
.item:last-child {
margin-bottom: 0;
}
}
}
}
}
}
</style>
src/views/characterPage/components/memberOfCongress/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="member-of-congress">
<!-- 国会议员人物基础 -->
<div class="header">
<div class="avatar">
<img :src="musk.avatar" alt="" />
</div>
<div class="info">
<!-- <div class="name"> -->
<p class="name-cn">{{ musk.nameCn }}</p>
<p class="name-en">{{ musk.nameEn }}</p>
<!-- </div> -->
<div class="introduction">
<p>{{ musk.introduction }}</p>
</div>
<div class="domain">
<p
v-for="item in musk.domain"
:key="item"
:class="{
cl1: item === '共和党',
cl2: item === '电信改革',
cl3: item === '美国参议员',
cl4: item === '对华强硬派',
cl5: item === '参议院多数党领袖'
}"
>
{{ item }}
</p>
</div>
</div>
</div>
<!-- 国会议员人物信息区分 -->
<div class="info-divide">
<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
{{ item }}
</div>
</div>
<!-- 人物详情 -->
<div class="info-content" v-if="infoActive === '人物详情'">
<div class="left">
<div class="left-top">
<div class="title">
<div class="box"></div>
<div class="text">政治观点</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="num-list">
<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="numActive = item">
{{ item }}
</div>
</div>
<!-- echarts 图表 -->
<div class="echarts">
<div class="row" v-for="(row, index) in wordCloudData" :key="index">
<span
v-for="(item, idx) in row"
:key="idx"
:style="{
color: item.color,
fontSize: item.fontSize || '16px',
fontWeight: item.fontWeight || 'normal'
}"
>
{{ item.text }}
</span>
</div>
</div>
</div>
<div class="left-center">
<div class="title">
<div class="box"></div>
<div class="text">资金来源</div>
<div class="input">
<el-select v-model="selectedOption" placeholder="请选择" class="select">
<el-option label="2025" value="2025"></el-option>
<el-option label="2024" value="2024"></el-option>
<el-option label="2023" value="2023"></el-option>
</el-select>
</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main">
<el-table
:data="contributorData"
style="width: 100%"
:header-cell-style="{
background: 'transparent',
color: 'rgba(59, 65, 75, 1)',
fontWeight: 700,
fontSize: '16px'
}"
:cell-style="{
fontSize: '16px',
fontWeight: 400,
color: 'rgba(59, 65, 75, 1)'
}"
:row-class-name="tableRowClassName"
:row-style="{ height: '60px' }"
size="large"
>
<el-table-column prop="rank" label="排名" width="100" align="center" />
<el-table-column prop="contributor" label="贡献者" min-width="300" />
<el-table-column prop="totalAmount" label="总捐款" width="150" />
<el-table-column prop="individualAmount" label="个人捐款" width="150" />
<el-table-column prop="pacsAmount" label="PACs捐款" width="150" />
</el-table>
</div>
<div class="bottom">
<img src="./assets/ai.png" alt="" class="icon">
<div class="text1">约翰·图恩的竞选资金前五大贡献者以美国以色列公共事务委员会（AIPAC）为主导，总捐款超61.8万美元，主要来自个人捐款，凸显其在外交、国防和行业游说方面的强大支持网络。</div>
<img src="./assets/right.png" alt="" class="icon1">
</div>
</div>
<div class="left-bottom">
<div class="title">
<div class="box"></div>
<div class="text">最新动态</div>
<div class="input"><input type="checkbox" checked />只看涉华动态</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main">
<div v-for="item in newList" :key="item" class="main-item">
<div class="time">
<div class="year">{{ item.time.split("年")[0] }}</div>
<div class="date">{{ item.time.split("年")[1] }}</div>
</div>
<div class="image">
<img src="./assets/type1.png" alt="" v-if="item.type === 1" /><img
src="./assets/type2.png"
alt=""
v-else
/>
</div>
<div class="content">
<div :class="{ 'content-type1': item.type === 1, 'content-type2': item.type === 2 }">
<p :class="{ 'content-title1': item.type === 1, 'content-title2': item.type === 2 }">
{{ item.title }}
</p>
<p class="content-title-en">{{ item.titleEn }}</p>
</div>
<p class="content-contentcontent">{{ item.content }}</p>
<div class="content-tag">
<div>
<span
v-for="tag in item.pie"
:key="tag"
class="tag"
:class="{
dl1: tag === '人工智能',
dl2: tag === '量子科技',
dl3: tag === '新能源',
dl4: tag === '集成电路'
}"
@click="handleClickTag(tag)"
>{{ tag }}</span
>
</div>
<div class="origin">来源：{{ item.origin }}</div>
</div>
</div>
</div>
<div class="line-test"></div>
</div>
<div class="pagination">
<div class="total">共153项动态</div>
<el-pagination
background
layout="prev, pager, next"
:page-count="10"
:pager-count="5"
v-model:current-page="currentPage"
class="custom-pagination"
/>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<div class="title">
<div class="box"></div>
<div class="text">基本信息</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="main-content">
<div class="baseInfo">
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生日期：</div>
<div class="baseInfo-item-content">1961年1月7日</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">现任职位：</div>
<div class="baseInfo-item-content">参议院多数党领袖</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">党派归属：</div>
<div class="baseInfo-item-content">共和党</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">教育背景：</div>
<div class="baseInfo-item-content">南达科他大学工商管理硕士</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title address">代表州/选区：</div>
<div class="baseInfo-item-content">南达科他州</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">政治立场：</div>
<div class="baseInfo-item-content long">
财政保守主义、支持农业利益、对华强硬态度以及维护传统价值观为核心
</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生地：</div>
<div class="baseInfo-item-content">南达科他州皮埃尔市</div>
</div>
</div>
<div class="company">
<div class="company-title">社交媒体</div>
<div class="company-content">
<div v-for="item in companyList" :key="item" class="company-item">
<div class="img">
<img :src="item.logo" alt="" />
</div>
<div>
<div class="company-cn">{{ item.cn }}</div>
<div class="company-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-bottom">
<div class="title">
<div class="box"></div>
<div class="text">政治履历</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="content-main">
<div v-for="item in resumeList" :key="item.id" class="content-item">
<img src="./assets/icon01.png" alt="" class="image01" />
<div class="content-item-time">{{ item.time }}</div>
<div class="content-item-title">{{ item.title }}</div>
<div class="content-item-content">{{ item.content }}</div>
<div class="content-item-door" v-if="item.door">
<img src="./assets/icon02.png" alt="" />
<span>{{ item.door }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 历史提案 -->
<HistoricalProposal v-if="infoActive === '历史提案'" />
<!-- 人物关系 -->
<CharacterRelationships v-if="infoActive === '人物关系'" />
<!-- 相关情况 -->
<RelevantSituation v-if="infoActive === '相关情况'" />
<!-- 弹框 -->
<el-dialog
v-model="dialogVisible"
width="761px"
class="viewpoint-dialog"
:modal="false"
:draggable="true"
:lock-scroll="false"
>
<template #header>
<div class="viewpoint-header">
<div class="viewpoint-title">领域观点</div>
</div>
</template>
<div class="viewpoint-body">
<div class="viewpoint-body-title">#人工智能</div>
<div v-for="item in dialogData" :key="item.id" class="viewpoint-item">
<img :src="item.img" alt="" />
<div class="viewpoint-item-content">
<div class="viewpoint-item-name">{{ item.name }}</div>
<div class="viewpoint-item-desc">{{ item.content }}</div>
<div class="viewpoint-item-job">{{ item.job }}</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import HistoricalProposal from "./components/historicalProposal/index.vue";
import Musk from "./assets/Musk.png";
import cp1 from "./assets/cp1.png";
import cp2 from "./assets/cp2.png";
import cp3 from "./assets/cp3.png";
import cp4 from "./assets/cp4.png";
import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";
const wordCloudData = ref([
[
{ text: "Boring Company", color: "rgba(19, 168, 168, 1)" },
{ text: "地球化改造", color: "rgb(206, 79, 81)" },
{ text: "减少燃料对外依赖", color: "rgba(250, 173, 20, 1)" },
{ text: "外交政策立场", color: "rgba(250, 173, 20, 1)" },
{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
{ text: "预算纪律", color: "rgba(19, 168, 168, 1)" }
],
[
{ text: "保守派财政立场", color: "rgb(206, 79, 81)" },
{ text: "能源政策", color: "rgba(22, 119, 255, 1)" },
{ text: "项目改革", color: "rgba(250, 173, 20, 1)" },
{ text: "农业委员会成员", color: "rgb(206, 79, 81)" },
{ text: "工作可选项", color: "rgba(250, 173, 20, 1)" },
{ text: "教育政策", color: "rgba(19, 168, 168, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "减少政府支出", color: "rgba(255, 122, 69, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
{ text: "第一性原理", color: "rgba(250, 173, 20, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
{ text: "农业经济引擎", color: "rgb(206, 79, 81)" },
{ text: "有限政府", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
{ text: "财政责任", color: "rgb(206, 79, 81)", fontSize: "26px", fontWeight: "700" },
{ text: "农业优先", color: "rgba(255, 122, 69, 1)" },
{ text: "保守派价值观", color: "rgba(22, 119, 255, 1)" },
{ text: "可持续富足", color: "rgba(250, 173, 20, 1)" },
{ text: "为后代负责", color: "rgba(250, 173, 20, 1)" }
],
[
{ text: "双边合作", color: "rgba(19, 168, 168, 1)" },
{ text: "农场法案倡导者", color: "rgba(250, 173, 20, 1)" },
{ text: "超音速海啸", color: "rgba(250, 173, 20, 1)" },
{ text: "环境议题", color: "rgba(19, 168, 168, 1)" },
{ text: "医疗保健改革", color: "rgb(206, 79, 81)" },
{ text: "多智能体协作", color: "rgba(19, 168, 168, 1)" }
]
]);
const musk = ref({
nameCn: "约翰·伦道夫·图恩",
nameEn: "John Randolph Thune",
introduction: "美国南达科他州共和党籍联邦参议员，现任参议院多数党领袖，以财政保守主义和对华强硬立场著称。",
domain: ["共和党", "电信改革", "美国参议员", "对华强硬派", "参议院多数党领袖"],
avatar: Musk
});
const tableRowClassName = ({ row, rowIndex }) => {
if (rowIndex % 2 === 0) {
return "highlight-row";
}
return "";
};
const contributorData = ref([
{
rank: 1,
contributor: "美国以色列公共事务委员会",
totalAmount: "$618,530",
individualAmount: "$608,530",
pacsAmount: "$10,000"
},
{
rank: 2,
contributor: "洛克希德·马丁公司",
totalAmount: "$59,747",
individualAmount: "$49,747",
pacsAmount: "$10,000"
},
{
rank: 3,
contributor: "奥驰亚集团（美国烟草巨头）",
totalAmount: "$43,882",
individualAmount: "$33,882",
pacsAmount: "$10,000"
},
{
rank: 4,
contributor: "Praeses LLC（专注于情报与国防技术的中小型公司）",
totalAmount: "$41,248",
individualAmount: "$41,248",
pacsAmount: "$0"
},
{
rank: 5,
contributor: "全国广播协会",
totalAmount: "$41,100",
individualAmount: "$32,600",
pacsAmount: "$8,500"
}
]);
const info = ref(["人物详情", "历史提案", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const selectedOption = ref("2024");
const currentPage = ref(5);
const dialogVisible = ref(false);
const handleClickTag = tag => {
dialogVisible.value = true;
};
const newList = ref([
{
id: 1,
title: "我敦促共和党人优先支持特朗普议程：打击移民、降低物价、增加国内能源生产，并通过税收立法。作为下一任多数党领袖，我致力于迅速推进这些优先事项。参议院必须成为人民授权的引擎，而不是障碍。",
titleEn:
"I urged Republicans to prioritize backing Trump’s agenda: cracking down on immigration, bringing down prices, increasing domestic energy production, and passing tax legislation. As the next majority leader, I’m committed to moving these priorities swiftly. The Senate must be an engine for the people’s mandate.",
pie: ["人工智能"],
origin: "X",
time: "2025年10月10日",
type: 1
},
{
id: 2,
title: "约翰·图恩对白宫推动的人工智能禁令表示怀疑",
content:
"参议院多数党领袖约翰·图恩表示，白宫在人工智能禁令方面的进展不足以将其纳入本月晚些时候参议院审议的国防政策法案中。他强调，需要与参议员和众议员合作制定方案，同时保护各州权利，避免联邦过度干预。",
pie: ["量子科技"],
origin: "华盛顿观察家报",
time: "2025年10月10日",
type: 2
},
{
id: 3,
title: "约翰·图恩呼吁医疗改革，大流行时期补贴即将到期",
content:
"图恩在参议院发言中指出，大流行时期临时扩展的《平价医疗法案》补贴已扭曲保险市场，并将于年底到期。他呼吁国会采取行动，建立可持续模式，提高可负担性和消费者选择，而不是简单延长补贴。",
pie: ["新能源"],
origin: "米切尔今报",
time: "2025年10月09日",
type: 2
},
{
id: 4,
title: "医疗谈判中堕胎条款成为障碍",
content:
"图恩表示，两党需要就到期中的奥巴马医改税收抵免达成策略共识，但堕胎相关条款已成为谈判的绊脚石。他强调需要平衡各方关切，以避免数百万美国人面临保费上涨。",
pie: ["量子科技"],
origin: "泰晤士报",
time: "2025年10月09日",
type: 2
},
{
id: 5,
title: "最近的医疗保健讨论聚焦于大流行时期临时补贴增强措施，这些措施将于年底到期。数百万美国人可能甚至不知道自己已报名补贴计划，因为保险公司会自动为符合零成本覆盖条件的人重新登记。",
titleEn:
"Recent discussions on health care have focused on the temporary subsidy enhancements from the pandemic era, which expire at year-end. Millions of Americans may not even know they’re enrolled in subsidized plans because insurers auto-reenroll those eligible for no-cost coverage.",
pie: ["人工智能"],
origin: "X",
time: "2025年10月08日",
type: 1
},
{
id: 6,
title: "通过‘一个大美丽法案’使特朗普减税永久化，将为家庭和企业提供所需的稳定性。这是关于创造就业、降低成本，并确保我们的经济比以往任何时候都更强劲复苏。",
titleEn:
"The phone records provision was a Senate issue we’re working through, but let’s be clear: transparency in investigations matters. On the Epstein files, the debate took on a life of its own, but passing the bill by unanimous consent was the right call to get it to the President without unnecessary delays.",
pie: ["集成电路"],
origin: "X",
time: "2025年10月08日",
type: 1
}
]);
const companyList = ref([
{
id: 1,
cn: "个人官网",
name: "thune.senate.gov ",
logo: cp1
},
{
id: 2,
cn: "Twitter/X",
name: "@johnthune",
logo: cp2
},
{
id: 3,
cn: "Instagram",
name: "@johnrthune",
logo: cp3
},
{
id: 4,
cn: "Facebook",
name: "johnthune",
logo: cp4
}
]);
// 政治履历
const resumeList = ref([
{
id: 1,
time: "2025年1月",
title: "参议院多数党领袖",
content:
"图恩创造历史，成为南达科他州历史上第二位当选第四届参议员任期的政客。4 2025年1月，他更进一步当选为参议院多数党领袖，成为美国国会中最具影响力的政治人物之一。",
door: ""
},
{
id: 2,
time: "2016年",
title: "美国参议院议员（第三届任期）",
content: "图恩成功当选第三届参议员任期，进一步巩固了其在南达科他州的政治地位。",
door: ""
},
{
id: 3,
time: "2005-2010年",
title: "美国参议院议员（第109届、110届、111届国会）",
content:
"图恩正式就任美国参议员，代表南达科他州，开始了他在参议院的长期服务。他在参议院迅速适应角色，关注农业、交通和财政等关键议题。",
door: ""
},
{
id: 4,
time: "2004年",
title: "美国参议院议员候选人",
content:
"图恩的政治生涯迎来历史性转折，他在选举中击败时任参议院多数党领袖汤姆·达施勒（Tom Daschle），这一胜利是近50年来首次有参议院多数党领袖在选举中落败。",
door: ""
},
{
id: 5,
time: "1997-2003年",
title: "美国众议院议员（第105届、106届、107届国会）",
content: "图恩在众议院轻松赢得两次连任，连续服务三个任期，展现了其在南达科他州的广泛支持基础。",
door: ""
},
{
id: 6,
time: "1996年",
title: "美国众议院议员候选人",
content: "图恩开启政治生涯，参与竞选南达科他州唯一的美国众议院席位。他成功赢得这场选举，为其政治生涯奠定了基础。",
door: ""
}
]);
// 弹框数据
const dialogData = ref([
{
id: 1,
name: "山姆・奥特曼",
content: "主张分级监管，反对 “一刀切” 审批；警告美国领先优势有限，电力与基建是关键瓶颈。",
img: img1,
job: "OpenAI CEO"
},
{
id: 2,
name: "布拉德・史密斯",
content: "主张全技术栈监管与基础建设投入，强调美国需在芯片、算法、数据各层保持领先。",
img: img2,
job: "微软副董事长"
},
{
id: 3,
name: "黄仁勋",
content: "认为 AI 处于 “智能基建起步期”，大模型为基础，代理式 AI 为下一阶段；否定 AI 泡沫，强调与实体经济融合。",
img: img3,
job: "NVIDIA CEO"
},
{
id: 4,
name: "杰弗里・辛顿",
content: "担忧 AI 发展过快，警告 “涌现能力” 超预期，可能导致存在性风险；呼吁放缓研发、加强安全。",
img: img4,
job: "图灵奖得主、深度学习先驱"
},
{
id: 5,
name: "李飞飞",
content: "关注 AI 伦理与公平性，强调安全与普惠并重，对 AGI 时间表持谨慎态度。",
img: img5,
job: "斯坦福大学教授"
}
]);
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.member-of-congress {
width: 1600px;
margin: 0 auto;
padding-bottom: 50px;
.header {
width: 1600px;
height: 200px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 20px;
display: flex;
align-items: center;
.avatar {
width: 160px;
height: 160px;
margin-right: 24px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
flex: 1;
.name-cn {
font-size: 32px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 42px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.name-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.introduction {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.domain {
font-size: 14px;
p {
display: inline-block;
padding: 1px 8px;
border-radius: 4px;
margin-right: 8px;
border: 1px solid;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(217, 247, 190, 1);
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.cl3 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl4 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.cl5 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl6 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
}
}
}
.info-divide {
width: 1600px;
height: 64px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 530px;
height: 54px;
text-align: center;
font-size: 20px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(59, 65, 75);
border-radius: 10px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.active {
font-size: 24px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
border: 2px solid rgba(174, 214, 255, 1);
}
}
.info-content {
width: 1600px;
height: 2174px;
margin-bottom: 50px;
margin: 16px auto;
display: flex;
.left {
width: 1064px;
height: 100%;
margin-right: 16px;
.left-top {
width: 100%;
height: 300px;
margin-bottom: 16px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.num-list {
display: flex;
align-items: center;
padding-left: 24px;
margin-bottom: 16px;
div {
padding: 1px 8px;
line-height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
cursor: pointer;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
margin-right: 8px;
}
.active {
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
}
.echarts {
width: 1009px;
height: 170px;
margin-left: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 0;
.row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
span {
font-family: "Microsoft YaHei";
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: scale(1.1);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
}
}
}
}
.left-center {
width: 100%;
height: 512px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
margin-bottom: 16px;
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.input {
position: absolute;
top: 15px;
right: 114px;
.select {
width: 120px;
}
}
}
.main {
width: 1016px;
height: 360px;
margin-left: 24px;
margin-bottom: 16px;
}
.bottom {
width: 1016px;
height: 64px;
margin-left: 24px;
background-color: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
border-radius: 4px;
border: 1px solid rgba(231, 243, 255, 1);
padding: 6px 12px;
.icon {
width: 19px;
height: 20px;
margin-right: 13px;
}
.text1 {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
margin-right: 13px;
}
.icon1 {
width: 24px;
height: 24px;
}
}
}
.left-bottom {
width: 100%;
height: 1330px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 85px;
display: flex;
align-items: center;
padding: 14px 12px 45px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.input {
position: absolute;
top: 15px;
right: 114px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
input {
margin-right: 8px;
}
}
}
.main {
width: 1064px;
height: 1133px;
box-sizing: border-box;
padding-right: 50px;
position: relative;
z-index: 110;
.main-item {
width: 1014px;
margin-bottom: 40px;
display: flex;
.time {
width: 77px;
box-sizing: border-box;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
.year {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
.date {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
}
.image {
margin-right: 20px;
img {
width: 24px;
height: 24px;
}
}
.content {
width: 873px;
.content-type1 {
background-color: rgba(246, 250, 255, 1);
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
padding: 12px 14px 12px 15px;
.content-title1 {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-bottom: 12px;
border-bottom: 1px solid rgb(234, 236, 238);
cursor: pointer;
}
.content-title-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-top: 12px;
cursor: pointer;
}
}
.content-type2 {
.content-title2 {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 26px;
padding-bottom: 8px;
cursor: pointer;
}
}
.content-contentcontent {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
line-height: 24px;
margin-bottom: 8px;
cursor: pointer;
}
.content-tag {
width: 873px;
display: flex;
justify-content: space-between;
.tag {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-right: 8px;
padding: 1px 10px;
border-radius: 4px;
border: 1px solid;
cursor: pointer;
}
.dl1 {
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
}
.dl2 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
border-color: rgba(255, 163, 158, 1);
}
.dl3 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
border-color: rgba(255, 213, 145, 1);
}
.dl4 {
background-color: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
border-color: rgba(211, 173, 247, 1);
}
.origin {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
cursor: pointer;
}
}
}
}
.line-test {
position: absolute;
top: 10px;
left: 109px;
height: 1000px;
border: 1px solid rgb(230, 231, 232);
z-index: -1;
}
}
.line {
width: 100%;
height: 1px;
background-color: rgb(234, 236, 238);
margin-top: 30px;
border: none;
}
.pagination {
width: 100%;
height: 76px;
margin: 20px auto;
display: flex;
padding: 0 31px 0 36px;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgb(234, 236, 238);
.total {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
}
:deep(.custom-pagination) {
display: flex;
align-items: center;
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev),
:deep(.custom-pagination.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
}
}
}
.right {
width: 520px;
height: 100%;
.right-top {
width: 520px;
height: 602px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
margin-bottom: 16px;
.title {
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 14px 12px 20px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.main-content {
width: 520px;
height: 517px;
padding: 0 48px 50px 34px;
.baseInfo {
width: 438px;
height: 314px;
padding-bottom: 50px;
border-bottom: 1px solid rgb(234, 236, 238);
.baseInfo-item {
display: flex;
margin-bottom: 12px;
.baseInfo-item-title {
width: 88px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.address {
width: 110px;
}
.baseInfo-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.long {
width: 349px;
}
}
}
.company {
width: 438px;
height: 176px;
padding-top: 19px;
.company-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 19px;
}
.company-content {
width: 409px;
height: 114px;
display: flex;
flex-wrap: wrap;
.company-item {
width: 185px;
height: 49px;
margin-bottom: 16px;
display: flex;
align-items: center;
cursor: pointer;
.img {
width: 48px;
height: 48px;
margin-right: 8px;
padding: 12px;
background-color: rgb(230, 231, 232);
border-radius: 75px;
img {
width: 24px;
height: 24px;
}
}
.company-cn {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.company-name {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
}
}
.company-item:nth-child(2n-1) {
margin-right: 39px;
}
.company-item:last-child {
.company-name {
width: 150px;
}
}
}
}
}
}
.right-bottom {
width: 520px;
height: 1556px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 80px;
display: flex;
align-items: center;
padding: 14px 12px 40px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.content-main {
width: 480px;
height: 1020px;
margin-left: 16px;
.content-item {
width: 454px;
margin-bottom: 60px;
margin-left: 26px;
position: relative;
.image01 {
width: 14px;
height: 12.13px;
position: absolute;
top: 8px;
left: -26px;
}
.content-item-time {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(5, 95, 194);
margin-bottom: 8px;
}
.content-item-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.content-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
margin-bottom: 8px;
}
.content-item-door {
width: 300px;
height: 32px;
display: flex;
align-items: center;
padding: 4px 0 4px 11px;
border-radius: 4px;
background-color: rgba(255, 246, 240, 1);
border: 1px solid rgba(250, 140, 22, 0.4);
img {
width: 20px;
height: 24px;
margin-right: 10px;
}
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgba(255, 149, 77, 1);
}
}
}
}
}
}
}
}
:deep(.el-table .highlight-row) {
background: rgba(248, 249, 250, 1);
}
:deep(.viewpoint-dialog) {
width: 761px !important;
height: 669px;
padding: 0;
border-radius: 4px;
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
padding: 0;
margin: 0;
position: relative;
height: 48px;
}
.el-dialog__headerbtn {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
.viewpoint-header {
width: 761px;
height: 48px;
background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.viewpoint-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.viewpoint-body {
padding: 24px 24px 35px 24px;
height: calc(669px - 48px);
box-sizing: border-box;
overflow: hidden;
.viewpoint-body-title {
font-size: 28px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 37px;
color: rgb(59, 65, 75);
margin-bottom: 32px;
}
.viewpoint-item {
width: 713px;
min-height: 81px;
display: block;
margin-bottom: 12px;
position: relative;
padding-left: 48px;
img {
position: absolute;
top: -20px;
left: -20px;
}
.viewpoint-item-content {
width: 665px;
min-height: 81px;
background-image: url("./assets/bg01.png");
background-size: 100% 100%;
position: relative;
top: 0;
left: 0;
padding-left: 23px;
padding-top: 12px;
padding-bottom: 13px;
box-sizing: border-box;
.viewpoint-item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.viewpoint-item-desc {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.viewpoint-item-job {
position: absolute;
top: 8px;
right: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(132, 136, 142);
}
}
}
}
}
</style>
src/views/characterPage/components/techLeader/components/characterRelationships/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="character-relationships">
<div class="headerBox">
<span
v-for="(item, index) in list"
:key="index"
class="headerItem"
:class="{ active: item === activeIndex }"
@click="activeIndex = item"
>{{ item }}</span
>
</div>
<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
<!-- 主要内容，人物关系图 -->
<div class="mainBox">
<div class="graph" id="relGraph"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import Center from "./assets/埃隆·马斯克.png";
import P1 from "./assets/唐纳德·特朗普.png";
import P2 from "./assets/詹姆斯・默多克.png";
import P3 from "./assets/格温・肖特韦尔.png";
import P4 from "./assets/金博尔・马斯克.png";
import P5 from "./assets/拉里・埃里森.png";
import P6 from "./assets/斯科特·贝森特.png";
import P7 from "./assets/杰弗里·凯斯勒.png";
import P8 from "./assets/马尔科·卢比奥.png";
import P9 from "./assets/道格·伯格姆.png";
import P10 from "./assets/艾拉・埃伦普里斯.png";
import P11 from "./assets/贾斯汀・马斯克.png";
import PS from "./assets/史蒂夫・尤尔韦松.png";
const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局");
const nodes = [
{
id: "c",
name: "埃隆·马斯克",
category: 0,
symbolSize: 80,
symbol: `image://${Center}`,
label: {
show: true,
position: "bottom",
formatter: "{n|埃隆·马斯克}",
rich: {
n: {
color: "rgba(5,95,194,1)",
fontSize: 24,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
lineHeight: 36
}
}
}
},
// 从三点钟方向顺时针排序
{ id: "n11", name: "贾斯汀・马斯克", category: 1, symbolSize: 80, symbol: `image://${P11}` },
{ id: "n7", name: "杰弗里·凯斯勒", category: 1, symbolSize: 80, symbol: `image://${P7}`, r: 80 },
{ id: "n6", name: "斯科特·贝森特", category: 1, symbolSize: 80, symbol: `image://${P6}` },
{ id: "n9", name: "道格·伯格姆", category: 1, symbolSize: 80, symbol: `image://${P9}` },
{ id: "n12", name: "史蒂夫・尤尔韦松", category: 1, symbolSize: 80, symbol: `image://${PS}` },
{ id: "n5", name: "拉里・埃里森", category: 1, symbolSize: 80, symbol: `image://${P5}`, r: 80 },
{ id: "n8", name: "马尔科·卢比奥", category: 1, symbolSize: 80, symbol: `image://${P8}` },
{ id: "n10", name: "艾拉・埃伦普里斯", category: 1, symbolSize: 80, symbol: `image://${P10}`, r: 80 },
{ id: "n2", name: "詹姆斯・默多克", category: 1, symbolSize: 80, symbol: `image://${P2}` },
{ id: "n1", name: "唐纳德・特朗普", category: 1, symbolSize: 80, symbol: `image://${P1}` },
{ id: "n4", name: "金博尔・马斯克", category: 1, symbolSize: 80, symbol: `image://${P4}` },
{ id: "n3", name: "格温・肖特韦尔", category: 1, symbolSize: 80, symbol: `image://${P3}`, r: 80 }
];
const links = [
{ source: "n11", target: "c", label: { show: true, formatter: "第一任妻子" } },
{ source: "n7", target: "c", label: { show: true, formatter: "风险投资家" } },
{ source: "n6", target: "c", label: { show: true, formatter: "特斯拉董事" } },
{ source: "n9", target: "c", label: { show: true, formatter: "特斯拉董事" } },
{ source: "n12", target: "c", label: { show: true, formatter: "特斯拉董事" } },
{ source: "n5", target: "c", label: { show: true, formatter: "早期重要投资人" } },
{ source: "n8", target: "c", label: { show: true, formatter: "Boring Company 总裁" } },
{ source: "n10", target: "c", label: { show: true, formatter: "特斯拉独立董事" } },
{ source: "n2", target: "c", label: { show: true, formatter: "特斯拉董事" } },
{ source: "n1", target: "c", label: { show: true, formatter: "美国总统" } },
{ source: "n4", target: "c", label: { show: true, formatter: "马斯克弟弟" } },
{ source: "n3", target: "c", label: { show: true, formatter: "SpaceX 总裁" } }
];
let chart;
onMounted(() => {
const el = document.getElementById("relGraph");
if (!el) return;
chart = echarts.init(el);
const setOption = () => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 140;
const dataNodes = nodes.map((n, i) => {
if (n.id === "c") {
return { ...n, x: cx, y: cy, fixed: true };
}
// 均匀环形分布
const idx = i - 1;
const angle = (idx / (nodes.length - 1)) * Math.PI * 2;
const rLocal = radius + (n.r || 0);
const x = cx + rLocal * Math.cos(angle);
const y = cy + rLocal * Math.sin(angle);
return { ...n, x, y };
});
chart.setOption({
tooltip: {},
series: [
{
type: "graph",
layout: activeIndex.value === "圆形布局" ? "none" : "force",
circular: { rotateLabel: true },
force: { repulsion: 800, edgeLength: [80, 160] },
roam: true,
data: activeIndex.value === "圆形布局" ? dataNodes : nodes,
links: links,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
edgeLabel: {
show: true,
position: "middle",
distance: -18,
formatter: ({ data }) => data?.label?.formatter || "",
color: "rgb(5, 95, 194)",
fontSize: 12,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
lineHeight: 24,
backgroundColor: "rgba(231, 243, 255, 1)",
borderRadius: 24,
padding: [0, 12]
},
label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
itemStyle: { color: "rgba(5,95,194,1)" },
emphasis: { focus: "adjacency" }
}
]
});
};
setOption();
const onResize = () => chart && chart.resize();
window.addEventListener("resize", onResize);
watch(activeIndex, () => setOption());
onBeforeUnmount(() => {
window.removeEventListener("resize", onResize);
chart && chart.dispose();
});
});
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
.character-relationships {
width: 1600px;
height: 688px;
background-color: #fff;
margin: 0 auto;
position: relative;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.headerBox {
position: absolute;
top: 14px;
right: 96px;
.headerItem {
padding: 1px 8px;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
cursor: pointer;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
margin-right: 8px;
border: 1px solid rgb(230, 231, 232);
}
.active {
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
color: rgb(5, 95, 194);
}
}
.headerBtnBox {
position: absolute;
top: 14px;
right: 12px;
img {
width: 28px;
height: 28px;
margin-right: 4px;
cursor: pointer;
}
}
.mainBox {
width: 100%;
height: 100%;
padding-top: 42px;
.graph {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/characterPage/components/techLeader/components/relevantSituation/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="relevant-situation">
<div class="left">
<div class="title">
<div class="box"></div>
<div class="text">相关实体</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
<div class="search">
<el-input v-model="searchText" placeholder="搜索内容" :suffix-icon="Search" class="search-input"></el-input>
<el-select
v-model="selectedOption"
placeholder="请选择"
class="search-select"
popper-class="rs-select-popper"
:teleported="false"
size="small"
>
<el-option label="近五年" value="近五年"></el-option>
<el-option label="近十年" value="近十年"></el-option>
<el-option label="近一年" value="近一年"></el-option>
</el-select>
</div>
</div>
<!-- 主要内容-echarts图表 -->
<div class="chart">
<div class="iconBox">
<img src="./assets/icon01.png" alt="" @click="setLayout('circle')" />
<img src="./assets/icon02.png" alt="" @click="setLayout('tree')" />
<img src="./assets/icon03.png" alt="" @click="setLayout('force')" />
</div>
<div class="echarts"></div>
</div>
<div class="bottom">
<img class="img01" src="./assets/AI.png" alt="" />
<span class="text01"
>美国《大而美法案》（OBBBA）通过系统性政策调整，对中国新能源产业链形成多维度冲击，同时倒逼产业链加速重构与技术创新。</span
>
<img class="img02" src="./assets/right.png" alt="" />
</div>
</div>
<div class="right">
<div class="title">
<div class="box"></div>
<div class="text">数据详情</div>
<div class="btn">
<img src="./assets/查看按钮.png" alt="" />
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="right-main">
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon01.png" alt="" class="title-icon" />
<span class="title-text">科技法案</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type" :class="{'type-ai': item.type === '人工智能', 'type-energy': item.type === '能源'}">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon02.png" alt="" class="title-icon" />
<span class="title-text">科技政令</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in twoList" :key="item.id" class="item">
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type-order">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon03.png" alt="" class="title-icon" />
<span class="title-text">科技智库</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList2" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<img :src="item.type" alt="" class="item-type-img" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Search } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import companyIcon from "./assets/company.png";
import companyRedIcon from "./assets/companyred.png";
import book1 from "./assets/book1.png";
import book2 from "./assets/book2.png";
import book3 from "./assets/book3.png";
import book4 from "./assets/book4.png";
import book5 from "./assets/book5.png";
import book6 from "./assets/book6.png";
import type1 from "./assets/type1.png";
import type2 from "./assets/type2.png";
const searchText = ref("");
const selectedOption = ref("近五年");
const billList = ref([
{
id: 1,
name: "大而美法案",
type: "人工智能",
date: "2025年7月4日",
img: book1
},
{
id: 2,
name: "汽车零部件25%关税实施规则",
type: "能源",
date: "2025年7月4日",
img: book2
},
{
id: 3,
name: "小额豁免包裹政策调整",
type: "能源",
date: "2025年7月4日",
img: book3
},
{
id: 4,
name: "NIH预算否决案",
type: "能源",
date: "2025年7月4日",
img: book4
}
]);
const twoList = ref([
{
id: 1,
name: "关于进一步延长TikTok执法宽限期的...",
type: "总统政令",
date: "2025年7月4日"
},
{
id: 2,
name: "修改对等关税税率以反映与中华人民...",
type: "总统政令",
date: "2025年7月4日"
}
]);
const billList2 = ref([
{
id: 1,
name: "中国对AI的转型产业政策",
type: type1,
date: "2025年7月4日",
img: book5
},
{
id: 2,
name: "中美对抗、竞争和合作跨越人工智能...",
type: type2,
date: "2025年7月4日",
img: book6
}
]);
let chart;
let resizeHandler;
const activeLayout = ref("circle");
const labels = [
"大而美法案",
"泰丰先行",
"国轩高科",
"晶科能源",
"容百科技",
"江西紫宸",
"比亚迪",
"长盈精密",
"昆仑化学",
"海辰储能",
"华阳集团",
"嘉源科技",
"天合光能",
"铜陵有色",
"紫江企业",
"格林美",
"德方纳米"
];
const baseNodes = labels.map((name, i) => ({
id: i.toString(),
name
}));
// 构建从外圈指向中心的连线
const baseLinks = baseNodes
.map((n, i) => {
if (i === 0) return null;
// 特殊节点：红色虚线
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
if (isSpecial) {
return {
source: i.toString(),
target: "0",
lineStyle: {
color: "rgb(206, 79, 81)",
type: "dashed"
}
};
}
return { source: i.toString(), target: "0" };
})
.filter(Boolean);
const makeOption = el => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 150;
const positioned = baseNodes.map((n, i) => {
if (activeLayout.value === "circle") {
if (i === 0) return { ...n, x: cx, y: cy, fixed: true };
const angle = ((i - 1) / (baseNodes.length - 1)) * Math.PI * 2;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
return { ...n, x, y };
}
if (activeLayout.value === "tree") {
if (i === 0) return { ...n, x: cx, y: cy - 200, fixed: true };
const totalWidth = Math.min(rect.width, 1000) - 100;
const gap = totalWidth / (baseNodes.length - 2); // 除去根节点后的间隔数
const startX = cx - totalWidth / 2;
// (i-1) 是因为 i 从 1 开始遍历子节点
const x = startX + (i - 1) * gap;
const y = cy + 100;
return { ...n, x, y };
}
return { ...n };
});
const ringSeries = {
type: "graph",
layout: activeLayout.value === "force" ? "force" : "none",
roam: true,
data: positioned.map((n, i) => {
const isForce = activeLayout.value === "force";
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
const icon = isSpecial ? companyRedIcon : companyIcon;
const textColor = isSpecial ? "rgb(206, 79, 81)" : "rgb(59, 65, 75)";
// force 布局保持原样（直接显示图标）；其他布局使用圆圈+RichText Label显示图标和文字
if (isForce) {
return {
...n,
symbol: "image://" + icon,
symbolSize: 18,
draggable: true,
label: {
show: true,
position: "bottom",
color: textColor,
fontSize: i === 0 ? 20 : 16,
fontWeight: i === 0 ? 700 : 400
}
};
}
// Circle/Tree 布局：单层实现（圆圈 + Rich Text Icon + Text）
return {
...n,
symbol: "circle",
symbolSize: 36,
draggable: true,
label: {
show: true,
position: "inside",
formatter:
i === 0
? "{icon|}\n{nameCenter|{b}}"
: isSpecial
? "{icon|}\n{nameRed|{b}}"
: "{icon|}\n{nameNormal|{b}}",
// 微调 offset：[x, y]。y 越大，整体越向下偏移。
offset: i === 0 ? [0, 10] : [0, 10],
rich: {
icon: {
width: 18,
height: 18,
backgroundColor: { image: icon },
align: "center"
},
nameCenter: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 18,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 24
},
nameNormal: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
},
nameRed: {
padding: [16, 0, 0, 0],
color: "rgb(206, 79, 81)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
}
}
},
itemStyle: {
color: "#fff",
borderColor: "rgb(230, 231, 232)",
borderWidth: 1,
shadowBlur: 8,
shadowColor: "rgba(0, 0, 0, 0.1)"
}
};
}),
links: baseLinks,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 6],
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 1
},
emphasis: { focus: "adjacency" },
force: activeLayout.value === "force" ? { repulsion: 800, edgeLength: [80, 160] } : undefined
};
return {
tooltip: {},
series: [ringSeries]
};
};
onMounted(() => {
const el = document.querySelector(".echarts");
if (!el) return;
chart = echarts.init(el);
const option = makeOption(el);
chart.setOption(option);
resizeHandler = () => {
if (!chart) return;
chart.resize();
chart.setOption(makeOption(el));
};
window.addEventListener("resize", resizeHandler);
});
onBeforeUnmount(() => {
if (resizeHandler) window.removeEventListener("resize", resizeHandler);
if (chart) chart.dispose();
});
// 切换布局
const setLayout = type => {
activeLayout.value = type;
const el = document.querySelector(".echarts");
if (!el) return;
const opt = makeOption(el);
chart && chart.setOption(opt, true);
};
</script>
<style scoped lang="scss">
* {
padding: 0;
margin: 0;
}
.relevant-situation {
width: 1600px;
height: 848px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 1068px;
height: 848px;
margin-right: 12px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.search {
width: 312px;
position: absolute;
right: 83px;
top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.search-input {
width: 150px;
height: 24px;
color: rgb(95, 101, 108);
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
}
.search-select {
width: 150px;
height: 24px;
}
}
}
.chart {
width: 1068px;
height: 739px;
padding: 14px 11px;
background-image: url("./assets/background.png");
background-size: cover;
.iconBox {
width: 96px;
height: 28px;
background-color: #fff;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
padding: 0px 7px 0px 14px;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 14px;
height: 14px;
cursor: pointer;
}
img:nth-child(2) {
width: 16px;
height: 16px;
}
}
.echarts {
width: 1046px;
height: 683px;
}
}
.bottom {
width: 1036px;
height: 40px;
margin: 0 auto;
background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
padding: 6px 12px;
display: flex;
align-items: center;
justify-content: space-between;
.img01 {
width: 19px;
height: 20px;
}
.text01 {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.img02 {
width: 24px;
height: 24px;
}
}
}
.right {
width: 520px;
height: 848px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 92px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
img:nth-child(2) {
margin-right: 4px;
}
}
}
.right-main {
width: 100%;
height: 732px;
padding: 15px 19px 0 17px;
.main-box {
width: 484px;
min-height: 190px;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
margin-bottom: 16px;
.main-box-title {
width: 100%;
height: 48px;
background-color: rgb(247, 248, 249);
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.title-icon {
width: 23px;
height: 21px;
margin-left: 20px;
}
.title-bottom {
width: 12px;
height: 8px;
margin-right: 20px;
}
.title-text {
position: absolute;
top: 12px;
left: 58px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.main-box-content {
width: 100%;
min-height: 142px;
padding: 12px 0;
.item {
width: 100%;
height: 53px;
padding: 0 18px 0 19px;
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
.item-img {
width: 36px;
height: 48px;
margin-right: 10px;
}
.item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
.item-date {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
.item-type {
position: absolute;
top: 2px;
right: 18px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 1px 8px;
border-radius: 4px;
border: 1px solid;
}
.type-ai {
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
}
.type-energy {
color: rgba(245, 34, 45, 1);
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
}
.item-type-order {
position: absolute;
top: 1px;
right: 17.58px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 2px 18.21px;
border-radius: 4px;
border: 1px solid rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.item-type-img {
width: 16px;
height: 16px;
position: absolute;
top: 5px;
right: 14px;
}
}
.item:last-child {
margin-bottom: 0;
}
}
}
}
}
}
</style>
src/views/characterPage/components/techLeader/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="tech-leader">
<!-- 科技领袖人物基础 -->
<div class="header">
<div class="avatar">
<img :src="musk.avatar" alt="" />
</div>
<div class="info">
<!-- <div class="name"> -->
<p class="name-cn">{{ musk.nameCn }}</p>
<p class="name-en">{{ musk.nameEn }}</p>
<!-- </div> -->
<div class="introduction">
<p>{{ musk.introduction }}</p>
</div>
<div class="domain">
<p
v-for="item in musk.domain"
:key="item"
:class="{
cl1: item === '电动汽车',
cl2: item === '太空探索',
cl3: item === '可再生资源',
cl4: item === '人工智能',
cl5: item === '脑机接口',
cl6: item === '超级高铁'
}"
>
{{ item }}
</p>
</div>
</div>
</div>
<!-- 科技领袖人物信息区分 -->
<div class="info-divide">
<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
{{ item }}
</div>
</div>
<!-- 人物详情 -->
<div class="info-content" v-if="infoActive === '人物详情'">
<div class="left">
<div class="left-top">
<div class="title">
<div class="box"></div>
<div class="text">科技观点</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="num-list">
<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="numActive = item">
{{ item }}
</div>
</div>
<!-- echarts 图表 -->
<div class="echarts">
<div class="row" v-for="(row, index) in wordCloudData" :key="index">
<span
v-for="(item, idx) in row"
:key="idx"
:style="{
color: item.color,
fontSize: item.fontSize || '16px',
fontWeight: item.fontWeight || 'normal'
}"
>
{{ item.text }}
</span>
</div>
</div>
</div>
<div class="left-bottom">
<div class="title">
<div class="box"></div>
<div class="text">最新动态</div>
<div class="input"><input type="checkbox" checked />只看涉华动态</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main">
<div v-for="item in newList" :key="item" class="main-item">
<div class="time">
<div class="year">{{ item.time.split("年")[0] }}</div>
<div class="date">{{ item.time.split("年")[1] }}</div>
</div>
<div class="image">
<img src="./assets/type1.png" alt="" v-if="item.type === 1" /><img
src="./assets/type2.png"
alt=""
v-else
/>
</div>
<div class="content">
<div :class="{ 'content-type1': item.type === 1, 'content-type2': item.type === 2 }">
<p :class="{ 'content-title1': item.type === 1, 'content-title2': item.type === 2 }">
{{ item.title }}
</p>
<p class="content-title-en">{{ item.titleEn }}</p>
</div>
<p class="content-contentcontent">{{ item.content }}</p>
<div class="content-tag">
<div>
<span
v-for="tag in item.pie"
:key="tag"
class="tag"
:class="{
dl1: tag === '人工智能',
dl2: tag === '量子科技',
dl3: tag === '新能源',
dl4: tag === '集成电路'
}"
@click="handleClickTag(tag)"
>{{ tag }}</span
>
</div>
<div class="origin">来源：{{ item.origin }}</div>
</div>
</div>
</div>
<div class="line-test"></div>
</div>
<div class="pagination">
<div class="total">共153项动态</div>
<el-pagination
background
layout="prev, pager, next"
:page-count="10"
:pager-count="5"
v-model:current-page="currentPage"
class="custom-pagination"
/>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<div class="title">
<div class="box"></div>
<div class="text">基本信息</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="main-content">
<div class="baseInfo">
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生日期：</div>
<div class="baseInfo-item-content">1971年6月28日</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">国籍：</div>
<div class="baseInfo-item-content">南非、加拿大、美国</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">教育背景：</div>
<div class="baseInfo-item-content">宾夕法尼亚大学（经济学、物理学）</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">净资产：</div>
<div class="baseInfo-item-content">约2000亿美元（2023年）</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">职业：</div>
<div class="baseInfo-item-content">企业家、工程师、发明家</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">婚姻状况：</div>
<div class="baseInfo-item-content">曾多次结婚，有多个子女</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生地：</div>
<div class="baseInfo-item-content">南非比勒陀利亚</div>
</div>
</div>
<div class="company">
<div class="company-title">知名企业</div>
<div class="company-content">
<div v-for="item in companyList" :key="item" class="company-item">
<img :src="item.logo" alt="" />
<div>
<div class="company-cn">{{ item.cn }}</div>
<div class="company-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-bottom">
<div class="title">
<div class="box"></div>
<div class="text">职业履历</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="content-main">
<div v-for="item in resumeList" :key="item.id" class="content-item">
<img src="./assets/icon01.png" alt="" class="image01" />
<div class="content-item-time">{{ item.time }}</div>
<div class="content-item-title">{{ item.title }}</div>
<div class="content-item-content">{{ item.content }}</div>
<div class="content-item-door" v-if="item.door">
<img src="./assets/icon02.png" alt="" />
<span>{{ item.door }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 人物关系 -->
<CharacterRelationships v-if="infoActive === '人物关系'"/>
<!-- 相关情况 -->
<RelevantSituation v-if="infoActive === '相关情况'"/>
<!-- 弹框 -->
<el-dialog
v-model="dialogVisible"
width="761px"
class="viewpoint-dialog"
:modal="false"
:draggable="true"
:lock-scroll="false"
>
<template #header>
<div class="viewpoint-header">
<div class="viewpoint-title">领域观点</div>
</div>
</template>
<div class="viewpoint-body">
<div class="viewpoint-body-title">#人工智能</div>
<div v-for="item in dialogData" :key="item.id" class="viewpoint-item">
<img :src="item.img" alt="" />
<div class="viewpoint-item-content">
<div class="viewpoint-item-name">{{ item.name }}</div>
<div class="viewpoint-item-desc">{{ item.content }}</div>
<div class="viewpoint-item-job">{{ item.job }}</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import Musk from "./assets/Musk.png";
import spaceX from "./assets/spaceX.png";
import tesla from "./assets/tesla.png";
import starlink from "./assets/starlink.png";
import X from "./assets/X.png";
import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";
const wordCloudData = ref([
[
{ text: "Boring Company", color: "rgba(19, 168, 168, 1)" },
{ text: "地球化改造", color: "rgb(206, 79, 81)" },
{ text: "减少燃料对外依赖", color: "rgba(250, 173, 20, 1)" },
{ text: "猛禽发动机", color: "rgba(250, 173, 20, 1)" },
{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
{ text: "脑机接口", color: "rgba(19, 168, 168, 1)" }
],
[
{ text: "星舰轨道加油", color: "rgb(206, 79, 81)" },
{ text: "星舰计划", color: "rgba(22, 119, 255, 1)" },
{ text: "超回路列车", color: "rgba(250, 173, 20, 1)" },
{ text: "可持续能源转型", color: "rgb(206, 79, 81)" },
{ text: "工作可选项", color: "rgba(250, 173, 20, 1)" },
{ text: "文明存续", color: "rgba(19, 168, 168, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "未实现赤字控制目标", color: "rgba(255, 122, 69, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
{ text: "第一性原理", color: "rgba(250, 173, 20, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
{ text: "完全自动驾驶 (FSD)", color: "rgb(206, 79, 81)" },
{ text: "多行星物种", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
{ text: "火星殖民", color: "rgb(206, 79, 81)", fontSize: "26px", fontWeight: "700" },
{ text: "大力发展太阳能", color: "rgba(255, 122, 69, 1)" },
{ text: "Neuralink+Grok", color: "rgba(22, 119, 255, 1)" },
{ text: "可持续富足", color: "rgba(250, 173, 20, 1)" },
{ text: "具身智能", color: "rgba(250, 173, 20, 1)" }
],
[
{ text: "火箭回收技术", color: "rgba(19, 168, 168, 1)" },
{ text: "Optimus 机器人", color: "rgba(250, 173, 20, 1)" },
{ text: "超音速海啸", color: "rgba(250, 173, 20, 1)" },
{ text: "柔性电极阵列", color: "rgba(19, 168, 168, 1)" },
{ text: "完全自动驾驶 (FSD)", color: "rgb(206, 79, 81)" },
{ text: "多智能体协作", color: "rgba(19, 168, 168, 1)" }
]
]);
const musk = ref({
nameCn: "埃隆·马斯克",
nameEn: "Elon Reeve Musk",
introduction: "南非裔美籍企业家与工程师，SpaceX 与 X（原推特）创始人，特斯拉 CEO，推动商业航天、电动汽车与卫星互联网变革。",
domain: ["电动汽车", "太空探索", "可再生资源", "人工智能", "脑机接口", "超级高铁"],
avatar: Musk
});
const info = ref(["人物详情", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const currentPage = ref(5);
const dialogVisible = ref(false);
const handleClickTag = tag => {
dialogVisible.value = true;
};
const newList = ref([
{
id: 1,
title: "能源才是真正的货币。我预测，人工智能和机器人的普及将在 3 年内导致美国出现通缩，并在 20 年内让工作成为可选项。我们需要提前改革教育和社会保障体系，为这一转变做好准备。",
titleEn:
"Energy is the real currency. I predict that the widespread adoption of AI and robots will lead to deflation in the US within 3 years and make work optional within 20 years. We need to reform the education and social security systems in advance to prepare for this shift.",
pie: ["人工智能"],
origin: "X",
time: "2025年10月10日",
type: 1
},
{
id: 2,
title: "Neuralink 首位受试者二次植入脑机接口，目标实现下肢自主活动",
content:
"2025 年 11 月 21 日，马斯克宣布 Neuralink 首位人类受试者将接受第二次脑机接口植入手术。新版植入物电极数升级至 3000 个，信号延迟缩短至 15 毫秒，通过 “脑 - 脊信号桥接” 技术激活下肢神经，有望让脊髓损伤患者重新站立，标志着技术从 “操控外部设备” 迈入 “修复自身运动功能” 阶段。",
pie: ["量子科技"],
origin: "华尔街日报",
time: "2025年10月10日",
type: 2
},
{
id: 3,
title: "马斯克预判 AI 财富流向：英伟达、谷歌成关键，入口掌控终极价值",
content:
"2025 年 11 月 30 日，马斯克在播客采访中指出，AI 财富将沿 “芯片→平台→系统→入口” 路径流动。他点名英伟达（算力工具）和谷歌（数据生态）具备核心价值，同时透露 X 平台将打造 “AI 时代超级入口”，整合支付、社交、任务执行等功能，实现 “WeChat++” 愿景。",
pie: ["新能源"],
origin: "金融时报",
time: "2025年10月09日",
type: 2
},
{
id: 4,
title: "特斯拉人形机器人复数定名 “Optimi”，马斯克透露年产亿台目标",
content:
"2025 年 12 月 1 日，马斯克在社交平台确认特斯拉人形机器人 Optimus 的复数形式为 “Optimi”。他重申该机器人将成为特斯拉产量最高的产品，长期年产能目标达数亿台，目前计划在加州、得州工厂分别搭建年产 100 万台和数千万台的生产线。",
pie: ["量子科技"],
origin: "泰晤士报",
time: "2025年10月09日",
type: 2
},
{
id: 5,
title: "究竟要有多少无辜的人死去，美国才能进行改革？我们需要采取激进行动。错误地给非暴力人士贴上 “法西斯” 或 “纳粹” 的标签，应被视为煽动谋杀。这种扣帽子的行为往往被用来为施暴找借口，对社会而言极为危险。",
titleEn:
"How many innocent people have to die before the US reforms? We need radical action. Falsely labeling non-violent people as “fascist” or “Nazi” should be considered incitement to murder. This kind of name-calling is often used to rationalize violence, which is extremely dangerous for society.",
pie: ["人工智能"],
origin: "X",
time: "2025年10月08日",
type: 1
},
{
id: 6,
title: "Grok5 将于 2026 年与《英雄联盟》顶级人类战队对决，规则严格：无数据直读，仅通过摄像头输入；反应时间和点击速度不超过人类水平；必须通过阅读说明书自主学习玩法。目的是测试人工智能的策略与学习能力。",
titleEn:
"Grok5 will play League of Legends against top human teams in 2026, with strict constraints: no data access, only camera input; reaction time and click speed capped at human levels; must learn by reading the manual. The purpose is to test the strategic and learning abilities of AI.",
pie: ["集成电路"],
origin: "X",
time: "2025年10月08日",
type: 1
},
{
id: 7,
title: "SpaceX 频谱收购获 FCC 认可，美国下一代连接技术领先优势强化",
content:
"美国联邦通信委员会（FCC）正式表态支持 SpaceX 收购回声星通信频谱交易。FCC 指出，此次 170 亿美元交易将极大增强行业竞争力，助力美国在下一代连接技术领域巩固领先地位，同时为偏远地区提供更可靠的移动网络覆盖。",
pie: ["量子科技"],
origin: "华盛顿邮报",
time: "2025年10月07日",
type: 2
}
]);
const companyList = ref([
{
id: 1,
cn: "太空探索技术公司",
name: "SpaceX",
logo: spaceX
},
{
id: 2,
cn: "特斯拉",
name: "Tesla",
logo: tesla
},
{
id: 3,
cn: "星链",
name: "Starlink",
logo: starlink
},
{
id: 4,
cn: "X 平台（原推特）",
name: "X (formerly Twitter)",
logo: X
}
]);
// 个人履历
const resumeList = ref([
{
id: 1,
time: "2022-至今",
title: "Twitter/X | 所有者、CTO",
content: "以440亿美元收购Twitter，并担任首席技术官，进行大规模重组和品牌重塑为X。",
door: "旋转门：从硬件科技到社交媒体"
},
{
id: 2,
time: "2004-至今",
title: "Tesla | 董事长、产品架构师，后任CEO",
content: "早期投资者并加入特斯拉，领导产品设计和开发，推动电动汽车革命。推出了多款畅销电动汽车。",
door: "旋转门：从互联网支付到汽车制造"
},
{
id: 3,
time: "2002-至今",
title: "SpaceX | 创始人、CEO兼CTO",
content: "创立太空探索技术公司，目标是降低太空运输成本，最终实现火星殖民。开发了猎鹰系列火箭和龙飞船。",
door: "旋转门：从互联网支付到太空科技"
},
{
id: 4,
time: "1999-2002",
title: "PayPal | 创始人、CEO",
content: "创立太空探索技术公司，目标是降低太空运输成本，最终实现火星殖民。开发了猎鹰系列火箭和龙飞船。",
door: ""
},
{
id: 5,
time: "1995-1999",
title: "Zip2 | 联合创始人",
content: "与弟弟金巴尔·马斯克共同创立了Zip2，为报纸行业提供在线城市指南。1999年康柏以3.07亿美元收购了Zip2。",
door: ""
}
]);
// 弹框数据
const dialogData = ref([
{
id: 1,
name: "山姆・奥特曼",
content: "主张分级监管，反对 “一刀切” 审批；警告美国领先优势有限，电力与基建是关键瓶颈。",
img: img1,
job: "OpenAI CEO"
},
{
id: 2,
name: "布拉德・史密斯",
content: "主张全技术栈监管与基础建设投入，强调美国需在芯片、算法、数据各层保持领先。",
img: img2,
job: "微软副董事长"
},
{
id: 3,
name: "黄仁勋",
content: "认为 AI 处于 “智能基建起步期”，大模型为基础，代理式 AI 为下一阶段；否定 AI 泡沫，强调与实体经济融合。",
img: img3,
job: "NVIDIA CEO"
},
{
id: 4,
name: "杰弗里・辛顿",
content: "担忧 AI 发展过快，警告 “涌现能力” 超预期，可能导致存在性风险；呼吁放缓研发、加强安全。",
img: img4,
job: "图灵奖得主、深度学习先驱"
},
{
id: 5,
name: "李飞飞",
content: "关注 AI 伦理与公平性，强调安全与普惠并重，对 AGI 时间表持谨慎态度。",
img: img5,
job: "斯坦福大学教授"
}
]);
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.tech-leader {
width: 1600px;
margin: 0 auto;
padding-bottom: 50px;
.header {
width: 1600px;
height: 200px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 20px;
display: flex;
align-items: center;
.avatar {
width: 160px;
height: 160px;
margin-right: 24px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
flex: 1;
.name-cn {
font-size: 32px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 42px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.name-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.introduction {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.domain {
font-size: 14px;
p {
display: inline-block;
padding: 1px 8px;
border-radius: 4px;
margin-right: 8px;
border: 1px solid;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(217, 247, 190, 1);
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.cl3 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl4 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.cl5 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl6 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
}
}
}
.info-divide {
width: 1600px;
height: 64px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 530px;
height: 54px;
text-align: center;
font-size: 20px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(59, 65, 75);
border-radius: 10px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.active {
font-size: 24px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
border: 2px solid rgba(174, 214, 255, 1);
}
}
.info-content {
width: 1600px;
height: 1856px;
margin: 16px auto;
display: flex;
.left {
width: 1064px;
height: 100%;
margin-right: 16px;
.left-top {
width: 100%;
height: 300px;
margin-bottom: 16px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.num-list {
display: flex;
align-items: center;
padding-left: 24px;
margin-bottom: 16px;
div {
padding: 1px 8px;
line-height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
cursor: pointer;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
margin-right: 8px;
}
.active {
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
}
.echarts {
width: 1009px;
height: 170px;
margin-left: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 0;
.row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
span {
font-family: "Microsoft YaHei";
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: scale(1.1);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
}
}
}
}
.left-bottom {
width: 100%;
height: 1540px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 85px;
display: flex;
align-items: center;
padding: 14px 12px 45px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.input {
position: absolute;
top: 15px;
right: 114px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
input {
margin-right: 8px;
}
}
}
.main {
width: 1064px;
height: 1357px;
box-sizing: border-box;
padding-right: 50px;
position: relative;
z-index: 110;
.main-item {
width: 1014px;
margin-bottom: 40px;
display: flex;
.time {
width: 77px;
box-sizing: border-box;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
.year {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
.date {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
}
.image {
margin-right: 20px;
img {
width: 24px;
height: 24px;
}
}
.content {
width: 873px;
.content-type1 {
background-color: rgba(246, 250, 255, 1);
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
padding: 12px 14px 12px 15px;
.content-title1 {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-bottom: 12px;
border-bottom: 1px solid rgb(234, 236, 238);
cursor: pointer;
}
.content-title-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-top: 12px;
cursor: pointer;
}
}
.content-type2 {
.content-title2 {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 26px;
padding-bottom: 8px;
cursor: pointer;
}
}
.content-contentcontent {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
line-height: 24px;
margin-bottom: 8px;
cursor: pointer;
}
.content-tag {
width: 873px;
display: flex;
justify-content: space-between;
.tag {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-right: 8px;
padding: 1px 10px;
border-radius: 4px;
border: 1px solid;
cursor: pointer;
}
.dl1 {
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
}
.dl2 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
border-color: rgba(255, 163, 158, 1);
}
.dl3 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
border-color: rgba(255, 213, 145, 1);
}
.dl4 {
background-color: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
border-color: rgba(211, 173, 247, 1);
}
.origin {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
cursor: pointer;
}
}
}
}
.line-test {
position: absolute;
top: 10px;
left: 109px;
height: 1300px;
border: 1px solid rgb(230, 231, 232);
z-index: -1;
}
}
.line {
width: 100%;
height: 1px;
background-color: rgb(234, 236, 238);
margin-top: 30px;
border: none;
}
.pagination {
width: 100%;
height: 76px;
margin: 20px auto;
display: flex;
padding: 0 31px 0 36px;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgb(234, 236, 238);
.total {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
}
:deep(.custom-pagination) {
display: flex;
align-items: center;
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev),
:deep(.custom-pagination.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
}
}
}
.right {
width: 520px;
height: 100%;
.right-top {
width: 520px;
height: 577px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
margin-bottom: 16px;
.title {
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 14px 12px 20px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.main-content {
width: 520px;
height: 517px;
padding: 0 48px 50px 34px;
.baseInfo {
width: 438px;
height: 290px;
padding-bottom: 50px;
border-bottom: 1px solid rgb(234, 236, 238);
.baseInfo-item {
display: flex;
margin-bottom: 12px;
.baseInfo-item-title {
width: 88px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.baseInfo-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
}
}
.company {
width: 438px;
height: 176px;
padding-top: 19px;
.company-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 19px;
}
.company-content {
width: 409px;
height: 114px;
display: flex;
flex-wrap: wrap;
.company-item {
width: 185px;
height: 49px;
margin-bottom: 16px;
display: flex;
align-items: center;
cursor: pointer;
img {
width: 48px;
height: 48px;
margin-right: 8px;
}
.company-cn {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.company-name {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
}
}
.company-item:nth-child(2n-1) {
margin-right: 39px;
}
.company-item:last-child {
.company-name {
width: 150px;
}
}
}
}
}
}
.right-bottom {
width: 520px;
height: 1263px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 80px;
display: flex;
align-items: center;
padding: 14px 12px 40px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.content-main {
width: 480px;
height: 1020px;
margin-left: 16px;
.content-item {
width: 454px;
margin-bottom: 60px;
margin-left: 26px;
position: relative;
.image01 {
width: 14px;
height: 12.13px;
position: absolute;
top: 8px;
left: -26px;
}
.content-item-time {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(5, 95, 194);
margin-bottom: 8px;
}
.content-item-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.content-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
margin-bottom: 8px;
}
.content-item-door {
width: 300px;
height: 32px;
display: flex;
align-items: center;
padding: 4px 0 4px 11px;
border-radius: 4px;
background-color: rgba(255, 246, 240, 1);
border: 1px solid rgba(250, 140, 22, 0.4);
img {
width: 20px;
height: 24px;
margin-right: 10px;
}
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgba(255, 149, 77, 1);
}
}
}
}
}
}
}
}
:deep(.viewpoint-dialog) {
width: 761px !important;
height: 669px;
padding: 0;
border-radius: 4px;
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
padding: 0;
margin: 0;
position: relative;
height: 48px;
}
.el-dialog__headerbtn {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
.viewpoint-header {
width: 761px;
height: 48px;
background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.viewpoint-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.viewpoint-body {
padding: 24px 24px 35px 24px;
height: calc(669px - 48px);
box-sizing: border-box;
overflow: hidden;
.viewpoint-body-title {
font-size: 28px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 37px;
color: rgb(59, 65, 75);
margin-bottom: 32px;
}
.viewpoint-item {
width: 713px;
min-height: 81px;
display: block;
margin-bottom: 12px;
position: relative;
padding-left: 48px;
img {
position: absolute;
top: -20px;
left: -20px;
}
.viewpoint-item-content {
width: 665px;
min-height: 81px;
background-image: url("./assets/bg01.png");
background-size: 100% 100%;
position: relative;
top: 0;
left: 0;
padding-left: 23px;
padding-top: 12px;
padding-bottom: 13px;
box-sizing: border-box;
.viewpoint-item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.viewpoint-item-desc {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.viewpoint-item-job {
position: absolute;
top: 8px;
right: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(132, 136, 142);
}
}
}
}
}
</style>
src/views/characterPage/components/thinkTankPerson/components/characterRelationships/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="character-relationships">
<div class="headerBox">
<span
v-for="(item, index) in list"
:key="index"
class="headerItem"
:class="{ active: item === activeIndex }"
@click="activeIndex = item"
>{{ item }}</span
>
</div>
<div class="headerBtnBox"><img src="./assets/下载按钮.png" alt="" /><img src="./assets/收藏按钮.png" alt="" /></div>
<!-- 主要内容，人物关系图 -->
<div class="mainBox">
<div class="graph" id="relGraph"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import Center from "./assets/巴里·帕维尔.png";
import P1 from "./assets/卡罗尔·M·波滕格.png";
import P2 from "./assets/理查德·丹齐格.png";
import P3 from "./assets/吉姆·米特雷.png";
import P4 from "./assets/拉斐尔·S·科恩.png";
import P5 from "./assets/卡娅·卡拉斯.png";
import P6 from "./assets/伊万娜·柯.png";
import P7 from "./assets/丹尼尔·埃格尔.png";
import P8 from "./assets/马克·埃斯珀.png";
import P9 from "./assets/格雷戈里·史密斯.png";
import P10 from "./assets/斯特凡诺·斯特凡尼尼.png";
import P11 from "./assets/谢莉·卡尔伯森.png";
import PS from "./assets/菲利普·布里德洛夫.png";
const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局");
const nodes = [
{
id: "c",
name: "巴里·帕维尔",
category: 0,
symbolSize: 80,
symbol: `image://${Center}`,
label: {
show: true,
position: "bottom",
formatter: "{n|巴里·帕维尔}",
rich: {
n: {
color: "rgba(5,95,194,1)",
fontSize: 24,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
lineHeight: 36
}
}
}
},
// 从三点钟方向顺时针排序
{ id: "n11", name: "谢莉·卡尔伯森", category: 1, symbolSize: 80, symbol: `image://${P11}` },
{ id: "n7", name: "丹尼尔·埃格尔", category: 1, symbolSize: 80, symbol: `image://${P7}`, r: 80 },
{ id: "n6", name: "伊万娜·柯", category: 1, symbolSize: 80, symbol: `image://${P6}` },
{ id: "n9", name: "格雷戈里·史密斯", category: 1, symbolSize: 80, symbol: `image://${P9}` },
{ id: "n12", name: "菲利普·布里德洛夫", category: 1, symbolSize: 80, symbol: `image://${PS}` },
{ id: "n5", name: "卡娅·卡拉斯", category: 1, symbolSize: 80, symbol: `image://${P5}`, r: 80 },
{ id: "n8", name: "马克·埃斯珀", category: 1, symbolSize: 80, symbol: `image://${P8}` },
{ id: "n10", name: "斯特凡诺·斯特凡尼尼", category: 1, symbolSize: 80, symbol: `image://${P10}`, r: 80 },
{ id: "n2", name: "理查德·丹齐格", category: 1, symbolSize: 80, symbol: `image://${P2}` },
{ id: "n1", name: "卡罗尔·M·波滕格", category: 1, symbolSize: 80, symbol: `image://${P1}` },
{ id: "n4", name: "拉斐尔·S·科恩", category: 1, symbolSize: 80, symbol: `image://${P4}` },
{ id: "n3", name: "吉姆·米特雷", category: 1, symbolSize: 80, symbol: `image://${P3}`, r: 80 }
];
const links = [
{ source: "n11", target: "c", label: { show: true, formatter: "兰德同事" } },
{ source: "n7", target: "c", label: { show: true, formatter: "兰德共同作者" } },
{ source: "n6", target: "c", label: { show: true, formatter: "兰德共同作者" } },
{ source: "n9", target: "c", label: { show: true, formatter: "兰德共同作者" } },
{ source: "n12", target: "c", label: { show: true, formatter: "共同作者" } },
{ source: "n5", target: "c", label: { show: true, formatter: "爱沙尼亚总理" } },
{ source: "n8", target: "c", label: { show: true, formatter: "国防部同事" } },
{ source: "n10", target: "c", label: { show: true, formatter: "外交部同事" } },
{ source: "n2", target: "c", label: { show: true, formatter: "讲座嘉宾" } },
{ source: "n1", target: "c", label: { show: true, formatter: "议题搭档" } },
{ source: "n4", target: "c", label: { show: true, formatter: "兰德同事" } },
{ source: "n3", target: "c", label: { show: true, formatter: "兰德同事" } }
];
let chart;
onMounted(() => {
const el = document.getElementById("relGraph");
if (!el) return;
chart = echarts.init(el);
const setOption = () => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 140;
const dataNodes = nodes.map((n, i) => {
if (n.id === "c") {
return { ...n, x: cx, y: cy, fixed: true };
}
// 均匀环形分布
const idx = i - 1;
const angle = (idx / (nodes.length - 1)) * Math.PI * 2;
const rLocal = radius + (n.r || 0);
const x = cx + rLocal * Math.cos(angle);
const y = cy + rLocal * Math.sin(angle);
return { ...n, x, y };
});
chart.setOption({
tooltip: {},
series: [
{
type: "graph",
layout: activeIndex.value === "圆形布局" ? "none" : "force",
circular: { rotateLabel: true },
force: { repulsion: 800, edgeLength: [80, 160] },
roam: true,
data: activeIndex.value === "圆形布局" ? dataNodes : nodes,
links: links,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 10],
lineStyle: { color: "rgba(174,214,255,1)", width: 2, opacity: 0.8 },
edgeLabel: {
show: true,
position: "middle",
distance: -18,
formatter: ({ data }) => data?.label?.formatter || "",
color: "rgb(5, 95, 194)",
fontSize: 12,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
lineHeight: 24,
backgroundColor: "rgba(231, 243, 255, 1)",
borderRadius: 24,
padding: [0, 12]
},
label: { show: true, position: "bottom", color: "rgb(59,65,75)", fontSize: 16 },
itemStyle: { color: "rgba(5,95,194,1)" },
emphasis: { focus: "adjacency" }
}
]
});
};
setOption();
const onResize = () => chart && chart.resize();
window.addEventListener("resize", onResize);
watch(activeIndex, () => setOption());
onBeforeUnmount(() => {
window.removeEventListener("resize", onResize);
chart && chart.dispose();
});
});
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
.character-relationships {
width: 1600px;
height: 688px;
background-color: #fff;
margin: 0 auto;
position: relative;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.headerBox {
position: absolute;
top: 14px;
right: 96px;
.headerItem {
padding: 1px 8px;
border-radius: 4px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
cursor: pointer;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
margin-right: 8px;
border: 1px solid rgb(230, 231, 232);
}
.active {
background-color: rgba(246, 250, 255, 1);
border-color: rgb(5, 95, 194);
color: rgb(5, 95, 194);
}
}
.headerBtnBox {
position: absolute;
top: 14px;
right: 12px;
img {
width: 28px;
height: 28px;
margin-right: 4px;
cursor: pointer;
}
}
.mainBox {
width: 100%;
height: 100%;
padding-top: 42px;
.graph {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/characterPage/components/thinkTankPerson/components/historicalProposal/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="historical-proposal">
<div class="nav">
<el-input placeholder="搜索关键词" v-model="searchText" :suffix-icon="Search" class="search-input"></el-input>
<div class="select-box">
<el-select v-model="value1" placeholder="请选择" class="select">
<el-option label="全部法案" value="全部法案"></el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择" class="select">
<el-option label="全部领域" value="全部领域"></el-option>
</el-select>
</div>
</div>
<div class="main">
<div v-for="item in bestList" :key="item.id" class="item">
<!-- <div class="img-box">
<img :src="item.img" alt="" class="img" />
<div class="info">
<div class="title">{{ item.title }}</div>
<div>
<span
v-for="(tag, index) in item.tie"
:key="tag"
class="tag"
:class="{ 'tag-1': index == 0, 'tag-2': index == 1 }"
>{{ tag }}</span
>
</div>
</div>
</div>
<div class="info-box">
<div class="box">
<div class="label">法案描述：</div>
<div class="content">{{ item.disc }}</div>
</div>
<div class="box">
<div class="label">法案状态：</div>
<div class="content">{{ item.state }}</div>
</div>
<div class="box">
<div class="label">提案日期：</div>
<div class="content">{{ item.time }}</div>
</div>
</div> -->
<img :src="item.img" alt="" class="img" />
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
<div class="tag-box">
<span
v-for="(tag, index) in item.tie"
:key="tag"
class="tag"
:class="{'tag-1': tag == '国际关系', 'tag-2': tag == '地缘政治', 'tag-3': tag == '中美关系', 'tag-4': tag == '国家安全'}"
>{{ tag }}</span
>
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination
background
layout="prev, pager, next"
:total="100"
v-model:current-page="currentPage"
class="custom-pagination"
/>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import img from "./assets/img.png";
const searchText = ref("");
const value1 = ref("全部法案");
const value2 = ref("全部领域");
const currentPage = ref(2);
const list = ref([
{
id: 1,
title: "FY2025 National Defense Authorization Act (NDAA, S.4638)",
tie: ["法案", "国防与军事"],
disc: "提供2.82亿美元用于Ellsworth空军基地B-21轰炸机任务和军事建设，包括现代化指令。图恩强调这是其领导的条款，确保南达科他州国防投资。",
state: "2024年12月参议院通过，待总统签署。",
time: "2024年6月",
img: img
},
{
id: 2,
title: "Bipartisan Appropriations Bills",
tie: ["法案", "政府预算"],
disc: "推动农业、商务、司法和军事等四项两党拨款法案，恢复“常规程序”以允许修正案辩论，避免年底“全包”法案或继续决议（CR）。图恩公开敦促民主党合作。",
state: "委员会报告，部分进入辩论阶段。",
time: "2025年7月",
img: img
},
{
id: 3,
title: "Tax Relief, Unemployment Insurance Reauthorization, and Job Creation Act",
tie: ["法案", "税收与经济"],
disc: "续推失业保险和就业创造措施，图恩在2024报告中排名共和党第8位影响力，推动小企业税收减免。",
state: "纳入2024报告卡，影响2025税收辩论",
time: "2024年续推",
img: img
},
{
id: 4,
title: "Farm Bill Renewal Provisions",
tie: ["修正案", "农业与农村"],
disc: "加强农村基础设施和作物保险，支持南达科他州农民。图恩强调两党合作，避免拖延。",
state: "纳入2024 Farm Bill讨论，部分通过",
time: "2024年",
img: img
},
{
id: 5,
title: "Regular Order Restoration",
tie: ["修正案", "能源"],
disc: "承诺恢复委员会起草、修正案辩论和投票规范，避免领导层封闭谈判。图恩表示将允许100多项修正案投票。",
state: "实施中，2025年夏季拨款辩论",
time: "2025年1月",
img: img
},
{
id: 6,
title: "S.Amdt.3946 和 S.Amdt.3947",
tie: ["法案", "政府预算"],
disc: "改进政府资金法案，允许参议员就电话记录扣押提起诉讼，保护国会隐私（源于2020选举调查争议）。图恩提议将法院赔偿退回财政部以调整条款。",
state: "2025年11月10日失败",
time: "2025年11月10日",
img: img
}
]);
const bestList = ref([
{
id: 1,
title: "通用人工智能如何影响国家兴衰：潜在AGI未来的愿景",
content: "提供2.82亿美元用于Ellsworth空军基地B-21轰炸机任务和军事建设，包括现代化指令。图恩强调这是其领导的条款，确保南达科他州国防投资。",
tie: ["国际关系"],
time: "2025年6月",
img: img
},
{
id: 2,
title: "AI安全：保护大型语言模型及其对地缘政治未来的影响",
content: "召集AI和全球安全专家讨论AI安全的日益重要性及其对国家和本土安全的含义，分析保护大型语言模型以应对地缘政治风险的必要性。",
tie: ["地缘政治"],
time: "2025年月",
img: img
},
{
id: 3,
title: "中美关系美国视角",
content: "分析中美关系未来可能涉及加剧的经济和技术竞争、持续的区域紧张，以及华盛顿和北京对相互威慑能力的日益悲观。",
tie: ["中美关系"],
time: "2025年4月",
img: img
},
{
id: 4,
title: "欧洲长期战争：2024年及以后美国、波兰及盟友选项",
content: "与波兰国际事务研究所合作讨论2024年作为确保乌克兰胜利和遏制俄罗斯的关键转折年，提供长期战略分析和可操作政策建议，以捍卫基于规则的国际秩序。",
tie: ["地缘政治"],
time: "2025年3月",
img: img
},
{
id: 5,
title: "华盛顿北约峰会：兰德专家观点",
content: "30位兰德研究人员讨论北约未来75年的定义性挑战，包括对乌克兰的支持、联盟防御强化、东部侧翼加固，以及应对中国挑战和新兴技术。",
tie: ["国际关系"],
time: "2025年3月",
img: img
},
{
id: 6,
title: "女性视角如何塑造国家安全",
content: "探讨性别视角在帮助美国及盟国政府决策者应对最紧迫国家安全挑战中的关键作用，推动多样化视角在政策制定中的价值。",
tie: ["国家安全"],
time: "2025年1月",
img: img
}
])
</script>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
.historical-proposal {
width: 1600px;
height: 644px;
.nav {
width: 100%;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.search-input {
width: 300px;
height: 32px;
color: rgb(132, 136, 142);
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
}
.select-box {
width: 332px;
height: 32px;
display: flex;
justify-content: space-between;
align-items: center;
.select {
width: 160px;
height: 32px;
color: rgb(132, 136, 142);
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
}
}
}
.main {
width: 1600px;
height: 540px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
.item {
width: 523px;
height: 262px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
padding: 16px 16px 15px 16px;
position: relative;
// .img-box {
// width: 488px;
// height: 77px;
// display: flex;
// margin-bottom: 12px;
// img {
// width: 57px;
// height: 77px;
// margin-right: 15px;
// }
// .info {
// width: 420px;
// height: 77px;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// align-items: flex-start;
// .title {
// font-size: 16px;
// font-weight: 700;
// font-family: "Microsoft YaHei";
// line-height: 24px;
// color: rgb(5, 95, 194);
// }
// .tag {
// display: inline-block;
// padding: 1px 8px;
// font-size: 14px;
// font-weight: 400;
// font-family: "Microsoft YaHei";
// line-height: 20px;
// border-radius: 4px;
// border: 1px solid;
// margin-right: 8px;
// }
// .tag-1 {
// background-color: rgba(246, 255, 237, 1);
// color: rgba(82, 196, 26, 1);
// border-color: rgba(217, 247, 190, 1);
// }
// .tag-2 {
// background-color: rgba(255, 251, 230, 1);
// color: rgba(250, 173, 20, 1);
// border-color: rgba(255, 241, 184, 1);
// }
// }
// }
// .info-box {
// width: 488px;
// height: 140px;
// .box {
// width: 100%;
// margin-bottom: 10px;
// display: flex;
// .label {
// width: 84px;
// font-size: 16px;
// font-weight: 700;
// font-family: "Microsoft YaHei";
// line-height: 24px;
// color: rgb(59, 65, 75);
// }
// .content {
// width:400px;
// font-size: 16px;
// font-weight: 400;
// font-family: "Microsoft YaHei";
// line-height: 24px;
// color: rgb(59, 65, 75);
// }
// }
// }
.img {
width: 57px;
height: 77px;
}
.title {
margin-top: 16px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.content {
margin-top: 8px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.tag-box {
position: absolute;
bottom: 15px;
left: 16px;
.tag {
display: inline-block;
padding: 1px 8px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
border-radius: 4px;
border: 1px solid;
margin-right: 8px;
}
.tag-1 {
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
border-color: rgba(255, 241, 184, 1);
}
.tag-2 {
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
border-color: rgba(186, 224, 255, 1);
}
.tag-3 {
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
border-color: rgba(255, 204, 199, 1);
}
.tag-4 {
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
border-color: rgba(217, 247, 190, 1);
}
}
.time {
position: absolute;
top: 16px;
right: 16px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
}
}
.pagination-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
:deep(.el-pagination.is-background .el-pager li) {
background-color: #fff;
border: 1px solid rgba(229, 230, 235, 1);
border-radius: 4px;
color: rgba(29, 33, 41, 1);
font-weight: 400;
margin: 0 4px;
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
border-color: #165DFF;
color: #165DFF;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
background-color: #fff;
border: 1px solid rgba(229, 230, 235, 1);
border-radius: 4px;
margin: 0 4px;
}
}
}
</style>
src/views/characterPage/components/thinkTankPerson/components/relevantSituation/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="relevant-situation">
<div class="left">
<div class="title">
<div class="box"></div>
<div class="text">相关实体</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
<div class="search">
<el-input v-model="searchText" placeholder="搜索内容" :suffix-icon="Search" class="search-input"></el-input>
<el-select
v-model="selectedOption"
placeholder="请选择"
class="search-select"
popper-class="rs-select-popper"
:teleported="false"
size="small"
>
<el-option label="近五年" value="近五年"></el-option>
<el-option label="近十年" value="近十年"></el-option>
<el-option label="近一年" value="近一年"></el-option>
</el-select>
</div>
</div>
<!-- 主要内容-echarts图表 -->
<div class="chart">
<div class="iconBox">
<img src="./assets/icon01.png" alt="" @click="setLayout('circle')" />
<img src="./assets/icon02.png" alt="" @click="setLayout('tree')" />
<img src="./assets/icon03.png" alt="" @click="setLayout('force')" />
</div>
<div class="echarts"></div>
</div>
<div class="bottom">
<img class="img01" src="./assets/AI.png" alt="" />
<span class="text01"
>美国《大而美法案》（OBBBA）通过系统性政策调整，对中国新能源产业链形成多维度冲击，同时倒逼产业链加速重构与技术创新。</span
>
<img class="img02" src="./assets/right.png" alt="" />
</div>
</div>
<div class="right">
<div class="title">
<div class="box"></div>
<div class="text">数据详情</div>
<div class="btn">
<img src="./assets/查看按钮.png" alt="" />
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="right-main">
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon01.png" alt="" class="title-icon" />
<span class="title-text">科技法案</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type" :class="{'type-ai': item.type === '人工智能', 'type-energy': item.type === '能源'}">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon02.png" alt="" class="title-icon" />
<span class="title-text">科技政令</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in twoList" :key="item.id" class="item">
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<div class="item-type-order">{{ item.type }}</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main-box-title">
<img src="./assets/titleIcon03.png" alt="" class="title-icon" />
<span class="title-text">科技智库</span>
<img src="./assets/bottom.png" alt="" class="title-bottom" />
</div>
<div class="main-box-content">
<div v-for="item in billList2" :key="item.id" class="item">
<img :src="item.img" alt="" class="item-img" />
<div>
<div class="item-name">{{ item.name }}</div>
<div class="item-date">{{ item.date }}</div>
</div>
<img :src="item.type" alt="" class="item-type-img" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { Search } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import companyIcon from "./assets/company.png";
import companyRedIcon from "./assets/companyred.png";
import book1 from "./assets/book1.png";
import book2 from "./assets/book2.png";
import book3 from "./assets/book3.png";
import book4 from "./assets/book4.png";
import book5 from "./assets/book5.png";
import book6 from "./assets/book6.png";
import type1 from "./assets/type1.png";
import type2 from "./assets/type2.png";
const searchText = ref("");
const selectedOption = ref("近五年");
const billList = ref([
{
id: 1,
name: "大而美法案",
type: "人工智能",
date: "2025年7月4日",
img: book1
},
{
id: 2,
name: "汽车零部件25%关税实施规则",
type: "能源",
date: "2025年7月4日",
img: book2
},
{
id: 3,
name: "小额豁免包裹政策调整",
type: "能源",
date: "2025年7月4日",
img: book3
},
{
id: 4,
name: "NIH预算否决案",
type: "能源",
date: "2025年7月4日",
img: book4
}
]);
const twoList = ref([
{
id: 1,
name: "关于进一步延长TikTok执法宽限期的...",
type: "总统政令",
date: "2025年7月4日"
},
{
id: 2,
name: "修改对等关税税率以反映与中华人民...",
type: "总统政令",
date: "2025年7月4日"
}
]);
const billList2 = ref([
{
id: 1,
name: "中国对AI的转型产业政策",
type: type1,
date: "2025年7月4日",
img: book5
},
{
id: 2,
name: "中美对抗、竞争和合作跨越人工智能...",
type: type2,
date: "2025年7月4日",
img: book6
}
]);
let chart;
let resizeHandler;
const activeLayout = ref("circle");
const labels = [
"大而美法案",
"泰丰先行",
"国轩高科",
"晶科能源",
"容百科技",
"江西紫宸",
"比亚迪",
"长盈精密",
"昆仑化学",
"海辰储能",
"华阳集团",
"嘉源科技",
"天合光能",
"铜陵有色",
"紫江企业",
"格林美",
"德方纳米"
];
const baseNodes = labels.map((name, i) => ({
id: i.toString(),
name
}));
// 构建从外圈指向中心的连线
const baseLinks = baseNodes
.map((n, i) => {
if (i === 0) return null;
// 特殊节点：红色虚线
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
if (isSpecial) {
return {
source: i.toString(),
target: "0",
lineStyle: {
color: "rgb(206, 79, 81)",
type: "dashed"
}
};
}
return { source: i.toString(), target: "0" };
})
.filter(Boolean);
const makeOption = el => {
const rect = el.getBoundingClientRect();
const cx = rect.width / 2;
const cy = rect.height / 2;
const radius = Math.min(cx, cy) - 150;
const positioned = baseNodes.map((n, i) => {
if (activeLayout.value === "circle") {
if (i === 0) return { ...n, x: cx, y: cy, fixed: true };
const angle = ((i - 1) / (baseNodes.length - 1)) * Math.PI * 2;
const x = cx + radius * Math.cos(angle);
const y = cy + radius * Math.sin(angle);
return { ...n, x, y };
}
if (activeLayout.value === "tree") {
if (i === 0) return { ...n, x: cx, y: cy - 200, fixed: true };
const totalWidth = Math.min(rect.width, 1000) - 100;
const gap = totalWidth / (baseNodes.length - 2); // 除去根节点后的间隔数
const startX = cx - totalWidth / 2;
// (i-1) 是因为 i 从 1 开始遍历子节点
const x = startX + (i - 1) * gap;
const y = cy + 100;
return { ...n, x, y };
}
return { ...n };
});
const ringSeries = {
type: "graph",
layout: activeLayout.value === "force" ? "force" : "none",
roam: true,
data: positioned.map((n, i) => {
const isForce = activeLayout.value === "force";
const isSpecial = ["容百科技", "海辰储能", "华阳集团"].includes(n.name);
const icon = isSpecial ? companyRedIcon : companyIcon;
const textColor = isSpecial ? "rgb(206, 79, 81)" : "rgb(59, 65, 75)";
// force 布局保持原样（直接显示图标）；其他布局使用圆圈+RichText Label显示图标和文字
if (isForce) {
return {
...n,
symbol: "image://" + icon,
symbolSize: 18,
draggable: true,
label: {
show: true,
position: "bottom",
color: textColor,
fontSize: i === 0 ? 20 : 16,
fontWeight: i === 0 ? 700 : 400
}
};
}
// Circle/Tree 布局：单层实现（圆圈 + Rich Text Icon + Text）
return {
...n,
symbol: "circle",
symbolSize: 36,
draggable: true,
label: {
show: true,
position: "inside",
formatter:
i === 0
? "{icon|}\n{nameCenter|{b}}"
: isSpecial
? "{icon|}\n{nameRed|{b}}"
: "{icon|}\n{nameNormal|{b}}",
// 微调 offset：[x, y]。y 越大，整体越向下偏移。
offset: i === 0 ? [0, 10] : [0, 10],
rich: {
icon: {
width: 18,
height: 18,
backgroundColor: { image: icon },
align: "center"
},
nameCenter: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 18,
fontWeight: 700,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 24
},
nameNormal: {
padding: [16, 0, 0, 0],
color: "rgb(59,65,75)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
},
nameRed: {
padding: [16, 0, 0, 0],
color: "rgb(206, 79, 81)",
fontSize: 14,
fontWeight: 400,
fontFamily: "Microsoft YaHei",
align: "center",
lineHeight: 14
}
}
},
itemStyle: {
color: "#fff",
borderColor: "rgb(230, 231, 232)",
borderWidth: 1,
shadowBlur: 8,
shadowColor: "rgba(0, 0, 0, 0.1)"
}
};
}),
links: baseLinks,
edgeSymbol: ["none", "arrow"],
edgeSymbolSize: [4, 6],
lineStyle: {
color: "rgba(174, 214, 255, 1)",
width: 2,
opacity: 1
},
emphasis: { focus: "adjacency" },
force: activeLayout.value === "force" ? { repulsion: 800, edgeLength: [80, 160] } : undefined
};
return {
tooltip: {},
series: [ringSeries]
};
};
onMounted(() => {
const el = document.querySelector(".echarts");
if (!el) return;
chart = echarts.init(el);
const option = makeOption(el);
chart.setOption(option);
resizeHandler = () => {
if (!chart) return;
chart.resize();
chart.setOption(makeOption(el));
};
window.addEventListener("resize", resizeHandler);
});
onBeforeUnmount(() => {
if (resizeHandler) window.removeEventListener("resize", resizeHandler);
if (chart) chart.dispose();
});
// 切换布局
const setLayout = type => {
activeLayout.value = type;
const el = document.querySelector(".echarts");
if (!el) return;
const opt = makeOption(el);
chart && chart.setOption(opt, true);
};
</script>
<style scoped lang="scss">
* {
padding: 0;
margin: 0;
}
.relevant-situation {
width: 1600px;
height: 848px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 1068px;
height: 848px;
margin-right: 12px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.search {
width: 312px;
position: absolute;
right: 83px;
top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.search-input {
width: 150px;
height: 24px;
color: rgb(95, 101, 108);
font-size: 12px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
}
.search-select {
width: 150px;
height: 24px;
}
}
}
.chart {
width: 1068px;
height: 739px;
padding: 14px 11px;
background-image: url("./assets/background.png");
background-size: cover;
.iconBox {
width: 96px;
height: 28px;
background-color: #fff;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
padding: 0px 7px 0px 14px;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 14px;
height: 14px;
cursor: pointer;
}
img:nth-child(2) {
width: 16px;
height: 16px;
}
}
.echarts {
width: 1046px;
height: 683px;
}
}
.bottom {
width: 1036px;
height: 40px;
margin: 0 auto;
background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
padding: 6px 12px;
display: flex;
align-items: center;
justify-content: space-between;
.img01 {
width: 19px;
height: 20px;
}
.text01 {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.img02 {
width: 24px;
height: 24px;
}
}
}
.right {
width: 520px;
height: 848px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 92px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
img:nth-child(2) {
margin-right: 4px;
}
}
}
.right-main {
width: 100%;
height: 732px;
padding: 15px 19px 0 17px;
.main-box {
width: 484px;
min-height: 190px;
border-radius: 4px;
border: 1px solid rgb(234, 236, 238);
margin-bottom: 16px;
.main-box-title {
width: 100%;
height: 48px;
background-color: rgb(247, 248, 249);
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.title-icon {
width: 23px;
height: 21px;
margin-left: 20px;
}
.title-bottom {
width: 12px;
height: 8px;
margin-right: 20px;
}
.title-text {
position: absolute;
top: 12px;
left: 58px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
}
.main-box-content {
width: 100%;
min-height: 142px;
padding: 12px 0;
.item {
width: 100%;
height: 53px;
padding: 0 18px 0 19px;
display: flex;
align-items: center;
margin-bottom: 12px;
position: relative;
.item-img {
width: 36px;
height: 48px;
margin-right: 10px;
}
.item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
}
.item-date {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
}
.item-type {
position: absolute;
top: 2px;
right: 18px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 1px 8px;
border-radius: 4px;
border: 1px solid;
}
.type-ai {
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
background-color: rgba(230, 255, 251, 1);
}
.type-energy {
color: rgba(245, 34, 45, 1);
border-color: rgba(255, 163, 158, 1);
background-color: rgba(255, 241, 240, 1);
}
.item-type-order {
position: absolute;
top: 1px;
right: 17.58px;
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
padding: 2px 18.21px;
border-radius: 4px;
border: 1px solid rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.item-type-img {
width: 16px;
height: 16px;
position: absolute;
top: 5px;
right: 14px;
}
}
.item:last-child {
margin-bottom: 0;
}
}
}
}
}
}
</style>
src/views/characterPage/components/thinkTankPerson/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="think-tank-person">
<!-- 智库研究人员人物基础 -->
<div class="header">
<div class="avatar">
<img :src="musk.avatar" alt="" />
</div>
<div class="info">
<!-- <div class="name"> -->
<p class="name-cn">{{ musk.nameCn }}</p>
<p class="name-en">{{ musk.nameEn }}</p>
<!-- </div> -->
<div class="introduction">
<p>{{ musk.introduction }}</p>
</div>
<div class="domain">
<p
v-for="item in musk.domain"
:key="item"
:class="{
cl1: item === '跨党派鹰派',
cl2: item === '大国竞争',
cl3: item === 'AI/AGI地缘政治',
cl4: item === '综合威慑',
cl5: item === '战略预测'
}"
>
{{ item }}
</p>
</div>
</div>
</div>
<!-- 智库研究人员人物信息区分 -->
<div class="info-divide">
<div v-for="item in info" :key="item" :class="{ active: item === infoActive }" @click="infoActive = item">
{{ item }}
</div>
</div>
<!-- 人物详情 -->
<div class="info-content" v-if="infoActive === '人物详情'">
<div class="left">
<div class="left-top">
<div class="title">
<div class="box"></div>
<div class="text">核心观点</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="num-list">
<div v-for="item in num" :key="item" :class="{ active: item === numActive }" @click="numActive = item">
{{ item }}
</div>
</div>
<!-- echarts 图表 -->
<div class="echarts">
<div class="row" v-for="(row, index) in wordCloudData" :key="index">
<span
v-for="(item, idx) in row"
:key="idx"
:style="{
color: item.color,
fontSize: item.fontSize || '16px',
fontWeight: item.fontWeight || 'normal'
}"
>
{{ item.text }}
</span>
</div>
</div>
</div>
<div class="left-bottom">
<div class="title">
<div class="box"></div>
<div class="text">最新动态</div>
<div class="input"><input type="checkbox" checked />只看涉华动态</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<!-- 主要内容 -->
<div class="main">
<div v-for="item in newList" :key="item" class="main-item">
<div class="time">
<div class="year">{{ item.time.split("年")[0] }}</div>
<div class="date">{{ item.time.split("年")[1] }}</div>
</div>
<div class="image">
<img src="./assets/type1.png" alt="" v-if="item.type === 1" /><img
src="./assets/type2.png"
alt=""
v-else
/>
</div>
<div class="content">
<div :class="{ 'content-type1': item.type === 1, 'content-type2': item.type === 2 }">
<p :class="{ 'content-title1': item.type === 1, 'content-title2': item.type === 2 }">
{{ item.title }}
</p>
<p class="content-title-en">{{ item.titleEn }}</p>
</div>
<p class="content-contentcontent">{{ item.content }}</p>
<div class="content-tag">
<div>
<span
v-for="tag in item.pie"
:key="tag"
class="tag"
:class="{
dl1: tag === '人工智能',
dl2: tag === '量子科技',
dl3: tag === '新能源',
dl4: tag === '集成电路'
}"
@click="handleClickTag(tag)"
>{{ tag }}</span
>
</div>
<div class="origin">来源：{{ item.origin }}</div>
</div>
</div>
</div>
<div class="line-test"></div>
</div>
<div class="pagination">
<div class="total">共153项动态</div>
<el-pagination
background
layout="prev, pager, next"
:page-count="10"
:pager-count="5"
v-model:current-page="currentPage"
class="custom-pagination"
/>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<div class="title">
<div class="box"></div>
<div class="text">基本信息</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="main-content">
<div class="baseInfo">
<div class="baseInfo-item">
<div class="baseInfo-item-title">出生日期：</div>
<div class="baseInfo-item-content">未知</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">现任职位：</div>
<div class="baseInfo-item-content">兰德公司国家安全研究部副总裁兼主任</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">兼任职位：</div>
<div class="baseInfo-item-content">国家国防研究所（NDRI）主任</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">政策倾向：</div>
<div class="baseInfo-item-content">主流鹰派现实主义者</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">国籍：</div>
<div class="baseInfo-item-content">美国</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">教育背景：</div>
<div class="baseInfo-item-content long">
布朗大学--应用数学与经济学学士；<br>
普林斯顿大学--伍德罗·威尔逊公共与国际事务学院公共事务硕士；
</div>
</div>
<div class="baseInfo-item">
<div class="baseInfo-item-title">研究领域：</div>
<div class="baseInfo-item-content longlong">
<span class="span">地缘政治与大国战略竞争</span>
<span class="span">战略预测与情景规划</span>
<span class="span">印太地区与跨大西洋安全</span>
<span class="span">经济安全与技术-军事融合</span>
<span class="span">联盟现代化与国防态势调整</span>
</div>
</div>
</div>
<div class="company">
<div class="company-title">社交媒体</div>
<div class="company-content">
<div v-for="item in companyList" :key="item" class="company-item">
<div class="img">
<img :src="item.logo" alt="" />
</div>
<div>
<div class="company-cn">{{ item.cn }}</div>
<div class="company-name">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-bottom">
<div class="title">
<div class="box"></div>
<div class="text">政治履历</div>
<div class="btn">
<img src="./assets/下载按钮.png" alt="" />
<img src="./assets/收藏按钮.png" alt="" />
</div>
</div>
<div class="content-main">
<div v-for="item in resumeList" :key="item.id" class="content-item">
<img src="./assets/icon01.png" alt="" class="image01" />
<div class="content-item-time">{{ item.time }}</div>
<div class="content-item-title">{{ item.title }}</div>
<div class="content-item-content">{{ item.content }}</div>
<div class="content-item-door" v-if="item.door">
<img src="./assets/icon02.png" alt="" />
<span>{{ item.door }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 成果报告 -->
<HistoricalProposal v-if="infoActive === '成果报告'" />
<!-- 人物关系 -->
<CharacterRelationships v-if="infoActive === '人物关系'" />
<!-- 相关情况 -->
<RelevantSituation v-if="infoActive === '相关情况'" />
<!-- 弹框 -->
<el-dialog
v-model="dialogVisible"
width="761px"
class="viewpoint-dialog"
:modal="false"
:draggable="true"
:lock-scroll="false"
>
<template #header>
<div class="viewpoint-header">
<div class="viewpoint-title">领域观点</div>
</div>
</template>
<div class="viewpoint-body">
<div class="viewpoint-body-title">#人工智能</div>
<div v-for="item in dialogData" :key="item.id" class="viewpoint-item">
<img :src="item.img" alt="" />
<div class="viewpoint-item-content">
<div class="viewpoint-item-name">{{ item.name }}</div>
<div class="viewpoint-item-desc">{{ item.content }}</div>
<div class="viewpoint-item-job">{{ item.job }}</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref } from "vue";
import CharacterRelationships from "./components/characterRelationships/index.vue";
import RelevantSituation from "./components/relevantSituation/index.vue";
import HistoricalProposal from "./components/historicalProposal/index.vue";
import Musk from "./assets/Musk.png";
import cp1 from "./assets/cp1.png";
import cp2 from "./assets/cp2.png";
import img1 from "./assets/img1.png";
import img2 from "./assets/img2.png";
import img3 from "./assets/img3.png";
import img4 from "./assets/img4.png";
import img5 from "./assets/img5.png";
const wordCloudData = ref([
[
{ text: "AI安全与模型保护", color: "rgba(19, 168, 168, 1)" },
{ text: "地球化改造", color: "rgb(206, 79, 81)" },
{ text: "减少燃料对外依赖", color: "rgba(250, 173, 20, 1)" },
{ text: "外交政策立场", color: "rgba(250, 173, 20, 1)" },
{ text: "AI供应链监督", color: "rgba(22, 119, 255, 1)" },
{ text: "预算纪律", color: "rgba(19, 168, 168, 1)" }
],
[
{ text: "外交网络全球野心", color: "rgb(206, 79, 81)" },
{ text: "NATO扩张与乌克兰整合", color: "rgba(22, 119, 255, 1)" },
{ text: "技术扩散威胁", color: "rgba(250, 173, 20, 1)" },
{ text: "盟友安全保障", color: "rgb(206, 79, 81)" },
{ text: "波罗的海战略转变", color: "rgba(250, 173, 20, 1)" },
// { text: "教育政策", color: "rgba(19, 168, 168, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "减少政府支出", color: "rgba(255, 122, 69, 1)" },
{ text: "可持续能源", color: "rgba(255, 122, 69, 1)" },
{ text: "第一性原理", color: "rgba(250, 173, 20, 1)" },
{ text: "AI治理与国际监督", color: "rgba(255, 122, 69, 1)" },
{ text: "经济安全优先", color: "rgb(206, 79, 81)" },
{ text: "有限政府", color: "rgba(255, 122, 69, 1)" }
],
[
{ text: "综合威胁架构", color: "rgba(22, 119, 255, 1)" },
{ text: "AGI重塑全球权力动态", color: "rgb(206, 79, 81)", fontSize: "26px", fontWeight: "700" },
{ text: "不确定性即弱点", color: "rgba(255, 122, 69, 1)" },
// { text: "战后重建需安全基础", color: "rgba(22, 119, 255, 1)" },
{ text: "战后重建需安全基础", color: "rgba(250, 173, 20, 1)" },
{ text: "受控竞争通道", color: "rgba(250, 173, 20, 1)" }
],
[
{ text: "经济-技术激烈竞争", color: "rgba(19, 168, 168, 1)" },
{ text: "印太-跨大西洋双线", color: "rgba(250, 173, 20, 1)" },
{ text: "超音速海啸", color: "rgba(250, 173, 20, 1)" },
{ text: "乌克兰胜利保障", color: "rgba(19, 168, 168, 1)" },
{ text: "平民“联合参谋部”", color: "rgb(206, 79, 81)" },
{ text: "多智能体协作", color: "rgba(19, 168, 168, 1)" }
]
]);
const musk = ref({
nameCn: "巴里·帕维尔",
nameEn: "Barry Pavel",
introduction:
"美国兰德公司国家安全研究部副总裁兼主任，曾任白宫国家安全委员会国防政策高级主任，30余年深耕大国战略竞争与AI地缘政治风险。",
domain: ["跨党派鹰派", "大国竞争", "AI/AGI地缘政治", "综合威慑", "战略预测"],
avatar: Musk
});
const info = ref(["人物详情", "成果报告", "人物关系", "相关情况"]);
const infoActive = ref("人物详情");
const num = ref(["2025", "2024", "2023", "2022", "2021", "2020"]);
const numActive = ref("2025");
const currentPage = ref(5);
const dialogVisible = ref(false);
const handleClickTag = tag => {
dialogVisible.value = true;
};
const newList = ref([
{
id: 1,
title: "如果普京拿下整个乌克兰，并在7个NATO成员国边境部署包括核武的部队，美国和欧洲的风险将巨大且持续。这是我们自私的国家利益，防止普京获胜。",
titleEn:
"If Putin takes all of Ukraine, and deploys forces including nuclear wpns on the borders of 7 NATO members, the risks to US and Europe will be enormous and sustained. It’s in our selfish national interests to prevent a Putin win.",
pie: ["人工智能"],
origin: "Linkedln",
time: "2025年10月10日",
type: 1
},
{
id: 2,
title: "欧洲长期战争：2024年及以后美国、波兰及盟友选项",
content:
"兰德国家安全研究部与波兰国际事务研究所于2024年4月25日举办公开活动，讨论为什么2024年是确保乌克兰胜利和遏制俄罗斯的关键转折年。通过长期战略分析和可操作政策建议，美国、波兰及盟友专家概述了如何在乌克兰、欧洲及其他地区有效捍卫基于规则的国际秩序。Barry Pavel作为主讲人之一，强调联盟合作的重要性。",
pie: ["量子科技"],
origin: "兰德公司",
time: "2025年10月10日",
type: 2
},
{
id: 3,
title: "女性视角如何塑造国家安全",
content:
"兰德公司妇女、和平与安全倡议于2024年5月举办活动，探讨性别视角在帮助美国及盟国政府决策者应对最紧迫国家安全挑战中的关键作用。Barry Pavel与Carol M. Pottenger、Deborah Avant等专家共同参与，强调多样化视角在政策制定中的价值。",
pie: ["新能源"],
origin: "兰德公司",
time: "2025年10月09日",
type: 2
},
{
id: 4,
title: "AI安全：保护大型语言模型及其对地缘政治未来的影响",
content:
"兰德公司召集AI和全球安全专家进行专题讨论，聚焦AI安全的日益重要性及其对国家和本土安全的含义。Barry Pavel与Richard Danzig、Jim Mitre等参与，分析保护大型语言模型以应对地缘政治风险的必要性，并探讨其对全球安全的战略影响。",
pie: ["量子科技"],
origin: "兰德公司",
time: "2025年10月09日",
type: 2
},
{
id: 5,
title: "虽然乌克兰短期内不太可能将俄罗斯赶回边境，但战争在未来几个月可能有利于乌克兰。但前提是西方不要先眨眼。",
titleEn:
"Good timely @RANDCorporation analysis on war trajectories. 'Although Ukraine is unlikely to throw Russia back to its borders any time soon, the war will likely trend in Ukraine's favor in the coming months. But only if the West does not blink first.",
pie: ["人工智能"],
origin: "X",
time: "2025年10月08日",
type: 1
},
{
id: 6,
title: "平衡和避免公然挑衅是合理的原则。但系统性地决定“做x”是否会在普京脑海中太挑衅的政策，会让他牢牢掌控局面直到获胜。他可以挑选美国/NATO能做什么。",
titleEn:
"Balance and avoiding blatant provocation are sound principles. But a systematic policy of deciding whether “doing x” might be too provocative in Putin’s mind keeps him firmly in the driver’s seat until he wins. He gets to pick and choose what the US/NATO can do.",
pie: ["集成电路"],
origin: "X",
time: "2025年10月08日",
type: 1
},
{
id: 7,
title: "兰德专家预览2024年北约峰会",
content:
"兰德公司于2024年6月26日举办媒体电话会议，预览即将于7月9-11日举行的华盛顿北约峰会。Barry Pavel作为国家安全研究部副总裁，分享美国国防战略、能力及联盟专长，讨论对乌克兰的支持、联盟防御强化、东部侧翼加固、新成员芬兰和瑞典的整合，以及应对中国挑战和新兴技术等问题。",
pie: ["量子科技"],
origin: "兰德公司",
time: "2025年10月09日",
type: 2
}
]);
const companyList = ref([
{
id: 1,
cn: "LinkedIn",
name: "@BarryPavel",
logo: cp1
},
{
id: 2,
cn: "Twitter/X",
name: "@BarryPavel",
logo: cp2
}
]);
// 政治履历
const resumeList = ref([
{
id: 1,
time: "2022年 – 至今",
title: "兰德公司 | 国家安全研究部副总裁兼主任",
content:
"基于华盛顿办公室，监督国防政策、AI安全与地缘政治研究；于2022年8月8日正式加入。",
door: ""
},
{
id: 2,
time: "2011年 – 2022年",
title: "大西洋理事会 | Scowcroft战略与安全中心创始主任兼高级副总裁",
content: "专注地缘政治、新兴安全挑战、美国联盟适应与国防战略调整；服务11年。2022年后转为杰出研究员。",
door: ""
},
{
id: 3,
time: "2008年 – 2010年",
title: "白宫国家安全委员会 | 总统特别助理兼国防政策与战略高级主任",
content:
"服务乔治·W·布什与巴拉克·奥巴马两届政府，作为职业公务员；领导首份国家安全优先审查，并贡献2010年国家安全战略。",
door: ""
},
{
id: 4,
time: "2004年 – 2006年",
title: "美国国防部 | 代理国防部副助理部长",
content:
"负责战略与政策规划，为总统的政策制定提供理论支撑与咨询。",
door: ""
},
{
id: 5,
time: "1999年 – 2001年",
title: "外交关系委员会 | 任期成员咨询委员会联合主席",
content: "参与外交政策咨询与网络构建。",
door: ""
},
{
id: 6,
time: "1991年 – 2004年",
title: "美国国防部 | 国防部政策副部长办公室成员",
content: "角色包括战略规划与政策支持。",
door: ""
}
]);
// 弹框数据
const dialogData = ref([
{
id: 1,
name: "山姆・奥特曼",
content: "主张分级监管，反对 “一刀切” 审批；警告美国领先优势有限，电力与基建是关键瓶颈。",
img: img1,
job: "OpenAI CEO"
},
{
id: 2,
name: "布拉德・史密斯",
content: "主张全技术栈监管与基础建设投入，强调美国需在芯片、算法、数据各层保持领先。",
img: img2,
job: "微软副董事长"
},
{
id: 3,
name: "黄仁勋",
content: "认为 AI 处于 “智能基建起步期”，大模型为基础，代理式 AI 为下一阶段；否定 AI 泡沫，强调与实体经济融合。",
img: img3,
job: "NVIDIA CEO"
},
{
id: 4,
name: "杰弗里・辛顿",
content: "担忧 AI 发展过快，警告 “涌现能力” 超预期，可能导致存在性风险；呼吁放缓研发、加强安全。",
img: img4,
job: "图灵奖得主、深度学习先驱"
},
{
id: 5,
name: "李飞飞",
content: "关注 AI 伦理与公平性，强调安全与普惠并重，对 AGI 时间表持谨慎态度。",
img: img5,
job: "斯坦福大学教授"
}
]);
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.think-tank-person {
width: 1600px;
margin: 0 auto;
padding-bottom: 50px;
.header {
width: 1600px;
height: 200px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 20px;
display: flex;
align-items: center;
.avatar {
width: 160px;
height: 160px;
margin-right: 24px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
flex: 1;
.name-cn {
font-size: 32px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 42px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.name-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.introduction {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 6px;
}
.domain {
font-size: 14px;
p {
display: inline-block;
padding: 1px 8px;
border-radius: 4px;
margin-right: 8px;
border: 1px solid;
}
.cl1 {
border-color: rgba(186, 224, 255, 1);
background-color: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.cl2 {
border-color: rgba(217, 247, 190, 1);
background-color: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.cl3 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl4 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.cl5 {
border-color: rgba(255, 241, 184, 1);
background-color: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.cl6 {
border-color: rgba(255, 204, 199, 1);
background-color: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
}
}
}
.info-divide {
width: 1600px;
height: 64px;
margin: 16px auto;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 530px;
height: 54px;
text-align: center;
font-size: 20px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(59, 65, 75);
border-radius: 10px;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
}
.active {
font-size: 24px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 54px;
color: rgb(5, 95, 194);
background-color: rgba(231, 243, 255, 1);
border: 2px solid rgba(174, 214, 255, 1);
}
}
.info-content {
width: 1600px;
height: 1933px;
margin-bottom: 50px;
margin: 16px auto;
display: flex;
.left {
width: 1064px;
height: 100%;
margin-right: 16px;
.left-top {
width: 100%;
height: 300px;
margin-bottom: 16px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 56px;
display: flex;
align-items: center;
padding: 14px 12px 16px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.num-list {
display: flex;
align-items: center;
padding-left: 24px;
margin-bottom: 16px;
div {
padding: 1px 8px;
line-height: 30px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
cursor: pointer;
border: 1px solid rgb(230, 231, 232);
border-radius: 4px;
margin-right: 8px;
}
.active {
background-color: rgba(231, 243, 255, 1);
color: rgb(5, 95, 194);
border-color: rgb(5, 95, 194);
}
}
.echarts {
width: 1009px;
height: 170px;
margin-left: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 0;
.row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
span {
font-family: "Microsoft YaHei";
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: scale(1.1);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
}
}
}
}
.left-bottom {
width: 100%;
height: 1617px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 85px;
display: flex;
align-items: center;
padding: 14px 12px 45px 0;
position: relative;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
.input {
position: absolute;
top: 15px;
right: 114px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(132, 136, 142);
input {
margin-right: 8px;
}
}
}
.main {
width: 1064px;
height: 1435px;
box-sizing: border-box;
padding-right: 50px;
position: relative;
z-index: 110;
.main-item {
width: 1014px;
margin-bottom: 40px;
display: flex;
.time {
width: 77px;
box-sizing: border-box;
margin-right: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
.year {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
.date {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(5, 95, 194);
line-height: 24px;
}
}
.image {
margin-right: 20px;
img {
width: 24px;
height: 24px;
}
}
.content {
width: 873px;
.content-type1 {
background-color: rgba(246, 250, 255, 1);
border-radius: 10px;
border: 1px solid rgb(234, 236, 238);
padding: 12px 14px 12px 15px;
.content-title1 {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-bottom: 12px;
border-bottom: 1px solid rgb(234, 236, 238);
cursor: pointer;
}
.content-title-en {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 24px;
padding-top: 12px;
cursor: pointer;
}
}
.content-type2 {
.content-title2 {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
line-height: 26px;
padding-bottom: 8px;
cursor: pointer;
}
}
.content-contentcontent {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(95, 101, 108);
line-height: 24px;
margin-bottom: 8px;
cursor: pointer;
}
.content-tag {
width: 873px;
display: flex;
justify-content: space-between;
.tag {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
margin-right: 8px;
padding: 1px 10px;
border-radius: 4px;
border: 1px solid;
cursor: pointer;
}
.dl1 {
background-color: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
border-color: rgba(135, 232, 222, 1);
}
.dl2 {
background-color: rgba(255, 241, 240, 1);
color: rgb(206, 79, 81);
border-color: rgba(255, 163, 158, 1);
}
.dl3 {
background-color: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
border-color: rgba(255, 213, 145, 1);
}
.dl4 {
background-color: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
border-color: rgba(211, 173, 247, 1);
}
.origin {
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 22px;
color: rgb(132, 136, 142);
cursor: pointer;
}
}
}
}
.line-test {
position: absolute;
top: 10px;
left: 109px;
height: 1300px;
border: 1px solid rgb(230, 231, 232);
z-index: -1;
}
}
.line {
width: 100%;
height: 1px;
background-color: rgb(234, 236, 238);
margin-top: 30px;
border: none;
}
.pagination {
width: 100%;
height: 76px;
margin: 20px auto;
display: flex;
padding: 0 31px 0 36px;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgb(234, 236, 238);
.total {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
color: rgb(59, 65, 75);
}
:deep(.custom-pagination) {
display: flex;
align-items: center;
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.custom-pagination.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev),
:deep(.custom-pagination.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.custom-pagination.el-pagination.is-background .btn-prev.is-disabled),
:deep(.custom-pagination.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
}
}
}
.right {
width: 520px;
height: 100%;
.right-top {
width: 520px;
height: 625px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
margin-bottom: 16px;
.title {
width: 100%;
height: 60px;
display: flex;
align-items: center;
padding: 14px 12px 20px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.main-content {
width: 520px;
height: 565px;
padding: 0 48px 50px 34px;
.baseInfo {
width: 438px;
height: 402px;
padding-bottom: 50px;
border-bottom: 1px solid rgb(234, 236, 238);
.baseInfo-item {
display: flex;
margin-bottom: 12px;
.baseInfo-item-title {
width: 88px;
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.address {
width: 110px;
}
.baseInfo-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.long {
width: 349px;
}
.longlong {
width: 358px;
height: 88px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.span {
padding: 2px 8px;
border-radius: 4px;
background-color: rgba(230, 244, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
color: rgba(22, 119, 255, 1);
font-size: 14px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 20px;
}
.span:nth-child(2n-1) {
margin-right: 2px;
}
}
}
}
.company {
width: 438px;
height: 176px;
padding-top: 19px;
.company-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 19px;
}
.company-content {
width: 409px;
// height: 114px;
display: flex;
flex-wrap: wrap;
.company-item {
width: 185px;
height: 49px;
margin-bottom: 16px;
display: flex;
align-items: center;
cursor: pointer;
.img {
width: 48px;
height: 48px;
margin-right: 8px;
padding: 12px;
background-color: rgb(230, 231, 232);
border-radius: 75px;
img {
width: 24px;
height: 24px;
}
}
.company-cn {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.company-name {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
}
}
.company-item:nth-child(2n-1) {
margin-right: 39px;
}
.company-item:last-child {
.company-name {
width: 150px;
}
}
}
}
}
}
.right-bottom {
width: 520px;
height: 1292px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(25, 69, 130, 0.1);
.title {
width: 100%;
height: 80px;
display: flex;
align-items: center;
padding: 14px 12px 40px 0;
.box {
width: 8px;
height: 20px;
background-color: rgb(5, 95, 194);
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
margin-right: 14px;
}
.text {
font-size: 20px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 26px;
color: rgb(5, 95, 194);
}
.btn {
width: 60px;
height: 28px;
margin-left: auto;
img {
width: 28px;
height: 28px;
cursor: pointer;
}
img:first-child {
margin-right: 4px;
}
}
}
.content-main {
width: 480px;
height: 1020px;
margin-left: 16px;
.content-item {
width: 454px;
margin-bottom: 60px;
margin-left: 26px;
position: relative;
.image01 {
width: 14px;
height: 12.13px;
position: absolute;
top: 8px;
left: -26px;
}
.content-item-time {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(5, 95, 194);
margin-bottom: 8px;
}
.content-item-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(59, 65, 75);
margin-bottom: 8px;
}
.content-item-content {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(95, 101, 108);
margin-bottom: 8px;
}
.content-item-door {
width: 300px;
height: 32px;
display: flex;
align-items: center;
padding: 4px 0 4px 11px;
border-radius: 4px;
background-color: rgba(255, 246, 240, 1);
border: 1px solid rgba(250, 140, 22, 0.4);
img {
width: 20px;
height: 24px;
margin-right: 10px;
}
span {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgba(255, 149, 77, 1);
}
}
}
}
}
}
}
}
:deep(.el-table .highlight-row) {
background: rgba(248, 249, 250, 1);
}
:deep(.viewpoint-dialog) {
width: 761px !important;
height: 669px;
padding: 0;
border-radius: 4px;
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
padding: 0;
margin: 0;
position: relative;
height: 48px;
}
.el-dialog__headerbtn {
top: 50%;
transform: translateY(-50%);
right: 12px;
}
.viewpoint-header {
width: 761px;
height: 48px;
background: linear-gradient(180deg, rgba(31, 140, 252, 0.2) 0%, rgba(36, 144, 255, 0) 100%);
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.viewpoint-title {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(5, 95, 194);
}
.viewpoint-body {
padding: 24px 24px 35px 24px;
height: calc(669px - 48px);
box-sizing: border-box;
overflow: hidden;
.viewpoint-body-title {
font-size: 28px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 37px;
color: rgb(59, 65, 75);
margin-bottom: 32px;
}
.viewpoint-item {
width: 713px;
min-height: 81px;
display: block;
margin-bottom: 12px;
position: relative;
padding-left: 48px;
img {
position: absolute;
top: -20px;
left: -20px;
}
.viewpoint-item-content {
width: 665px;
min-height: 81px;
background-image: url("./assets/bg01.png");
background-size: 100% 100%;
position: relative;
top: 0;
left: 0;
padding-left: 23px;
padding-top: 12px;
padding-bottom: 13px;
box-sizing: border-box;
.viewpoint-item-name {
font-size: 16px;
font-weight: 700;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
margin-bottom: 5px;
}
.viewpoint-item-desc {
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 24px;
color: rgb(59, 65, 75);
}
.viewpoint-item-job {
position: absolute;
top: 8px;
right: 22px;
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
line-height: 30px;
color: rgb(132, 136, 142);
}
}
}
}
}
</style>
src/views/characterPage/index.vue 0 → 100644
浏览文件 @ d3de03db
<template>
<div class="character-page">
<img src="./assets/images/background.png" alt="" class="bg" />
<!-- 主要内容 -->
<div class="main">
<!-- 科技领袖 -->
<tech-leader v-if="type == 1" />
<!-- 国会议员 -->
<member-of-congress v-if="type == 2" />
<!-- 智库研究人员 -->
<think-tank-person v-if="type == 3" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import TechLeader from './components/techLeader/index.vue';
import MemberOfCongress from './components/memberOfCongress/index.vue';
import ThinkTankPerson from './components/thinkTankPerson/index.vue';
// 获取路由参数，1为科技领袖，2为国会议员，3为智库研究人员
const route = useRoute();
const type = ref(route.query.type || 1);
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
.character-page {
width: 100%;
height: 100%;
position: relative;
z-index: 100;
overflow: auto;
.bg {
width: 100%;
height: 459px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
}
.main {
width: 100%;
height: 100%;
position: relative;
z-index: 100;
}
}
</style>
src/views/coopRestriction/components/resLib/index.vue
浏览文件 @ d3de03db
......@@ -86,7 +86,7 @@ import fda from "./assets/FDA.png";
const router = useRouter();
const handleClick = item => {
router.push({
path: "/coopRestriction/detail",
path: "/cooperationRestrictions/detail",
query: {
id: item.id
}
......
src/views/ruleRestriction/components/resLib/index.vue
浏览文件 @ d3de03db
......@@ -155,7 +155,7 @@ import flag09 from "./assets/flag09.png"
const router = useRouter();
const handleClick = item => {
router.push({
path: "/ruleRestriction/detail",
path: "/ruleRestrictions/detail",
query: {
id: item.id
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论