105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<div class="resource-center-page">
|
||
|
|
<!-- 导航栏 -->
|
||
|
|
<div class="resource-nav">
|
||
|
|
<div
|
||
|
|
class="nav-tab"
|
||
|
|
v-for="tab in tabs"
|
||
|
|
:key="tab.key"
|
||
|
|
:class="{ active: activeTab === tab.key }"
|
||
|
|
@click="activeTab = tab.key"
|
||
|
|
>
|
||
|
|
{{ tab.label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 内容区域 -->
|
||
|
|
<div class="resource-content">
|
||
|
|
<component :is="currentComponent" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } from 'vue';
|
||
|
|
import MediaArchive from './components/MediaArchive.vue';
|
||
|
|
import PartyHistoryLearning from './PartyHistoryLearningView.vue';
|
||
|
|
import PolicySpeech from './components/PolicySpeech.vue';
|
||
|
|
import PolicyInterpretation from './PolicyInterpretationView.vue';
|
||
|
|
import RedClassic from './RedClassicView.vue';
|
||
|
|
import SpecialReport from './SpecialReportView.vue';
|
||
|
|
import WorldCase from './WorldCaseView.vue';
|
||
|
|
|
||
|
|
const activeTab = ref('media');
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{ key: 'media', label: '媒体档案' },
|
||
|
|
{ key: 'party-history', label: '党史学习' },
|
||
|
|
{ key: 'policy-speech', label: '政策讲话' },
|
||
|
|
{ key: 'policy-interpretation', label: '政策解读' },
|
||
|
|
{ key: 'red-classic', label: '红色经典' },
|
||
|
|
{ key: 'special-report', label: '专题报告' },
|
||
|
|
{ key: 'world-case', label: '世界案例' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const componentMap: Record<string, any> = {
|
||
|
|
'media': MediaArchive,
|
||
|
|
'party-history': PartyHistoryLearning,
|
||
|
|
'policy-speech': PolicySpeech,
|
||
|
|
'policy-interpretation': PolicyInterpretation,
|
||
|
|
'red-classic': RedClassic,
|
||
|
|
'special-report': SpecialReport,
|
||
|
|
'world-case': WorldCase
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentComponent = computed(() => componentMap[activeTab.value]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.resource-center-page {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-nav {
|
||
|
|
background: white;
|
||
|
|
padding: 0 40px;
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
border-bottom: 1px solid #e0e0e0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-tab {
|
||
|
|
padding: 16px 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #666;
|
||
|
|
position: relative;
|
||
|
|
transition: all 0.3s;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #C62828;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
color: #C62828;
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 3px;
|
||
|
|
background: #C62828;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-content {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|