duanhao/SocialNetworks_duan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航栏修改

Browse Source
This commit is contained in:
duanhao 2025-08-15 13:51:57 +08:00
parent 9c6cd01c70
commit 3747f5f4ec
4 changed files with 155 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/images/navigation/nav-name-next.svg Normal file
View File

@ -0,0 +1,42 @@
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_877_12527)">
<path d="M12.068 12.9101C11.7644 12.2755 12.5476 11.687 13.0283 12.1885L21.7254 21.2629C22.1156 21.67 22.1156 22.33 21.7254 22.7371L13.0283 31.8115C12.5476 32.313 11.7644 31.7245 12.068 31.0899L15.9711 22.9311C16.2515 22.3448 16.2515 21.6552 15.9711 21.0689L12.068 12.9101Z" fill="#FDF5CF"/>
</g>
<g filter="url(#filter1_dd_877_12527)">
<path d="M28.0388 14.7286C27.7959 14.2209 28.4224 13.7501 28.807 14.1513L35.7647 21.4107C36.0768 21.7363 36.0768 22.2644 35.7647 22.59L28.807 29.8494C28.4224 30.2506 27.7959 29.7798 28.0388 29.2721L31.1612 22.7452C31.3856 22.2762 31.3856 21.7245 31.1612 21.2555L28.0388 14.7286Z" fill="#FDF5CF"/>
</g>
<defs>
<filter id="filter0_dd_877_12527" x="0" y="0" width="34.0176" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_877_12527"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 0.77 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_877_12527" result="effect2_dropShadow_877_12527"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_877_12527" result="shape"/>
</filter>
<filter id="filter1_dd_877_12527" x="18.3844" y="4.40055" width="27.2135" height="35.1996" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4.79997"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_877_12527"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2.39998"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 0.77 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_877_12527" result="effect2_dropShadow_877_12527"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_877_12527" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

42
src/assets/images/navigation/nav-name-pre.svg Normal file
View File

@ -0,0 +1,42 @@
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd_877_12531)">
<path d="M33.932 12.9101C34.2356 12.2755 33.4524 11.687 32.9717 12.1885L24.2746 21.2629C23.8844 21.67 23.8844 22.33 24.2746 22.7371L32.9717 31.8115C33.4524 32.313 34.2356 31.7245 33.932 31.0899L30.0289 22.9311C29.7485 22.3448 29.7485 21.6552 30.0289 21.0689L33.932 12.9101Z" fill="#FDF5CF"/>
</g>
<g filter="url(#filter1_dd_877_12531)">
<path d="M17.9612 14.7286C18.2041 14.2209 17.5776 13.7501 17.193 14.1513L10.2353 21.4107C9.92315 21.7363 9.92315 22.2644 10.2353 22.59L17.193 29.8494C17.5776 30.2506 18.2041 29.7798 17.9612 29.2721L14.8388 22.7452C14.6144 22.2762 14.6144 21.7245 14.8388 21.2555L17.9612 14.7286Z" fill="#FDF5CF"/>
</g>
<defs>
<filter id="filter0_dd_877_12531" x="11.9824" y="0" width="34.0176" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_877_12531"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 0.77 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_877_12531" result="effect2_dropShadow_877_12531"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_877_12531" result="shape"/>
</filter>
<filter id="filter1_dd_877_12531" x="0.40202" y="4.40055" width="27.2135" height="35.1996" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4.79997"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_877_12531"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="2.39998"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.838314 0 0 0 0 0.775296 0 0 0 0 0.475963 0 0 0 0.77 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_877_12531" result="effect2_dropShadow_877_12531"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_877_12531" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

2
src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue
View File

