样式修改

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,12 +22,12 @@ function loadWorks() {
 }
 loadWorks();
 //跳转写作业页面
-function writeWorks(id,sub){
-  if(sub >= 3){
+function writeWorks(id, sub) {
+    if (sub >= 3) {
         ElMessage.error('每个作业可提交3次，您已提交3次。')
-  }else{
+    } else {
         router.push({
-      path:`/doWork/${id}/${sub}`
+            path: `/doWork/${id}/${sub}`
         })
     }
 
@@ -55,7 +55,7 @@ function writeWorks(id,sub){
                                 <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,12 +68,16 @@ 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 */
@@ -85,7 +89,7 @@ body{
     /*左对齐*/
     vertical-align: top;
     /* 这个属性在 Flex 容器中不起作用，将被移除 */
-        display: flex;
+    /* display: flex; */
     /* 启用 Flexbox 布局 */
     align-items: center;
     /* 垂直居中 */
@@ -93,7 +97,8 @@ body{
     /* 设置高度，根据需要调整 */
     width: 50%;
     /* 如果需要，也可以设置宽度 */
-    }
+    padding-top: 4%;
+}
 
 
 .ketangzuoye {
@@ -115,6 +120,7 @@ body{
         width: 100%;
         margin: auto;
     }
+
     .works {
         /* ../api/ShowApi
     work\src\assets\bg@3x.png */
@@ -125,18 +131,18 @@ body{
         min-height: 100vh;
         position: relative;
         margin: auto;
-}
+    }
 
-.work-list {
+    .work-list {
         width: 95%;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         margin: auto;
-}
+    }
 
-.list {
+    .list {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -146,9 +152,9 @@ body{
         border-radius: 10px;
         background-color: rgba(255, 225, 174, 1);
         margin-bottom: 3%;
-}
+    }
 
-.work-item {
+    .work-item {
 
         width: 87%;
         height: 63%;
@@ -157,7 +163,8 @@ body{
         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 */
@@ -185,16 +192,16 @@ body{
         position: absolute;
         bottom: 10%;
         display: flex;
-}
+    }
 
-.work-time {
+    .work-time {
         position: absolute;
         display: flex;
         width: 70%;
         bottom: 12%;
-}
+    }
 
-.deadline {
+    .deadline {
         color: rgba(142, 142, 142, 1);
         font-size: 3.6vw;
         opacity: 1;
@@ -202,9 +209,9 @@ body{
         padding-top: 0.5vw;
         /* 水平居中 */
         /* justify-content: center;  */
-}
+    }
 
-.work-status {
+    .work-status {
         font-size: 3.8vw;
         display: inline-block;
         background: rgba(53, 56, 112, 0.1);
@@ -214,7 +221,8 @@ body{
         border-radius: 5px;
         opacity: 2;
         margin-left: 5px;
-}
+    }
+
     .work-status2 {
         font-size: 3.8vw;
         display: inline-block;
@@ -227,7 +235,7 @@ body{
         margin-left: 5px;
     }
 
-.work-bottem {
+    .work-bottem {
         cursor: pointer;
         display: flex;
         position: absolute;
@@ -245,9 +253,9 @@ body{
         /* 垂直居中 */
         text-align: center;
         /* 确保文本在其容器内居中 */
-}
+    }
 
-.write {
+    .write {
         opacity: 1;
         /** 文本1 */
         padding: auto;
@@ -257,7 +265,7 @@ body{
         line-height: 26.06px;
         color: rgba(255, 255, 255, 1);
 
-}
+    }
 }
 
 /* 平板 */
@@ -266,6 +274,7 @@ body{
         width: 100%;
         margin: auto;
     }
+
     .works {
         /* ../api/ShowApi
     work\src\assets\bg@3x.png */
@@ -276,7 +285,7 @@ body{
         position: relative;
         margin: auto;
         background-size: 100% 100%;
-}
+    }
 
     .work-list {
         width: 95%;
@@ -285,9 +294,9 @@ body{
         align-items: center;
         flex-direction: column;
         margin: auto;
-}
+    }
 
-.list {
+    .list {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -297,9 +306,9 @@ body{
         border-radius: 10px;
         background-color: rgba(255, 225, 174, 1);
         margin-bottom: 3%;
-}
+    }
 
-.work-item {
+    .work-item {
 
         width: 90%;
         height: 70%;
@@ -308,7 +317,8 @@ body{
         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,28 +339,29 @@ body{
         width: 50%;
         /* 如果需要，也可以设置宽度 */
     }
+
     .work-content {
         width: 90%;
         height: 35%;
         position: absolute;
         bottom: 10%;
         display: flex;
-}
+    }
 
-.work-time {
+    .work-time {
         position: absolute;
         display: flex;
         width: 70%;
         bottom: 20%;
-}
+    }
 
-.deadline {
+    .deadline {
         color: rgba(142, 142, 142, 1);
         font-size: 14px;
         opacity: 1;
-}
+    }
 
-.work-status {
+    .work-status {
         display: inline-block;
         background: rgba(53, 56, 112, 0.1);
         padding: 0.5% 2%;
@@ -360,7 +371,8 @@ body{
         border-radius: 5px;
         opacity: 2;
         margin-left: 5px;
-}
+    }
+
     .work-status2 {
         display: inline-block;
         background: #ffe1ae;
@@ -373,7 +385,7 @@ body{
         margin-left: 5px;
     }
 
-.work-bottem {
+    .work-bottem {
         cursor: pointer;
         display: flex;
         position: absolute;
@@ -391,9 +403,9 @@ body{
         /* 垂直居中 */
         text-align: center;
         /* 确保文本在其容器内居中 */
-}
+    }
 
-.write {
+    .write {
         opacity: 1;
         /** 文本1 */
         padding: auto;
@@ -402,14 +414,16 @@ body{
         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
     work\src\assets\bg@3x.png */
@@ -420,8 +434,9 @@ body{
         position: relative;
         margin: auto;
         background-size: 100% 100%;
-}
-.work-name {
+    }
+
+    .work-name {
         opacity: 1;
         /** 文本1 */
         font-size: 1.4vw;
@@ -448,9 +463,9 @@ body{
         align-items: center;
         flex-direction: column;
         margin: auto;
-}
+    }
 
-.list {
+    .list {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -460,9 +475,9 @@ body{
         border-radius: 10px;
         background-color: rgba(255, 225, 174, 1);
         margin-bottom: 3%;
-}
+    }
 
-.work-item {
+    .work-item {
 
         width: 90%;
         height: 70%;
@@ -471,31 +486,32 @@ body{
         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 {
+    .work-time {
         position: absolute;
         display: flex;
         width: 70%;
         bottom: 15%;
-}
+    }
 
-.deadline {
+    .deadline {
         color: rgba(142, 142, 142, 1);
         font-size: 14px;
         opacity: 1;
         align-items: center;
         padding-top: 0.2vw;
-}
+    }
 
-.work-status {
+    .work-status {
         display: inline-block;
         background: rgba(53, 56, 112, 0.1);
         padding: 0.5% 2%;
@@ -505,7 +521,8 @@ body{
         border-radius: 5px;
         opacity: 2;
         margin-left: 5px;
-}
+    }
+
     .work-status2 {
         display: inline-block;
         background: #ffe1ae;
@@ -517,7 +534,8 @@ body{
         opacity: 2;
         margin-left: 5px;
     }
-.work-bottem {
+
+    .work-bottem {
         cursor: pointer;
         display: flex;
         position: absolute;
@@ -535,9 +553,9 @@ body{
         /* 垂直居中 */
         text-align: center;
         /* 确保文本在其容器内居中 */
-}
+    }
 
-.write {
+    .write {
         opacity: 1;
         /** 文本1 */
         padding: auto;
@@ -546,18 +564,11 @@ body{
         letter-spacing: 0px;
         line-height: 26.06px;
         color: rgba(255, 255, 255, 1);
-}
+    }
 
 }
 
-.work-list{
+.work-list {
     margin-top: 12%;
 }
-
-
-
-
-
-
-
 </style>