diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 2542993df1784c82508ba86717b82c7112245604..21436d88dbaccc6cc70c73bac275e9ae3eab2b2b 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -8,6 +8,7 @@ declare global {
   const CenterTask: (typeof import('./src/views/CenterTask.vue'))['default']
   const EffectScope: typeof import('vue')['EffectScope']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const WorkInfo: typeof import('./src/views/StuHomework/WorkInfo.vue')['default']
   const computed: typeof import('vue')['computed']
   const constantRoutes: typeof import('./src/router/index')['constantRoutes']
   const createApp: typeof import('vue')['createApp']
diff --git a/components.d.ts b/components.d.ts
index 21181b287f5316f2a091aa52c11d7573c0c4d4be..048696db7b49c98893198b22fb1c3b7d406607bd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -26,7 +26,9 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default']
@@ -35,9 +37,11 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ShowNotice: typeof import('./src/views/Notice/ShowNotice.vue')['default']
+    StuHomework: typeof import('./src/views/StuHomework/StuHomework.vue')['default']
     UserLogin: typeof import('./src/views/Login/UserLogin.vue')['default']
     UserLoginChange: typeof import('./src/views/Login/components/UserLoginChange.vue')['default']
     UserLoginEnrol: typeof import('./src/views/Login/components/UserLoginEnrol.vue')['default']
     UserLoginHomepage: typeof import('./src/views/Login/components/UserLoginHomepage.vue')['default']
+    WorkInfo: typeof import('./src/views/StuHomework/WorkInfo.vue')['default']
   }
 }
diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue
index cfc75f838f0e966dcf3ac046326431c6b8ec1cad..a2b1a371ddc78e3bf4f21c2938b6a4021ad7f593 100644
--- a/src/components/CenterTask.vue
+++ b/src/components/CenterTask.vue
@@ -6,30 +6,43 @@
         <el-row class="tac">
           <el-col :span="12">
             <div class="logo">
-              <img src="../assets/logo.png" style="width: 150px; height: 140px" />
+              <img src="../assets/logo.png" style="width: 220px; height: 200px" />
             </div>
             <el-menu
-              default-active="2"
+              router
+              :default-active="$route.path"
               class="el-menu-vertical-demo"
               @open="handleOpen"
               @close="handleClose"
             >
               <el-menu-item index="1">
                 <el-icon><House /></el-icon>
-                <span>首页</span>
+                <span class="menu-text">首页</span>
               </el-menu-item>
-              <el-menu-item index="2">
+              <el-menu-item index="/Notice">
                 <el-icon><Message /></el-icon>
-                <span><RouterLink to="/CenterTask/Notice">通知</RouterLink></span>
+                <span class="menu-text">通知</span>
               </el-menu-item>
-              <el-menu-item index="3">
+              <el-menu-item index="/Homework">
                 <el-icon><document /></el-icon>
-                <span>作业</span>
+                <span class="menu-text">作业</span>
               </el-menu-item>
               <el-menu-item index="4">
                 <el-icon><ChatDotRound /></el-icon>
-                <span>面试</span>
+                <span class="menu-text">面试</span>
               </el-menu-item>
+              <el-sub-menu index="5">
+                <template #title>
+                  <div class="special">
+                    <el-icon><setting /></el-icon>
+                    <span class="menu-text">设置</span>
+                  </div>
+                </template>
+                <el-menu-item index="5-1" class="Item">
+                  <el-icon><User /></el-icon>
+                  <span class="menu-text">用户管理</span>
+                </el-menu-item>
+              </el-sub-menu>
             </el-menu>
           </el-col>
         </el-row>
@@ -37,8 +50,8 @@
       <el-container>
         <el-header>
           <el-breadcrumb :separator-icon="ArrowRight">
-            <el-breadcrumb-item>首页</el-breadcrumb-item>
-            <el-breadcrumb-item>通知</el-breadcrumb-item>
+            <el-breadcrumb-item class="menu-text">首页</el-breadcrumb-item>
+            <el-breadcrumb-item class="menu-text">通知</el-breadcrumb-item>
           </el-breadcrumb>
         </el-header>
         <el-main>
