修改样式

src/components/selected-tags-list.vue

@@ -2,7 +2,10 @@
   <div class="flex m-t-20 tags">
     <div v-for="(tags, index) in tagsList" :key="tags" :style="`width: ${100 / tagsList.length}%`" class="tag-group">
       <ul class="tag-list">
-        <li v-for="tag in tags" :key="tag.tagId">{{ tag.tagName }}</li>
+        <li class="tag-item" v-for="tag in tags" :key="tag.tagId">
+          <span>{{ tag.tagName }}</span>
+          <span class="tags-item__name">【选择:{{ tag.newTagVal }}】</span>
+        </li>
       </ul>
       <div v-if="(index === 0 && tagsList.length > 1) || (index === 1 && tagsList.length > 2)" class="tag-relation">
         <span class="tag-relation__wrap">
@@ -39,13 +42,37 @@ export default {
     align-items: stretch;
     .tag-list {
       display: flex;
-      flex-direction: column;
       flex-wrap: wrap;
-      justify-content: center;
+      justify-content: flex-start;
+      align-items: center;
       padding: 0 35px;
       width: 100%;
       font-size: 16px;
       min-height: 120px;
+      .tag-item {
+        padding: 5px 10px;
+        background: #f3f6f9;
+        border-radius: 2px;
+        font-size: 14px;
+        color: #606266;
+
+        span {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        i {
+          color: #999;
+          padding-left: 10px;
+        }
+
+        .tags-item__name {
+          max-width: 200px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
     .tag-relation {
       position: relative;