From 3256a11ce1973d027b2f36a981e65fbe13f8211a Mon Sep 17 00:00:00 2001
From: lenghui <h280650@163.com>
Date: Mon, 23 Dec 2024 16:43:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 work/src/views/WorksShowView.vue | 749 ++++++++++++++++++++-------------------
 1 file changed, 380 insertions(+), 369 deletions(-)

diff --git a/work/src/views/WorksShowView.vue b/work/src/views/WorksShowView.vue
index 3fc87f3..7919230 100644
--- a/work/src/views/WorksShowView.vue
+++ b/work/src/views/WorksShowView.vue
@@ -2,8 +2,8 @@
 import { ref } from 'vue';
 import ShowApi from '../api/ShowApi';
 import { format } from 'date-fns';
-import {useRouter} from "vue-router";
-import {ElMessage} from "element-plus";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
 
 const router = useRouter()
 
@@ -22,14 +22,14 @@ function loadWorks() {
 }
 loadWorks();
 //跳转写作业页面
-function writeWorks(id,sub){
-  if(sub >= 3){
-    ElMessage.error('每个作业可提交3次，您已提交3次。')
-  }else{
-    router.push({
-      path:`/doWork/${id}/${sub}`
-    })
-  }
+function writeWorks(id, sub) {
+    if (sub >= 3) {
+        ElMessage.error('每个作业可提交3次，您已提交3次。')
+    } else {
+        router.push({
+            path: `/doWork/${id}/${sub}`
+        })
+    }
 
 }
 </script>
@@ -50,12 +50,12 @@ function writeWorks(id,sub){
                         </div>
                         <div class="work-content">
                             <div class="work-time">
-                                    <span class="deadline">截止时间：{{ work.endData }}</span>
-                              <!-- 作业提价状态 -->
-                              <div v-if="work.submit == 0" class="work-status">未提交</div>
-                              <div v-else class="work-status2">已提交</div>
+                                <span class="deadline">截止时间：{{ work.endData }}</span>
+                                <!-- 作业提价状态 -->
+                                <div v-if="work.submit == 0" class="work-status">未提交</div>
+                                <div v-else class="work-status2">已提交</div>
                             </div>
-                            <div class="work-bottem" @click="writeWorks(work.groupId,work.submit)">
+                            <div class="work-bottem" @click="writeWorks(work.groupId, work.submit)">
                                 <span class="write">写作业</span>
                             </div>
                         </div>
@@ -68,32 +68,37 @@ function writeWorks(id,sub){
 
 <style scoped>
 .container {
-  width: 27%; /* 假设桌面布局的容器宽度为 80% */
-  margin: 0 auto; /* 居中对齐 */
+    width: 27%;
+    /* 假设桌面布局的容器宽度为 80% */
+    margin: 0 auto;
+    /* 居中对齐 */
 }
-body{
+
+body {
     margin: 0;
 }
+
 .work-name {
-        opacity: 1;
-        /** 文本1 */
-        font-size: 1.5vw;
-        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%;
-        /* 如果需要，也可以设置宽度 */
-    }
+    opacity: 1;
+    /** 文本1 */
+    font-size: 1.5vw;
+    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%;
+    /* 如果需要，也可以设置宽度 */
+    padding-top: 4%;
+}
 
 
 .ketangzuoye {
@@ -115,49 +120,51 @@ body{
         width: 100%;
         margin: auto;
     }
+
     .works {
-    /* ../api/ShowApi
+        /* ../api/ShowApi
     work\src\assets\bg@3x.png */
-    background-image: url('../assets/bg.png');
-    background-size: 100% 100%;
-    background-color: #8f98f6;
-    width: 100%;
-    min-height: 100vh;
-    position: relative;
-    margin: auto;
-}
+        background-image: url('../assets/bg.png');
+        background-size: 100% 100%;
+        background-color: #8f98f6;
+        width: 100%;
+        min-height: 100vh;
+        position: relative;
+        margin: auto;
+    }
 
-.work-list {
-    width: 95%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    margin: auto;
-}
+    .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: 97%;
-    height: 16vh;
-    opacity: 1;
-    border-radius: 10px;
-    background-color: rgba(255, 225, 174, 1);
-    margin-bottom: 3%;
-}
+    .list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 97%;
+        height: 16vh;
+        opacity: 1;
+        border-radius: 10px;
+        background-color: rgba(255, 225, 174, 1);
+        margin-bottom: 3%;
+    }
 
-.work-item {
+    .work-item {
+
+        width: 87%;
+        height: 63%;
+        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;
+    }
 
-    width: 87%;
-    height: 63%;
-    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-name {
         opacity: 1;
         /** 文本1 */
@@ -180,84 +187,85 @@ body{
     }
 
     .work-content {
-    width: 95%;
-    height: 35%;
-    position: absolute;
-    bottom: 10%;
-    display: flex;
-}
+        width: 95%;
+        height: 35%;
+        position: absolute;
+        bottom: 10%;
+        display: flex;
+    }
 
-.work-time {
-    position: absolute;
-    display: flex;
-    width: 70%;
-    bottom: 12%;
-}
+    .work-time {
+        position: absolute;
+        display: flex;
+        width: 70%;
+        bottom: 12%;
+    }
 
-.deadline {
-    color: rgba(142, 142, 142, 1);
-    font-size: 3.6vw;
-    opacity: 1;
-    align-items: center;
-    padding-top: 0.5vw;
-    /* 水平居中 */
-    /* justify-content: center;  */
-}
+    .deadline {
+        color: rgba(142, 142, 142, 1);
+        font-size: 3.6vw;
+        opacity: 1;
+        align-items: center;
+        padding-top: 0.5vw;
+        /* 水平居中 */
+        /* justify-content: center;  */
+    }
 
-.work-status {
-    font-size: 3.8vw;
-    display: inline-block;
-    background: rgba(53, 56, 112, 0.1);
-    padding: 1% 3.5%;
-    text-align: center;
-    color: #353870;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-}
-  .work-status2 {
-    font-size: 3.8vw;
-    display: inline-block;
-    background: #ffe1ae;
-    padding: 1% 3.5%;
-    text-align: center;
-    color: #353870;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-  }
-
-.work-bottem {
-  cursor: pointer;
-    display: flex;
-    position: absolute;
-    width: 28%;
-    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;
-    /* 确保文本在其容器内居中 */
-}
+    .work-status {
+        font-size: 3.8vw;
+        display: inline-block;
+        background: rgba(53, 56, 112, 0.1);
+        padding: 1% 3.5%;
+        text-align: center;
+        color: #353870;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
 
-.write {
-    opacity: 1;
-    /** 文本1 */
-    padding: auto;
-    font-size: 18px;
-    font-weight: 700;
-    letter-spacing: 0px;
-    line-height: 26.06px;
-    color: rgba(255, 255, 255, 1);
-  
-}
+    .work-status2 {
+        font-size: 3.8vw;
+        display: inline-block;
+        background: #ffe1ae;
+        padding: 1% 3.5%;
+        text-align: center;
+        color: #353870;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
+
+    .work-bottem {
+        cursor: pointer;
+        display: flex;
+        position: absolute;
+        width: 28%;
+        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: 18px;
+        font-weight: 700;
+        letter-spacing: 0px;
+        line-height: 26.06px;
+        color: rgba(255, 255, 255, 1);
+
+    }
 }
 
 /* 平板 */
@@ -266,49 +274,51 @@ body{
         width: 100%;
         margin: auto;
     }
+
     .works {
-    /* ../api/ShowApi
+        /* ../api/ShowApi
     work\src\assets\bg@3x.png */
-    background-image: url('../assets/bg@2x.png');
-    background-color: #8f98f6;
-    width: 100%;
-    min-height: 100vh;
-    position: relative;
-    margin: auto;
-    background-size: 100% 100%;
-}
+        background-image: url('../assets/bg@2x.png');
+        background-color: #8f98f6;
+        width: 100%;
+        min-height: 100vh;
+        position: relative;
+        margin: auto;
+        background-size: 100% 100%;
+    }
 
     .work-list {
-    width: 95%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    margin: auto;
-}
+        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: 97%;
-    height: 17vh;
-    opacity: 1;
-    border-radius: 10px;
-    background-color: rgba(255, 225, 174, 1);
-    margin-bottom: 3%;
-}
+    .list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 97%;
+        height: 17vh;
+        opacity: 1;
+        border-radius: 10px;
+        background-color: rgba(255, 225, 174, 1);
+        margin-bottom: 3%;
+    }
 
-.work-item {
+    .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;
+    }
 
-    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-name {
         opacity: 1;
         /** 文本1 */
@@ -329,99 +339,104 @@ body{
         width: 50%;
         /* 如果需要，也可以设置宽度 */
     }
+
     .work-content {
-    width: 90%;
-    height: 35%;
-    position: absolute;
-    bottom: 10%;
-    display: flex;
-}
+        width: 90%;
+        height: 35%;
+        position: absolute;
+        bottom: 10%;
+        display: flex;
+    }
 
-.work-time {
-    position: absolute;
-    display: flex;
-    width: 70%;
-    bottom: 20%;
-}
+    .work-time {
+        position: absolute;
+        display: flex;
+        width: 70%;
+        bottom: 20%;
+    }
 
-.deadline {
-    color: rgba(142, 142, 142, 1);
-    font-size: 14px;
-    opacity: 1;
-}
+    .deadline {
+        color: rgba(142, 142, 142, 1);
+        font-size: 14px;
+        opacity: 1;
+    }
 
-.work-status {
-    display: inline-block;
-    background: rgba(53, 56, 112, 0.1);
-    padding: 0.5% 2%;
-    text-align: center;
-    color: #353870;
-    font-size: 1rem;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-}
-  .work-status2 {
-    display: inline-block;
-    background: #ffe1ae;
-    padding: 0.5% 2%;
-    text-align: center;
-    color: #353870;
-    font-size: 1rem;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-  }
-
-.work-bottem {
-  cursor: pointer;
-    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;
-    /* 确保文本在其容器内居中 */
-}
+    .work-status {
+        display: inline-block;
+        background: rgba(53, 56, 112, 0.1);
+        padding: 0.5% 2%;
+        text-align: center;
+        color: #353870;
+        font-size: 1rem;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
 
-.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);
-}
+    .work-status2 {
+        display: inline-block;
+        background: #ffe1ae;
+        padding: 0.5% 2%;
+        text-align: center;
+        color: #353870;
+        font-size: 1rem;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
+
+    .work-bottem {
+        cursor: pointer;
+        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);
+    }
 }
