修改剔除按钮的样式

src/view/memberGroup/memberGroupEdit.vue

@@ -28,7 +28,9 @@
                     </div>
                   </div>
                 </div>
-                <el-button v-show="(tagsGroupIndex === 0 && selectedTagData.length >= 2) || (tagsGroupIndex === 1 && selectedTagData.length >= 3)" type="text" @click="changeTagsRelation">剔除</el-button>
+                <div class="memberGroupEdit-wrap__tags-relation" v-show="(tagsGroupIndex === 0 && selectedTagData.length >= 2) || (tagsGroupIndex === 1 && selectedTagData.length >= 3)">
+                  <el-button type="btn btn-default memberGroupEdit-wrap__btn" @click="changeTagsRelation">剔除</el-button>
+                </div>
               </div>
               <el-button class="m-t-10 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTgsGroup">&nbsp;&nbsp;添加</el-button>
             </el-form-item>
@@ -749,8 +751,8 @@ export default {
 .memberGroupEdit-wrap__tags {
   position: relative;
   padding: 12px 0;
+  transform: translate(60px, 0);
   border: 1px solid #dcdfe6;
-  border-left: 10px solid #1890ff;
   border-radius: 4px;
 
   .memberGroupEdit-wrap__tags-box {
@@ -813,6 +815,36 @@ export default {
     }
   }
 }
+.memberGroupEdit-wrap__tags-relation {
+  position: relative;
+  .memberGroupEdit-wrap__btn {
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 40px;
+  }
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 20px;
+    z-index: 1;
+    width: 40px;
+    height: 80px;
+    border-left: 1px solid #dcdfe6;
+  }
+  &::before {
+    top: -80px;
+    border-top: 1px solid #dcdfe6;
+  }
+  &::after {
+    bottom: -80px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+}
 
 .memberGroupEdit-wrap__body {
   width: 100%;