diff --git a/src/views/site/common/footer.vue b/src/views/site/common/footer.vue
new file mode 100644
index 0000000..a1ae7f3
--- /dev/null
+++ b/src/views/site/common/footer.vue
@@ -0,0 +1,9 @@
+<template>
+  <a-layout-footer>
+    <span class="footerLeft">TEL：0431-85099971</span>
+    <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
+  </a-layout-footer>
+</template>
+<script setup lang="ts">
+
+</script>
\ No newline at end of file
diff --git a/src/views/site/common/header.vue b/src/views/site/common/header.vue
new file mode 100644
index 0000000..8d80788
--- /dev/null
+++ b/src/views/site/common/header.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-layout-header>
+    <!-- <BackTop/> -->
+    <div style="position: absolute;right: 1rem;top: 5rem;">
+      <div style="background: #c2c2c2;margin-bottom: 2rem;padding: 0.5rem;width: 4rem;font-size:3rem;">
+        <ArrowUpOutlined/>
+      </div>
+      <div style="background: #1c84c6;color:#FFF;font-size:1.5rem;padding: 0.5rem;width: 4rem;line-height: 2.1rem;">
+        意见反馈
+      </div>
+    </div>
+    <span class="topTitle">管理系统</span>
+    <span class="topRight">
+      <a-dropdown>
+        <span class="ant-dropdown-link topRightMenu" @click.prevent>
+          {{ userStore?.getUserInfo?.realname }}
+          <DownOutlined/>
+        </span>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item>
+              <!-- <a href="javascript:;">后台管理</a> -->
+              <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
+            </a-menu-item>
+            <a-menu-item>
+              <a href="javascript:void(0);" @click="userStore?.confirmLoginOut();">安全退出</a>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </span>
+  </a-layout-header>
+
+</template>
+<script setup lang="ts">
+  import { useUserStore } from '/@/store/modules/user';
+  //用户相关
+  const userStore = useUserStore();
+
+</script>
\ No newline at end of file
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 39c9b7b..8985e6f 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -24,212 +24,14 @@
     </a-card>
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
     <a-layout>
-      <a-layout-header>
-        <!-- <BackTop/> -->
-        <div style="position: absolute;right: 1rem;top: 5rem;">
-          <div style="background: #c2c2c2;margin-bottom: 2rem;padding: 0.5rem;width: 4rem;font-size:3rem;">
-            <ArrowUpOutlined/>
-          </div>
-          <div style="background: #1c84c6;color:#FFF;font-size:1.5rem;padding: 0.5rem;width: 4rem;line-height: 2.1rem;">
-            意见反馈
-          </div>
-        </div>
-        <span class="topTitle">管理系统</span>
-        <span class="topRight">
-          <a-dropdown>
-            <span class="ant-dropdown-link topRightMenu" @click.prevent>
-              {{ userStore?.getUserInfo?.realname }}
-              <DownOutlined/>
-            </span>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item>
-                  <!-- <a href="javascript:;">后台管理</a> -->
-                  <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
-                </a-menu-item>
-                <a-menu-item>
-                  <a href="javascript:void(0);" @click="userStore?.confirmLoginOut();">安全退出</a>
-                </a-menu-item>
-              </a-menu>
-            </template>
-          </a-dropdown>
-        </span>
-      </a-layout-header>
+      <headerPage/>
       <a-layout-content>
