提交 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;
......
...@@ -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;
......
...@@ -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;
......
...@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论