feat: 信息类型样式优化

src/components/push-list/PushList.vue

@@ -67,7 +67,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr v-for="(item, index) in tableList" :key="item._id" @click="toDetail(item)">
+        <tr v-for="(item, index) in tableList" :key="index + '_' + item._id" @click="toDetail(item)">
           <td width="48">{{ index + 1 }}</td>
           <td width="315" class="tt-l" v-html="calcTitle(item, index)"></td>
           <td width="84">{{ item.type }}</td>

src/components/selector/InfoTypeSelectorContent.vue

@@ -34,16 +34,20 @@
       <span class="action-text">{{ showMore ? '收起' : '更多' }}</span>
       <span class="el-icon-arrow-down" :class="showMore ? 'rotate180' : ''"></span>
     </span>
-    <div
-      v-for="(item, index) in infoTypeList"
-      :key="index"
-      class="select-group-container"
-    >
-      <div class="select-group-header" :class="{'flex-r-c center': item.name === '拟建项目'}">
+    <div class="select-group-container">
+      <div class="select-group-header"
+           v-for="(item, index) in getInfoTypeList"
+           :key="index"
+           :class="{
+              'z1-line': item.zindex === 1,
+             'flex-r-c center': item.name === '拟建项目'
+           }">
         <button
-          class="j-button-item bgc"
+          class="j-button-item"
           :class="{
-            active: item.selected
+            active: item.selected,
+            bgc: item.zindex === 1,
+            'bgc-opacity': item.zindex !== 1
           }"
           @click="changeInfoTypeState(item)"
         >{{ item.name }}</button>
@@ -57,19 +61,9 @@
           <div>
             <span class="remindtwo"><span>"拟建项目"</span>是指那些处于前期立项、审批阶段的项目。供应商应在立项阶段掌握项目信息，做到早介入，稳拿单。</span>
           </div>
-          <i class="icon-help" slot="reference"></i>
+          <i style="cursor: pointer" class="icon-help" slot="reference"></i>
         </el-popover>
       </div>
-      <div class="select-group-main">
-        <button
-          v-for="(iitem, iindex) in item.children" :key="999-iindex"
-          class="j-button-item bgc-opacity"
-          :class="{
-            active: iitem.selected
-          }"
-          @click="changeInfoTypeState(iitem)"
-          >{{ iitem.name }}</button>
-      </div>
     </div>
   </div>
 </template>
@@ -108,6 +102,23 @@ export default {
       this.setInfoTypeState(newVal)
     }
   },
+  computed: {
+    getInfoTypeList () {
+      const tempArr = []
+      this.infoTypeList.forEach(v => {
+        const tempNode = v
+        tempNode.zindex = 1
+        tempArr.push(tempNode)
+        // eslint-disable-next-line no-unused-expressions
+        tempNode?.children.forEach(s => {
+          const tempS = s
+          tempS.zindex = 2
+          tempArr.push(tempS)
+        })
+      })
+      return tempArr
+    }
+  },
   created () {
     this.initInfoTypeFn()
     this.setInfoTypeState(this.initInfoType)
@@ -361,6 +372,26 @@ export default {
         display: flex;
         flex-wrap: wrap;
       }
+      .z1-line {
+        position: relative;
+        &::after {
+          content: '';
+          position: absolute;
+          right: -1px;
+          top: 50%;
+          width: 1px;
+          height: 16px;
+          background-color: #E3E4E6;
+          margin-top: -8px;
+        }
+      }
+      .bgc {
+        font-weight: 700;
+        color: #1d1d1d;
+      }
+      .j-button-item.bgc-opacity.active {
+        color: #2abed1;
+      }
     }
   }
 </style>

src/views/SubPush.vue

@@ -189,6 +189,13 @@ export default {
   .page--sub-push {
     background-color: #fff;
     ::v-deep {
+      .selector-card.s-line .selector-card-header {
+        min-width: 114px;
+      }
+      .selector-card.industry-selector  .selector-card-content .j-button-item.active {
+        color: #fff;
+        background-color: #2CB7CA;
+      }
       .s-line {
         .select-group-container.right-line {
           &:last-child {
@@ -199,6 +206,9 @@ export default {
         }
       }
       .my-line.s-line {
+        .select-group-container {
+          margin-left: 0;
+        }
          .select-group-container .select-group-main {
            position: relative;
            &::after {