@ -87,7 +87,7 @@ const initTopicChart = () => {
data: ["6.25", "6.26", "6.27", "6.28", "6.29", "6.30", "7.1", "7.2"], data: ["6.25", "6.26", "6.27", "6.28", "6.29", "6.30", "7.1", "7.2"],
name: "日期", name: "日期",
nameLocation: "end", nameLocation: "end",
nameGap: 10, nameGap: 5,
nameTextStyle: { nameTextStyle: {
color: "#606266", color: "#606266",
fontSize: 12 fontSize: 12

78
src/views/Navigation/index.vue
View File

@ -15,10 +15,14 @@
<!-- 中间背景图片区域 --> <!-- 中间背景图片区域 -->
<div class="main-middle"> <div class="main-middle">
<div class="nav-name"> <div class="nav-name">
<img src="@/assets/images/navigation/nav-name.png" alt="" /> <img class="nav-name-pre" src="@/assets/images/navigation/nav-name-pre.svg" alt="" />
<div class="nav-name-text-container">
<div class="nav-name-text">{{ currentTitle }}</div>
</div>
<img class="nav-name-next" src="@/assets/images/navigation/nav-name-next.svg" alt="" />
</div> </div>
<!-- ====== 这里是导航菜单（已接入 Swiper） ====== --> <!-- 这里是导航菜单（已接入 Swiper）-->
<div class="navigation-menu"> <div class="navigation-menu">
<Swiper <Swiper
:modules="modules" :modules="modules"
@ -42,6 +46,7 @@
:preventClicksPropagation="true" :preventClicksPropagation="true"
:slideToClickedSlide="false" :slideToClickedSlide="false"
@swiper="onSwiper" @swiper="onSwiper"
@slideChange="onSlideChange"
@setTranslate="onSetTranslate" @setTranslate="onSetTranslate"
@setTransition="onSetTransition" @setTransition="onSetTransition"
class="progress-swiper" class="progress-swiper"
@ -80,7 +85,7 @@ import { ref } from "vue"
import { Swiper, SwiperSlide } from "swiper/vue" import { Swiper, SwiperSlide } from "swiper/vue"
import { Navigation, Pagination, EffectCoverflow, Mousewheel } from "swiper/modules" import { Navigation, Pagination, EffectCoverflow, Mousewheel } from "swiper/modules"
import { useRouter } from "vue-router" // 引入路由钩子 import { useRouter } from "vue-router"
// Swiper 样式 // Swiper 样式
import "swiper/css" import "swiper/css"
@ -89,7 +94,7 @@ import "swiper/css/pagination"
const modules = [Navigation, Pagination, EffectCoverflow, Mousewheel] const modules = [Navigation, Pagination, EffectCoverflow, Mousewheel]
// 10 个导航项（按你的要求） // 10 个导航项
const navItems = ref([ const navItems = ref([
"重大舆情事件锚点", "重大舆情事件锚点",
"传播意见领袖", "传播意见领袖",
@ -103,7 +108,10 @@ const navItems = ref([
"异常群体" "异常群体"
]) ])
const router = useRouter() // 初始化路由 // 新增：创建响应式变量存储当前标题
const currentTitle = ref("导航菜单")
const router = useRouter()
// 导航项与路由的映射关系 // 导航项与路由的映射关系
const navToRouteMap = { const navToRouteMap = {
@ -119,10 +127,44 @@ const navToRouteMap = {
异常群体: "/group-evolution-4" 异常群体: "/group-evolution-4"
} }
// 新增：定义导航项类别分组
const navCategories = {
关键节点识别: ["重大舆情事件锚点", "传播意见领袖", "传播桥梁节点"],
链路预测: ["人物社交隐关系", "人物互动隐关系", "社交紧密团体"],
群体演化分析: ["群体识别", "群体结构演化", "群体成员演化", "异常群体"]
}
// 保存 Swiper 实例 // 保存 Swiper 实例
const swiperRef = ref(null) const swiperRef = ref(null)
const onSwiper = (swiper) => { const onSwiper = (swiper) => {
swiperRef.value = swiper swiperRef.value = swiper
// 初始化标题
updateCurrentTitle()
}
// 新增：更新当前标题的函数
const updateCurrentTitle = () => {
if (!swiperRef.value) return
// 获取当前活动的slide索引
const activeIndex = swiperRef.value.activeIndex
// 获取实际数据索引（考虑loop模式）
const realIndex = swiperRef.value.realIndex
// 获取当前居中的导航项
const activeItem = navItems.value[realIndex]
// 判断所属类别并更新标题
for (const [category, items] of Object.entries(navCategories)) {
if (items.includes(activeItem)) {
currentTitle.value = category
break
}
}
}
// 新增：监听slideChange事件
const onSlideChange = () => {
updateCurrentTitle()
} }
// 只有 active 卡片才跳路由；否则先滑到中间 // 只有 active 卡片才跳路由；否则先滑到中间
@ -238,13 +280,33 @@ const onSetTransition = (swiper, duration) => {
.nav-name { .nav-name {
position: absolute; position: absolute;
top: 10%; top: 10%;
width: 100%;
height: 8%; height: 8%;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { .nav-name-pre {
width: 100%; /* 移除绝对定位 */
width: 8%;
height: 100%;
object-fit: contain;
}
.nav-name-text-container {
flex: 0 1 auto; /* 不伸缩，但可收缩 */
display: flex;
justify-content: center;
}
.nav-name-text {
text-align: center;
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-style: Regular;
font-size: 40px;
color: #fff;
}
.nav-name-next {
/* 移除绝对定位 */
width: 8%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }