三防修复

src/views/threePreventionResponsiblePerson/index.vue

@@ -55,7 +55,7 @@
       finished-text="没有更多了"
       @load="onLoad"
     >
-      <div v-for="item in persons" :key="item.id">
+      <div v-for="(item,index) in persons" :key="item.id">
         <div class="person-box" @click="showPersonalInformation(item)">
           <div class="circle">
             <img
@@ -71,9 +71,10 @@
               </div>
             </div>
             <div class="text-ellipsis">{{ item.position }}</div>
-            <div style="margin-top: 5px">
+            <div style="margin-top: 5px; margin-bottom: 10px;display: flex;flex-wrap: wrap">
               <span v-for="i in item.type_parent_list" :key="i" class="type-name">
                 {{ i.type_parent }}
+                <span v-if="index === item.length - 1" class="force-newline"></span>
               </span>
             </div>
           </div>
@@ -231,11 +232,15 @@ const handleSelect = (data) => {
   padding: 3px 15px;
   font-size: 13px;
   color: #8d9bc8;
-  margin-left: 5px;
+  margin-right: 3px;
   border-radius: 2px;
-  &:nth-child(1) {
-    margin-left: 0;
+  &:nth-last-child {
+    margin-right: 0;
   }
+  margin-bottom: 3px;
+}
+.force-newline {
+  margin-right: 100%; /* 足够大的值来触发换行 */
 }
 .text-ellipsis {
   margin-top: 5px;
@@ -325,7 +330,7 @@ const handleSelect = (data) => {
 }
 .link-top {
   height: 0.5px;
-  border-top: solid #fafafa 1px;
+  border-top: solid #f2f2f2 1px;
 }
 .block2 {
   display: flex;

src/views/threePreventionResponsiblePerson/personInformation.vue

@@ -47,13 +47,14 @@
         </div>
         <div class="unit1-box">
           <div class="text">责任类别</div>
-          <div style="margin-top: 5px; margin-left: 20px">
+          <div style="margin-top: 5px; margin-left: 20px; display: flex;flex-wrap: wrap">
             <span
-              v-for="i in personalInformation.type_list"
+              v-for="(i,index) in personalInformation.type_list"
               :key="i"
               class="type-name"
             >
               {{ i.type_parent }}
+              <span v-if="index === i.length - 1" class="force-newline"></span>
             </span>
           </div>
         </div>
@@ -131,17 +132,16 @@ const showPersonalInformation = item => {
   margin-left: 10px;
 }
 .type-name {
-  background-color: #cde6ff;
-  height: 25px;
+  background-color: #eff2fc;
   padding: 3px 15px;
   font-size: 13px;
-  color: dodgerblue;
-  font-weight: bold;
-  margin-left: 5px;
+  color: #8d9bc8;
+  margin-right: 3px;
   border-radius: 2px;
-  &:nth-child(1) {
-    margin-left: 0;
+  &:nth-last-child {
+    margin-right: 0;
   }
+  margin-bottom: 3px;
 }
 .text-ellipsis {
   margin-top: 5px;