导航栏修改
This commit is contained in:
parent
9c6cd01c70
commit
3747f5f4ec
42
src/assets/images/navigation/nav-name-next.svg
Normal file
42
src/assets/images/navigation/nav-name-next.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
42
src/assets/images/navigation/nav-name-pre.svg
Normal file
42
src/assets/images/navigation/nav-name-pre.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -87,7 +87,7 @@ const initTopicChart = () => {
|
|||
data: ["6.25", "6.26", "6.27", "6.28", "6.29", "6.30", "7.1", "7.2"],
|
||||
name: "日期",
|
||||
nameLocation: "end",
|
||||
nameGap: 10,
|
||||
nameGap: 5,
|
||||
nameTextStyle: {
|
||||
color: "#606266",
|
||||
fontSize: 12
|
||||
|
|
|
|||
|
|
@ -15,10 +15,14 @@
|
|||
<!-- 中间背景图片区域 -->
|
||||
<div class="main-middle">
|
||||
<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>
|
||||
|
||||
<!-- ====== 这里是导航菜单（已接入 Swiper） ====== -->
|
||||
<!-- 这里是导航菜单（已接入 Swiper）-->
|
||||
<div class="navigation-menu">
|
||||
<Swiper
|
||||
:modules="modules"
|
||||
|
|
@ -42,6 +46,7 @@
|
|||
:preventClicksPropagation="true"
|
||||
:slideToClickedSlide="false"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange"
|
||||
@setTranslate="onSetTranslate"
|
||||
@setTransition="onSetTransition"
|
||||
class="progress-swiper"
|
||||
|
|
@ -80,7 +85,7 @@ import { ref } from "vue"
|
|||
import { Swiper, SwiperSlide } from "swiper/vue"
|
||||
import { Navigation, Pagination, EffectCoverflow, Mousewheel } from "swiper/modules"
|
||||
|
||||
import { useRouter } from "vue-router" // 引入路由钩子
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
// Swiper 样式
|
||||
import "swiper/css"
|
||||
|
|
@ -89,7 +94,7 @@ import "swiper/css/pagination"
|
|||
|
||||
const modules = [Navigation, Pagination, EffectCoverflow, Mousewheel]
|
||||
|
||||
// 10 个导航项（按你的要求）
|
||||
// 10 个导航项
|
||||
const navItems = ref([
|
||||
"重大舆情事件锚点",
|
||||
"传播意见领袖",
|
||||
|
|
@ -103,7 +108,10 @@ const navItems = ref([
|
|||
"异常群体"
|
||||
])
|
||||
|
||||
const router = useRouter() // 初始化路由
|
||||
// 新增：创建响应式变量存储当前标题
|
||||
const currentTitle = ref("导航菜单")
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 导航项与路由的映射关系
|
||||
const navToRouteMap = {
|
||||
|
|
@ -119,10 +127,44 @@ const navToRouteMap = {
|
|||
异常群体: "/group-evolution-4"
|
||||
}
|
||||
|
||||
// 新增：定义导航项类别分组
|
||||
const navCategories = {
|
||||
关键节点识别: ["重大舆情事件锚点", "传播意见领袖", "传播桥梁节点"],
|
||||
链路预测: ["人物社交隐关系", "人物互动隐关系", "社交紧密团体"],
|
||||
群体演化分析: ["群体识别", "群体结构演化", "群体成员演化", "异常群体"]
|
||||
}
|
||||
|
||||
// 保存 Swiper 实例
|
||||
const swiperRef = ref(null)
|
||||
const onSwiper = (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 卡片才跳路由；否则先滑到中间
|
||||
|
|
@ -238,13 +280,33 @@ const onSetTransition = (swiper, duration) => {
|
|||
.nav-name {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
height: 8%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
.nav-name-pre {
|
||||
/* 移除绝对定位 */
|
||||
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%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user