-    /* 电脑 */
+
+/* 电脑 */
 @media (min-width: 1280px) {
     .container {
         width: 27%;
         margin: auto;
     }
+
     .works {
-    /* ../api/ShowApi
+        /* ../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;
-    background-size: 100% 100%;
-}
-.work-name {
+        background-image: url('../assets/bg@3x.png');
+        background-color: #8f98f6;
+        width: 100%;
+        min-height: 100vh;
+        position: relative;
+        margin: auto;
+        background-size: 100% 100%;
+    }
+
+    .work-name {
         opacity: 1;
         /** 文本1 */
         font-size: 1.4vw;
@@ -442,122 +457,118 @@ body{
     }
 
     .work-list {
-    width: 95%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    margin: auto;
-}
+        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: 97%;
-    height: 17vh;
-    opacity: 1;
-    border-radius: 10px;
-    background-color: rgba(255, 225, 174, 1);
-    margin-bottom: 3%;
-}
+    .list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 97%;
+        height: 17vh;
+        opacity: 1;
+        border-radius: 10px;
+        background-color: rgba(255, 225, 174, 1);
+        margin-bottom: 3%;
+    }
 
-.work-item {
+    .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;
+    }
 
-    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;
-}
+        width: 90%;
+        height: 35%;
+        position: absolute;
+        bottom: 10%;
+        display: flex;
+    }
 
