From 3fed1249c4319c32465c8336ab29f709f59cb5e7 Mon Sep 17 00:00:00 2001
From: Admin <14169871+longhui_3_0@user.noreply.gitee.com>
Date: Wed, 20 Aug 2025 21:47:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=99=E5=B8=88=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/CourseComponents/CourseCategory.vue | 445 +++++++++++++++++-
 src/views/Home.vue                            |   4 +-
 src/views/teacher/AdminDashboard.vue          |   2 +-
 3 files changed, 442 insertions(+), 9 deletions(-)

diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue
index b6734a4..6d521f6 100644
--- a/src/components/admin/CourseComponents/CourseCategory.vue
+++ b/src/components/admin/CourseComponents/CourseCategory.vue
@@ -1,19 +1,452 @@
 <template>
-    <div>
-        <h1>课程分类</h1>
+    <div class="course-category">
+        <!-- 顶部 -->
+         <div class="top">
+            <div class="nav-links">
+                <a href="" class="active">全部</a>
+                <a href="">发布中</a>
+                <a href="">下架中</a>
+            </div>
 
+            <div class="actions">
+                <button class="create-btn">创建课程</button>
+                <div class="search-container">
+                    <input type="text" placeholder="请输入想要搜索的内容">
+                    <button class="search-btn">搜索</button>
+                </div>
+            </div>
+
+         </div>
+        
+
+         <!-- 主体 -->
+          <div class="course-container">
+            <div class="course-grid">
+              <div class="course-card" v-for="course in courseList" :key="course.id">
+                <div class="course-image-container">
+                    <div class="section-title" :class="{'offline': course.status === '下架中'}">{{ course.status }}</div>
+                    <div class="more-options">
+                      <span class="more-icon">⋮</span>
+                      <div class="options-menu">
+                        <a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">编辑</a>
+                        <a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">查看</a>
+                        <a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">删除</a>
+                        <a href="#" class="option-item"><img src="/public/images/teacher/+.png" alt="">更多</a>
+                      </div>
+                    </div>
+                </div>
+                <div class="course-info">
+                    <img :src="course.image" alt="">
+                    <a href="#" class="course-name">{{ course.name }}</a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- 底部翻页按钮 -->
+          <div class="pagination">
+            <div class="pagination-content">
+              <div class="page-numbers">
+                <a href="#" class="page-number">首页</a>
+                <a href="#" class="page-number">上一页</a>
+                <a href="#" class="page-number page-number-bordered active">1</a>
+                <a href="#" class="page-number page-number-bordered">2</a>
+                <a href="#" class="page-number page-number-bordered">3</a>
+                <a href="#" class="page-number page-number-bordered">4</a>
+                <a href="#" class="page-number page-number-bordered">5</a>
+                <a href="#" class="page-number">...</a>
+                <a href="#" class="page-number page-number-bordered">29</a>
+                <a href="#" class="page-number page-number-bordered">下一页</a>
+                <a href="#" class="page-number">下一页</a>
+                <a href="#" class="page-number">尾页</a>
+              </div>
+            </div>
+          </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
+// 模拟课程数据
+const courseList = ref([
+  { id: 1, name: '前端开发基础课程', status: '发布中', image: 'https://picsum.photos/200/200?random=1' },
+  { id: 2, name: 'Vue.js 实战教程', status: '发布中', image: 'https://picsum.photos/200/200?random=2' },
+  { id: 3, name: 'React 入门到精通', status: '发布中', image: 'https://picsum.photos/200/200?random=3' },
+  { id: 4, name: 'Node.js 后端开发', status: '下架中', image: 'https://picsum.photos/200/200?random=4' },
+  { id: 5, name: 'TypeScript 高级教程', status: '发布中', image: 'https://picsum.photos/200/200?random=5' },
+  { id: 6, name: 'JavaScript 设计模式', status: '发布中', image: 'https://picsum.photos/200/200?random=6' },
+  { id: 7, name: 'CSS 动画与特效', status: '下架中', image: 'https://picsum.photos/200/200?random=7' },
+  { id: 8, name: 'HTML5 新特性详解', status: '发布中', image: 'https://picsum.photos/200/200?random=8' },
+  { id: 9, name: 'Web 性能优化指南', status: '发布中', image: 'https://picsum.photos/200/200?random=9' },
+  { id: 10, name: '移动端适配实战', status: '发布中', image: 'https://picsum.photos/200/200?random=10' },
+  { id: 11, name: '微信小程序开发', status: '下架中', image: 'https://picsum.photos/200/200?random=11' },
+  { id: 12, name: 'Flutter 跨平台开发', status: '发布中', image: 'https://picsum.photos/200/200?random=12' },
+]);
 </script>
 
 
 <style scoped>