-        <a-row class="rowGutter" :gutter="[16,16]">
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
-            <a-card title="今日课堂数">
-              <a-row class="" :gutter="[16,16]">
-                <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-                  <Statistic title="总数" :value="1128"/>
-                </a-col>
-                <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-                  <Statistic title="已下课" :value="1124"/>
-                </a-col>
-              </a-row>
-            </a-card>
-          </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
-            <a-card title="上课中">
-              <a-row class="" :gutter="[16,16]">
-                <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-                  <Statistic title="&nbsp;" :value="6"/>
-                </a-col>
-              </a-row>
-            </a-card>
-          </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
-            <a-card title="已开课堂数">
-              <a-row class="" :gutter="[16,16]">
-                <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-                  <Statistic title="总数" :value="1128"/>
-                </a-col>
-                <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-                  <Statistic title="听课课堂" :value="1893"/>
-                </a-col>
-                <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-                  <Statistic title="听课人次" :value="1193"/>
-                </a-col>
-              </a-row>
-            </a-card>
-          </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
-            <a-card title="今日听课">
-              <a-row class="" :gutter="[16,16]">
-                <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-                  <Statistic title="课堂数" :value="1123"/>
-                </a-col>
-                <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-                  <Statistic title="听课人次" :value="1893"/>
-                </a-col>
-              </a-row>
-            </a-card>
-          </a-col>
-          <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
-            <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
-              <PlusOutlined/>
-            </div>
-          </a-col>
-        </a-row>
-        <div class="rowGutter">
-          <a-carousel>
-            <div><h3>1</h3></div>
-            <div><h3>2</h3></div>
-            <div><h3>3</h3></div>
-            <div><h3>4</h3></div>
-          </a-carousel>
-        </div>
-        <a-card class="rowGutter">
-          <a-row>
-            <a-col :span="12">
-              [图标][名称]<span style="color:#1ab394">[日期]</span>
-            </a-col>
-            <a-col :span="12">
-              [图标][名称]<span style="color:#1ab394">[日期]</span>
-            </a-col>
-          </a-row>
-          <span style="color:red">[今日调课]</span>
-        </a-card>
-        <a-card class="rowGutter">
-          <template #title><span style="font-size: 24px;font-weight: bold;">任课教程</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
-          <!-- <template #extra></template> -->
-          xxxx
-        </a-card>
-        <a-card class="rowGutter">
-          <template #title> <span style="font-size: 24px;font-weight: bold;">听课足迹</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
-          <template #extra><a href="javascript:void(0);">查看更多</a></template>
-          <a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2（数据管理与分析）》', },{ title: 'Ant Design Title 2', }]">
-            <template #renderItem="{ item }">
-              <a-list-item>
-                <a-list-item-meta>
-                  <template #title>
-                    <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
-                    {{ item.title }}
-                  </template>
-                  <template #description>
-                    <span style="color: #337ab7;">已评分n分</span>
-                  </template>
-                  <template #avatar>
-                    <a-avatar src="https://joeschmoe.io/api/v1/random" />
-                    <div>08:32:49</div>
-                    <div style="color: #1ab394;">2023-03-15</div>
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </template>
-          </a-list>
-        </a-card>
-        <a-card class="rowGutter" title="预约课程">
-          <template #title>
-            <span style="font-size: 24px;font-weight: bold;">预约课程</span>
-            <a href="javascript:void(0);">线上课堂评价表</a>
-            <a href="javascript:void(0);">听课记录</a>
-            <a href="javascript:void(0);">同行评价表</a>
-          </template>
-          <template #extra><a href="javascript:void(0);">查看更多</a></template>
-          <a-row class="rowGutter" :gutter="[16,16]">
-            <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in 4" :key="index" style="margin-bottom: 40px;">
-              <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
-                时间{{ item }}
-              </div>
-              <div style="border: 2px #eef1f2 solid;">
-                <div>
-                  <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
-                  <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
-                    地理教育专业文献阅读与指导{{index}}
-                  </div>
-                </div>
-                <a-divider style="margin: 0px;color: #eef1f2;"/>
-                <div style="padding: 20px;font-weight: 600;">
-                  <a-row>
-                    <a-col :span="16">
-                      <div style="height: 30px;font-size: 16px;">张继权</div>
-                      <div style="height: 30px;font-size: 14px;">环境学院环境</div>
-                    </a-col>
-                    <a-col :span="8" style="text-align: center;height: 70px;">
-                      <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
-                      <div style="font-size: 14px;">选课人数</div>
-                    </a-col>
-                    <a-col :span="24">
-                      <div style="height: 60px;">
-                        环境学院107室
-                      </div>
-                    </a-col>
-                    <a-col :span="24">
-                      <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
-                      <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
-                    </a-col>
-                  </a-row>
-                </div>
-              </div>
-            </a-col>
-          </a-row>
-        </a-card>
-        <a-card class="rowGutter">
-          <template #title>
-            <span style="font-size: 24px;font-weight: bold;">精彩公开课</span>
-          </template>
-          <a-row :gutter="[16,16]">
-            <a-col v-for="(item,index) in 4" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
-              <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
-                时间{{ item }}
-              </div>
-              <div>
-                <div>
-                  <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;">公开课预告</span>
-                  <img style="border-radius: 10px 10px 0 0;" src="/resource/img/kc/moren.jpg"/>
-                </div>
-                <div style="padding: 0 1rem 1rem;background: #f3f3f3;">
-                  <div>名称</div>
-                  <div>名称2</div>
-                  <div>课的名称</div>
-                  <div>N人听课</div>
-                  <div><a-button type="primary" style="width: 100%;" :disabled="index%2==0">进入课堂</a-button></div>
-                </div>
-              </div>
-            </a-col>
-          </a-row>
-        </a-card>
+        <tongjiPage/>
+        <lunboPage/>
+        <tongZhiGongGaoPage/>
+        <renKeJiaoCheng/>
+        <tingKeZuJi/>
+        <yuYueKeCheng/>
         <a-card class="rowGutter">
           <template #title>
             <span style="font-size: 24px;font-weight: bold;">今日课程列表</span>
