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

style 调整样式

上级 6c49007c
...@@ -239,6 +239,8 @@ watch(isTranslate, () => { ...@@ -239,6 +239,8 @@ watch(isTranslate, () => {
background-color: white; background-color: white;
padding: 0 60px; padding: 0 60px;
flex: auto; flex: auto;
height: 100%;
min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.report-header { .report-header {
...@@ -324,9 +326,14 @@ watch(isTranslate, () => { ...@@ -324,9 +326,14 @@ watch(isTranslate, () => {
.report-main { .report-main {
flex: auto; flex: auto;
min-height: 0;
box-sizing: border-box; box-sizing: border-box;
padding-top: 10px; padding-top: 10px;
:deep(.el-scrollbar) {
height: 100%;
}
.no-content { .no-content {
height: 100%; height: 100%;
display: flex; display: flex;
......
...@@ -133,11 +133,12 @@ const emit = defineEmits(['save', 'download', 'collect']) ...@@ -133,11 +133,12 @@ const emit = defineEmits(['save', 'download', 'collect'])
} }
} }
// .header-btn { .header-btn {
// display: flex; // display: flex;
// justify-content: flex-end; // justify-content: flex-end;
// gap: 8px; // gap: 8px;
// } margin-right: 10px;
}
// .header-btn1 { // .header-btn1 {
// position: absolute; // position: absolute;
......
...@@ -13,7 +13,6 @@ const BillInfluenceLayout = () => import('@/views/bill/influence/index.vue') ...@@ -13,7 +13,6 @@ const BillInfluenceLayout = () => import('@/views/bill/influence/index.vue')
const BillInfluenceIndustry = () => import('@/views/bill/influence/industry/index.vue') const BillInfluenceIndustry = () => import('@/views/bill/influence/industry/index.vue')
const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue') const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue')
const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue') const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue')
const BillOriginalText = () => import('@/views/bill/billOriginalText/index.vue')
const billRoutes = [ const billRoutes = [
...@@ -36,14 +35,6 @@ const billRoutes = [ ...@@ -36,14 +35,6 @@ const billRoutes = [
dynamicTitle: true // 标记需要动态设置标题 dynamicTitle: true // 标记需要动态设置标题
}, },
children: [ children: [
{
path: "originalText",
name: "BillOriginalText",
component: BillOriginalText,
meta: {
title: "法案原文"
}
},
// 法案分析路由 // 法案分析路由
{ {
path: "bill", path: "bill",
......
...@@ -204,16 +204,20 @@ ...@@ -204,16 +204,20 @@
<div class="coop-members"> <div class="coop-members">
<div class="coop-member"> <div class="coop-member">
<img class="coop-avatar" :src="item.avatar || defaultAvatar" alt="committee-avatar" /> <img class="coop-avatar" :src="item.avatar || defaultAvatar" alt="committee-avatar" />
<div class="coop-member-name" :title="item.name">{{ item.name }}</div> <div class="coop-member-info">
<div class="coop-member-name" :title="item.name">{{ item.name }}</div>
<div v-if="item.nameEn" class="coop-member-name-en" :title="item.nameEn">
{{ item.nameEn }}
</div>
</div>
</div> </div>
</div> </div>
<div class="coop-summary" :title="item.desc"> <!-- <div class="coop-summary" :title="item.desc">
{{ item.desc }} {{ item.desc }}
</div> </div> -->
<div class="coop-count"> <div class="coop-count">
{{ `${item.proposalSize ?? (item.bills || []).length}项重点法案` }} {{ `${item.proposalSize ?? (item.bills || []).length}项重点法案` }}
</div> </div>
<slot name="committee-extra" :committee="item" />
</div> </div>
<div class="coop-proposals"> <div class="coop-proposals">
<div <div
...@@ -447,6 +451,7 @@ const handleGetCommitteeList = async () => { ...@@ -447,6 +451,7 @@ const handleGetCommitteeList = async () => {
const descText = billInfoPage[0]?.originDepart || ""; const descText = billInfoPage[0]?.originDepart || "";
return { return {
id: item.id, id: item.id,
nameEn:item.nameEn || "",
avatar: "", avatar: "",
name: item.name || "-", name: item.name || "-",
desc: descText, desc: descText,
...@@ -1232,6 +1237,12 @@ onMounted(() => { ...@@ -1232,6 +1237,12 @@ onMounted(() => {
min-width: 0; min-width: 0;
} }
.coop-member-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.coop-avatar { .coop-avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -1273,6 +1284,17 @@ onMounted(() => { ...@@ -1273,6 +1284,17 @@ onMounted(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.coop-member-name-en {
color: var(--text-primary-65-color);
font-family: "Microsoft YaHei";
font-size: 14px;
font-weight: 400;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coop-count { .coop-count {
flex-shrink: 0; flex-shrink: 0;
color: #1459bb; color: #1459bb;
...@@ -1284,7 +1306,6 @@ onMounted(() => { ...@@ -1284,7 +1306,6 @@ onMounted(() => {
} }
.coop-proposals { .coop-proposals {
margin-top: 10px;
padding-top: 10px; padding-top: 10px;
border-top: 1px solid #eaeced; border-top: 1px solid #eaeced;
display: grid; display: grid;
......
...@@ -78,14 +78,6 @@ ...@@ -78,14 +78,6 @@
<div class="right-box-bottom" v-if="showActions"> <div class="right-box-bottom" v-if="showActions">
<template v-if="isLoading"> <template v-if="isLoading">
<div class="btn1 is-skeleton">
<div class="icon">
<el-skeleton-item class="skeleton-action-icon" variant="text" />
</div>
<div class="text">
<el-skeleton-item class="skeleton-action-text" variant="text" />
</div>
</div>
<div class="btn3 is-skeleton"> <div class="btn3 is-skeleton">
<div class="icon"> <div class="icon">
<el-skeleton-item class="skeleton-action-icon" variant="text" /> <el-skeleton-item class="skeleton-action-icon" variant="text" />
...@@ -96,13 +88,6 @@ ...@@ -96,13 +88,6 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="btn1" @click="emit('open-original-text')">
<div class="icon">
<img :src="btnIconOriginalText" alt="" />
</div>
<div class="text">{{ "法案原文" }}</div>
</div>
<div class="btn3" @click="emit('open-analysis')"> <div class="btn3" @click="emit('open-analysis')">
<div class="icon"> <div class="icon">
<img :src="btnIconAnalysis" alt="" /> <img :src="btnIconAnalysis" alt="" />
...@@ -118,7 +103,6 @@ ...@@ -118,7 +103,6 @@
<script setup> <script setup>
import { computed } from "vue"; import { computed } from "vue";
import btnIconOriginalText from "@/views/thinkTank/ReportDetail/images/btn-icon1.png";
import btnIconAnalysis from "@/views/thinkTank/ReportDetail/images/btn-icon3.png"; import btnIconAnalysis from "@/views/thinkTank/ReportDetail/images/btn-icon3.png";
const props = defineProps({ const props = defineProps({
...@@ -150,7 +134,7 @@ const props = defineProps({ ...@@ -150,7 +134,7 @@ const props = defineProps({
const isLoading = computed(() => !props.billInfo || !props.billInfo.billName); const isLoading = computed(() => !props.billInfo || !props.billInfo.billName);
const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]); const emit = defineEmits(["tab-click", "open-analysis"]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -363,41 +347,6 @@ const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]); ...@@ -363,41 +347,6 @@ const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]);
justify-content: flex-end; justify-content: flex-end;
gap: 8px; gap: 8px;
.btn1 {
cursor: pointer;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.btn3 { .btn3 {
cursor: pointer; cursor: pointer;
width: 120px; width: 120px;
......
...@@ -7,10 +7,7 @@ ...@@ -7,10 +7,7 @@
:defaultLogo="USALogo" :defaultLogo="USALogo"
:tabs="mainHeaderBtnList" :tabs="mainHeaderBtnList"
:activeTitle="activeTitle" :activeTitle="activeTitle"
:showTabs="!isBillOriginalTextPage"
:showActions="!isBillOriginalTextPage"
@tab-click="handleClickMainHeaderBtn" @tab-click="handleClickMainHeaderBtn"
@open-original-text="handleOpenBillOriginalText"
@open-analysis="handleAnalysisClick" @open-analysis="handleAnalysisClick"
/> />
...@@ -22,14 +19,13 @@ ...@@ -22,14 +19,13 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, computed, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import router from "@/router"; import router from "@/router";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { getBillInfoGlobal } from "@/api/bill"; import { getBillInfoGlobal } from "@/api/bill";
import BillHeader from "./components/BillHeader.vue"; import BillHeader from "./components/BillHeader.vue";
const route = useRoute(); const route = useRoute();
const isBillOriginalTextPage = computed(() => route.path === "/billLayout/originalText");
import icon1 from "./assets/icons/icon1.svg"; import icon1 from "./assets/icons/icon1.svg";
import icon1Active from "./assets/icons/icon1_active.svg"; import icon1Active from "./assets/icons/icon1_active.svg";
...@@ -55,16 +51,6 @@ const getBillInfoGlobalFn = async () => { ...@@ -55,16 +51,6 @@ const getBillInfoGlobalFn = async () => {
} }
}; };
const handleOpenBillOriginalText = () => {
const targetRoute = router.resolve({
path: "/billLayout/originalText",
query: {
billId: route.query.billId
}
});
window.open(targetRoute.href, "_blank");
};
const mainHeaderBtnList = ref([ const mainHeaderBtnList = ref([
{ {
icon: icon1, icon: icon1,
......
...@@ -696,6 +696,7 @@ onMounted(() => { ...@@ -696,6 +696,7 @@ onMounted(() => {
position: absolute; position: absolute;
right: 84px; right: 84px;
top: 15px; top: 15px;
.btn { .btn {
height: 28px; height: 28px;
......
<template> <template>
<div class="process-overview-wrap"> <div class="process-overview-wrap">
<!-- <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="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="main">
<div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
<div class="top">
<div class="top-line" :style="{ width: lineWidth }">
<div class="top-line1"></div>
</div>
<div class="start">
<div class="icon">
<img src="./assets/images/logo1.png" alt="" />
</div>
<div class="name">{{ "参议院" }}</div>
</div>
<div class="content-box" :style="senateBoxStyle">
<div class="item-box" v-for="(item, index) in senateList" :key="item.id" style="width: 280px; flex-shrink: 0;">
<div class="item-box-dot">
<img src="./assets/images/top-line-dot.png" alt="" />
</div>
<div class="item-content">
<div class="item-header">
<div class="item-title" :title="item.actionTitle">
{{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
</div>
<div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
<img src="./assets/images/item-header-icon.png" alt="" />
</div>
</div>
<div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
{{ (item.agreeVote || 0) + "赞成:" + (item.disagreeVote || 0) + "反对" }}
</div>
<div class="item-main" v-if="item.fynrList && item.fynrList.length">
<div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
<div class="icon"></div>
<CommonPrompt :content="sub">
<div class="text">{{ sub }}</div>
</CommonPrompt>
</div>
</div>
</div>
<div class="item-time">
{{ item.actionDate }}
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-line" :style="{ width: lineWidth }">
<div class="bottom-line1"></div>
</div>
<div class="start">
<div class="name">{{ "众议院" }}</div>
<div class="icon">
<img src="./assets/images/logo2.png" alt="" />
</div>
</div>
<div class="content-box" :style="houseBoxStyle">
<div class="item-box" v-for="(item, index) in houseList" :key="item.id" style="width: 280px; flex-shrink: 0;">
<div class="item-time">
{{ item.actionDate }}
</div>
<div class="item-box-dot">
<img src="./assets/images/bottom-line-dot.png" alt="" />
</div>
<div class="item-content">
<div class="item-header">
<div class="item-title" :title="item.actionTitle">
{{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
</div>
<div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
<img src="./assets/images/item-header-icon.png" alt="" />
</div>
</div>
<div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
{{ (item.agreeVote || 0) + "赞成:" + (item.disagreeVote || 0) + "反对" }}
</div>
<div class="item-main" v-if="item.fynrList && item.fynrList.length">
<div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
<div class="icon"></div>
<CommonPrompt :content="sub">
<div class="text">{{ sub }}</div>
</CommonPrompt>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right" :style="{ left: rightPos }">
<div class="junction-dot">
<div class="inner-dot"></div>
</div>
<div class="right-line"></div>
</div>
</div>
</div> -->
<AnalysisBox title="流程概要" :showAllBtn="false"> <AnalysisBox title="流程概要" :showAllBtn="false">
<div class="main"> <div class="main">
<div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }"> <div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
...@@ -207,17 +99,6 @@ ...@@ -207,17 +99,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="footer">
<div class="footer-left">
<img src="./assets/icons/right-icon1.png" alt="" />
</div>
<div class="footer-center">
立法过程始于2025年2月共和党启动预算框架谈判,5月22日众议院以215:214的1票优势通过初始版本;随后参议院历经16小时全文朗读和马拉松式辩论,于7月1日以51:50的票数通过修订版(副总统万斯投关键票);因参议院版本大改(如永久化减税、提高债限至5万亿美元),法案重返众议院审议,经程序性投票(219:213)和最终表决(218:214),于7月3日深夜通过;特朗普在7月4日独立日签署生效,全程凸显两党对立、党内分歧及程序博弈。
</div>
<div class="footer-right">
<img src="./assets/icons/arrow-right.png" alt="" />
</div>
</div> -->
</AnalysisBox> </AnalysisBox>
<ProcessOverviewDetailDialog <ProcessOverviewDetailDialog
......
...@@ -29,7 +29,7 @@ const siderBtnList = ref([ ...@@ -29,7 +29,7 @@ const siderBtnList = ref([
path: '/billLayout/bill/background' path: '/billLayout/bill/background'
}, },
{ {
name: '内容概要', name: '法案原文',
path: '/billLayout/bill/template' path: '/billLayout/bill/template'
}, },
]) ])
...@@ -38,7 +38,7 @@ const siderBtnActive = ref("法案简介"); ...@@ -38,7 +38,7 @@ const siderBtnActive = ref("法案简介");
const getSiderActiveByRoutePath = path => { const getSiderActiveByRoutePath = path => {
if (path.includes("/billLayout/bill/background")) return "法案背景"; if (path.includes("/billLayout/bill/background")) return "法案背景";
if (path.includes("/billLayout/bill/template")) return "内容概要"; if (path.includes("/billLayout/bill/template")) return "法案原文";
return "法案简介"; return "法案简介";
}; };
......
<template> <template>
<div class="introduction-wrap"> <div class="introduction-wrap">
<div class="introduction-wrap-left"> <WarningPane
<div class="introduction-wrap-left-box1"> v-if="riskSignal"
<!-- <div class="box-header"> class="risk-signal-pane-top"
<div class="header-left"></div> :warnningLevel="riskSignal.riskLevel"
<div class="title">基本信息</div> :warnningContent="riskSignal.riskContent"
<div class="header-right"> />
<div class="icon"> <div class="introduction-wrap-content">
<img src="@/assets/icons/box-header-icon2.png" alt="" /> <div class="introduction-wrap-left">
</div> <div class="introduction-wrap-left-box1">
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" /> <AnalysisBox title="基本信息" :showAllBtn="false">
</div> <div class="box1-main">
</div> <div class="box1-left">
</div> <img :src="basicInfo.imageUrl || defaultBill" alt="" />
<div class="box1-main">
<div class="box1-left">
<img :src=" basicInfo.imageUrl || defaultBill" alt="" />
</div>
<div class="box1-right">
<div class="box1-right-item">
<div class="item-left">提案人:</div>
<div class="item-right">{{ basicInfo.tarName }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">提出时间:</div>
<div class="item-right">{{ basicInfo.introductionDate }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">相关领域:</div>
<div class="item-right1">
<div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div>
</div> </div>
</div> <div class="box1-right">
<div class="box1-right-item">
<div class="item-left">委员会报告:</div>
<div class="item-right2" v-if="basicInfo.reportList">
<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index">
{{ item }}
</div>
</div>
</div>
<div class="box1-right-item">
<div class="item-left">表决记录:</div>
<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">最近状态:</div>
<div class="item-right3">{{ basicInfo.status }}</div>
</div>
<div class="box1-right-item">
<div class="item-left">立案流程:</div>
<div class="item-right4">
<div
class="step"
v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []"
:key="index"
:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }"
>
<div
class="step-box"
:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }"
>
{{ item }}
</div>
</div>
</div>
</div>
</div>
</div> -->
<AnalysisBox title="基本信息" :showAllBtn="false">
<div class="box1-main">
<div class="box1-left">
<img :src="basicInfo.imageUrl || defaultBill" alt="" />
</div>
<div class="box1-right">
<div class="box1-right-item"> <div class="box1-right-item">
<div class="item-left">提案人:</div> <div class="item-left">提案人:</div>
<div class="item-right">{{ basicInfo.tarName }}</div> <div class="item-right">{{ basicInfo.tarName }}</div>
...@@ -88,14 +28,13 @@ ...@@ -88,14 +28,13 @@
<div class="box1-right-item"> <div class="box1-right-item">
<div class="item-left">相关领域:</div> <div class="item-left">相关领域:</div>
<div class="item-right1"> <div class="item-right1">
<!-- <div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div> --> <AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
<AreaTag v-for="item, index in basicInfo.hylyList" :key="index" :tagName="item"/>
</div> </div>
</div> </div>
<div class="box1-right-item"> <div class="box1-right-item">
<div class="item-left">委员会报告:</div> <div class="item-left">委员会报告:</div>
<div class="item-right2" v-if="basicInfo.reportList"> <div class="item-right2" v-if="reportList.length">
<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index"> <div class="right2-item" v-for="(item, index) in reportList" :key="getReportKey(item, index)">
{{ item }} {{ item }}
</div> </div>
</div> </div>
...@@ -111,11 +50,14 @@ ...@@ -111,11 +50,14 @@
<div class="box1-right-item"> <div class="box1-right-item">
<div class="item-left">立案流程:</div> <div class="item-left">立案流程:</div>
<div class="item-right4"> <div class="item-right4">
<div class="step" <div
v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []" :key="index" v-for="(item, index) in reversedStageList"
:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }"> :key="getStageKey(item, index)"
class="step"
:style="{ zIndex: getStageZIndex(index) }"
>
<div class="step-box" <div class="step-box"
:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }"> :class="{ 'step-box-active': index === stageActiveIndex }">
{{ item }} {{ item }}
</div> </div>
</div> </div>
...@@ -126,33 +68,8 @@ ...@@ -126,33 +68,8 @@
</AnalysisBox> </AnalysisBox>
</div> </div>
<div class="introduction-wrap-left-box2"> <div class="introduction-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="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-center">
<STimeline :dataList="timelineData" />
</div>
</div> -->
<AnalysisBox title="法案进展" :showAllBtn="false"> <AnalysisBox title="法案进展" :showAllBtn="false">
<template #header-btn> <template #header-btn>
<!-- <div class="progress-header-btns">
<div class="btn" :class="{ btnActive: progressMode === 'latest' }" @click="handleSwitchProgressMode('latest')">
最新进展
</div>
<div class="btn" :class="{ btnActive: progressMode === 'early' }" @click="handleSwitchProgressMode('early')">
前期进程
</div>
</div> -->
</template> </template>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-center"> <div class="box2-main-center">
...@@ -161,191 +78,86 @@ ...@@ -161,191 +78,86 @@
</div> </div>
</AnalysisBox> </AnalysisBox>
</div> </div>
</div>
<div class="introduction-wrap-right">
<!-- <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="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div> </div>
<div class="introduction-wrap-right-main"> <div class="introduction-wrap-right">
<div class="right-main-box1"> <AnalysisBox title="提出人" :showAllBtn="false">
<div class="name-box"> <div class="introduction-wrap-right-main">
<div class="person-box"> <div class="right-main-box1">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }" <div class="name-box">
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index"> <div class="person-box">
{{ item.name }} <div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
</div> @click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
</div> {{ item.name }}
</div> </div>
<div class="info-box"> </div>
<div class="info-left">
<img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
</div>
<div class="info-right">
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-item">
<div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div> </div>
</div> <div class="info-box">
</div> <div class="info-left">
</div> <img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length"> <div class="usr-icon1">
<div class="tag-box" :class="{ <img src="./assets/images/usr-icon1.png" alt="" />
status0: index % 4 === 0, </div>
status1: index % 4 === 1, <div class="usr-icon2">
status2: index % 4 === 2, <img src="./assets/images/usr-icon2.png" alt="" />
status3: index % 4 === 3 </div>
}" v-for="(tag, index) in curPerson.tagList" :key="index">
{{ tag.industryName }}
</div>
</div>
<div class="right-main-box3">
<div class="right-main-box3-header">
<div class="icon">
<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
</div>
<div class="title">人物动态</div>
</div>
<div class="right-main-box3-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div> </div>
</el-timeline-item> <div class="info-right">
</el-timeline> <div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
</div> <div class="info-right-item">
<div class="right-main-box3-footer"> <div class="item-left">英文名:</div>
<div class="btn-more" @click="handleClickMore2"> <div class="item-right">{{ curPerson.ename }}</div>
<img src="../assets/images/btn-more.png" alt="" /> </div>
</div> <div class="info-right-item">
</div> <div class="item-left">党派:</div>
</div> <div class="item-right">{{ curPerson.dp }}</div>
</div> --> </div>
<AnalysisBox title="提出人" :showAllBtn="false"> <div class="info-right-item">
<div class="introduction-wrap-right-main"> <div class="item-left">选区:</div>
<div class="right-main-box1"> <div class="item-right">{{ curPerson.xq }}</div>
<div class="name-box"> </div>
<!-- <el-select <div class="info-right-item">
v-model="selectValue" <div class="item-left">职位:</div>
placeholder="请选择" <div class="item-right">{{ curPerson.zw }}</div>
style="width: 180px; margin: 0 10px" </div>
@change="handleChangeFaId"
>
<el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" />
</el-select> -->
<div class="person-box">
<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
{{ item.name }}
</div> </div>
</div> </div>
</div> </div>
<div class="info-box"> <div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
<div class="info-left"> <div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
<img class="person-avatar" :src="curPerson.imageUrl || defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" /> {{ tag }}
<div class="usr-icon1">
<img src="./assets/images/usr-icon1.png" alt="" />
</div>
<div class="usr-icon2">
<img src="./assets/images/usr-icon2.png" alt="" />
</div>
</div> </div>
<div class="info-right"> </div>
<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div> <div class="right-main-box3">
<div class="info-right-item"> <div class="right-main-box3-header">
<div class="item-left">英文名:</div> <div class="icon">
<div class="item-right">{{ curPerson.ename }}</div> <img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
</div>
<div class="info-right-item">
<div class="item-left">党派:</div>
<div class="item-right">{{ curPerson.dp }}</div>
</div>
<div class="info-right-item">
<div class="item-left">选区:</div>
<div class="item-right">{{ curPerson.xq }}</div>
</div>
<div class="info-right-item">
<div class="item-left">职位:</div>
<div class="item-right">{{ curPerson.zw }}</div>
</div> </div>
<div class="title">人物动态</div>
</div> </div>
</div> <div class="right-main-box3-main">
</div> <el-timeline style="max-width: 500px">
<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length"> <el-timeline-item :timestamp="item.newsDate" placement="top"
<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> --> v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index"> <div class="timeline-content">
{{ tag }} {{ item.newsContent }}
</div> </div>
</div> </el-timeline-item>
<div class="right-main-box3"> </el-timeline>
<div class="right-main-box3-header">
<div class="icon">
<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
</div> </div>
<div class="title">人物动态</div>
</div>
<div class="right-main-box3-main">
<el-timeline style="max-width: 500px">
<el-timeline-item :timestamp="item.newsDate" placement="top"
v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
<div class="timeline-content">
{{ item.newsContent }}
</div>
</el-timeline-item>
<!-- <el-timeline-item timestamp="2018/4/3" placement="top">
<div class="timeline-content">
OBBBA通过势头,在得州巩固军工、能源集团支持,为2026年连任铺路,同时协调党内资源争夺关键摇摆选区。
</div>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<div class="timeline-content">
特朗普力挺阿灵顿,白宫声明强调法案“美丽且必要”,双方矛盾凸显共和党内
​商业资本与传统能源势力裂痕。
</div>
</el-timeline-item> -->
</el-timeline>
</div> </div>
</div> </div>
</div> </AnalysisBox>
</AnalysisBox> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from "vue"; import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import WordCloudMap from "./WordCloudMap.vue"; import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue"; import STimeline from "./STimeline.vue";
import WarningPane from "@/components/base/WarningPane/index.vue";
import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill"; import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
import defaultAvatar from "../assets/images/default-icon1.png"; import defaultAvatar from "../assets/images/default-icon1.png";
import defaultNew from "../assets/images/default-icon-news.png"; import defaultNew from "../assets/images/default-icon-news.png";
...@@ -383,6 +195,19 @@ const handleSwitchProgressMode = mode => { ...@@ -383,6 +195,19 @@ const handleSwitchProgressMode = mode => {
const basicInfo = ref({}); const basicInfo = ref({});
const riskSignal = computed(() => basicInfo.value?.riskSignalVO || null);
const hylyList = computed(() => (Array.isArray(basicInfo.value?.hylyList) ? basicInfo.value.hylyList : []));
const reportList = computed(() => (Array.isArray(basicInfo.value?.reportList) ? basicInfo.value.reportList : []));
const reversedStageList = computed(() => {
const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : [];
return [...list].reverse();
});
const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0));
const stageActiveIndex = computed(() => stageListLength.value - 1);
const getStageZIndex = index => stageListLength.value - index;
const getStageKey = (item, index) => `${item}-${index}`;
const getReportKey = (item, index) => `${item}-${index}`;
const handleGetBasicInfo = async () => { const handleGetBasicInfo = async () => {
const params = { const params = {
id: billId.value id: billId.value
...@@ -452,8 +277,10 @@ onMounted(() => { ...@@ -452,8 +277,10 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.introduction-wrap { .introduction-wrap {
width: 100%; width: 100%;
height: 880px; min-height: 880px;
height: auto;
display: flex; display: flex;
flex-direction: column;
.progress-header-btns { .progress-header-btns {
display: flex; display: flex;
...@@ -536,6 +363,19 @@ onMounted(() => { ...@@ -536,6 +363,19 @@ onMounted(() => {
} }
} }
.risk-signal-pane-top {
width: 1600px;
margin-top: 16px;
margin-right: 18px;
height: 116px;
min-height: 116px;
flex-shrink: 0;
}
.introduction-wrap-content {
display: flex;
}
.introduction-wrap-left { .introduction-wrap-left {
width: 1064px; width: 1064px;
margin-top: 16px; margin-top: 16px;
...@@ -1358,6 +1198,7 @@ onMounted(() => { ...@@ -1358,6 +1198,7 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论