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

update

上级 800667be
<template>
<div id="app">
<div class="pro-wrapper">
<div class="home-page" v-show="isCurrentOverview">
<div class="home-page" v-if="isCurrentOverview">
<div class="navbar">
<div class="nav-left">
<div class="icon">
......@@ -53,7 +53,7 @@
<router-view />
</div>
</div>
<div class="content-page" v-show="!isCurrentOverview">
<div class="content-page" v-if="!isCurrentOverview">
<div class="navbar">
<div class="nav-brand">
<div class="brand-icon">
......@@ -136,8 +136,8 @@ const route = useRoute()
const handleToHome = () => {
router.push({
path: "/ZMOverView"
// path: "/overview"
});
isCurrentOverview.value = true;
};
const isShowAiBox = ref(false);
......@@ -150,10 +150,6 @@ const openAiBox = () => {
isShowAiBox.value = true;
};
const handleHomeCommand = command => {
router.push(command);
};
const personTypeList = ref([]);
// 获取人物类别
......
......@@ -933,7 +933,7 @@ onMounted(() => {
width: 1064px;
height: 846px;
.box2 {
width: 1210px;
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -948,7 +948,7 @@ onMounted(() => {
}
.box3 {
margin-top: 16px;
width: 1210px;
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......
......@@ -635,7 +635,7 @@ onMounted(() => {
<style lang="scss" scoped>
.process-overview-wrap {
width: 1744px;
width: 1600px;
height: 848px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
......
......@@ -183,7 +183,7 @@
</div>
</div>
<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="item-left">英文名:</div>
<div class="item-right">{{ curPerson.ename }}</div>
......@@ -889,6 +889,7 @@ onMounted(() => {
margin-top: 25px;
display: flex;
.info-left {
cursor: pointer;
img {
width: 128px;
height: 128px;
......@@ -935,6 +936,7 @@ onMounted(() => {
font-size: 16px;
font-weight: 600;
line-height: 22px;
cursor: pointer;
}
.info-right-item {
margin-top: 8px;
......@@ -1110,6 +1112,7 @@ onMounted(() => {
line-height: 22px;
text-align: center;
margin-bottom: 50px;
cursor: pointer;
}
.info-right-item {
margin-top: 8px;
......
......@@ -978,6 +978,7 @@ onUnmounted(() => {
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
height: 44px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
......@@ -1024,7 +1025,13 @@ onUnmounted(() => {
font-weight: 400;
}
.wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.header {
position: sticky;
top: 0;
z-index: 9999;
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
......
......@@ -6,9 +6,9 @@
<div class="icon">
<img src="./assets/images/search-icon1.png" alt="" />
</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 class="right" @click="handleSearch">
<div class="right" @click="handleToAi">
<img src="./assets/images/ai-icon.png" alt="" />
</div>
</div>
......@@ -51,9 +51,9 @@
<div class="text-box">
搜索关键词:<span class="text-2">{{ keyword }}</span>
</div>
<div class="text-box">
<!-- <div class="text-box">
当前领域:<span class="text-2">{{ curArea }}</span>
</div>
</div> -->
</div>
<!-- <div class="info-right">
<el-select v-model="selectTime" placeholder="选择时间" style="width: 125px">
......@@ -262,6 +262,13 @@ const handleClickDomains = domain => {
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 () => {
let params;
if (activeTabId.value) {
......@@ -292,6 +299,10 @@ const handleSearch = async () => {
}));
}
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;
if (totalNum.value) {
ElMessage.success(`共计搜索到${totalNum.value}条结果`);
......@@ -475,27 +486,26 @@ onMounted(() => {
}
handleSearch();
});
const handleToAi = () => {
const route = router.resolve({
path: "/chat"
});
window.open(route.href, "_blank");
};
</script>
<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 {
width: 100%;
height: 100%;
background: url("../assets/images/background.png") no-repeat;
background-size: 100% 100%;
overflow-y: auto;
.header {
margin-top: 24px;
position: relative;
// position: sticky;
// top: 24px;
.header-right {
position: absolute;
width: 360px;
......@@ -589,12 +599,12 @@ onMounted(() => {
margin-top: 12px;
height: 48px;
display: flex;
margin-left: 257px;
align-items: center;
margin-left: 240px;
.tab-left {
width: 726px;
height: 48px;
display: flex;
justify-content: flex-start;
gap: 32px;
.tab {
color: rgba(59, 65, 75, 1);
......@@ -655,7 +665,7 @@ onMounted(() => {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-left: 256px;
margin-left: 240px;
.tag {
height: 32px;
line-height: 30px;
......@@ -678,7 +688,7 @@ onMounted(() => {
}
.info-box {
margin-top: 26px;
margin-left: 257px;
margin-left: 240px;
width: 920px;
height: 32px;
display: flex;
......@@ -748,7 +758,7 @@ onMounted(() => {
width: 913px;
// height: 1464px;
margin-top: 36px;
margin-left: 264px;
margin-left: 240px;
.item {
width: 913px;
min-height: 108px;
......@@ -848,7 +858,17 @@ onMounted(() => {
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) {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......
......@@ -285,17 +285,17 @@
<div class="header-title">{{ "社交媒体" }}</div>
</div>
<div class="box4-main">
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<MessageBubble
v-for="(item, index) in messageList"
@click="handleClickPerson(item)"
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.img ? item.img : DefaultIcon1"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
......@@ -407,8 +407,7 @@
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box8-main" id="wordCloudChart">
</div>
<div class="box8-main" id="wordCloudChart"></div>
</div>
</div>
</div>
......@@ -561,7 +560,7 @@
</template>
<script setup>
import { onMounted, ref, computed, watch } from "vue";
import { onMounted, ref, computed, watch, nextTick } from "vue";
import router from "@/router";
import HeaderMenu from "@/components/headerMenu.vue";
import headerInfo from "@/components/headerInfo.vue";
......@@ -1141,19 +1140,25 @@ const handleSwithSort = () => {
};
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
containerRef.value.scrollTop = isShow.value ? 844 : 1190;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1826;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2554 : 2900;
break;
default:
containerRef.value.scrollTop = 0;
const element = document.getElementById(id);
if (element && containerRef.value) {
// 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
......@@ -1583,7 +1588,7 @@ onMounted(async () => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
align-items: center;
gap:17px;
gap: 17px;
margin: 0 6px 16px 6px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
......
......@@ -42,9 +42,9 @@
</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-top" v-show="!isShow">
<div class="home-main-header-top" v-show="!isShow">
<div class="header-left">
<HeaderMenu></HeaderMenu>
</div>
......@@ -592,7 +592,7 @@
</template>
<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import { onMounted, ref, computed, reactive, nextTick } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
......@@ -657,22 +657,26 @@ import { useContainerScroll } from "@/hooks/useScrollShow";
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const handleToPosi = id => {
// 0 618 1240 2350
switch (id) {
case "position2":
// containerRef.value.scrollTop = isShow.value ? 744 : 1090;
containerRef.value.scrollTop = isShow.value ? 900 : 1150;
break;
case "position3":
containerRef.value.scrollTop = isShow.value ? 1480 : 1730;
break;
case "position4":
containerRef.value.scrollTop = isShow.value ? 2545 : 2795;
break;
default:
containerRef.value.scrollTop = 0;
const element = document.getElementById(id);
if (element && containerRef.value) {
// 1. 如果是从完整搜索框跳转,先强制切换状态稳定布局
if (!isShow.value) {
isShow.value = true;
}
// 2. 使用 nextTick 等待 DOM 布局(如高度切换)完成后再进行坐标计算
nextTick(() => {
const containerRect = containerRef.value.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
// 使用 getBoundingClientRect 计算元素相对于容器顶部的绝对距离,不受嵌套布局影响
const top = elementRect.top - containerRect.top + containerRef.value.scrollTop;
containerRef.value.scrollTo({
top: top,
behavior: "smooth"
});
});
}
};
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论