-.work-time {
-    position: absolute;
-    display: flex;
-    width: 70%;
-    bottom: 15%;
-}
+    .work-time {
+        position: absolute;
+        display: flex;
+        width: 70%;
+        bottom: 15%;
+    }
 
-.deadline {
-    color: rgba(142, 142, 142, 1);
-    font-size: 14px;
-    opacity: 1;
-    align-items: center;
-    padding-top: 0.2vw;
-}
+    .deadline {
+        color: rgba(142, 142, 142, 1);
+        font-size: 14px;
+        opacity: 1;
+        align-items: center;
+        padding-top: 0.2vw;
+    }
 
-.work-status {
-    display: inline-block;
-    background: rgba(53, 56, 112, 0.1);
-    padding: 0.5% 2%;
-    text-align: center;
-    color: #353870;
-    font-size: 1rem;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-}
-  .work-status2 {
-    display: inline-block;
-    background: #ffe1ae;
-    padding: 0.5% 2%;
-    text-align: center;
-    color: #353870;
-    font-size: 1rem;
-    border-radius: 5px;
-    opacity: 2;
-    margin-left: 5px;
-  }
-.work-bottem {
-    cursor: pointer;
-    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;
-    /* 确保文本在其容器内居中 */
-}
+    .work-status {
+        display: inline-block;
+        background: rgba(53, 56, 112, 0.1);
+        padding: 0.5% 2%;
+        text-align: center;
+        color: #353870;
+        font-size: 1rem;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
 
-.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);
-}
+    .work-status2 {
+        display: inline-block;
+        background: #ffe1ae;
+        padding: 0.5% 2%;
+        text-align: center;
+        color: #353870;
+        font-size: 1rem;
+        border-radius: 5px;
+        opacity: 2;
+        margin-left: 5px;
+    }
+
+    .work-bottem {
+        cursor: pointer;
+        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);
+    }
 
 }
 
-.work-list{
+.work-list {
     margin-top: 12%;
 }
-
-
-
-
-
-
-
 </style>
\ No newline at end of file