路由更新

schoolNewsWeb/src/views/resource-center/ResourceCenterView.vue

@@ -0,0 +1,104 @@
+<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>
+