diff --git a/work/package-lock.json b/work/package-lock.json
index d7504c3..942b022 100644
--- a/work/package-lock.json
+++ b/work/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.7.9",
+        "date-fns": "^4.1.0",
         "echart": "^0.1.3",
         "echarts": "^5.5.1",
         "element-plus": "^2.9.0",
@@ -1638,7 +1639,7 @@
     },
     "node_modules/axios": {
       "version": "1.7.9",
-      "resolved": "https://mirrors.huaweicloud.com/repository/npm/axios/-/axios-1.7.9.tgz",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
       "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
       "license": "MIT",
       "dependencies": {
@@ -1840,6 +1841,16 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/dayjs/-/dayjs-1.11.13.tgz",
diff --git a/work/package.json b/work/package.json
index 6366624..5ac78ef 100644
--- a/work/package.json
+++ b/work/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "date-fns": "^4.1.0",
     "echart": "^0.1.3",
     "echarts": "^5.5.1",
     "element-plus": "^2.9.0",
diff --git a/work/src/api/ShowApi.js b/work/src/api/ShowApi.js
new file mode 100644
index 0000000..01833c0
--- /dev/null
+++ b/work/src/api/ShowApi.js
@@ -0,0 +1,9 @@
+import service from "."
+
+const ShowApi = {
+    //获取作业列表
+    getWorks(){
+        return service.post('/homework_client/gethomeworklist')
+    },
+}
+export default ShowApi;
\ No newline at end of file
diff --git a/work/src/api/index.js b/work/src/api/index.js
new file mode 100644
index 0000000..f65d6ae
--- /dev/null
+++ b/work/src/api/index.js
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const service = axios.create({
+    baseURL: '/api',
+});
+
+
+//Axios的响应拦截器..
+service.interceptors.response.use(resp => {
+    return resp.data;
+}, error => {
+    return Promise.reject(error);
+});
+export default service;
\ No newline at end of file
diff --git a/work/src/assets/bg@3x.png b/work/src/assets/bg@3x.png
new file mode 100644
index 0000000..7841091
Binary files /dev/null and b/work/src/assets/bg@3x.png differ
diff --git a/work/src/router/index.js b/work/src/router/index.js
index cc1bbac..ba9eedb 100644
--- a/work/src/router/index.js
+++ b/work/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import AddWorkView from '../views/AddWorkView.vue'
+import WorksShowView from '../views/WorksShowView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,6 +21,11 @@ const router = createRouter({
       path:'/addwork',
       name:'addwork',
       component: AddWorkView
+    },
+    ,{
+      path:'/show',
+      name:'workshow',
+      component: WorksShowView
     }
   ]
 })
