fix:师资详情页面,积分中心页面路由配置点击,顶部tab切换bug修复
This commit is contained in:
parent
37198b3b37
commit
2d0dd00fc4
@ -92,9 +92,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<div v-if="!userStore.isLoggedIn" class="auth-buttons">
|
||||
<div v-if="!userStore.isLoggedIn" class="auth-buttons" @click="showLoginModal">
|
||||
<div class="auth-combined-btn">
|
||||
<span class="auth-login" @click="showLoginModal">{{ t('header.login') }}</span>
|
||||
<span class="auth-login" >{{ t('header.login') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, h, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
@ -139,6 +139,7 @@ import RegisterNotice from '@/components/auth/RegisterNotice.vue'
|
||||
import SafeAvatar from '@/components/common/SafeAvatar.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { t, locale } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
|
||||
@ -163,6 +164,34 @@ const mobileMenuOpen = ref(false)
|
||||
// 当前激活的菜单项
|
||||
const activeKey = ref('home')
|
||||
|
||||
// 根据当前路由设置激活状态
|
||||
const setActiveKeyFromRoute = () => {
|
||||
const currentPath = route.path
|
||||
|
||||
if (currentPath === '/') {
|
||||
activeKey.value = 'home'
|
||||
} else if (currentPath === '/courses') {
|
||||
activeKey.value = 'courses'
|
||||
} else if (currentPath === '/special-training') {
|
||||
activeKey.value = 'training'
|
||||
} else if (currentPath === '/faculty') {
|
||||
activeKey.value = 'faculty'
|
||||
} else if (currentPath === '/resources') {
|
||||
activeKey.value = 'resources'
|
||||
} else if (currentPath === '/activities') {
|
||||
activeKey.value = 'activities'
|
||||
} else if (currentPath === '/ai') {
|
||||
activeKey.value = 'ai'
|
||||
} else if (currentPath === '/ai-companion') {
|
||||
activeKey.value = 'practice'
|
||||
} else if (currentPath === '/learning-center') {
|
||||
activeKey.value = 'learning-center'
|
||||
} else {
|
||||
// 对于其他页面,不设置任何激活状态
|
||||
activeKey.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 认证模态框相关
|
||||
const loginModalVisible = ref(false)
|
||||
const registerModalVisible = ref(false)
|
||||
@ -311,11 +340,18 @@ const handleClickOutside = (event: MouseEvent) => {
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
// 初始化时根据当前路由设置激活状态
|
||||
setActiveKeyFromRoute()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
// 监听路由变化,更新激活状态
|
||||
watch(() => route.path, () => {
|
||||
setActiveKeyFromRoute()
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
@ -25,6 +25,7 @@ import LocalVideoDemo from '@/views/LocalVideoDemo.vue'
|
||||
import SpecialTraining from '@/views/SpecialTraining.vue'
|
||||
import SpecialTrainingDetail from '@/views/SpecialTrainingDetail.vue'
|
||||
import HelpCenter from '@/views/HelpCenter.vue'
|
||||
import LearningCenter from '@/views/LearningCenter.vue'
|
||||
|
||||
// ========== 管理员后台组件 ==========
|
||||
import AdminDashboard from '@/views/teacher/AdminDashboard.vue'
|
||||
@ -281,6 +282,14 @@ const routes: RouteRecordRaw[] = [
|
||||
meta: { title: '帮助中心' }
|
||||
},
|
||||
|
||||
// 学习中心(积分中心)
|
||||
{
|
||||
path: '/learning-center',
|
||||
name: 'LearningCenter',
|
||||
component: LearningCenter,
|
||||
meta: { title: '积分中心', requiresAuth: true }
|
||||
},
|
||||
|
||||
// 首页与课程
|
||||
{
|
||||
path: '/service-agreement',
|
||||
|
@ -36,7 +36,7 @@
|
||||
|
||||
<!-- 师资卡片网格 -->
|
||||
<div class="faculty-grid">
|
||||
<div v-for="teacher in paginatedTeachers" :key="teacher.id" class="faculty-card">
|
||||
<div v-for="teacher in paginatedTeachers" :key="teacher.id" class="faculty-card" @click="navigateToTeacherDetail(teacher.id)">
|
||||
<div class="card-header">
|
||||
<div class="avatar-container"
|
||||
@mouseenter="showCourseInfo(teacher.id)"
|
||||
@ -55,7 +55,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-arrow">
|
||||
<div class="card-arrow" @click="navigateToTeacherDetail(teacher.id)">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
@ -471,10 +471,10 @@ const goToPage = (page: number) => {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .faculty-card:hover {
|
||||
.faculty-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
} */
|
||||
}
|
||||
|
||||
.card-header {
|
||||
position: relative;
|
||||
@ -525,6 +525,7 @@ height: 37px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-arrowhead {
|
||||
|
Loading…
x
Reference in New Issue
Block a user