diff --git a/src/router/index.ts b/src/router/index.ts
index 16a56ff98561979880cd29e5734c4b053507dc9c..4aeb37bae052ca400c4ad5eaa7c3280003302754 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,22 @@
 import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs';
 import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router';
 export const constantRoutes: RouteRecordRaw[] = [
-  // {
-  //   path: '/',
-  //   component: () => import('@/views/Login.vue')
-  // },
+  {
+    path: '/Login',
+    component: () => import('@/views/Login/UserLogin.vue')
+  },
+
+  {
+    path: '/',
+    component: () => import('@/components/CenterTask.vue'),
+    children: [
+      {
+        path: '/Homework',
+        component: () => import('@/views/StuHomework/StuHomework.vue')
+      },
+      { path: '/Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') }
+    ]
+  },
 
   {
     path: '/',
diff --git a/src/styles/CenterTask.css b/src/styles/CenterTask.css
index 9c5d65b94073cff3c842f764e211828406e32db4..af609a1d71204b2ab7f4ad87bab6e2c4b009c8cb 100644
--- a/src/styles/CenterTask.css
+++ b/src/styles/CenterTask.css
@@ -6,7 +6,7 @@
 
 .el-aside {
   min-height: 100vh;
-  max-width: 20vw;
+  width: 200px;
 }
 
 .el-col-12 {
@@ -18,11 +18,31 @@
   border: none;
 }
 
+.el-icon {
+  padding-left: 20px;
+}
+
+.menu-text {
+  font-size: 25px;
+  letter-spacing: 2px;
+  font-weight: 600;
+}
+
+li.el-menu-item {
+  width: 250px;
+  padding: 50px 10px;
+}
+
 .el-main {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 80vw;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.el-container {
+  min-width: auto;
 }
 
 .el-header {
@@ -30,11 +50,14 @@
   justify-content: center;
   align-items: center;
   justify-content: flex-start;
+  height: 150px;
+  width: 1240px;
+  padding-left: 40px;
 }
 
 .logo {
   position: relative;
-  top: -4%;
+  top: -2%;
 }
 
 .el-menu-vertical-demo {
diff --git a/src/styles/CenterTask.css.map b/src/styles/CenterTask.css.map
index 0e27e54e862316b1c22a1e34231ce05df2a1ebd3..aa85bfa454d7b83f546671115e18d821789b0f04 100644
--- a/src/styles/CenterTask.css.map
+++ b/src/styles/CenterTask.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["CenterTask.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAOF;EAJE;EACA;EACA;EAIA;;;AAEF;EARE;EACA;EACA;EAQA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;;;AAGJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"CenterTask.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["CenterTask.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAQF;EAJE;EACA;EACA;EAIA;EACA;;;AAEF;EACE;;;AAEF;EAZE;EACA;EACA;EAYA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;AACA;EACE;;;AAGJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"CenterTask.css"}
\ No newline at end of file
diff --git a/src/styles/CenterTask.scss b/src/styles/CenterTask.scss
index bbae5111e2d2824f651bae6e4dd5f7ee81a5ca07..4dd9943d53aec6bfc9cee5a17d240944f5d37a1c 100644
--- a/src/styles/CenterTask.scss
+++ b/src/styles/CenterTask.scss
@@ -4,7 +4,7 @@
 }
 .el-aside {
   min-height: 100vh;
-  max-width: 20vw;
+  width: 200px;
 }
 .el-col-12 {
   max-width: 100%;
@@ -13,6 +13,19 @@
 .el-menu {
   border: none;
 }
+.el-icon {
+  padding-left: 20px;
+}
+.menu-text {
+  font-size: 25px;
+  letter-spacing: 2px;
+  font-weight: 600;
+}
+li.el-menu-item {
+  width: 250px;
+  padding: 50px 10px;
+}
+
 @mixin box {
   display: flex;
   justify-content: center;
@@ -20,15 +33,22 @@
 }
 .el-main {
   @include box;
-  width: 80vw;
+  flex: 1;
+  overflow-y: auto;
+}
+.el-container {
+  min-width: auto;
 }
 .el-header {
   @include box;
   justify-content: flex-start;
+  height: 150px;
+  width: 1240px;
+  padding-left: 40px;
 }
 .logo {
   position: relative;
-  top: -4%;
+  top: -2%;
 }
 .el-menu-vertical-demo {
   background-color: rgba(255, 255, 255, 0);
@@ -50,3 +70,6 @@
   background-size: cover; /* 确保背景图片覆盖整个容器 */
   z-index: -1;
 }
+// .el-sub-menu__title {
+//   height: 100px !important;
+// }
diff --git a/src/styles/StuHomework.css b/src/styles/StuHomework.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe340a153a06742aae8ff2eea9e2c7b0a257960b
--- /dev/null
+++ b/src/styles/StuHomework.css
@@ -0,0 +1,69 @@
+.conten-box {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-around;
+}
+
+.search-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  min-width: 1000px;
+  height: 100px;
+  background-color: white;
+  justify-content: space-around;
+}
+
+button.el-button.el-button--Basic.White,
+.el-button--primary {
+  height: 50px;
+  width: 120px;
+}
+
+.el-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.homework-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  flex-direction: column;
+  min-width: 1000px;
+  min-height: 900px;
+  background-color: white;
+}
+
+.form-box {
+  box-sizing: border-box;
+  padding: 20px;
+  min-height: 800px;
+}
+
+.stu-form {
+  height: 80%;
+}
+
+.foot-box {
+  min-width: 900px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.stu-form .el-table__header th {
+  background-color: #f5f7fa !important;
+}
+
+button.el-button.el-button--small {
+  border: none;
+  color: rgb(101, 153, 191);
+}/*# sourceMappingURL=StuHomework.css.map */
\ No newline at end of file
diff --git a/src/styles/StuHomework.css.map b/src/styles/StuHomework.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..5c3e304b7350b21729175ff2aae81923e7bc16fc
--- /dev/null
+++ b/src/styles/StuHomework.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["StuHomework.scss"],"names":[],"mappings":"AAMA;EACE;EANA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;;AAEF;EAbE;EACA;EACA;EACA;EAYA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAEF;EACE;EACA;;;AAEF;EA9BE;EACA;EACA;EACA;EA6BA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA","file":"StuHomework.css"}
\ No newline at end of file
diff --git a/src/styles/StuHomework.scss b/src/styles/StuHomework.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3d9ed2a7174244ffa2280155edaa1bcebab11195
--- /dev/null
+++ b/src/styles/StuHomework.scss
@@ -0,0 +1,59 @@
+@mixin box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+.conten-box {
+  box-sizing: border-box;
+  @include box;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-around;
+}
+.search-box {
+  @include box;
+  min-width: 1000px;
+  height: 100px;
+  background-color: white;
+  justify-content: space-around;
+}
+
+button.el-button.el-button--Basic.White,
+.el-button--primary {
+  height: 50px;
+  width: 120px;
+}
+.el-text {
+  font-size: 18px;
+  font-weight: 600;
+}
+.homework-box {
+  @include box;
+  flex-direction: column;
+  min-width: 1000px;
+  min-height: 900px;
+  background-color: white;
+}
+.form-box {
+  box-sizing: border-box;
+  padding: 20px;
+  min-height: 800px;
+}
+.stu-form {
+  height: 80%;
+}
+.foot-box {
+  min-width: 900px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.stu-form .el-table__header th {
+  background-color: #f5f7fa !important;
+}
+button.el-button.el-button--small {
+  border: none;
+  color: rgb(101, 153, 191);
+}
diff --git a/src/styles/WorkInfo.css b/src/styles/WorkInfo.css
new file mode 100644
index 0000000000000000000000000000000000000000..ba5ea0cfcbf985e5d50dedfdae9d603325bdd547
--- /dev/null
+++ b/src/styles/WorkInfo.css
@@ -0,0 +1,44 @@
+.big-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  justify-content: space-around;
+}
+
+.form-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  min-height: 500px;
+}
+
+.commit-text {
+  font-size: 23px;
+  color: #646465;
+  font-weight: 600;
+  text-align: left;
+}
+
+.commit-box {
+  width: 700px;
+  height: 700px;
+  background-color: white;
+}
+
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+.el-scrollbar {
+  width: 100px;
+}/*# sourceMappingURL=WorkInfo.css.map */
\ No newline at end of file
diff --git a/src/styles/WorkInfo.css.map b/src/styles/WorkInfo.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..71c9641ef0acd22a21802a072d38e38557ada342
--- /dev/null
+++ b/src/styles/WorkInfo.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["WorkInfo.scss"],"names":[],"mappings":"AAMA;EALE;EACA;EACA;EACA;EAIA;;;AAEF;EATE;EACA;EACA;EACA;EAQA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAEF;EACE","file":"WorkInfo.css"}
\ No newline at end of file
diff --git a/src/styles/WorkInfo.scss b/src/styles/WorkInfo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a01a67f78e78ca26c9bce86bfedd842106762999
--- /dev/null
+++ b/src/styles/WorkInfo.scss
@@ -0,0 +1,40 @@
+@mixin box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+.big-box {
+  @include box;
+  justify-content: space-around;
+}
+.form-box {
+  @include box;
+  min-height: 500px;
+}
+.commit-text {
+  font-size: 23px;
+  color: #646465;
+  font-weight: 600;
+  text-align: left;
+}
+.commit-box {
+  width: 700px;
+  height: 700px;
+  background-color: white;
+}
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+.el-scrollbar {
+  width: 100px;
+}
diff --git a/src/views/StuHomework/StuHomework.vue b/src/views/StuHomework/StuHomework.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e646343149c0624edfaa509eaadf71166eb5530d
--- /dev/null
+++ b/src/views/StuHomework/StuHomework.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="conten-box">
+    <div class="search-box">
+      <span>标题内容</span>
+      <el-input
+        v-model="searchText"
+        placeholder="Enter search text"
+        style="width: 250px; height: 40px"
+      ></el-input>
+      <span>发布时间</span>
+      <el-date-picker
+        v-model="selectedDate"
+        type="date"
+        placeholder="年/月/日"
+        style="width: 250px; height: 40px"
+      ></el-date-picker>
+      <el-button type="primary" @click="search"><span class="el-text">Search</span></el-button>
+      <el-button type="Basic White" @click="search"><span class="el-text">重置</span></el-button>
+    </div>
+    <div class="homework-box">
+      <div class="form-box">
+        <el-table :data="tableData" border class="stu-form">
+          <el-table-column prop="date" label="作业标题" width="370px" align="center" />
+          <el-table-column prop="name" label="发布时间" width="370px" align="center" />
+          <el-table-column align="center" label="详细操作" width="150px">
+            <template #default="scope">
+              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+                点击查看详情 >
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="foot-box">
+        <div class="demonstration">总计100人</div>
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+const selectedDate = ref('');
+const searchText = ref('');
+const router = useRouter();
+interface TableItem {
+  date: string;
+  name: string;
+}
+const originalTableData = ref<TableItem[]>([
+  { date: '2024/8/1', name: 'John Doe' },
+  { date: '2024/8/2', name: 'Jane Smith' },
+  { date: '2024/8/3', name: 'Tom Brown' }
+]);
+const tableData = ref<TableItem[]>(originalTableData.value);
+
+const search = () => {
+  const text = searchText.value.toLowerCase();
+  const date = selectedDate.value;
+  console.log(date);
+
+  const filteredData = originalTableData.value.filter(
+    row => row.date == date || row.name.toLowerCase().includes(text)
+  );
+  console.log(filteredData);
+  tableData.value = filteredData;
+};
+
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`);
+};
+const handleEdit = (index: number, row: TableItem) => {
+  console.log(index, row);
+  router.push('/Homework/HomeInfo');
+};
+</script>
+
+<style scoped>
+@import '../../styles/StuHomework.css';
+</style>
diff --git a/src/views/StuHomework/WorkInfo.vue b/src/views/StuHomework/WorkInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..40d109ae3874365beb3cb1a68ea7d648ab0e2e3f
--- /dev/null
+++ b/src/views/StuHomework/WorkInfo.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="big-box">
+    <div class="commit-box">
+      <div class="commit-text">未提交</div>
+      <div class="big-form-box">
+        <div class="form-box">
+          <el-table :data="filterTableData" border>
+            <el-table-column prop="date" label="作业标题" width="200px" align="center" />
+            <el-table-column prop="name" label="发布时间" width="200px" align="center" />
+            <el-table-column align="center" prop="address" label="详细操作" width="200px" />
+            <el-table-column align="center" label="adress" width="200px">
+              <template #default="scope">
+                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+                  Edit
+                </el-button>
+                <el-button
+                  size="small"
+                  type="danger"
+                  @click="handleDelete(scope.$index, scope.row)"
+                >
+                  Delete
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div class="uncommit-box">
+      <el-scrollbar height="400px">
+        <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const search = ref('');
+const filterTableData = computed(() =>
+  tableData.filter(
+    data => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
+  )
+);
+const handleEdit = (index: number, row: User) => {
+  console.log(index, row);
+};
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row);
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'John',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Morgan',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Jessy',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+];
+</script>
+
+<style scoped>
+@import '../../styles/WorkInfo.css';
+</style>