Pārlūkot izejas kodu

feat: PC个人简历标签展示修改为弹性布局

zhangying 10 mēneši atpakaļ
vecāks
revīzija
72009eaac2
1 mainītis faili ar 8 papildinājumiem un 17 dzēšanām
  1. 8 17
      vue/src/views/jobUserManager/jobuser/vitae.vue

+ 8 - 17
vue/src/views/jobUserManager/jobuser/vitae.vue

@@ -49,7 +49,7 @@
         <!-- 标签 -->
         <div class="label-info" v-if="jobUserInfo.listLabel.length >= 1">
           <p class="title">标签</p>
-          <div class="grid-box label-grid-media">
+          <div class="flex-box">
             <a-tag v-for="(item, index) in jobUserInfo.listLabel" :key="index">
               {{ item.labelName }}
             </a-tag>
@@ -384,13 +384,16 @@ export default {
           margin-bottom: 10px;
         }
 
-        .grid-box {
-          display: grid;
-          grid-template-columns: repeat(3, minmax(0, 1fr));
-          row-gap: 8px;
+        .flex-box {
+          display: flex;
+          flex-wrap: wrap;
 
           .ant-tag {
             text-align: center;
+            margin-bottom: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
       }
@@ -403,18 +406,6 @@ export default {
       margin-left: 10px;
     }
   }
-
-  @media (max-width: 1700px) {
-    .label-grid-media {
-      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-    }
-  }
-
-  @media (max-width: 1500px) {
-    .label-grid-media {
-      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
-    }
-  }
 }