#

src/views/ProjectManagement.vue

@@ -79,6 +79,9 @@
 <!-- 循环展示框列表开始 -->
     <div class="projectBlock">
       <div class="classBlock" v-for="(item,index) in items" :key="index">
+        <div class="projectBlockPosition">
+          {{ item.finish }}
+        </div>
         <img src='../assets/img/login-bg-autumn.jpg' alt="">
         <div class="classBlock1">
             <div class="classBlock2">{{ item.projectName }}</div>
@@ -118,6 +121,7 @@
           items:[
              
               {
+                finish:'已结题',
                 projectName:'疯狂星期四',
                 person:'袁一鸣',
                 school:'深技师',
@@ -125,6 +129,7 @@
                 num:'JK123245679'
               },
               {
+                finish:'已结题',
                 projectName:'疯狂星期四',
                 person:'袁一鸣',
                 school:'深技师',
@@ -133,6 +138,8 @@
               },
               {
                 projectName:'疯狂星期四',
+                finish:'已结题',
+
                 person:'袁一鸣',
                 school:'深技师',
                 blogs:'个人博客',
@@ -140,6 +147,8 @@
               },
               {
                 projectName:'疯狂星期四',
+                finish:'已结题',
+
                 person:'袁一鸣',
                 school:'深技师',
                 blogs:'个人博客',
@@ -182,7 +191,6 @@
 .ProjectManagement{
   
     .projectBlock{   //大框
-      box-sizing: border-box;
       width: 100%;
       height: 350px;
       display: flex;
@@ -190,8 +198,8 @@
       flex-wrap: wrap;
       .classBlock{   //每个独立小框
           flex-shrink: 0;
-      overflow: hidden;
-          
+          overflow: hidden;
+          position: relative;
           margin-right: 30px;
           margin-bottom: 15px;
           width: 310px;height: 300px;
@@ -199,19 +207,33 @@
           box-shadow: 1px 2px 3px #ccc;
           border: 1px solid #ccc;
           border-radius: 5px;
+
+          .projectBlockPosition{    //完成状态
+            position: absolute;
+            width: 100px;
+            height: 40px;
+            line-height: 40px;
+            background: #000;
+            opacity: 0.7;
+            left: 0px;
+            font-size: 16px;
+            top: 0px;
+            color:#d9dde7;
+            font-size: 14px;
+          }
           img{
             width: 100%;height: 150px;
           }
 
           .classBlock1{   //中间栏
-            margin-bottom: 12px;
+            margin-bottom: 10px;
             margin-top: 5px;
             box-sizing: border-box;
             padding: 0 5px;
             .classBlock2{   //项目名称
               margin-left: 5px;
               margin-bottom: 5px;
-              margin-top: 8px;
+              margin-top: 4px;
               text-align: left;
               font-size: 18px;
             }
@@ -220,12 +242,12 @@
               padding: 0 5px;
               font-size: 16px;
               width: 100%;
-              margin-top: 7px;
+              margin-top: 6px;
               display: flex;
               justify-content: space-between;
             }
             .classBlock4{  //博客、编号
-              margin-top: 6px;
+              margin-top: 8px;
             }
           }
 

src/views/resultsShow.vue

@@ -187,7 +187,6 @@
 
     .classBlock{   //独立小框
       flex-shrink: 0;
-      margin: 0 10px 10px 0;
       width: 310px;
       height: 300px;
       margin-right: 30px;
@@ -215,14 +214,16 @@
         width: 100%;height: 150px;
       }
 
-      .classBlock1{   //图片下面文字部分
+      .classBlock1{   //中间栏
         margin-bottom: 10px;
         box-sizing: border-box;
         padding: 0 5px;
+        margin-top: 5px;
+
         .classBlock2{   //项目名称
           box-sizing: border-box;
           padding: 0 5px;
-          margin-top: 10px;
+          // margin-top: 10px;
           margin-top: 4px;
           margin-bottom: 5px;
           text-align: left;
@@ -238,9 +239,7 @@
           justify-content: space-between;
         }
         .classBlock4{
-          margin-top: 5px;
           margin-top: 8px;
-          letter-spacing: -1px;
         }
       }
       .bt1{   //项目成果展示按钮