提交 52c138b3 authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 800667be
<template> <template>
<div id="app"> <div id="app">
<div class="pro-wrapper"> <div class="pro-wrapper">
<div class="home-page" v-show="isCurrentOverview"> <div class="home-page" v-if="isCurrentOverview">
<div class="navbar"> <div class="navbar">
<div class="nav-left"> <div class="nav-left">
<div class="icon"> <div class="icon">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
<div class="content-page" v-show="!isCurrentOverview"> <div class="content-page" v-if="!isCurrentOverview">
<div class="navbar"> <div class="navbar">
<div class="nav-brand"> <div class="nav-brand">
<div class="brand-icon"> <div class="brand-icon">
...@@ -136,8 +136,8 @@ const route = useRoute() ...@@ -136,8 +136,8 @@ const route = useRoute()
const handleToHome = () => { const handleToHome = () => {
router.push({ router.push({
path: "/ZMOverView" path: "/ZMOverView"
// path: "/overview"
}); });
isCurrentOverview.value = true;
}; };
const isShowAiBox = ref(false); const isShowAiBox = ref(false);
...@@ -150,10 +150,6 @@ const openAiBox = () => { ...@@ -150,10 +150,6 @@ const openAiBox = () => {
isShowAiBox.value = true; isShowAiBox.value = true;
}; };
const handleHomeCommand = command => {
router.push(command);
};
const personTypeList = ref([]); const personTypeList = ref([]);
// 获取人物类别 // 获取人物类别
......
...@@ -933,7 +933,7 @@ onMounted(() => { ...@@ -933,7 +933,7 @@ onMounted(() => {
width: 1064px; width: 1064px;
height: 846px; height: 846px;
.box2 { .box2 {
width: 1210px; width: 1064px;
height: 415px; height: 415px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -948,7 +948,7 @@ onMounted(() => { ...@@ -948,7 +948,7 @@ onMounted(() => {
} }
.box3 { .box3 {
margin-top: 16px; margin-top: 16px;
width: 1210px; width: 1064px;
height: 415px; height: 415px;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
......
...@@ -99,8 +99,19 @@ ...@@ -99,8 +99,19 @@
<div class="item"> <div class="item">
<div class="item-box1"> <div class="item-box1">
<div class="box1-left"> <div class="box1-left">
<div style="width: 100%; display: flex; flex-direction: column; align-items: flex-end;"> <div
<div class="name nameBlod" :title="item.actionTitle" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;"> style="width: 100%; display: flex; flex-direction: column; align-items: flex-end"
>
<div
class="name nameBlod"
:title="item.actionTitle"
style="
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
"
>
{{ item.actionTitle }} {{ item.actionTitle }}
</div> </div>
<div class="time"> <div class="time">
...@@ -110,24 +121,34 @@ ...@@ -110,24 +121,34 @@
</div> </div>
<div class="box1-right"> <div class="box1-right">
<div class="box1-right-top"> <div class="box1-right-top">
<el-progress :percentage="Number(item.agreePercent)" :show-text="false" color="#1677FF"> </el-progress> <el-progress
:percentage="Number(item.agreePercent)"
:show-text="false"
color="#1677FF"
>
</el-progress>
</div> </div>
<div class="box1-right-bottom"> <div class="box1-right-bottom">
<el-progress :percentage="Number(item.againstPercent)" :show-text="false" color="#FF9054"> </el-progress> <el-progress
:percentage="Number(item.againstPercent)"
:show-text="false"
color="#FF9054"
>
</el-progress>
</div> </div>
</div> </div>
</div> </div>
<div class="item-box2"> <div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.agreeCount + "票" }}</div> <div class="box2-1" style="color: #1677ff">{{ item.agreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.againstCount + "票" }}</div> <div class="box2-2" style="color: #ff9054">{{ item.againstCount + "票" }}</div>
</div> </div>
<div class="item-box3"> <div class="item-box3">
<div class="box3-1"></div> <div class="box3-1"></div>
<div class="box3-2"></div> <div class="box3-2"></div>
</div> </div>
<div class="item-box4"> <div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.agreePercent + "%" }}</div> <div class="box4-1" style="color: #1677ff">{{ item.agreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.againstPercent + "%" }}</div> <div class="box4-2" style="color: #ff9054">{{ item.againstPercent + "%" }}</div>
</div> </div>
<div class="item-box5"></div> <div class="item-box5"></div>
<div class="item-box6"> <div class="item-box6">
...@@ -144,24 +165,34 @@ ...@@ -144,24 +165,34 @@
</div> </div>
<div class="box1-right"> <div class="box1-right">
<div class="box1-right-top"> <div class="box1-right-top">
<el-progress :percentage="Number(item.dagreePercent)" :show-text="false" color="#85b4ff"> </el-progress> <el-progress
:percentage="Number(item.dagreePercent)"
:show-text="false"
color="#85b4ff"
>
</el-progress>
</div> </div>
<div class="box1-right-bottom"> <div class="box1-right-bottom">
<el-progress :percentage="Number(item.dagainstPercent)" :show-text="false" color="#FF9054"> </el-progress> <el-progress
:percentage="Number(item.dagainstPercent)"
:show-text="false"
color="#FF9054"
>
</el-progress>
</div> </div>
</div> </div>
</div> </div>
<div class="item-box2"> <div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.dagreeCount + "票" }}</div> <div class="box2-1" style="color: #1677ff">{{ item.dagreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.dagainstCount + "票" }}</div> <div class="box2-2" style="color: #ff9054">{{ item.dagainstCount + "票" }}</div>
</div> </div>
<div class="item-box3"></div> <div class="item-box3"></div>
<div class="item-box4"> <div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.dagreePercent + "%" }}</div> <div class="box4-1" style="color: #1677ff">{{ item.dagreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.dagainstPercent + "%" }}</div> <div class="box4-2" style="color: #ff9054">{{ item.dagainstPercent + "%" }}</div>
</div> </div>
<div class="item-box5"> <div class="item-box5">
<div class="box5-1" style="color: #CE4F51">{{ item.dreverseCount + "人" }}</div> <div class="box5-1" style="color: #ce4f51">{{ item.dreverseCount + "人" }}</div>
</div> </div>
<div class="item-box6"> <div class="item-box6">
<div class="img-box" v-if="item.dpersonImageUrl"> <div class="img-box" v-if="item.dpersonImageUrl">
...@@ -179,24 +210,34 @@ ...@@ -179,24 +210,34 @@
</div> </div>
<div class="box1-right"> <div class="box1-right">
<div class="box1-right-top"> <div class="box1-right-top">
<el-progress :percentage="Number(item.ragreePercent)" :show-text="false" color="#1677FF"> </el-progress> <el-progress
:percentage="Number(item.ragreePercent)"
:show-text="false"
color="#1677FF"
>
</el-progress>
</div> </div>
<div class="box1-right-bottom"> <div class="box1-right-bottom">
<el-progress :percentage="Number(item.ragainstPercent)" :show-text="false" color="#ffdcc8"> </el-progress> <el-progress
:percentage="Number(item.ragainstPercent)"
:show-text="false"
color="#ffdcc8"
>
</el-progress>
</div> </div>
</div> </div>
</div> </div>
<div class="item-box2"> <div class="item-box2">
<div class="box2-1" style="color: #1677FF">{{ item.ragreeCount + "票" }}</div> <div class="box2-1" style="color: #1677ff">{{ item.ragreeCount + "票" }}</div>
<div class="box2-2" style="color: #FF9054">{{ item.ragainstCount + "票" }}</div> <div class="box2-2" style="color: #ff9054">{{ item.ragainstCount + "票" }}</div>
</div> </div>
<div class="item-box3"></div> <div class="item-box3"></div>
<div class="item-box4"> <div class="item-box4">
<div class="box4-1" style="color: #1677FF">{{ item.ragreePercent + "%" }}</div> <div class="box4-1" style="color: #1677ff">{{ item.ragreePercent + "%" }}</div>
<div class="box4-2" style="color: #FF9054">{{ item.ragainstPercent + "%" }}</div> <div class="box4-2" style="color: #ff9054">{{ item.ragainstPercent + "%" }}</div>
</div> </div>
<div class="item-box5"> <div class="item-box5">
<div class="box5-1" style="color: #CE4F51">{{ item.rreverseCount + "人" }}</div> <div class="box5-1" style="color: #ce4f51">{{ item.rreverseCount + "人" }}</div>
</div> </div>
<div class="item-box6"> <div class="item-box6">
<div class="img-box" v-if="item.rpersonImageUrl"> <div class="img-box" v-if="item.rpersonImageUrl">
...@@ -642,22 +683,22 @@ const handleGetBillAmeAnalyzeCount = async () => { ...@@ -642,22 +683,22 @@ const handleGetBillAmeAnalyzeCount = async () => {
// 兼容多种字段名,防止字段不存在导致图表消失 // 兼容多种字段名,防止字段不存在导致图表消失
// 顺序:最小(min), Q1(小), 中位数(median), Q3(大), 最大(max), 该法案(current) // 顺序:最小(min), Q1(小), 中位数(median), Q3(大), 最大(max), 该法案(current)
return [ return [
item.zsCount || item.zscs || item.zshs || 0, item.zsCount || item.zscs || item.zshs || 0,
item.jsx || item.pjx || 0, item.jsx || item.pjx || 0,
item.zws || item.zwcs || 0, item.zws || item.zwcs || 0,
item.pjs || item.pjcs || 0, item.pjs || item.pjcs || 0,
item.zdCount || item.zdcs || item.zdhs || 0, item.zdCount || item.zdcs || item.zdhs || 0,
item.dysc || item.dycs || 0 item.dysc || item.dycs || 0
]; ];
}); });
} catch (error) { } catch (error) {
console.error("修正案次数分析 error", error); console.error("修正案次数分析 error", error);
} }
}; };
// 获取投票分析 // 获取投票分析
const voteAnalysisList = ref([]); const voteAnalysisList = ref([]);
const formatDate = (dateStr) => { const formatDate = dateStr => {
if (!dateStr) return ""; if (!dateStr) return "";
const date = new Date(dateStr); const date = new Date(dateStr);
const y = date.getFullYear(); const y = date.getFullYear();
...@@ -674,26 +715,26 @@ const handleGetBillVoteAnalyze = async () => { ...@@ -674,26 +715,26 @@ const handleGetBillVoteAnalyze = async () => {
console.log("投票分析", res); console.log("投票分析", res);
voteAnalysisList.value = res.data; voteAnalysisList.value = res.data;
} catch (error) { } catch (error) {
console.error("投票分析 error", error); console.error("投票分析 error", error);
} }
}; };
onMounted(async () => { onMounted(async () => {
await handleGetBillTimeAnalyze(); await handleGetBillTimeAnalyze();
await handleGetBillAmeAnalyzeCount(); await handleGetBillAmeAnalyzeCount();
await handleGetBillVoteAnalyze(); await handleGetBillVoteAnalyze();
let chart1 = getBoxPlotChcart(chartData1.value, "天"); let chart1 = getBoxPlotChcart(chartData1.value, "天");
setChart(chart1, "chart1"); setChart(chart1, "chart1");
const countLabels = { const countLabels = {
max: '最大次数', max: "最大次数",
q3: '平均次数大', q3: "平均次数大",
median: '次数中位数', median: "次数中位数",
q1: '平均次数小', q1: "平均次数小",
min: '最小次数', min: "最小次数",
current: '该法案修正案数量' current: "该法案修正案数量"
}; };
let chart2 = getBoxPlotChcart(chartData2.value, "次", countLabels); let chart2 = getBoxPlotChcart(chartData2.value, "次", countLabels);
setChart(chart2, "chart2"); setChart(chart2, "chart2");
}); });
...@@ -773,7 +814,7 @@ onMounted(async () => { ...@@ -773,7 +814,7 @@ onMounted(async () => {
.left { .left {
margin-top: 16px; margin-top: 16px;
.box1 { .box1 {
width: 860px; width: 792px;
height: 415px; height: 415px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
border-radius: 10px; border-radius: 10px;
...@@ -845,7 +886,7 @@ onMounted(async () => { ...@@ -845,7 +886,7 @@ onMounted(async () => {
} }
} }
.box1-main-footer { .box1-main-footer {
width: 830px; width: 762px;
height: 40px; height: 40px;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
...@@ -865,13 +906,16 @@ onMounted(async () => { ...@@ -865,13 +906,16 @@ onMounted(async () => {
.box-footer-center { .box-footer-center {
margin-left: 13px; margin-left: 13px;
margin-top: 8px; margin-top: 8px;
width: 749px; width: 669px;
height: 24px; height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.box-footer-right { .box-footer-right {
margin-left: 13px; margin-left: 13px;
...@@ -893,7 +937,7 @@ onMounted(async () => { ...@@ -893,7 +937,7 @@ onMounted(async () => {
} }
.box2 { .box2 {
margin-top: 17px; margin-top: 17px;
width: 860px; width: 792px;
height: 415px; height: 415px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
border-radius: 10px; border-radius: 10px;
...@@ -1053,7 +1097,7 @@ onMounted(async () => { ...@@ -1053,7 +1097,7 @@ onMounted(async () => {
} }
} }
.box2-main-footer { .box2-main-footer {
width: 830px; width: 762px;
height: 40px; height: 40px;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
...@@ -1073,13 +1117,16 @@ onMounted(async () => { ...@@ -1073,13 +1117,16 @@ onMounted(async () => {
.box-footer-center { .box-footer-center {
margin-left: 13px; margin-left: 13px;
margin-top: 8px; margin-top: 8px;
width: 749px; width: 669px;
height: 24px; height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.box-footer-right { .box-footer-right {
margin-left: 13px; margin-left: 13px;
...@@ -1103,7 +1150,7 @@ onMounted(async () => { ...@@ -1103,7 +1150,7 @@ onMounted(async () => {
.right { .right {
margin-left: 16px; margin-left: 16px;
margin-top: 16px; margin-top: 16px;
width: 868px; width: 792px;
height: 847px; height: 847px;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
.box3 { .box3 {
...@@ -1336,7 +1383,7 @@ onMounted(async () => { ...@@ -1336,7 +1383,7 @@ onMounted(async () => {
} }
} }
.box3-main-footer { .box3-main-footer {
width: 830px; width: 762px;
height: 40px; height: 40px;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
...@@ -1356,13 +1403,16 @@ onMounted(async () => { ...@@ -1356,13 +1403,16 @@ onMounted(async () => {
.box-footer-center { .box-footer-center {
margin-left: 13px; margin-left: 13px;
margin-top: 8px; margin-top: 8px;
width: 749px; width: 669px;
height: 24px; height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.box-footer-right { .box-footer-right {
margin-left: 13px; margin-left: 13px;
......
...@@ -635,7 +635,7 @@ onMounted(() => { ...@@ -635,7 +635,7 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.process-overview-wrap { .process-overview-wrap {
width: 1744px; width: 1600px;
height: 848px; height: 848px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
</div> </div>
</div> </div>
<div class="info-right"> <div class="info-right">
<div class="info-right-title">{{ curPerson.name }}</div> <div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
<div class="info-right-item"> <div class="info-right-item">
<div class="item-left">英文名:</div> <div class="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div> <div class="item-right">{{ curPerson.ename }}</div>
...@@ -889,6 +889,7 @@ onMounted(() => { ...@@ -889,6 +889,7 @@ onMounted(() => {
margin-top: 25px; margin-top: 25px;
display: flex; display: flex;
.info-left { .info-left {
cursor: pointer;
img { img {
width: 128px; width: 128px;
height: 128px; height: 128px;
...@@ -935,6 +936,7 @@ onMounted(() => { ...@@ -935,6 +936,7 @@ onMounted(() => {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
cursor: pointer;
} }
.info-right-item { .info-right-item {
margin-top: 8px; margin-top: 8px;
...@@ -1110,6 +1112,7 @@ onMounted(() => { ...@@ -1110,6 +1112,7 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
cursor: pointer;
} }
.info-right-item { .info-right-item {
margin-top: 8px; margin-top: 8px;
......
...@@ -978,6 +978,7 @@ onUnmounted(() => { ...@@ -978,6 +978,7 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
height: 44px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
...@@ -1024,7 +1025,13 @@ onUnmounted(() => { ...@@ -1024,7 +1025,13 @@ onUnmounted(() => {
font-weight: 400; font-weight: 400;
} }
.wrapper { .wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.header { .header {
position: sticky;
top: 0;
z-index: 9999;
height: 64px; height: 64px;
color: #fff; color: #fff;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
<div class="icon"> <div class="icon">
<img src="./assets/images/search-icon1.png" alt="" /> <img src="./assets/images/search-icon1.png" alt="" />
</div> </div>
<el-input v-model="keyword" :border="false" style="width: 900px; height: 100%" @keyup.enter="handleSearch" /> <el-input v-model="keyword" :border="false" style="width: 900px" @keyup.enter="handleSearch" />
</div> </div>
<div class="right" @click="handleSearch"> <div class="right" @click="handleToAi">
<img src="./assets/images/ai-icon.png" alt="" /> <img src="./assets/images/ai-icon.png" alt="" />
</div> </div>
</div> </div>
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
<div class="text-box"> <div class="text-box">
搜索关键词:<span class="text-2">{{ keyword }}</span> 搜索关键词:<span class="text-2">{{ keyword }}</span>
</div> </div>
<div class="text-box"> <!-- <div class="text-box">
当前领域:<span class="text-2">{{ curArea }}</span> 当前领域:<span class="text-2">{{ curArea }}</span>
</div> </div> -->
</div> </div>
<!-- <div class="info-right"> <!-- <div class="info-right">
<el-select v-model="selectTime" placeholder="选择时间" style="width: 125px"> <el-select v-model="selectTime" placeholder="选择时间" style="width: 125px">
...@@ -262,6 +262,13 @@ const handleClickDomains = domain => { ...@@ -262,6 +262,13 @@ const handleClickDomains = domain => {
handleSearch(); handleSearch();
}; };
function highlightText(text, keyword) {
if (!text || !keyword) return text;
const regex = new RegExp(`(${keyword})`, 'gi');
return text.replace(regex, '<span style="color: red; font-weight: bold;">$1</span>');
}
const handleSearch = async () => { const handleSearch = async () => {
let params; let params;
if (activeTabId.value) { if (activeTabId.value) {
...@@ -292,6 +299,10 @@ const handleSearch = async () => { ...@@ -292,6 +299,10 @@ const handleSearch = async () => {
})); }));
} }
searchResults.value = res.data.records; searchResults.value = res.data.records;
searchResults.value.forEach(item => {
item.originalTitle = highlightText(item.originalTitle, keyword.value)
item.originalDescription = highlightText(item.originalDescription, keyword.value)
})
totalNum.value = res.data.total; totalNum.value = res.data.total;
if (totalNum.value) { if (totalNum.value) {
ElMessage.success(`共计搜索到${totalNum.value}条结果`); ElMessage.success(`共计搜索到${totalNum.value}条结果`);
...@@ -475,27 +486,26 @@ onMounted(() => { ...@@ -475,27 +486,26 @@ onMounted(() => {
} }
handleSearch(); handleSearch();
}); });
const handleToAi = () => {
const route = router.resolve({
path: "/chat"
});
window.open(route.href, "_blank");
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.wrapper { .wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url("../assets/images/background.png") no-repeat; background: url("../assets/images/background.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow-y: auto;
.header { .header {
margin-top: 24px; margin-top: 24px;
position: relative; // position: sticky;
// top: 24px;
.header-right { .header-right {
position: absolute; position: absolute;
width: 360px; width: 360px;
...@@ -589,12 +599,12 @@ onMounted(() => { ...@@ -589,12 +599,12 @@ onMounted(() => {
margin-top: 12px; margin-top: 12px;
height: 48px; height: 48px;
display: flex; display: flex;
margin-left: 257px; margin-left: 240px;
align-items: center;
.tab-left { .tab-left {
width: 726px; width: 726px;
height: 48px; height: 48px;
display: flex; display: flex;
justify-content: flex-start;
gap: 32px; gap: 32px;
.tab { .tab {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -655,7 +665,7 @@ onMounted(() => { ...@@ -655,7 +665,7 @@ onMounted(() => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
margin-left: 256px; margin-left: 240px;
.tag { .tag {
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
...@@ -678,7 +688,7 @@ onMounted(() => { ...@@ -678,7 +688,7 @@ onMounted(() => {
} }
.info-box { .info-box {
margin-top: 26px; margin-top: 26px;
margin-left: 257px; margin-left: 240px;
width: 920px; width: 920px;
height: 32px; height: 32px;
display: flex; display: flex;
...@@ -748,7 +758,7 @@ onMounted(() => { ...@@ -748,7 +758,7 @@ onMounted(() => {
width: 913px; width: 913px;
// height: 1464px; // height: 1464px;
margin-top: 36px; margin-top: 36px;
margin-left: 264px; margin-left: 240px;
.item { .item {
width: 913px; width: 913px;
min-height: 108px; min-height: 108px;
...@@ -848,7 +858,17 @@ onMounted(() => { ...@@ -848,7 +858,17 @@ onMounted(() => {
justify-content: center; justify-content: center;
} }
} }
:deep(.el-input__wrapper) {
box-shadow: none;
height: 46px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-input__inner) { :deep(.el-input__inner) {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
......
...@@ -285,17 +285,17 @@ ...@@ -285,17 +285,17 @@
<div class="header-title">{{ "社交媒体" }}</div> <div class="header-title">{{ "社交媒体" }}</div>
</div> </div>
<div class="box4-main"> <div class="box4-main">
<MessageBubble <MessageBubble
v-for="(item, index) in messageList" v-for="(item, index) in messageList"
@click="handleClickPerson(item)" @click="handleClickPerson(item)"
@info-click="handleMediaClick(item)" @info-click="handleMediaClick(item)"
:key="index" :key="index"
:avatar="item.img ? item.img : DefaultIcon1" :avatar="item.img ? item.img : DefaultIcon1"
:name="item.name" :name="item.name"
:time="item.time" :time="item.time"
:source="item.source" :source="item.source"
:content="item.content" :content="item.content"
/> />
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index"> <!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)"> <div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" /> <img :src="item.img ? item.img : DefaultIcon1" alt="" />
...@@ -407,8 +407,7 @@ ...@@ -407,8 +407,7 @@
</div> </div>
<div class="header-title">{{ "政令重点条款" }}</div> <div class="header-title">{{ "政令重点条款" }}</div>
</div> </div>
<div class="box8-main" id="wordCloudChart"> <div class="box8-main" id="wordCloudChart"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -561,7 +560,7 @@ ...@@ -561,7 +560,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed, watch } from "vue"; import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router"; import router from "@/router";
import HeaderMenu from "@/components/headerMenu.vue"; import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue"; import headerInfo from "@/components/headerInfo.vue";
...@@ -1141,19 +1140,25 @@ const handleSwithSort = () => { ...@@ -1141,19 +1140,25 @@ const handleSwithSort = () => {
}; };
const handleToPosi = id => { const handleToPosi = id => {
// 0 618 1240 2350 const element = document.getElementById(id);
switch (id) { if (element && containerRef.value) {
case "position2": // 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
containerRef.value.scrollTop = isShow.value ? 844 : 1190; if (!isShow.value) {
break; isShow.value = true;
case "position3": }
containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
break; // 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
case "position4": nextTick(() => {
containerRef.value.scrollTop = isShow.value ? 2554 : 2900; const containerRect = containerRef.value.getBoundingClientRect();
break; const elementRect = element.getBoundingClientRect();
default: // 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
containerRef.value.scrollTop = 0; const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
} }
}; };
...@@ -1583,7 +1588,7 @@ onMounted(async () => { ...@@ -1583,7 +1588,7 @@ onMounted(async () => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.65);
align-items: center; align-items: center;
gap:17px; gap: 17px;
margin: 0 6px 16px 6px; margin: 0 6px 16px 6px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
......
...@@ -42,9 +42,9 @@ ...@@ -42,9 +42,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef"> <div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main-header"> <div class="home-main-header">
<div class="home-main-header-top" v-show="!isShow"> <div class="home-main-header-top" v-show="!isShow">
<div class="header-left"> <div class="header-left">
<HeaderMenu></HeaderMenu> <HeaderMenu></HeaderMenu>
</div> </div>
...@@ -592,7 +592,7 @@ ...@@ -592,7 +592,7 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed, reactive } from "vue"; import { onMounted, ref, computed, reactive, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop"; import scrollToTop from "@/utils/scrollToTop";
import router from "@/router"; import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
...@@ -657,22 +657,26 @@ import { useContainerScroll } from "@/hooks/useScrollShow"; ...@@ -657,22 +657,26 @@ import { useContainerScroll } from "@/hooks/useScrollShow";
const containerRef = ref(null); const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef); const { isShow } = useContainerScroll(containerRef);
const handleToPosi = id => { const handleToPosi = id => {
// 0 618 1240 2350 const element = document.getElementById(id);
switch (id) { if (element && containerRef.value) {
case "position2": // 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
// containerRef.value.scrollTop = isShow.value ? 744 : 1090; if (!isShow.value) {
containerRef.value.scrollTop = isShow.value ? 900 : 1150; isShow.value = true;
break; }
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1730; // 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
break; nextTick(() => {
case "position4": const containerRect = containerRef.value.getBoundingClientRect();
containerRef.value.scrollTop = isShow.value ? 2545 : 2795; const elementRect = element.getBoundingClientRect();
break; // 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
default: const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTop = 0;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
} }
}; };
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论