diff --git a/src/assets/images/navigation/nav-name-next.svg b/src/assets/images/navigation/nav-name-next.svg new file mode 100644 index 0000000..c265658 --- /dev/null +++ b/src/assets/images/navigation/nav-name-next.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/navigation/nav-name-pre.svg b/src/assets/images/navigation/nav-name-pre.svg new file mode 100644 index 0000000..9ee6440 --- /dev/null +++ b/src/assets/images/navigation/nav-name-pre.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue index d2675e5..0b96945 100644 --- a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue +++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue @@ -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 diff --git a/src/views/Navigation/index.vue b/src/views/Navigation/index.vue index ce4d47c..cf4470d 100644 --- a/src/views/Navigation/index.vue +++ b/src/views/Navigation/index.vue @@ -15,10 +15,14 @@
- + +
+
{{ currentTitle }}
+
+
- +
{ 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; }