-body{
+.course-category{
     background-color: #ffffff;
-    width: 1920px;
-    height: 1793px;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    min-height: 1181px;
+    margin-right: 28px;
+    box-sizing: border-box;
+    padding: 10px; /* 添加内边距以便更好地观察布局 */
+    position: relative; /* 添加相对定位，使分页按钮的绝对定位基于此容器 */
 }
-        
+.top {
+    white-space: nowrap; /* 防止链接换行 */
+    padding: 0 20px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #f0f0f0;
+    width: 100%; /* 确保宽度充满父容器 */
+    box-sizing: border-box;
+}
+.nav-links {
+    display: flex;
+    align-items: center;
+    
+}
+.actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+.top a{
+    margin-right: 74px; 
+    display: inline-block;
+    height: 60px;
+    line-height: 60px;
+    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    font-size: 16px;
+    color: #333333;
+    text-decoration: none;
+    position: relative;
+}
+.top a.active {
+    color: #1890ff;
+}
+.top a.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: #1890ff;
+}
+.create-btn {
+    background-color: #1890ff;
+    color: white;
+    border: none;
+    padding: 6px 16px;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-right: 24px; /* 增加按钮与搜索框间距 */
+    transition: background-color 0.3s;
+}
+.create-btn:hover {
+    background-color: #40a9ff;
+}
+.search-container {
+    display: flex;
+    align-items: center;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    overflow: hidden;
+}
+.search-container input {
+    border: none;
+    padding: 6px 12px;
+    outline: none;
+    font-size: 14px;
+    width: 240px; /* 增加搜索框宽度 */
+}
+.search-btn {
+    background-color: #0288D1;
+    border: none;
+    border-left: 1px solid #d9d9d9;
+    padding: 6px 16px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #FFFFFF;
+    transition: background-color 0.3s;
+    line-height: 18px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+.search-btn:hover {
+    background-color: #e8e8e8;
+}
+
+.course-container{
+    width: 100%;
+    
+    margin-top: 30px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.course-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.course-card {
+    width: 190px;
+    height: 201px;
+    background: #FFFFFF;
+    border: 1px solid #D8D8D8;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.course-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transform: translateY(-5px);
+}
+.course-image-container {
+    position: relative;
+    padding: 0;
+    width: 100%;
+    height: 30px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.section-title {
+    width: 50px;
+    height: 20px;
+    background: #0288D1;
+    color: white;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+}
+
+.section-title.offline {
+    background: #FF6C17;
+}
+
+.more-options {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+.more-icon {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    display: block;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+}
+.course-image-container img {
+    width: 13px;
+    height: 13px;
+}
+
+/* 添加更多选项按钮样式 */
+.more-options {
+    position: relative;
+    cursor: pointer;
+}
+
+.more-icon {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    display: block;
+    padding: 5px;
+    margin: 0;
+    line-height: 1;
+}
+
+.options-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: white;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    display: none;
+    z-index: 10;
+    width: 59px;
+    height: 98px;
+}
+
+.more-options:hover .options-menu {
+    display: block;
+}
+
+.option-item {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    color: #333;
+    text-decoration: none;
+    font-size: 12px;
+    text-align: center;
+    height: 24px;
+    line-height: 14px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.icon-edit, .icon-view, .icon-delete, .icon-more {
+    margin-right: 4px;
+    color: #1890ff;
+}
+.icon-view {
+    color: #52c41a;
+}
+
+.icon-delete {
+    color: #f5222d;
+}
+
+.icon-more {
+    color: #faad14;
+}
+.option-item:last-child {
+    border-bottom: none;
+}
+
+.option-item:hover {
+    background-color: #f5f5f5;
+}
+
+.course-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+    box-sizing: border-box;
+    padding: 0;
+}
+.course-info img{
+    width: 150px;
+    height: 105px;
+    /* 居中 */
+    display: block;
+    margin: 5px auto 10px;
+    position: relative;
+    top: -10px;
+}
+.course-name{
+    width: 138px;
+    height: 20px;
+    font-family: AppleSystemUIFont;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    white-space: nowrap; /* 强制文本在一行显示 */
+    overflow: hidden; /* 隐藏超出容器的文本 */
+    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
+    margin-top: -5px;
+}
+
+/* 分页样式 */
+.pagination {
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 61px;
+    left: 0;
+    right: 0;
+}
+
+.pagination-content {
+    width: 703px;
+    height: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    border-radius: 4px;
+    padding: 0 10px;
+}
+
+.page-numbers {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    width: 100%;
+    white-space: nowrap; /* 确保所有页码在一行显示 */
+}
+
+.page-number {
+    display: inline-block;
+    min-width: 38px;
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    color: #333;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 0 5px;
+    margin: 0 4px;
+    border-radius: 2px;
+}
+
+.page-number-bordered {
+    border: 1px solid #d9d9d9;
+}
+
+.page-number.active {
+    background-color: #1890ff;
+    color: white;
+    border-radius: 2px;
+}
+
+.page-btn {
+    background: none;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    padding: 0 10px;
+    height: 32px;
+    cursor: pointer;
+    color: #333;
+    font-size: 14px;
+}
+
+/* 首页、上一页、下一页、末页按钮样式 */
+.page-number:first-child,
+.page-number:nth-child(2),
+.page-number:nth-last-child(2),
+.page-number:last-child {
+    padding: 0 8px;
+}
+
+.page-btn:hover {
+    color: #1890ff;
+    border-color: #1890ff;
+}
+
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 65ec7fc..34cf0ad 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -475,7 +475,7 @@
     </section>
 
     <!-- 合作伙伴 -->
-    <section class="partners-section">
+    <!-- <section class="partners-section">
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
@@ -492,7 +492,7 @@
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
 
     <!-- 登录模态框 -->
     <LoginModal v-model:show="loginModalVisible" @success="handleAuthSuccess" />
diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue
index 8554759..355d417 100644
--- a/src/views/teacher/AdminDashboard.vue
+++ b/src/views/teacher/AdminDashboard.vue
@@ -19,7 +19,7 @@
            <!-- 导航栏 -->
             <div class="nav-container">
               <router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
-                  <img src="https://picsum.photos/200/200" alt="">
+                  <img src="/images/teacher/路径 1.png" alt="">
                   <span>课程管理</span>
               </router-link>
               <router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">