调整样式适配不同设备

work/src/assets/main.css

@@ -0,0 +1,4 @@
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}

work/src/views/WorksShowView.vue

@@ -33,6 +33,15 @@ function loadWorks() {
     ]
 }
 loadWorks();
+//跳转写作业页面
+function writeWorks(id){
+    router.push({
+        path:'/doWork',
+        query:{
+            id:id,
+        }
+    })
+}
 </script>
 
 <template>
@@ -51,13 +60,12 @@ loadWorks();
                         </div>
                         <div class="work-content">
                             <div class="work-time">
-                                    <span class="deadline">截止时间：</span>
-                                    <span class="deadline">{{ work.endData }}</span>
+                                    <span class="deadline">截止时间：{{ work.endData }}</span>
                                 <!-- 作业提价状态 -->
                                 <div class="work-status">未提交</div>
                             </div>
                             <div class="work-bottem">
-                                <span class="write">写作业</span>
+                                <span class="write" @click="writeWorks(work.id)">写作业</span>
                             </div>
                         </div>
                     </div>
@@ -78,7 +86,7 @@ body{
 .work-name {
         opacity: 1;
         /** 文本1 */
-        font-size: 1.125rem;
+        font-size: 1.5vw;
         font-weight: 700;
         letter-spacing: 0px;
         color: rgba(53, 56, 112, 1);
@@ -96,13 +104,156 @@ body{
         /* 如果需要，也可以设置宽度 */
     }
 
+
+.ketangzuoye {
+    margin-top: 2vh;
+    margin-left: 2vw;
+    width: 43%;
+}
+
+.book {
+    float: right;
+    margin-right: 1vw;
+    width: 30%;
+}
+
+
 /* 手机 */
-@media (min-width: 344px) and (max-width: 768px) {
+@media (max-width: 768px) {
     .container {
         width: 100%;
         margin: auto;
     }
+    .works {
+    /* ../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;
+}
 
+.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%;
+}
+
+.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;
+}
+    .work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 4vw;
+        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%;
+        /* 如果需要，也可以设置宽度 */
+    }
+
+    .work-content {
+    width: 95%;
+    height: 35%;
+    position: absolute;
+    bottom: 10%;
+    display: flex;
+}
+
+.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;  */
+}
+
+.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-bottem {
+    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);
+}
 }
 
 /* 平板 */
@@ -111,6 +262,49 @@ body{
         width: 100%;
         margin: auto;
     }
+    .works {
+    /* ../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%;
+}
+
+    .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: 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-name {
         opacity: 1;
         /** 文本1 */
@@ -131,7 +325,68 @@ body{
         width: 50%;
         /* 如果需要，也可以设置宽度 */
     }
+    .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: 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-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);
+}
 }
     /* 电脑 */
 @media (min-width: 1280px) {
@@ -139,9 +394,7 @@ body{
         width: 27%;
         margin: auto;
     }
-
-}
-.works {
+    .works {
     /* ../api/ShowApi
     work\src\assets\bg@3x.png */
     background-image: url('../assets/bg@3x.png');
@@ -150,22 +403,30 @@ body{
     min-height: 100vh;
     position: relative;
     margin: auto;
+    background-size: 100% 100%;
 }
+.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%;
+        /* 如果需要，也可以设置宽度 */
+    }
 
-
-.ketangzuoye {
-    margin-top: 2vh;
-    margin-left: 2vw;
-    width: 43%;
-}
-
-.book {
-    float: right;
-    margin-right: 1vw;
-    width: 30%;
-}
-
-.work-list {
+    .work-list {
     width: 95%;
     display: flex;
     justify-content: center;
@@ -178,7 +439,7 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 95%;
+    width: 97%;
     height: 17vh;
     opacity: 1;
     border-radius: 10px;
@@ -196,10 +457,7 @@ body{
     border-radius: 10px;
     border-radius: 10px;
 }
-
-
-
-.work-content {
+    .work-content {
     width: 90%;
     height: 35%;
     position: absolute;
@@ -211,24 +469,26 @@ body{
     position: absolute;
     display: flex;
     width: 70%;
-    bottom: 20%;
+    bottom: 15%;
 }
 
 .deadline {
     color: rgba(142, 142, 142, 1);
-    font-size: 0.875rem;
+    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% 1%;
+    padding: 0.5% 2%;
     text-align: center;
     color: #353870;
-    font-size: 0.875rem;
+    font-size: 1rem;
     border-radius: 5px;
-    opacity: 1;
+    opacity: 2;
     margin-left: 5px;
 }
 
@@ -261,4 +521,17 @@ body{
     line-height: 26.06px;
     color: rgba(255, 255, 255, 1);
 }
+
+}
+
+.work-list{
+    margin-top: 12%;
+}
+
+
+
+
+
+
+
 </style>