实现展示标签组详情的组件

src/components/selected-tags-list.vue

 <template>
-  <div class="flex">
-    <div v-for="(tags, index) in tagsList" :key="tags">
-      <ul>
-        <li v-for="tag in tags" :key="tag.tagId"></li>
+  <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>
       </ul>
-      <div v-if="(index === 0 && tagsList.length > 1) || (index === 1 && tagsList.length > 2)">
-        {{ tagsList[index][0].levelType === 'or' ? '或者' : tagsList[index][0].levelType === 'andNot' ? '剔除' : '' }}
+      <div v-if="(index === 0 && tagsList.length > 1) || (index === 1 && tagsList.length > 2)" class="tag-relation">
+        <span class="tag-relation__wrap">
+          <i class="tag-relation__cont">
+            {{ tagsList[index][0].levelType === 'or' ? '或者' : tagsList[index][0].levelType === 'andNot' ? '剔除' : '' }}
+          </i>
+        </span>
       </div>
     </div>
   </div>
@@ -23,4 +27,50 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tags {
+  width: 100%;
+  border-right: 2px solid #aaa;
+  border-left: 2px solid #aaa;
+  .tag-group {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    .tag-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: center;
+      padding: 0 35px;
+      width: 100%;
+      font-size: 16px;
+      min-height: 120px;
+    }
+    .tag-relation {
+      position: relative;
+      border-left: 2px solid #aaa;
+      .tag-relation__wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        height: 40px;
+        color: #333;
+        cursor: default;
+        background: #cfcfcf;
+        border-radius: 15px;
+        box-shadow: 0 0 0 8px #fff;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+        .tag-relation__cont {
+          transform: rotateZ(-45deg);
+        }
+      }
+    }
+  }
+}
+</style>