修改样式

src/view/memberGroup/edit-tag.vue

 <template>
   <div>
     <!-- 添加标签、编辑标签 -->
-    <el-dialog :title="title" :visible.sync="showEditTagPop" width="540" :before-close="handleClose">
+    <el-dialog :title="title" :visible.sync="showEditTagPop" width="540" :before-close="handleClose" append-to-body>
       <div class="dialog-box">
         <p class="tag-name">{{ tagData.tagName }}</p>
         <p class="tag-desc">根据会员信息扩展字段统计而来</p>

src/view/memberGroup/memberGroupEdit.vue

@@ -6,9 +6,9 @@
         <div class="memberGroupEdit-wrap__body">
           <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
             <el-form-item label="" prop="selectedTags">
-              <div class="m-l-60">
+              <div>
                 已选标签
-                <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
+                <span class="color-909399 font-14">（同一个输入框内标签关系为且）</span>
               </div>
               <tags-group-list
                 :selectedTagsData="ruleForm.selectedTags"
@@ -26,12 +26,14 @@
               <label class="input-label">{{ ruleForm.groupNameLength }}/10</label>
             </el-form-item>
             <el-form-item label="" prop="effectiveDateTmp">
-              <div>分组有效期</div>
+              <div class="effective">
+                分组有效期
+                <el-tooltip content="分组有效期需早于所用标签的最早有效期，且最长不超过365天">
+                  <i class="form-tip-icon">i</i>
+                </el-tooltip>
+              </div>
               <el-date-picker v-model="ruleForm.effectiveDateTmp" type="date" :editable="false" format="yyyyMMdd" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptions">
               </el-date-picker>
-              <div class="form-tip-text">
-                <label>*分组有效期需早于所用标签的最早有效期，且最长不超过365天</label>
-              </div>
             </el-form-item>
             <el-form-item label="" prop="describle" class="w-548">
               <div>分组描述</div>
@@ -41,14 +43,13 @@
               </template>
             </el-form-item>
             <el-form-item label="" prop="updateDay" v-show="ruleForm.isActive == 0">
-              <div>更新频率</div>
+              <div>更新频率 <span class="form-tip-text">(更新时间预计选择日期的凌晨0点至6点)</span></div>
               <el-select class="w-200" v-model="ruleForm.updateType" placeholder="请选择" @change="ruleForm.updateDay = ''">
                 <el-option v-for="(item, index) in rateData" :key="item.label" :label="item.label" :value="index + 1"></el-option>
               </el-select>
               <el-select class="w-200 p-l-8" v-model="ruleForm.updateDay" v-show="ruleForm.updateType != 1" placeholder="请选择">
                 <el-option v-for="(item, index) in rateData[ruleForm.updateType ? ruleForm.updateType - 1 : 0].options" :key="item" :label="item" :value="index + 1"></el-option>
               </el-select>
-              <div class="form-tip-text"><label>*更新时间预计选择日期的凌晨0点至6点</label></div>
             </el-form-item>
             <el-form-item label="">
               <el-button type="primary" @click.stop="postSave">保存</el-button>
@@ -579,12 +580,30 @@ export default {
   width: 100%;
   font-size: 14px;
 
+  .effective {
+    display: flex;
+    align-items: center;
+  }
+
   .form-tip-text {
     margin-top: 8px;
-    height: 13px;
-    line-height: 13px;
-    font-size: 13px;
+    height: 14px;
+    line-height: 14px;
+    font-size: 14px;
+    color: #909399;
+  }
+  .form-tip-icon {
+    margin-left: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
     color: #909399;
+    border: 1px solid #909399;
+    border-radius: 14px;
+    cursor: pointer;
   }
 
   .input-label {
@@ -606,12 +625,12 @@ export default {
 
 .tags {
   display: flex;
-  border-top: 1px solid #aaa;
+  border-top: 1px solid #dcdfe6;
   .tags-list {
     padding-top: 20px;
     width: 20%;
     height: 620px;
-    border-right: 1px solid #aaa;
+    border-right: 1px solid #dcdfe6;
     overflow-x: scroll;
   }
   .tags-table {

src/view/memberGroup/tags-group-list.vue

 <template>
-  <div class="m-l-60">
+  <div :class="{ 'm-l-60': selectedTagsData.length > 1 }">
     <tags-group
       v-for="(item, index) in selectedTagsData"
       :key="item"

src/view/memberGroup/tags-group.vue

@@ -209,7 +209,7 @@ export default {
 
 .tags-group__relation {
   position: relative;
-  transform: translate(-60px, 0);
+  transform: translate(-55px, 0);
 
   .tags-group__btn {
     padding: 0;
@@ -218,6 +218,8 @@ export default {
     text-align: center;
     line-height: 40px;
     border-radius: 40px;
+    border: none;
+    background: #f3f6f9;
   }
 
   &::before,
@@ -225,7 +227,7 @@ export default {
     content: '';
     display: block;
     position: absolute;
-    left: 20px;
+    left: 15px;
     z-index: 1;
     width: 40px;
     height: 80px;
@@ -233,12 +235,12 @@ export default {
   }
 
   &::before {
-    top: -80px;
+    top: -85px;
     border-top: 1px solid #dcdfe6;
   }
 
   &::after {
-    bottom: -80px;
+    bottom: -85px;
     border-bottom: 1px solid #dcdfe6;
   }
 }