Skip to content

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

update

上级 a2418c4e
隐藏空白字符变更
内嵌 并排
正在显示 包含 939 行增加 和 947 行删除
src/views/bill/background/index.vue
浏览文件 @ bfb03421
<template>
<div class="background-wrap">
<div class="background-wrap-left">
<div class="background-wrap-left-box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">立法背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1"
>涉华背景</el-button
>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2"
>全部背景</el-button
>
<el-button type="info" plain v-else>全部背景</el-button>
</div>
</div>
<div class="background-wrap">
<div class="background-wrap-left">
<div class="background-wrap-left-box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">立法背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
<el-button type="info" plain v-else>全部背景</el-button>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -27,45 +23,37 @@
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-center">
<div
class="box1-main-item"
v-for="(item, index) in backgroundList"
:key="item.id"
>
<div class="id">{{ (currentPage - 1) * 10 + index + 1 }}</div>
<div class="title">{{ item.backgroundTitle }}</div>
<div class="share">
<img src="./assets/icons/open.png" alt="打开" />
</div>
</div>
</div>
<div class="box1-main-footer">
<div class="info">
{{
`共有${total}条${
box1BtnActive === 1 ? "涉华" : "全部"
}背景`
}}
</div>
<div class="page-box">
<el-pagination
background
layout="prev, pager, next"
:total="total"
v-model:current-page="currentPage"
@current-change="handleGetBillBackground"
/>
</div>
</div>
</div>
</div>
<div class="background-wrap-left-box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
</div>
<div class="box1-main">
<div class="box1-main-center">
<div class="box1-main-item" v-for="(item, index) in backgroundList" :key="item.id">
<div class="id">{{ (currentPage - 1) * 10 + index + 1 }}</div>
<div class="title">{{ item.backgroundTitle }}</div>
<div class="share">
<img src="./assets/icons/open.png" alt="打开" />
</div>
</div>
</div>
<div class="box1-main-footer">
<div class="info">
{{ `共有${total}条${box1BtnActive === 1 ? "涉华" : "全部"}背景` }}
</div>
<div class="page-box">
<el-pagination
background
layout="prev, pager, next"
:total="total"
v-model:current-page="currentPage"
@current-change="handleGetBillBackground"
/>
</div>
</div>
</div>
</div>
<div class="background-wrap-left-box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
......@@ -74,125 +62,103 @@
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div
class="box2-main-item"
v-for="(item, index) in eventList"
:key="index"
>
<div class="left">
<img :src="item.imageUrl || defaultNew" @error="e => e.target.src = defaultNew" alt="" />
</div>
<div class="center">
<div class="title">{{ item.sjbt }}</div>
<div class="content">{{ item.sjnr }}</div>
</div>
<div class="right">{{ item.sjsj }}</div>
</div>
</div>
<div class="box2-footer">
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in eventList" :key="index">
<div class="left">
<img :src="item.imageUrl || defaultNew" @error="e => (e.target.src = defaultNew)" alt="" />
</div>
<div class="center">
<div class="title">{{ item.sjbt }}</div>
<div class="content">{{ item.sjnr }}</div>
</div>
<div class="right">{{ item.sjsj }}</div>
</div>
</div>
<!-- <div class="box2-footer">
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
</div>
<div class="background-wrap-right">
<div class="box-header">
<div class="header-left"></div>
<div class="title">议员相关性分析</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox2Btn(1)">
<el-button type="primary" plain v-if="box2BtnActive === 1"
>赞成议员</el-button
>
<el-button type="info" plain v-else>赞成议员</el-button>
</div>
<div class="btn" @click="handleClickBox2Btn(2)">
<el-button type="primary" plain v-if="box2BtnActive === 2"
>反对议员</el-button
>
<el-button type="info" plain v-else>反对议员</el-button>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div> -->
</div>
</div>
<div class="background-wrap-right">
<div class="box-header">
<div class="header-left"></div>
<div class="title">议员相关性分析</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox2Btn(1)">
<el-button type="primary" plain v-if="box2BtnActive === 1">赞成议员</el-button>
<el-button type="info" plain v-else>赞成议员</el-button>
</div>
<div class="btn" @click="handleClickBox2Btn(2)">
<el-button type="primary" plain v-if="box2BtnActive === 2">反对议员</el-button>
<el-button type="info" plain v-else>反对议员</el-button>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
</div>
<div class="background-wrap-right-main">
<div class="right-box1">
<!-- <div class="right-box1-header">
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="background-wrap-right-main">
<div class="right-box1">
<!-- <div class="right-box1-header">
<div class="icon">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="title">提出议员相关性分析</div>
</div> -->
<div class="right-box1-main">
<div class="right-box1-main-top">
<el-icon style="margin-top: 20px" size="20" color="#5f656c"
><CaretLeft
/></el-icon>
<div
class="user-box"
v-for="(item, index) in personList"
:key="index"
>
<div class="img-box">
<img :src="item.image" alt="" />
<div class="icon1">
<img :src="item.icon" alt="" />
</div>
<div class="icon2">
<img :src="item.icon1" alt="" />
</div>
</div>
<div class="name">{{ item.name }}</div>
</div>
<el-icon style="margin-top: 20px" size="20" color="#5f656c"
><CaretRight
/></el-icon>
</div>
<div class="right-box1-main-bottom">
<WordCloudMap :data="wordCloudData" shape="circle" />
</div>
</div>
</div>
<div class="right-box2">
<div class="right-box2-header">
<div class="title">
<span class="title-active">"传统能源"</span>涉及议员动态 >
</div>
</div>
<div class="right-box2-center">
<div
class="user-box"
v-for="(item, index) in aboutUserList"
:key="index"
>
<div class="user-left">
<img :src="item.img" alt="" />
</div>
<div class="user-right">
<div class="name">{{ item.name }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
<div class="right-box2-footer">
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-box1-main">
<div class="right-box1-main-top">
<el-icon style="margin-top: 20px" size="20" color="#5f656c"><CaretLeft /></el-icon>
<div class="user-box" v-for="(item, index) in personList" :key="index">
<div class="img-box">
<img :src="item.image" alt="" />
<div class="icon1">
<img :src="item.icon" alt="" />
</div>
<div class="icon2">
<img :src="item.icon1" alt="" />
</div>
</div>
<div class="name">{{ item.name }}</div>
</div>
<el-icon style="margin-top: 20px" size="20" color="#5f656c"><CaretRight /></el-icon>
</div>
<div class="right-box1-main-bottom">
<WordCloudMap :data="wordCloudData" shape="circle" />
</div>
</div>
</div>
<div class="right-box2">
<div class="right-box2-header">
<div class="title"><span class="title-active">"传统能源"</span>涉及议员动态 ></div>
</div>
<div class="right-box2-center">
<div class="user-box" v-for="(item, index) in aboutUserList" :key="index">
<div class="user-left">
<img :src="item.img" alt="" />
</div>
<div class="user-right">
<div class="name">{{ item.name }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
<!-- <div class="right-box2-footer">
<div class="btn-more">
<img src="../assets/images/btn-more.png" alt="" />
</div>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script setup>
......@@ -211,812 +177,806 @@ import user5 from "./assets/images/user5.png";
import userIcon from "./assets/icons/user-icon.png";
import userIcon1 from "./assets/icons/user-icon1.png";
import userIcon2 from "./assets/icons/user-icon2.png";
import defaultNew from "../assets/images/default-icon-news.png"
import defaultNew from "../assets/images/default-icon-news.png";
import {
getBillBackground,
getBillEvent,
getBillPersonAnalyze,
getBillInfoEvent
} from "@/api/bill";
import { getBillBackground, getBillEvent, getBillPersonAnalyze, getBillInfoEvent } from "@/api/bill";
const box1BtnActive = ref(1);
const currentPage = ref(1);
const total = ref(0);
const handleClickBox1Btn = (index) => {
box1BtnActive.value = index;
currentPage.value = 1;
handleGetBillBackground();
const handleClickBox1Btn = index => {
box1BtnActive.value = index;
currentPage.value = 1;
handleGetBillBackground();
};
const box2BtnActive = ref(1);
const handleClickBox2Btn = (index) => {
box2BtnActive.value = index;
if (index === 1) {
handleGetBillPersonAnalyze(false);
} else {
handleGetBillPersonAnalyze(true);
}
const handleClickBox2Btn = index => {
box2BtnActive.value = index;
if (index === 1) {
handleGetBillPersonAnalyze(false);
} else {
handleGetBillPersonAnalyze(true);
}
};
const aboutUserList = ref([
{
img: user1,
name: "林赛·格雷厄姆",
content: "拟对购买俄罗斯石油、天然气等能源的国家征收高达500%的“二级关税”。",
},
{
img: user2,
name: "史蒂夫·戴恩斯",
content:
"提出了一项两党立法，旨在通过美国能源部（DOE）扩大美国在量子信息科学和研发（R&D）方面的投资能力。”。",
},
{
img: user3,
name: "乔·曼钦",
content:
"介绍了《2024能源许可改革法案》，目的是通过缩短联邦环境审查程序以及限定法院质询等来加快清洁能源、管道和输电项目的审批。”。",
},
{
img: user1,
name: "林赛·格雷厄姆",
content: "拟对购买俄罗斯石油、天然气等能源的国家征收高达500%的“二级关税”。"
},
{
img: user2,
name: "史蒂夫·戴恩斯",
content: "提出了一项两党立法，旨在通过美国能源部（DOE）扩大美国在量子信息科学和研发（R&D）方面的投资能力。”。"
},
{
img: user3,
name: "乔·曼钦",
content:
"介绍了《2024能源许可改革法案》，目的是通过缩短联邦环境审查程序以及限定法院质询等来加快清洁能源、管道和输电项目的审批。”。"
}
]);
const backgroundList = ref([
{
id: window.sessionStorage.getItem("billId"),
bjnr: "将中国跨境电商描述为“利用低价商品冲击美国市场、规避关税监管”",
},
{
id: 2,
bjnr: "指责“中美技术合作助长军民融合”",
},
{
id: 3,
bjnr: "强调“需防范中国通过第三国转运规避关税”",
},
{
id: 4,
bjnr: "将中资在美子公司定义为“潜在避税与资本转移工具”",
},
{
id: 5,
bjnr: "将中国列为“试图主导全球清洁能源供应链的竞争对手”",
},
{
id: 6,
bjnr: "声称“中国控股企业通过转移定价侵蚀美国税基”",
},
{
id: 7,
bjnr: "法案序言称“中国光伏、风电企业通过政府补贴倾销产品”",
},
{
id: 8,
bjnr: "辩称“中国主导全球减排议程损害美国利益”",
},
{
id: 9,
bjnr: "将中国定位为“通过强制技术转让获取先进制程的威胁”",
},
{
id: 10,
bjnr: "将中国与伊朗、朝鲜并列，强调“需遏制印太地区对手”",
},
{
id: window.sessionStorage.getItem("billId"),
bjnr: "将中国跨境电商描述为“利用低价商品冲击美国市场、规避关税监管”"
},
{
id: 2,
bjnr: "指责“中美技术合作助长军民融合”"
},
{
id: 3,
bjnr: "强调“需防范中国通过第三国转运规避关税”"
},
{
id: 4,
bjnr: "将中资在美子公司定义为“潜在避税与资本转移工具”"
},
{
id: 5,
bjnr: "将中国列为“试图主导全球清洁能源供应链的竞争对手”"
},
{
id: 6,
bjnr: "声称“中国控股企业通过转移定价侵蚀美国税基”"
},
{
id: 7,
bjnr: "法案序言称“中国光伏、风电企业通过政府补贴倾销产品”"
},
{
id: 8,
bjnr: "辩称“中国主导全球减排议程损害美国利益”"
},
{
id: 9,
bjnr: "将中国定位为“通过强制技术转让获取先进制程的威胁”"
},
{
id: 10,
bjnr: "将中国与伊朗、朝鲜并列，强调“需遏制印太地区对手”"
}
]);
const eventList = ref([
// {
// id: 1,
// image: event1,
// title: "2017年《减税与就业法案》的出台与立法博弈",
// content:
// "2017年，美国通过了一项自里根时代以来最为重大的税制改革——《减税与就业法案》（Tax Cuts and Jobs Act，简称TCJA）。该法案于当年...",
// date: "2017-08-30",
// },
// {
// id: 2,
// image: event2,
// title: "信用评级机构穆迪下调美国信用评级",
// content:
// "2025年5月16日，信用评级机构穆迪自2011年以来第三次下调美国主权信用评级，直接原因是对OBBBA加剧财政赤字的担忧。彼时法案尚未通...",
// date: "2025-05-16",
// },
// {
// id: 3,
// image: event3,
// title: "马斯克与特朗普决裂",
// content:
// "马斯克5月30日离任政府效率部负责人时与特朗普友好告别，但6月3日突然批评OBBBA“令人作呕”，指责其推高赤字、违背削减开支承诺。特...",
// date: "2025-05-26",
// },
// {
// id: 4,
// image: event4,
// title: "马斯克成立“美国党”​",
// content:
// "7月5日（法案签署次日），马斯克宣布成立新政党“美国党”，计划参与2026年中期选举，剑指支持法案的共和党议员。",
// date: "2025-07-01",
// },
// {
// id: 5,
// image: event5,
// title: "“90天关税暂缓期”即将到期",
// content:
// "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、日本等国担忧特朗普为弥补减税导致的财政收入缺口，将强征...",
// date: "2025-08-09",
// },
// {
// id: 1,
// image: event1,
// title: "2017年《减税与就业法案》的出台与立法博弈",
// content:
// "2017年，美国通过了一项自里根时代以来最为重大的税制改革——《减税与就业法案》（Tax Cuts and Jobs Act，简称TCJA）。该法案于当年...",
// date: "2017-08-30",
// },
// {
// id: 2,
// image: event2,
// title: "信用评级机构穆迪下调美国信用评级",
// content:
// "2025年5月16日，信用评级机构穆迪自2011年以来第三次下调美国主权信用评级，直接原因是对OBBBA加剧财政赤字的担忧。彼时法案尚未通...",
// date: "2025-05-16",
// },
// {
// id: 3,
// image: event3,
// title: "马斯克与特朗普决裂",
// content:
// "马斯克5月30日离任政府效率部负责人时与特朗普友好告别，但6月3日突然批评OBBBA“令人作呕”，指责其推高赤字、违背削减开支承诺。特...",
// date: "2025-05-26",
// },
// {
// id: 4,
// image: event4,
// title: "马斯克成立“美国党”​",
// content:
// "7月5日（法案签署次日），马斯克宣布成立新政党“美国党”，计划参与2026年中期选举，剑指支持法案的共和党议员。",
// date: "2025-07-01",
// },
// {
// id: 5,
// image: event5,
// title: "“90天关税暂缓期”即将到期",
// content:
// "法案通过恰逢美国对多国“90天关税暂缓期”即将到期（2025年7月9日）。欧盟、日本等国担忧特朗普为弥补减税导致的财政收入缺口，将强征...",
// date: "2025-08-09",
// },
]);
const personList = ref([
{
name: "乔迪·阿灵顿​",
image: user1,
icon: userIcon,
icon1: userIcon1,
},
{
name: "约翰·图恩",
image: user2,
icon: userIcon,
icon1: userIcon2,
},
{
name: "贾森·史密斯",
image: user3,
icon: userIcon,
icon1: userIcon1,
},
{
name: "拉塞尔·沃特",
image: user4,
icon: userIcon,
icon1: userIcon1,
},
{
name: "詹姆斯·布莱尔",
image: user5,
icon: userIcon,
icon1: userIcon1,
},
{
name: "乔迪·阿灵顿​",
image: user1,
icon: userIcon,
icon1: userIcon1
},
{
name: "约翰·图恩",
image: user2,
icon: userIcon,
icon1: userIcon2
},
{
name: "贾森·史密斯",
image: user3,
icon: userIcon,
icon1: userIcon1
},
{
name: "拉塞尔·沃特",
image: user4,
icon: userIcon,
icon1: userIcon1
},
{
name: "詹姆斯·布莱尔",
image: user5,
icon: userIcon,
icon1: userIcon1
}
]);
const progressList = ref([
{
tip: true,
date: "7月5日",
title:
"特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
degree: "特别重大风险",
rank: 4,
},
{
tip: true,
date: "7月4日",
title:
"众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
degree: "重大风险",
rank: 3,
},
{
tip: true,
date: "7月3日",
title:
"民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
degree: "较大风险",
rank: 2,
},
{
tip: true,
date: "7月2日",
title:
"众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
degree: "低风险",
rank: 1,
},
{
tip: false,
date: "7月1日",
title:
"参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
degree: "",
},
{
tip: true,
date: "7月5日",
title: "特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
degree: "特别重大风险",
rank: 4
},
{
tip: true,
date: "7月4日",
title: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
degree: "重大风险",
rank: 3
},
{
tip: true,
date: "7月3日",
title: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
degree: "较大风险",
rank: 2
},
{
tip: true,
date: "7月2日",
title: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
degree: "低风险",
rank: 1
},
{
tip: false,
date: "7月1日",
title: "参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
degree: ""
}
]);
const wordCloudData = [
{ name: "与马斯克公开冲突", value: 100 },
{ name: "传统能源", value: 5 },
{ name: "共和党财政鹰派", value: 77 },
{ name: "未实现赤字控制目标", value: 35 },
{ name: "得克萨斯州", value: 88 },
{ name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 },
{ name: "共和党", value: 34 },
{ name: "扩大军费", value: 16 },
{ name: "参议院多数党", value: 72 },
{ name: "地方利益捍卫者", value: 58 },
{ name: "众议院预算委员会", value: 24 },
{ name: "债务与赤字警告", value: 33 },
{ name: "抗议医疗补助条款", value: 47 },
{ name: "深红州", value: 32 },
{ name: "温和派选区", value: 62 },
{ name: "高压游说", value: 51 },
{ name: "与马斯克公开冲突", value: 100 },
{ name: "传统能源", value: 5 },
{ name: "共和党财政鹰派", value: 77 },
{ name: "未实现赤字控制目标", value: 35 },
{ name: "得克萨斯州", value: 88 },
{ name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 },
{ name: "共和党", value: 34 },
{ name: "扩大军费", value: 16 },
{ name: "参议院多数党", value: 72 },
{ name: "地方利益捍卫者", value: 58 },
{ name: "众议院预算委员会", value: 24 },
{ name: "债务与赤字警告", value: 33 },
{ name: "抗议医疗补助条款", value: 47 },
{ name: "深红州", value: 32 },
{ name: "温和派选区", value: 62 },
{ name: "高压游说", value: 51 }
];
// 获取立法背景内容
const handleGetBillBackground = async () => {
const cRelated = box1BtnActive.value === 1 ? 'Y' : 'N';
const params = {
cRelated: cRelated,
id: window.sessionStorage.getItem("billId"),
currentPage: currentPage.value - 1,
pageSize: 10,
};
try {
const res = await getBillBackground(params);
console.log("立法背景", res);
backgroundList.value = res.data.content;
total.value = res.data.totalElements; // 假设API返回totalElements
} catch (error) {}
const cRelated = box1BtnActive.value === 1 ? "Y" : "N";
const params = {
cRelated: cRelated,
id: window.sessionStorage.getItem("billId"),
currentPage: currentPage.value - 1,
pageSize: 10
};
try {
const res = await getBillBackground(params);
console.log("立法背景", res);
backgroundList.value = res.data.content;
total.value = res.data.totalElements; // 假设API返回totalElements
} catch (error) {}
};
// 获取相关事件
const handleGetRelatedEvent = async () => {
const params = {
id: window.sessionStorage.getItem("billId"),
};
try {
const res = await getBillInfoEvent(params);
console.log("相关事件", res);
eventList.value = res.data;
eventList.value.forEach((item, index) => {
if (index === 0) {
item.image = event1;
} else if (index === 1) {
item.image = event2;
} else if (index === 2) {
item.image = event3;
} else if (index === 3) {
item.image = event4;
} else {
item.image = event5;
}
});
} catch (error) {}
const params = {
id: window.sessionStorage.getItem("billId")
};
try {
const res = await getBillInfoEvent(params);
console.log("相关事件", res);
eventList.value = res.data;
eventList.value.forEach((item, index) => {
if (index === 0) {
item.image = event1;
} else if (index === 1) {
item.image = event2;
} else if (index === 2) {
item.image = event3;
} else if (index === 3) {
item.image = event4;
} else {
item.image = event5;
}
});
} catch (error) {}
};
// 议员相关性分析
const handleGetBillPersonAnalyze = async (isOppose) => {
const params = {
id: window.sessionStorage.getItem("billId"),
isOppose: isOppose,
};
try {
const res = await getBillPersonAnalyze(params);
console.log("议员相关性分析", res);
personList.value = res.data;
personList.value.forEach((item, index) => {
const imgList = [user1, user2, user3, user4, user5];
item.image = imgList[index % imgList.length];
item.icon = userIcon;
item.icon1 = userIcon1;
});
} catch (error) {}
const handleGetBillPersonAnalyze = async isOppose => {
const params = {
id: window.sessionStorage.getItem("billId"),
isOppose: isOppose
};
try {
const res = await getBillPersonAnalyze(params);
console.log("议员相关性分析", res);
personList.value = res.data;
personList.value.forEach((item, index) => {
const imgList = [user1, user2, user3, user4, user5];
item.image = imgList[index % imgList.length];
item.icon = userIcon;
item.icon1 = userIcon1;
});
} catch (error) {}
};
onMounted(() => {
handleGetBillBackground();
handleGetRelatedEvent();
// handleGetBillPersonAnalyze(false);
handleGetBillBackground();
handleGetRelatedEvent();
// handleGetBillPersonAnalyze(false);
});
</script>
<style lang="scss" scoped>
.background-wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 84px;
display: flex;
.btn {
margin-left: 8px;
}
}
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 84px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
display: flex;
justify-content: flex-end;
display: flex;
justify-content: flex-end;
gap: 4px;
.icon{
width: 28px;
height: 28px;
img{
width: 100%;
height: 100%;
}
}
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.background-wrap-left {
width: 1150px;
margin-top: 16px;
.background-wrap-left-box1 {
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box1-main {
.box1-main-center {
margin: 0 22px;
width: 1106px;
height: 280px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
.box1-main-item {
width: 544px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(243, 243, 244, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
margin-top: 8px;
.id {
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 241, 255);
color: var(--color-main-active);
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: 400;
margin: 12px 16px 12px 18px;
}
.title {
width: 440px;
height: 48px;
line-height: 48px;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
text-align: left;
overflow: hidden;
}
.share {
margin-left: 13px;
margin-top: 16px;
width: 16px;
height: 16px;
padding: 2px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-main-footer {
margin: 30px 22px 0 22px;
height: 22px;
display: flex;
justify-content: space-between;
.info {
height: 22px;
line-height: 22px;
color: rgb(132, 136, 142);
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: 400;
text-align: left;
}
}
}
}
.background-wrap-left-box2 {
margin-top: 15px;
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box2-main {
// margin-top: 9px;
width: 1110px;
margin-left: 23px;
height: 349px;
overflow-y: auto;
.box2-main-item {
width: 1103px;
height: 60px;
border-radius: 2px;
box-sizing: border-box;
padding: 6px 8px;
display: flex;
&:hover {
background: rgba(225, 225, 225, 0.3);
}
.left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 64px;
height: 48px;
}
}
.center {
margin-left: 14px;
width: 900px;
.title {
height: 22px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
margin-top: 2px;
height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right {
margin-left: 25px;
line-height: 60px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
}
.box2-footer {
margin-top: 7px;
display: flex;
justify-content: center;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.background-wrap-right {
margin-right: 18px;
margin-left: 16px;
margin-top: 16px;
width: 576px;
height: 845px;
background: #fff;
border-radius: 4px;
.background-wrap-right-main {
.right-box1 {
height: 365px;
.right-box1-header {
height: 22px;
margin-left: 22px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.right-box1-main {
width: 502px;
margin-top: 17px;
.right-box1-main-top {
margin-left: 16px;
width: 544px;
display: flex;
justify-content: space-between;
.user-box {
width: 100px;
height: 80px;
.img-box {
width: 48px;
height: 48px;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
}
.icon1 {
position: absolute;
left: 5px;
bottom: -8px;
width: 16px;
height: 16px;
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
.icon2 {
position: absolute;
right: 5px;
bottom: -8px;
width: 16px;
height: 16px;
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
}
.name {
margin-top: 10px;
height: 14px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: center;
}
}
}
.right-box1-main-bottom {
margin: 17px 16px 0 16px;
border-top: 1px solid rgba(243, 243, 244, 1);
border-bottom: 1px solid rgba(243, 243, 244, 1);
width: 544px;
height: 266px;
background: rgba(249, 250, 252, 1);
border-radius: 5px;
display: flex;
justify-content: space-between;
// .tag-box {
// flex: 1;
// .tag {
// height: 55px;
// line-height: 55px;
// color: rgba(95, 101, 108, 1);
// font-family: Microsoft YaHei;
// font-size: 14px;
// font-weight: 400;
// letter-spacing: 0px;
// text-align: center;
// }
// }
}
}
.right-box1-footer {
display: flex;
.left {
width: 70px;
height: 18px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 26px;
margin-top: 23px;
}
.right {
flex: 1;
display: flex;
margin-left: 10px;
margin-right: 20px;
margin-top: 20px;
justify-content: space-between;
.right-tag {
padding: 1px 8px 1px 8px;
// box-sizing: border-box;
border-radius: 4px;
text-align: center;
height: 20px;
line-height: 20px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
.tag1 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag2 {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag3 {
border: 1px solid rgba(255, 204, 199, 1);
background: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.tag4 {
border: 1px solid rgba(255, 241, 184, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
}
}
}
.right-box2 {
height: 423px;
.right-box2-header {
height: 22px;
margin-left: 22px;
padding-top: 10px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
.title-active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
}
.right-box2-center {
height: 345px;
overflow: hidden;
overflow-y: auto;
margin-top: 19px;
margin-left: 16px;
width: 544px;
.user-box {
width: 538px;
padding-bottom: 5px;
// height: 84px;
box-sizing: border-box;
border: 1px solid rgba(241, 243, 246, 1);
border-radius: 4px;
margin-bottom: 8px;
display: flex;
.user-left {
margin-left: 14px;
margin-top: 12px;
}
.user-right {
margin-left: 12px;
width: 459px;
.name {
margin-top: 6px;
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.content {
margin-top: 2px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
// .right-box2-footer {
// margin-top: 7px;
// display: flex;
// justify-content: center;
// .btn-more {
// width: 108px;
// height: 32px;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
// }
}
}
}
.background-wrap-left {
width: 1150px;
margin-top: 16px;
.background-wrap-left-box1 {
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box1-main {
.box1-main-center {
margin: 0 22px;
width: 1106px;
height: 280px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
.box1-main-item {
width: 544px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(243, 243, 244, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
margin-top: 8px;
.id {
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 241, 255);
color: var(--color-main-active);
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: 400;
margin: 12px 16px 12px 18px;
}
.title {
width: 440px;
height: 48px;
line-height: 48px;
color: rgb(59, 65, 75);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
text-align: left;
overflow: hidden;
}
.share {
margin-left: 13px;
margin-top: 16px;
width: 16px;
height: 16px;
padding: 2px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-main-footer {
margin: 30px 22px 0 22px;
height: 22px;
display: flex;
justify-content: space-between;
.info {
height: 22px;
line-height: 22px;
color: rgb(132, 136, 142);
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: 400;
text-align: left;
}
}
}
}
.background-wrap-left-box2 {
margin-top: 15px;
width: 1150px;
height: 415px;
background: #fff;
border-radius: 4px;
.box2-main {
margin-top: 9px;
margin-left: 23px;
height: 300px;
overflow: auto;
.box2-main-item {
width: 1103px;
height: 60px;
border-radius: 2px;
box-sizing: border-box;
padding: 6px 8px;
display: flex;
&:hover {
background: rgba(225, 225, 225, 0.3);
}
.left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 64px;
height: 48px;
}
}
.center {
margin-left: 14px;
width: 900px;
.title {
height: 22px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.content {
margin-top: 2px;
height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right {
margin-left: 25px;
line-height: 60px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: right;
}
}
}
.box2-footer {
margin-top: 7px;
display: flex;
justify-content: center;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.background-wrap-right {
margin-right: 18px;
margin-left: 16px;
margin-top: 16px;
width: 576px;
height: 845px;
background: #fff;
border-radius: 4px;
.background-wrap-right-main {
.right-box1 {
height: 365px;
.right-box1-header {
height: 22px;
margin-left: 22px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.right-box1-main {
width: 502px;
margin-top: 17px;
.right-box1-main-top {
margin-left: 16px;
width: 544px;
display: flex;
justify-content: space-between;
.user-box {
width: 100px;
height: 80px;
.img-box {
width: 48px;
height: 48px;
position: relative;
margin: 0 auto;
img {
width: 100%;
height: 100%;
}
.icon1 {
position: absolute;
left: 5px;
bottom: -8px;
width: 16px;
height: 16px;
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
.icon2 {
position: absolute;
right: 5px;
bottom: -8px;
width: 16px;
height: 16px;
border-radius: 10px;
padding: 2px;
background: rgba(255, 255, 255, 0.8);
img {
width: 100%;
height: 100%;
}
}
}
.name {
margin-top: 10px;
height: 14px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 14px;
letter-spacing: 0px;
text-align: center;
}
}
}
.right-box1-main-bottom {
margin: 17px 16px 0 16px;
border-top: 1px solid rgba(243, 243, 244, 1);
border-bottom: 1px solid rgba(243, 243, 244, 1);
width: 544px;
height: 266px;
background: rgba(249, 250, 252, 1);
border-radius: 5px;
display: flex;
justify-content: space-between;
// .tag-box {
// flex: 1;
// .tag {
// height: 55px;
// line-height: 55px;
// color: rgba(95, 101, 108, 1);
// font-family: Microsoft YaHei;
// font-size: 14px;
// font-weight: 400;
// letter-spacing: 0px;
// text-align: center;
// }
// }
}
}
.right-box1-footer {
display: flex;
.left {
width: 70px;
height: 18px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 26px;
margin-top: 23px;
}
.right {
flex: 1;
display: flex;
margin-left: 10px;
margin-right: 20px;
margin-top: 20px;
justify-content: space-between;
.right-tag {
padding: 1px 8px 1px 8px;
// box-sizing: border-box;
border-radius: 4px;
text-align: center;
height: 20px;
line-height: 20px;
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
.tag1 {
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag2 {
border: 1px solid rgba(217, 247, 190, 1);
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
}
.tag3 {
border: 1px solid rgba(255, 204, 199, 1);
background: rgba(255, 241, 240, 1);
color: rgba(255, 77, 79, 1);
}
.tag4 {
border: 1px solid rgba(255, 241, 184, 1);
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
}
}
}
.right-box2 {
height: 423px;
.right-box2-header {
height: 22px;
margin-left: 22px;
padding-top: 10px;
display: flex;
.icon {
margin: 1px 12px 3px 0;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 600;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
.title-active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
}
.right-box2-center {
height: 305px;
overflow: hidden;
margin-top: 19px;
margin-left: 16px;
width: 544px;
.user-box {
width: 538px;
padding-bottom: 5px;
// height: 84px;
box-sizing: border-box;
border: 1px solid rgba(241, 243, 246, 1);
border-radius: 4px;
margin-bottom: 8px;
display: flex;
.user-left {
margin-left: 14px;
margin-top: 12px;
}
.user-right {
margin-left: 12px;
width: 459px;
.name {
margin-top: 6px;
height: 24px;
line-height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.content {
margin-top: 2px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.right-box2-footer {
margin-top: 7px;
display: flex;
justify-content: center;
.btn-more {
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
:deep(.el-steps--simple) {
padding: 6px 10px;
padding: 6px 10px;
}
:deep(.el-timeline-item) {
padding-bottom: 5px !important;
padding-bottom: 5px !important;
}
:deep(.el-timeline-item__timestamp) {
color: rgba(95, 101, 108, 1) !important;
font-family: Microsoft YaHei !important;
font-size: 14px !important;
font-weight: 600 !important;
color: rgba(95, 101, 108, 1) !important;
font-family: Microsoft YaHei !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.timeline-content {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/deepdig/index.vue
浏览文件 @ bfb03421
......@@ -39,7 +39,11 @@
<div class="item-right-text">
{{ decreeInfo.totalTitle }}
</div>
<div class="item-right-icon" v-if="decreeInfo.totalTitle">
<div
class="item-right-icon"
v-if="decreeInfo.totalTitle"
@click="handleToDecreeDetail(decreeInfo)"
>
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
......@@ -72,12 +76,12 @@
<div class="title">{{ "政令主要内容" }}</div>
</div>
<div class="list-main">
<div class="list-item" v-for="(val, idx) in showList" :key="idx" @click="handleToDecreeDetail(val)">
<div class="list-item" v-for="(val, idx) in showList" :key="idx">
<div class="id">{{ idx + 1 }}</div>
<div class="title">{{ val.content }}</div>
<div class="open">
<!-- <div class="open">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div> -->
</div>
</div>
</div>
......@@ -178,6 +182,7 @@ const handleClickSider = async index => {
};
const decreeInfo = ref({
id: 0,
img: "",
totalTitle: "",
eTotalTitle: "",
......@@ -212,6 +217,7 @@ const handleGetRelateOrder = async () => {
title: item.name
};
});
decreeInfo.value.id = allData.value[0].id;
decreeInfo.value.img = allData.value[0].imageUrl;
decreeInfo.value.totalTitle = allData.value[0].name;
decreeInfo.value.eTotalTitle = allData.value[0].ename;
......@@ -235,6 +241,7 @@ const handleGetRelateOrder = async () => {
} else {
allData.value = [];
siderList.value = [];
decreeInfo.value.id = 0;
decreeInfo.value.img = "";
decreeInfo.value.totalTitle = "";
decreeInfo.value.eTotalTitle = "";
......@@ -245,6 +252,7 @@ const handleGetRelateOrder = async () => {
} catch (error) {
allData.value = [];
siderList.value = [];
decreeInfo.value.id = 0;
decreeInfo.value.img = "";
decreeInfo.value.totalTitle = "";
decreeInfo.value.eTotalTitle = "";
......@@ -254,15 +262,15 @@ const handleGetRelateOrder = async () => {
}
};
const handleToDecreeDetail = (item) => {
const route = router.resolve({
const handleToDecreeDetail = item => {
const route = router.resolve({
path: "/decreeLayout/overview/introduction",
query: {
id: item.id
}
});
window.open(route.href, "_blank");
}
};
onMounted(() => {
handleGetRelateOrder();
......@@ -323,7 +331,8 @@ onMounted(() => {
.box1 {
margin: 16px auto;
width: 1600px;
height: 898px;
max-height: 898px;
min-height: 788px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
......@@ -445,6 +454,7 @@ onMounted(() => {
margin-top: 7px;
width: 16px;
height: 16px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......@@ -482,7 +492,8 @@ onMounted(() => {
}
}
.list-main {
height: 540px;
min-height: 420px;
max-height: 540px;
overflow-x: hidden;
overflow-y: auto;
.list-item {
......@@ -494,7 +505,7 @@ onMounted(() => {
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
cursor: pointer;
&:hover{
&:hover {
background: var(--color-bg-hover);
}
.id {
......
src/views/decree/decreeLayout/index.vue
浏览文件 @ bfb03421
......@@ -6,7 +6,7 @@
<div class="layout-main-header-left-box">
<div class="left-box-top">
<div class="icon">
<img :src="summaryInfo.officialUrl" alt="" />
<img :src="summaryInfo.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-box1">{{ summaryInfo.name }}</div>
......@@ -249,7 +249,7 @@ onMounted(() => {
if (route.path === "/decreeLayout/overview/introduction" || route.path === "/decreeLayout/overview/background") {
activeTitle.value = "政令概况";
} else if (route.path === "/decreeLayout/deepDig") {
activeTitle.value = "政令概况";
activeTitle.value = "深度挖掘";
} else {
activeTitle.value = "影响分析";
}
......@@ -349,8 +349,10 @@ onMounted(() => {
height: 64px;
display: flex;
.icon {
width: 64px;
width: 122px;
height: 64px;
border-radius: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
......
src/views/decree/decreeLayout/influence/index.vue
浏览文件 @ bfb03421
......@@ -491,7 +491,6 @@ onMounted(() => {
}
}
.left {
margin-left: 160px;
margin-top: 16px;
.box1 {
width: 480px;
......
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ bfb03421
......@@ -132,7 +132,7 @@
</div>
</div>
<div class="box3-top">
<div class="box3-top-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopData)">
<div class="left">
<img :src="box3TopData.logo ? box3TopData.logo : DefaultIcon2" alt="" />
</div>
......@@ -190,9 +190,9 @@
</el-timeline-item>
</el-timeline>
</div>
<div class="box3-bottom-footer">
<!-- <div class="box3-bottom-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div> -->
</div>
</div>
</div>
......@@ -202,6 +202,7 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import box1Img from "./assets/images/box1-img.png";
import Box3Logo from "./assets/images/box3-img.png";
import { getDecreeBasicInfo, getDecreeMainContent, getDecreeOrganization } from "@/api/decree/introduction";
......@@ -294,6 +295,7 @@ const box3BtnActiveIndex = ref(0);
const handleClickBox3Btn = (btn, index) => {
box3ActiveBtn.value = btn;
box3BtnActiveIndex.value = index;
box3TopData.value.id = box3Data.value[index].id;
box3TopData.value.logo = box3Data.value[index].url;
box3TopData.value.name = box3Data.value[index].name;
box3TopData.value.eName = box3Data.value[index].ename;
......@@ -311,6 +313,7 @@ const handleClickBox3Btn = (btn, index) => {
const box3Data = ref([]);
const box3TopData = ref({
id: "",
logo: "",
name: "",
eName: "",
......@@ -319,6 +322,17 @@ const box3TopData = ref({
bz: ""
});
// 跳转行政机构主页
const handleToInstitution = item => {
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.id
}
});
window.open(curRoute.href, "_blank");
};
// 机构动态
const eventList = ref([
// {
......@@ -420,10 +434,10 @@ onMounted(() => {
.header-btn-box {
position: absolute;
z-index: 9999;
width: 320px;
width: 325px;
height: 64px;
top: 14px;
right: 84px;
right: 82px;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
......@@ -431,6 +445,7 @@ onMounted(() => {
white-space: nowrap;
overflow:hidden;
overflow-y: auto;
padding-right: 5px;
.btn {
min-width: min-content;
height: 28px;
......@@ -633,6 +648,7 @@ onMounted(() => {
align-items: center;
margin: 0 auto;
position: relative;
cursor: pointer;
.more {
position: absolute;
right: 17px;
......@@ -666,8 +682,8 @@ onMounted(() => {
}
}
.right {
width: 350px;
margin-left: 22px;
width: 370px;
margin-left: 15px;
.name {
height: 26px;
color: rgba(59, 65, 75, 1);
......@@ -749,18 +765,21 @@ onMounted(() => {
}
}
.box3-bottom-main {
height: 410px;
}
.box3-bottom-footer {
width: 108px;
height: 32px;
margin: 5px auto;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
width: 510px;
height: 440px;
overflow: hidden;
overflow-y: auto;
}
// .box3-bottom-footer {
// width: 108px;
// height: 32px;
// margin: 5px auto;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// }
// }
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论