diff --git a/src/assets/images/subject-banner.png b/src/assets/images/subject-banner.png
new file mode 100644
index 0000000..b1b5313
Binary files /dev/null and b/src/assets/images/subject-banner.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 50e4a12..759db19 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,7 +42,11 @@ const router = createRouter({
         },
         {
           path: 'subject',
-          component: () => import('@/views/Subject/index.vue')
+          component: () => import('@/views/CatalogResource/index.vue')
+        },
+        {
+          path: 'subSubject',
+          component: () => import('@/views/SubCatalogResource/index.vue')
         },
         {
           path: 'category/:id',
diff --git a/src/views/CatalogResource/index.vue b/src/views/CatalogResource/index.vue
new file mode 100644
index 0000000..d13964d
--- /dev/null
+++ b/src/views/CatalogResource/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="container">
+    <div class="bread-container">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>专题资源</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="subject-banner">
+      <el-carousel height="500px" arrow="always">
+        <!-- <el-carousel-item v-for="item in bannerList" :key="item.id">
+        <img :src="item.imgUrl" alt="">
+      </el-carousel-item> -->
+        <el-carousel-item v-for="item in 4">
+          <img src="@/assets/images/subject-banner.png" alt="">
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+
+    <el-card style="margin-top: 20px;">
+      <div class="title">
+        专题资源
+      </div>
+      <div class="more">
+        19个专题
+      </div>
+
+      <div class="subject-content">
+        <div class="subject-card" v-for="item in 12">
+          <RouterLink to="subSubject">
+            <el-card>
+              <img src="@/assets/images/subject.png" />
+            </el-card>
+            <div class="subject-top">1790个资源</div>
+          </RouterLink>
+        </div>
+      </div>
+      <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .more {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    font-size: 15px;
+    color: #8A8178;
+  }
+
+  .bread-container {
+    padding: 25px 0;
+
+    :deep(.el-breadcrumb__inner) {
+      color: #fff;
+      font-size: 16px;
+    }
+
+    :deep(.el-breadcrumb__separator) {
+      color: #fff;
+    }
+  }
+
+  .subject-banner {
+    margin-top: 20px;
+    width: 1240px;
+    height: 500px;
+
+    img {
+      width: 100%;
+      height: 500px;
+      border-radius: 5px;
+    }
+  }
+
+  .subject-content {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 10px;
+
+    .subject-card {
+      position: relative;
+
+      .subject-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #FCB124;
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+        line-height: 28px;
+        width: 100px;
+        text-align: center;
+      }
+    }
+  }
+
+  .book-page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: end
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Home/components/HomeBanner.vue b/src/views/Home/components/HomeBanner.vue
index c6a38e7..95a2216 100644
--- a/src/views/Home/components/HomeBanner.vue
+++ b/src/views/Home/components/HomeBanner.vue
@@ -28,8 +28,6 @@ import { onMounted, ref } from 'vue'
   </div>
 </template>
 
-
-
 <style scoped lang='scss'>
 .home-banner {
   width: 1240px;
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 5f5e6a9..86dbf97 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -94,7 +94,7 @@
         </template>
         <div class="subject-content">
           <el-card v-for="item in 8">
-            <img src="@/assets/images/subject.png" />
+            
 
             <template #footer>
               <div class="subject-title">【金版学案】2016-2017学年高中语文人教版(必修3、必修4)检测+课件</div>
diff --git a/src/views/SubCatalogResource/index.vue b/src/views/SubCatalogResource/index.vue
new file mode 100644
index 0000000..6ba1383
--- /dev/null
+++ b/src/views/SubCatalogResource/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <div class="bread-container">
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>专题资源</el-breadcrumb-item>
+        <el-breadcrumb-item>课后服务</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="sub-subject-top">
+      <img src="@/assets/images/subject.png" />
+      <div class="sub-subject-top-right">
+        <div class="title">课后服务</div>
+        <div class="more">创建时间：2024-01-01</div>
+        <div class="more">资源数据：1790个</div>
+      </div>
+    </div>
+
+    <el-row :gutter="10" style="margin-top: 10px;">
+      <el-col :span="6">
+        <el-card>
+          <template #header>
+            <div class="card--left-header">
+              <span class="title">目录</span>
+            </div>
+          </template>
+
+          <el-table :data="tableData" row-key="id" border default-expand-all :show-header="false">
+            <el-table-column prop="name" label="Name" />
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="18">
+        <el-card>
+          <div class="card-right-header">
+            <el-table :data="tableSortData" :default-sort="{ prop: 'date', order: 'descending' }">
+              <el-table-column prop="date" label="上传时间" sortable width="180" />
+              <el-table-column prop="name" label="浏览量" sortable width="180" />
+              <el-table-column prop="address" label="下载量" sortable width="180" />
+            </el-table>
+            <div class="header-search">
+              <el-input v-model="input" style="width: 300px" placeholder="请输入关键词" />
+              <el-button type="primary" :icon="Search" />
+            </div>
+          </div>
+
+          <div class="book-grid">
+            <el-card v-for="item in 6">
+              <div class="book-content">
+                <img class="file-type" src="@/assets/images/word.png" alt="">
+                <img src="@/assets/images/book.png" alt="">
+              </div>
+
+              <template #footer>
+                <div class="book-title">汉字文化云课堂</div>
+                <div class="book-des">
+                  <div class="book-teacher">
+                    <span>王老师</span>&nbsp;|&nbsp;<span>一年级（2）班</span>
+                  </div>
+                  <div class="book-view">
+                    <span>
+                      <el-icon>
+                        <View />
+                      </el-icon>
+                    </span>
+                    <span>204</span>
+                  </div>
+                </div>
+              </template>
+            </el-card>
+          </div>
+          <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { View, Search } from '@element-plus/icons-vue'
+
+const tableData = [
+  {
+    id: 1,
+    name: '全部',
+  },
+  {
+    id: 2,
+    name: '我上学了',
+  },
+  {
+    id: 3,
+    name: '识字',
+    children: [
+      {
+        id: 31,
+        name: '1 天地人',
+      },
+      {
+        id: 32,
+        name: '2金木水火土',
+      },
+    ],
+  },
+  {
+    id: 4,
+    name: '汉语拼音',
+  },
+]
+
+const tableSortData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .more {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    font-size: 15px;
+    color: #8A8178;
+  }
+
+  .bread-container {
+    padding: 25px 0;
+
+    :deep(.el-breadcrumb__inner) {
+      color: #fff;
+      font-size: 16px;
+    }
+
+    :deep(.el-breadcrumb__separator) {
+      color: #fff;
+    }
+  }
+
+  .sub-subject-top {
+    margin-top: 10px;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    background-color: #E4F2F9;
+    border-radius: 10px;
+
+    img {
+      margin: 10px 20px 10px 20px;
+      border-radius: 5px;
+    }
+  }
+
+  .card--left-header {
+    .title {
+      font-size: 20px;
+    }
+  }
+
+  .card-right-header {
+    position: relative;
+
+    :deep(.el-table__body-wrapper) {
+      display: none;
+    }
+
+    .header-search {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  .book-grid {
+    margin-top: 10px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 7px;
+
+    .book-content {
+      position: relative;
+
+      .file-type {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 25px;
+      }
+    }
+
+    .book-title {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .book-des {
+      display: flex;
+      justify-content: space-between;
+      color: #919DA3;
+      padding: 5px 0;
+    }
+  }
+
+  .book-page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: end
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Subject/index.vue b/src/views/Subject/index.vue
deleted file mode 100644
index 371df66..0000000
--- a/src/views/Subject/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="container">
-    <el-breadcrumb separator=">">
-      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>专题资源</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<style lang="scss" scoped>
-.container {}
-</style>
\ No newline at end of file
diff --git a/src/views/TextBook/index.vue b/src/views/TextBook/index.vue
index bef721d..c985947 100644
--- a/src/views/TextBook/index.vue
+++ b/src/views/TextBook/index.vue
@@ -133,6 +133,7 @@
               </template>
             </el-card>
           </div>
+          <el-pagination class="book-page" background layout="prev, pager, next, sizes,jumper" :total="1000" />
         </el-card>
       </el-col>
     </el-row>
@@ -250,13 +251,18 @@ const tableSortData = [
       font-weight: bold;
     }
 
-    .book-des{
+    .book-des {
       display: flex;
       justify-content: space-between;
-      color:#919DA3;
+      color: #919DA3;
       padding: 5px 0;
     }
+  }
 
+  .book-page {
+    margin-top: 20px;
+    display: flex;
+    justify-content: end
   }
 }
 </style>
\ No newline at end of file