@@ -257,10 +59,7 @@
 
         </a-card>
         </a-layout-content>
-      <a-layout-footer>
-        <span class="footerLeft">TEL：0431-85099971</span>
-        <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
-      </a-layout-footer>
+        <footerPage/>
     </a-layout>
     </div>
   </div>
@@ -272,20 +71,24 @@
   import { DownOutlined, PlusOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
   import { BackTop, Statistic } from 'ant-design-vue';
 
-  import { useUserStore } from '/@/store/modules/user';
+  import headerPage from '/@/views/site/common/header.vue';
+  import footerPage from '/@/views/site/common/footer.vue';
+
+  import tongjiPage from '/@/views/site/tongJi/index.vue';
+  import lunboPage from '/@/views/site/lunBo/index.vue';
+  import tongZhiGongGaoPage from '/@/views/site/tongZhiGongGao/index.vue';
+  import renKeJiaoCheng from '/@/views/site/renKeJiaoCheng/index.vue'
+  import tingKeZuJi from '/@/views/site/tingKeZuJi/index.vue'
+  import yuYueKeCheng from '/@/views/site/yuYueKeCheng/index.vue'
+
+
+
   import kclbZzsk from '/@/views/site/kclbZzsk.vue';
   import kclbXyjk from '/@/views/site/kclbXyjk.vue';
   import kclbRkb from '/@/views/site/kclbRkb.vue';
 
-  //用户相关
-  const userStore = useUserStore();
   const activeKey = ref('1');
 
-  console.log(`🚀 -----------------------------------------------🚀`);
-  console.log(`🚀 ~ file: index.vue:66 ~ userStore:`, userStore);
-  console.log(`🚀 -----------------------------------------------🚀`);
-
-
   // reactive
   let list = reactive({ list: [] });
   //针对基础类型
@@ -356,21 +159,7 @@
       line-height: 120px;
       background: #f3f3f4;
     }
-
-
-}
-    /* For demo */
-    .ant-carousel :deep(.slick-slide) {
-      text-align: center;
-      height: 160px;
-      line-height: 160px;
-      background: #364d79;
-      overflow: hidden;
-    }
-
-    .ant-carousel :deep(.slick-slide h3) {
-      color: #fff;
-    }
+  }
 
 }
 /**暗黑模式特殊配色*/
