提交 c5b3e0c8 authored 作者: 张伊明's avatar 张伊明

fix 去除页面下方蓝色ai总结

style 修改深度挖掘部分样式
上级 88236308
......@@ -500,14 +500,14 @@ onMounted(() => {
.box2-main {
--event-item-height: 60px;
width: 1010px;
margin: 0 auto;
width: calc(100% - 44px);
margin: 22px 22px;
height: auto;
max-height: calc(var(--event-item-height) * 5);
overflow-y: auto;
.box2-main-item {
width: 1005px;
width: 100%;
height: 60px;
border-radius: 2px;
box-sizing: border-box;
......@@ -531,7 +531,8 @@ onMounted(() => {
.center {
margin-left: 14px;
width: 805px;
flex: 1 1 auto;
min-width: 0;
.title {
height: 22px;
......@@ -565,6 +566,7 @@ onMounted(() => {
.right {
margin-left: 25px;
flex: 0 0 auto;
line-height: 60px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......
......@@ -148,11 +148,12 @@
</div>
</div> -->
<AnalysisBox title="政治献金流向">
<div class="box2-main">
<div class="box2-main" :class="{ 'box2-main-no-footer': !showHardcodedTips }">
<el-empty v-if="!fullSourceList.length" description="暂无数据" :image-size="100" />
<div v-else class="chart-box2" id="chart1"></div>
</div>
<div class="box-footer">
<!-- 该提示文案后续改为接口返回,当前按需求先隐藏展示 -->
<div v-if="showHardcodedTips" class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
......@@ -210,7 +211,7 @@
</div>
</div> -->
<AnalysisBox title="政治献金领域分布">
<div class="box3-main">
<div class="box3-main" :class="{ 'box3-main-no-footer': !showHardcodedTips }">
<div class="box3-main-left" id="chart2"></div>
<div class="box3-main-right">
<el-empty v-if="!areaList.length" description="暂无数据" :image-size="100" />
......@@ -225,7 +226,8 @@
</div>
</div>
</div>
<div class="box-footer">
<!-- 该提示文案后续改为接口返回,当前按需求先隐藏展示 -->
<div v-if="showHardcodedTips" class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
......@@ -271,6 +273,9 @@ import Mzd from "@/assets/icons/mzd.png";
const activeBtnIndex = ref(0);
const itemActiveIndex = ref(0);
// 写死提示文案先保留逻辑,默认不展示;后续接口完成后改为 true 或替换为接口控制
const showHardcodedTips = ref(false);
const currentPersonName = computed(() => {
if (mainPoliContribution.value && mainPoliContribution.value[itemActiveIndex.value]) {
return mainPoliContribution.value[itemActiveIndex.value].name;
......@@ -1104,6 +1109,14 @@ onMounted(() => {
margin: 0 auto;
margin-bottom: 9px;
&.box2-main-no-footer {
height: 351px;
.chart-box2 {
height: 351px;
}
}
.chart-box2 {
width: 1020px;
height: 302px;
......@@ -1128,6 +1141,10 @@ onMounted(() => {
margin-bottom: 9px;
display: flex;
&.box3-main-no-footer {
height: 349px;
}
.box3-main-left {
width: 492px;
}
......
......@@ -34,12 +34,12 @@
<AnalysisBox title="典型阶段耗时">
<div class="box1-main">
<div class="box1-main-center" id="chart1"></div>
<div class="box1-main-footer">
<div v-if="timeFooterText" class="box1-main-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
从立法耗时角度分析,大而美法案从提交到签署仅39天,远快于历史同类法案(通常需6个月以上),立法速度极快。
{{ timeFooterText }}
</div>
<div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" />
......@@ -82,13 +82,12 @@
<AnalysisBox title="修正案次数分析">
<div class="box2-main">
<div class="box2-main-center" id="chart2"></div>
<div class="box2-main-footer">
<div v-if="amendFooterText" class="box2-main-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
法案本质是共和党与资本集团的深度联盟,共和党获超
​80%利益集团献金,以减税、松监管、军工扩张为核心回报。
{{ amendFooterText }}
</div>
<div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" />
......@@ -658,12 +657,12 @@
</div> -->
</div>
</div>
<div class="box3-main-footer">
<div v-if="voteFooterText" class="box3-main-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
法案以218:214​(众议院)和51:50​(副总统决胜票)微弱优势强行通过,暴露两党极端对立、党内倒戈频发的特点。
{{ voteFooterText }}
</div>
<div class="box-footer-right">
<img src="../assets/icons/arrow-right.png" alt="" />
......@@ -881,6 +880,11 @@ const voteAnalysisList4 = ref([
}
]);
// 底部说明文案(接口预留,默认不展示)
const timeFooterText = ref("");
const amendFooterText = ref("");
const voteFooterText = ref("");
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
......@@ -1093,7 +1097,7 @@ onMounted(async () => {
.box1-main-center {
width: 792px;
height: 300px;
height: 340px;
margin: 0 5px;
overflow: hidden;
......@@ -1231,7 +1235,7 @@ onMounted(async () => {
height: 359px;
.box2-main-center {
height: 300px;
height: 340px;
margin: 0 5px;
display: flex;
......@@ -1345,7 +1349,7 @@ onMounted(async () => {
#chart2 {
position: relative;
width: 330px;
height: 300px;
height: 340px;
z-index: 0;
}
......@@ -1475,7 +1479,7 @@ onMounted(async () => {
height: 791px;
.box3-main-center {
height: 732px;
height: 772px;
margin: 0 20px;
overflow-x: hidden;
......@@ -1529,7 +1533,7 @@ onMounted(async () => {
}
.box3-main-center-content {
height: 682px;
height: 722px;
overflow-y: auto;
overflow-x: hidden;
......
......@@ -17,7 +17,7 @@
<div class="item-title">{{ item.actionTitle }}</div>
</el-tooltip>
<div class="right">
<div class="risk-tag" :class="item.riskClass">{{ item.riskText }}</div>
<div v-if="item.riskText" class="risk-tag" :class="item.riskClass">{{ item.riskText }}</div>
<div class="arrow">></div>
</div>
</div>
......@@ -41,6 +41,27 @@ const RISK_CLASS_MAP = {
"低风险": "risk-low"
};
const normalizeRiskSignal = riskSignal => {
if (riskSignal === null || riskSignal === undefined) return "";
if (typeof riskSignal === "number" && Number.isFinite(riskSignal)) {
const idx = Math.max(0, Math.min(RISK_LEVELS.length - 1, Math.floor(riskSignal)));
return RISK_LEVELS[idx];
}
const text = String(riskSignal).trim();
if (!text) return "";
if (RISK_CLASS_MAP[text]) return text;
const numeric = Number(text);
if (Number.isFinite(numeric)) {
const idx = Math.max(0, Math.min(RISK_LEVELS.length - 1, Math.floor(numeric)));
return RISK_LEVELS[idx];
}
return text;
};
export default {
name: "SBillProgressList",
data() {
......@@ -81,7 +102,7 @@ export default {
formattedDate = `${dateObj.getMonth() + 1}${dateObj.getDate()}日`;
}
const riskText = RISK_LEVELS[Math.min(index, RISK_LEVELS.length - 1)];
const riskText = normalizeRiskSignal(item?.level);
const riskClass = RISK_CLASS_MAP[riskText] || "risk-low";
return {
......
<template>
<div class="temp-wrap">
<div class="left">
<div class="side">
<div class="side-box side-box-domain">
<AnalysisBox title="涉及领域" width="520px" height="415px">
<div class="right-box2-main" id="chart2"></div>
<div v-if="domainFooterText" class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">
{{ domainFooterText }}
</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
<div class="side-box side-box-limit">
<AnalysisBox title="限制手段" width="520px" height="415px">
<div class="right-box1-main" id="chart1"></div>
<div v-if="limitFooterText" class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">
{{ limitFooterText }}
</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
</div>
<div class="terms">
<!-- <div class="box-header">
<div class="box-header-left"></div>
<div class="box-header-title">主要条款</div>
......@@ -91,7 +125,7 @@
</div>
</div>
<div class="left-main">
<div class="left-main-item" v-for="(term, index) in mainTermsList" :key="index">
<div class="left-main-item" v-for="(term, index) in mainTermsList" :key="getTermKey(term, index)">
<div class="id">{{ (currentPage - 1) * pageSize + index + 1 }}</div>
<div class="info">
<div class="title">
......@@ -104,7 +138,7 @@
</div>
</div>
<div class="tags-box">
<div class="tag" v-for="(val, idx) in (term.hylyList || []).slice(0, 2)" :key="idx" :class="{
<div class="tag" v-for="(val, idx) in (term.hylyList || []).slice(0, 2)" :key="getTagKey(val, idx)" :class="{
tag1: val === '人工智能',
tag2: val === '新一代信息技术' || !['人工智能', '政治', '经济', '军事', '科技'].includes(val),
tag3: val === '政治',
......@@ -131,86 +165,6 @@
</div>
</AnalysisBox>
</div>
<div class="right">
<div class="right-box1">
<!-- <div class="box-header">
<div class="box-header-left"></div>
<div class="box-header-title">限制手段</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<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 class="right-box1-main" id="chart1"></div>
<div class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
<AnalysisBox title="限制手段">
<div class="right-box1-main" id="chart1"></div>
<div class="right-box1-footer">
<div class="right-box1-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box1-footer-center">通过关税壁垒、技术脱钩、新能源打压、地缘捆绑遏制中国产业链发展</div>
<div class="right-box1-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
<div class="right-box2">
<!-- <div class="box-header">
<div class="box-header-left"></div>
<div class="box-header-title">涉及领域</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<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 class="right-box2-main" id="chart2"></div>
<div class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
<AnalysisBox title="涉及领域">
<div class="right-box2-main" id="chart2"></div>
<div class="right-box2-footer">
<div class="right-box2-footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="right-box2-footer-center">系统性挤压中国新能源、跨境电商及高端制造的在美生存空间。</div>
<div class="right-box2-footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div>
</AnalysisBox>
</div>
</div>
</div>
</template>
......@@ -234,11 +188,21 @@ const pageSize = ref(10);
const total = ref(0);
const mainTermsList = ref([]);
const domainFooterText = ref("");
const limitFooterText = ref("");
const btnActiveIndex = ref(1);
const handleSelectBtn = index => {
btnActiveIndex.value = index;
};
const getTermKey = (term, index) => {
return term?.ywid ?? term?.id ?? term?.tkxh ?? index;
};
const getTagKey = (val, idx) => {
return `${val}-${idx}`;
};
const chart1Data = ref([]);
const chart1ColorList = ref(["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"]);
......@@ -478,8 +442,9 @@ onMounted(async () => {
}
}
.left {
.terms {
margin-top: 16px;
margin-left: 16px;
width: 1064px;
height: 845px;
.left-top {
......@@ -668,17 +633,21 @@ onMounted(async () => {
}
}
.right {
.side {
width: 520px;
margin-top: 16px;
margin-left: 16px;
.right-box1 {
.side-box {
width: 520px;
}
.side-box-limit {
margin-top: 15px;
width: 520px;
height: 415px;
.right-box1-main {
width: 520px;
height: 315px;
height: 375px;
padding: 16px;
}
......@@ -735,13 +704,12 @@ onMounted(async () => {
}
}
.right-box2 {
margin-top: 15px;
.side-box-domain {
width: 520px;
height: 415px;
.right-box2-main {
width: 520px;
height: 315px;
height: 375px;
padding: 16px;
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论