Refactor code structure and remove redundant changes

pages/community/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <KlNavTab active="牛人社区" />
+  <div class="app-container">
+    <!-- 顶部 Banner -->
+    <div class="banner"> </div>
+
+    <!-- 生人推荐部分 -->
+    <section class="teacher-recommend text-center">
+      <h2>牛人推荐</h2>
+      <div class="teacher-cards">
+        <TeacherCard v-for="teacher in teachers" :key="teacher.id" :teacher="teacher" />
+      </div>
+    </section>
+
+    <!-- 生人列表部分 -->
+    <section class="teacher-list mt-30px text-center">
+      <h2>牛人列表</h2>
+      <div class="teacher-detail-cards">
+        <TeacherDetailCard v-for="teacher in teacherDetails" :key="teacher.id" :teacher="teacher" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import TeacherCard from './components/TeacherCard.vue'
+  import TeacherDetailCard from './components/TeacherDetailCard.vue'
+
+  const teachers = ref([
+    {
+      id: 1,
+      name: '王刚',
+      title: 'CAD建模技术、非标设备设计',
+      tags: ['在线工程', '电子产品'],
+    },
+    {
+      id: 1,
+      name: '王刚',
+      title: 'CAD建模技术、非标设备设计',
+      tags: ['在线工程', '电子产品'],
+    },
+    {
+      id: 1,
+      name: '王刚',
+      title: 'CAD建模技术、非标设备设计',
+      tags: ['在线工程', '电子产品'],
+    },
+    {
+      id: 1,
+      name: '王刚',
+      title: 'CAD建模技术、非标设备设计',
+      tags: ['在线工程', '电子产品'],
+    },
+    {
+      id: 1,
+      name: '王刚',
+      title: 'CAD建模技术、非标设备设计',
+      tags: ['在线工程', '电子产品'],
+    },
+    // ... 其他教师数据
+  ])
+
+  const teacherDetails = ref([
+    {
+      id: 1,
+      name: '王刚',
+      university: '重庆工商大学',
+      works: 568,
+      students: 378,
+      tags: ['在线工程', '电子产品', '设计方案'],
+      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
+    },
+    {
+      id: 1,
+      name: '王刚',
+      university: '重庆工商大学',
+      works: 568,
+      students: 378,
+      tags: ['在线工程', '电子产品', '设计方案'],
+      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
+    },
+    {
+      id: 1,
+      name: '王刚',
+      university: '重庆工商大学',
+      works: 568,
+      students: 378,
+      tags: ['在线工程', '电子产品', '设计方案'],
+      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
+    },
+    {
+      id: 1,
+      name: '王刚',
+      university: '重庆工商大学',
+      works: 568,
+      students: 378,
+      tags: ['在线工程', '电子产品', '设计方案'],
+      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
+    },
+    {
+      id: 1,
+      name: '王刚',
+      university: '重庆工商大学',
+      works: 568,
+      students: 378,
+      tags: ['在线工程', '电子产品', '设计方案'],
+      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
+    },
+    // ... 其他详细教师数据
+  ])
+</script>
+
+<style scoped>
+  .app-container {
+    width: 1440px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .banner {
+    background-color: #4080ff;
+    color: white;
+    padding: 40px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40px;
+    background-image: url('@/assets/images/community-banner.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 410px;
+  }
+
+  .primary-btn {
+    background-color: #ffb800;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+
+  .teacher-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+  }
+
+  .teacher-detail-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+  }
+
+  h2 {
+    color: #333;
+    margin: 40px 0 20px;
+    background-image: url('@/assets/images/community-bg.png');
+    background-size: 120px 16px;
+    background-position: 14px 22px;
+    background-repeat: no-repeat;
+    height: 50px;
+    width: 120px;
+    margin: 0 auto;
+  }
+</style>