diff --git a/work/src/views/WorksShowView.vue b/work/src/views/WorksShowView.vue
new file mode 100644
index 0000000..ec00ead
--- /dev/null
+++ b/work/src/views/WorksShowView.vue
@@ -0,0 +1,264 @@
+<script setup>
+import { ref } from 'vue';
+import ShowApi from '../api/ShowApi';
+import { format } from 'date-fns';
+
+
+//作业展示列表
+const works = ref([]);
+function loadWorks() {
+    // ShowApi.getWorks().then(result => {
+    //     works.value = result.data;
+    //     console.log("+++++++++++", works.value);
+    //     works.value.forEach(work => {
+    //         let date = work.endData;
+    //         console.log(date);
+    //         work.endData = format(new Date(date), 'yyyy-MM-dd');
+    //     });
+
+    //     console.log("后", works.value);
+
+    // })
+    works.value = [
+        {
+            id:1,
+            name:"作业一",
+            endData:"2024-09-10"
+        },
+        {
+            id:2,
+            name:"作业二",
+            endData:"2024-09-10"
+        }
+    ]
+}
+loadWorks();
+</script>
+
+<template>
+    <div class="container">
+        <div class="works">
+            <div class="work-header">
+                <img class="ketangzuoye" src="http://39.101.133.168:8857/LiveActivity/img/ketangzuoye.cc888815.png">
+                <img class="book"
+                    src="https://img.js.design/assets/img/65f9235904fb00a3ea731672.png#dcda48ae8da37daeccd6583d45c7790b">
+            </div>
+            <div class="work-list">
+                <div class="list" v-for="work in works">
+                    <div class="work-item">
+                        <div class="work-name">
+                            {{ work.name }}
+                        </div>
+                        <div class="work-content">
+                            <div class="work-time">
+                                    <span class="deadline">截止时间：</span>
+                                    <span class="deadline">{{ work.endData }}</span>
+                                <!-- 作业提价状态 -->
+                                <div class="work-status">未提交</div>
+                            </div>
+                            <div class="work-bottem">
+                                <span class="write">写作业</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.container {
+  width: 27%; /* 假设桌面布局的容器宽度为 80% */
+  margin: 0 auto; /* 居中对齐 */
+}
+body{
+    margin: 0;
+}
+.work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 1.125rem;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+    }
+
+/* 手机 */
+@media (min-width: 344px) and (max-width: 768px) {
+    .container {
+        width: 100%;
+        margin: auto;
+    }
+
+}
+
+/* 平板 */
+@media (min-width: 768px) and (max-width:1280px) {
+    .container {
+        width: 100%;
+        margin: auto;
+    }
+    .work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 1.875rem;
+        font-weight: 700;
+        letter-spacing: 0px;
+        color: rgba(53, 56, 112, 1);
+        text-align: left;
+        /*左对齐*/
+        vertical-align: top;
+        /* 这个属性在 Flex 容器中不起作用，将被移除 */
+        display: flex;
+        /* 启用 Flexbox 布局 */
+        align-items: center;
+        /* 垂直居中 */
+        height: 30%;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+    }
+
+}
+    /* 电脑 */
+@media (min-width: 1280px) {
+    .container {
+        width: 27%;
+        margin: auto;
+    }
+
+}
+.works {
+    /* ../api/ShowApi
+    work\src\assets\bg@3x.png */
+    background-image: url('../assets/bg@3x.png');
+    background-color: #8f98f6;
+    width: 100%;
+    min-height: 100vh;
+    position: relative;
+    margin: auto;
+}
+
+
+.ketangzuoye {
+    margin-top: 2vh;
+    margin-left: 2vw;
+    width: 43%;
+}
+
+.book {
+    float: right;
+    margin-right: 1vw;
+    width: 30%;
+}
+
+.work-list {
+    width: 95%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 95%;
+    height: 17vh;
+    opacity: 1;
+    border-radius: 10px;
+    background-color: rgba(255, 225, 174, 1);
+    margin-bottom: 3%;
+}
+
+.work-item {
+
+    width: 90%;
+    height: 70%;
+    padding: 10px;
+    position: relative;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%);
+    border-radius: 10px;
+    border-radius: 10px;
+}
+
+
+
+.work-content {
+    width: 90%;
+    height: 35%;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+}
+
+.work-time {
+    position: absolute;
+    display: flex;
+    width: 70%;
+    bottom: 20%;
+}
+
+.deadline {
+    color: rgba(142, 142, 142, 1);
+    font-size: 0.875rem;
+    opacity: 1;
+}
+
+.work-status {
+    display: inline-block;
+    background: rgba(53, 56, 112, 0.1);
+    padding: 0.5% 1%;
+    text-align: center;
+    color: #353870;
+    font-size: 0.875rem;
+    border-radius: 5px;
+    opacity: 1;
+    margin-left: 5px;
+}
+
+.work-bottem {
+    display: flex;
+    position: absolute;
+    width: 25%;
+    height: 70%;
+    right: 0%;
+    bottom: 2%;
+    opacity: 1;
+    border-radius: 50px;
+    background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%);
+    border: 1px solid #a5e0f3;
+    justify-content: center;
+    /* 水平居中 */
+    align-items: center;
+    /* 垂直居中 */
+    text-align: center;
+    /* 确保文本在其容器内居中 */
+}
+
+.write {
+    opacity: 1;
+    /** 文本1 */
+    padding: auto;
+    font-size: 1.125rem;
+    font-weight: 700;
+    letter-spacing: 0px;
+    line-height: 26.06px;
+    color: rgba(255, 255, 255, 1);
+}
+</style>
\ No newline at end of file
diff --git a/work/vite.config.js b/work/vite.config.js
index 63d1997..0a8026e 100644
--- a/work/vite.config.js
+++ b/work/vite.config.js
@@ -13,4 +13,13 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        //后端服务器地址
+        target: 'http://192.168.8.191:8080',
+        changeOrigin: true,
+      }
+    }
+  }
 })