update

src/modules/connect/components/StepOne.vue

@@ -35,9 +35,9 @@ defineExpose({ getData })
 
 <template>
   <div class="connect-from_icon__box">
-    <div v-for="item in iconItems" :key="item.name" :class="item.checkbox ? 'mr20-mt20 active' : 'mr20-mt20'">
-      <div @click="handleIcon(item)" class="connect-form_icon">
-        <Icon :multicolour="item.checkbox" class="svg" :name="item.name"></Icon>
+    <div v-for="item in iconItems" :key="item.name" :class="item.checkbox ? 'mr20-mt20 active box' : 'mr20-mt20 box'">
+      <div @click="handleIcon(item)" class="connect-form_icon" :style="`background: ${item.checkbox ? '#AA1941' : ''}`">
+        <Icon :multicolour="!item.checkbox" :color="item.checkbox ? '#fff' : ''" class="svg" :name="item.name"></Icon>
       </div>
       <div class="name">{{ item.label }}</div>
     </div>
@@ -46,6 +46,12 @@ defineExpose({ getData })
 
 <style lang="scss">
 .connect-from_icon__box {
+  .box {
+    padding: 10px 20px;
+    width: 180px;
+    height: 100px;
+    border: 1px dashed#ddd;
+  }
   padding: 10px;
   display: flex;
   flex-wrap: wrap;
@@ -66,6 +72,7 @@ defineExpose({ getData })
     margin-top: 8px;
   }
   .connect-form_icon {
+    margin: 0 auto;
     width: 70px;
     height: 70px;
     border-radius: 50%;

src/modules/connect/views/View.vue

@@ -466,13 +466,43 @@ const abilityItem = computed(() => {
   <AppCard title="链接能力">
     <el-tabs class="tabs-box" v-for="item in abilityItem">
       <el-tab-pane :label="item.title">
-        <el-tag v-for="cItem in item.child" class="mr-1" size="large" @click="openMsg">{{ cItem.title }}</el-tag>
+        <div class="tag-box">
+          <div v-for="cItem in item.child" class="tag">{{ cItem?.title }}</div>
+        </div>
+        <div v-if="!item.child.length" class="tag-null">无数据</div>
+        <!-- <el-tag v-for="cItem in item.child" class="mr-1" size="large" @click="openMsg">{{ cItem.title }}</el-tag> -->
       </el-tab-pane>
     </el-tabs>
   </AppCard>
 </template>
 
 <style lang="scss">
+.tabs-box {
+  .tag-box {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .tag {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    width: 240px;
+    line-height: 30px;
+    border-radius: 8px;
+    color: #fff;
+    background: #aa1941;
+    text-align: center;
+    cursor: pointer;
+  }
+  .tag-null {
+    width: 240px;
+    line-height: 30px;
+    border-radius: 8px;
+    color: #fff;
+    background: #aaaaaa;
+    text-align: center;
+    cursor: pointer;
+  }
+}
 .view-info {
   display: flex;
   .view-info_icon {