diff --git a/src/views/site/jingCaiGongKaiKe/index.vue b/src/views/site/jingCaiGongKaiKe/index.vue
new file mode 100644
index 0000000..f980915
--- /dev/null
+++ b/src/views/site/jingCaiGongKaiKe/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <a-card class="rowGutter">
+    <template #title>
+      <span style="font-size: 24px;font-weight: bold;">精彩公开课</span>
+    </template>
+    <a-row :gutter="[16,16]">
+      <a-col v-for="(item,index) in 4" :key="index" :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }">
+        <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
+          时间{{ item }}
+        </div>
+        <div>
+          <div>
+            <span style="position: absolute;top: 4rem;border-radius: 0 10px 10px 0;background: #1c84c6;color: #FFF;padding: 3px 10px 3px 5px;">公开课预告</span>
+            <img style="border-radius: 10px 10px 0 0;" src="/resource/img/kc/moren.jpg"/>
+          </div>
+          <div style="padding: 0 1rem 1rem;background: #f3f3f3;">
+            <div>名称</div>
+            <div>名称2</div>
+            <div>课的名称</div>
+            <div>N人听课</div>
+            <div><a-button type="primary" style="width: 100%;" :disabled="index%2==0">进入课堂</a-button></div>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/lunBo/index.vue b/src/views/site/lunBo/index.vue
new file mode 100644
index 0000000..6bda59b
--- /dev/null
+++ b/src/views/site/lunBo/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="rowGutter">
+    <a-carousel>
+      <div><h3>1</h3></div>
+      <div><h3>2</h3></div>
+      <div><h3>3</h3></div>
+      <div><h3>4</h3></div>
+    </a-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+/* For demo */
+.ant-carousel :deep(.slick-slide) {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ant-carousel :deep(.slick-slide h3) {
+  color: #fff;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/renKeJiaoCheng/index.vue b/src/views/site/renKeJiaoCheng/index.vue
new file mode 100644
index 0000000..e0012b2
--- /dev/null
+++ b/src/views/site/renKeJiaoCheng/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <a-card class="rowGutter">
+    <template #title><span style="font-size: 24px;font-weight: bold;">任课教程</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
+    <!-- <template #extra></template> -->
+    xxxx
+  </a-card>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/tingKeZuJi/index.vue b/src/views/site/tingKeZuJi/index.vue
new file mode 100644
index 0000000..df62184
--- /dev/null
+++ b/src/views/site/tingKeZuJi/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <a-card class="rowGutter">
+    <template #title> <span style="font-size: 24px;font-weight: bold;">听课足迹</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
+    <template #extra><a href="javascript:void(0);">查看更多</a></template>
+    <a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2（数据管理与分析）》', },{ title: 'Ant Design Title 2', }]">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <a-list-item-meta>
+            <template #title>
+              <!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
+              {{ item.title }}
+            </template>
+            <template #description>
+              <span style="color: #337ab7;">已评分n分</span>
+            </template>
+            <template #avatar>
+              <a-avatar src="https://joeschmoe.io/api/v1/random" />
+              <div>08:32:49</div>
+              <div style="color: #1ab394;">2023-03-15</div>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/tongJi/index.vue b/src/views/site/tongJi/index.vue
new file mode 100644
index 0000000..d4218ab
--- /dev/null
+++ b/src/views/site/tongJi/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <a-row class="rowGutter" :gutter="[16,16]">
+    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
+      <a-card title="今日课堂数">
+        <a-row class="" :gutter="[16,16]">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <Statistic title="总数" :value="1128"/>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <Statistic title="已下课" :value="1124"/>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
+      <a-card title="上课中">
+        <a-row class="" :gutter="[16,16]">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <Statistic title="&nbsp;" :value="6"/>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
+      <a-card title="已开课堂数">
+        <a-row class="" :gutter="[16,16]">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <Statistic title="总数" :value="1128"/>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <Statistic title="听课课堂" :value="1893"/>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
+            <Statistic title="听课人次" :value="1193"/>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
+      <a-card title="今日听课">
+        <a-row class="" :gutter="[16,16]">
+          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <Statistic title="课堂数" :value="1123"/>
+          </a-col>
+          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
+            <Statistic title="听课人次" :value="1893"/>
+          </a-col>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
+      <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
+        <PlusOutlined/>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/tongZhiGongGao/index.vue b/src/views/site/tongZhiGongGao/index.vue
new file mode 100644
index 0000000..c744a2f
--- /dev/null
+++ b/src/views/site/tongZhiGongGao/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <a-card class="rowGutter">
+    <a-row>
+      <a-col :span="12">
+        [图标][名称]<span style="color:#1ab394">[日期]</span>
+      </a-col>
+      <a-col :span="12">
+        [图标][名称]<span style="color:#1ab394">[日期]</span>
+      </a-col>
+    </a-row>
+    <span style="color:red">[今日调课]</span>
+  </a-card>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/site/yuYueKeCheng/index.vue b/src/views/site/yuYueKeCheng/index.vue
new file mode 100644
index 0000000..ac6d291
--- /dev/null
+++ b/src/views/site/yuYueKeCheng/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <a-card class="rowGutter" title="预约课程">
+    <template #title>
+      <span style="font-size: 24px;font-weight: bold;">预约课程</span>
+      <a href="javascript:void(0);">线上课堂评价表</a>
+      <a href="javascript:void(0);">听课记录</a>
+      <a href="javascript:void(0);">同行评价表</a>
+    </template>
+    <template #extra><a href="javascript:void(0);">查看更多</a></template>
+    <a-row class="rowGutter" :gutter="[16,16]">
+      <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in 4" :key="index" style="margin-bottom: 40px;">
+        <div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
+          时间{{ item }}
+        </div>
+        <div style="border: 2px #eef1f2 solid;">
+          <div>
+            <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
+            <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
+              地理教育专业文献阅读与指导{{index}}
+            </div>
+          </div>
+          <a-divider style="margin: 0px;color: #eef1f2;"/>
+          <div style="padding: 20px;font-weight: 600;">
+            <a-row>
+              <a-col :span="16">
+                <div style="height: 30px;font-size: 16px;">张继权</div>
+                <div style="height: 30px;font-size: 14px;">环境学院环境</div>
+              </a-col>
+              <a-col :span="8" style="text-align: center;height: 70px;">
+                <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
+                <div style="font-size: 14px;">选课人数</div>
+              </a-col>
+              <a-col :span="24">
+                <div style="height: 60px;">
+                  环境学院107室
+                </div>
+              </a-col>
+              <a-col :span="24">
+                <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
+                <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
+              </a-col>
+            </a-row>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </a-card>
+</template>
+<script setup lang="ts">
+
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file