修改作业名字显示两行，多余显示省略号

work/src/views/WorksShowView.vue

@@ -78,27 +78,7 @@ 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%;
-    /* 如果需要，也可以设置宽度 */
-    padding-top: 4%;
-}
+
 
 
 .ketangzuoye {
@@ -152,6 +132,7 @@ body {
         border-radius: 10px;
         background-color: rgba(255, 225, 174, 1);
         margin-bottom: 3%;
+        
     }
 
     .work-item {
@@ -166,31 +147,29 @@ body {
     }
     
     .work-name {
+       
+
     opacity: 1;
-        /** 文本1 */
-        font-size: 4vw;
+    font-size: 3.6vw;
     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%;
-        /* 如果需要，也可以设置宽度 */
-    }
+     height: 10vw; 
+     overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示两行文本 */
+    text-overflow: ellipsis;
+    /* padding-top: 2vw; */
+}
 
     .work-content {
         width: 95%;
-        height: 35%;
+        height: vw;
         position: absolute;
-        bottom: 10%;
+        bottom: 4%;
         display: flex;
     }
 
@@ -203,7 +182,7 @@ body {
 
     .deadline {
         color: rgba(142, 142, 142, 1);
-        font-size: 3.6vw;
+        font-size: 2.5vw;
         opacity: 1;
         align-items: center;
         padding-top: 0.5vw;
@@ -212,7 +191,7 @@ body {
     }
 
     .work-status {
-        font-size: 3.8vw;
+        font-size: 2.5vw;
         display: inline-block;
         background: rgba(53, 56, 112, 0.1);
         padding: 1% 3.5%;
@@ -224,7 +203,7 @@ body {
     }
 
     .work-status2 {
-        font-size: 3.8vw;
+        font-size: 2.5vw;
         display: inline-block;
         background: #ffe1ae;
         padding: 1% 3.5%;
@@ -240,7 +219,7 @@ body {
         display: flex;
         position: absolute;
         width: 28%;
-        height: 70%;
+        /* height: 70%; */
         right: 0;
         bottom: 2%;
         opacity: 1;
@@ -268,8 +247,157 @@ body {
     }
 }
 
+
+
+/* 电脑 */
+@media (min-width: 1023px) {
+    .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;
+        background-size: 100% 100%;
+    }
+
+   
+.work-name {
+    opacity: 1;
+    font-size: 1.2vw; /* 尝试使用固定像素值 */
+    font-weight: 700;
+    color: rgba(53, 56, 112, 1);
+    text-align: left;
+    width: 50%; 
+    height: 3vw;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示两行文本 */
+    text-overflow: ellipsis;
+    
+}
+
+    .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-content {
+        width: 90%;
+        height: 35%;
+        position: absolute;
+        bottom: 10%;
+        display: flex;
+    }
+
+    .work-time {
+        position: absolute;
+        display: flex;
+        width: 70%;
+        bottom: 15%;
+    }
+
+    .deadline {
+        color: rgba(142, 142, 142, 1);
+        font-size: 1vw;
+        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: 1vw;
+        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: 1vw;
+        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.5vw;
+        font-weight: 700;
+        letter-spacing: 0px;
+        line-height: 26.06px;
+        color: rgba(255, 255, 255, 1);
+    }
+
+}
 /* 平板 */
-@media (min-width: 768px) and (max-width:1280px) {
+@media (min-width: 766px) and (max-width:1023px) {
     .container {
         width: 100%;
         margin: auto;
@@ -322,7 +450,7 @@ body {
     .work-name {
         opacity: 1;
         /** 文本1 */
-        font-size: 1.6rem;
+        font-size: 2.7vw;
         font-weight: 700;
         letter-spacing: 0px;
         color: rgba(53, 56, 112, 1);
@@ -334,17 +462,24 @@ body {
         /* 启用 Flexbox 布局 */
         align-items: center;
         /* 垂直居中 */
-        height: 30%;
+        height: 6vw;
         /* 设置高度，根据需要调整 */
         width: 50%;
         /* 如果需要，也可以设置宽度 */
+
+        overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示两行文本 */
+    text-overflow: ellipsis;
+    padding: 1vw;
     }
 
     .work-content {
         width: 90%;
         height: 35%;
         position: absolute;
-        bottom: 10%;
+        bottom: 5%;
         display: flex;
     }
 
@@ -416,18 +551,17 @@ body {
         color: rgba(255, 255, 255, 1);
     }
 }
-
-/* 电脑 */
-@media (min-width: 1280px) {
+/* 平板 */
+@media (min-device-width: 768px) and (max-device-width: 1023px) {
     .container {
-        width: 27%;
+        width: 100%;
         margin: auto;
     }
 
     .works {
         /* ../api/ShowApi
     work\src\assets\bg@3x.png */
-        background-image: url('../assets/bg@3x.png');
+        background-image: url('../assets/bg@2x.png');
         background-color: #8f98f6;
         width: 100%;
         min-height: 100vh;
@@ -436,26 +570,6 @@ body {
         background-size: 100% 100%;
     }
 
-    .work-name {
-        opacity: 1;
-        /** 文本1 */
-        font-size: 1.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: 70%;
-    }
-
     .work-list {
         width: 95%;
         display: flex;
@@ -488,6 +602,34 @@ body {
         border-radius: 10px;
     }
 
+    .work-name {
+        opacity: 1;
+        /** 文本1 */
+        font-size: 3vw;
+        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: 7vw;
+        /* 设置高度，根据需要调整 */
+        width: 50%;
+        /* 如果需要，也可以设置宽度 */
+
+        overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示两行文本 */
+    text-overflow: ellipsis;
+    padding: 1vw;
+    }
+
     .work-content {
         width: 90%;
         height: 35%;
@@ -500,15 +642,13 @@ body {
         position: absolute;
         display: flex;
         width: 70%;
-        bottom: 15%;
+        bottom: 20%;
     }
 
     .deadline {
         color: rgba(142, 142, 142, 1);
         font-size: 14px;
         opacity: 1;
-        align-items: center;
-        padding-top: 0.2vw;
     }
 
     .work-status {
@@ -565,7 +705,6 @@ body {
         line-height: 26.06px;
         color: rgba(255, 255, 255, 1);
     }
-
 }
 
 .work-list {