style: 选择器中的button选中样式抽取

src/components/selector/BuyerclassSelectorContent.vue

@@ -41,7 +41,7 @@
       <!-- <div class="index-anchor" :id="key" :data-index="key" v-if="key !== '#'">{{ key }}</div> -->
       <div class="select-group">
         <button v-for="(cate, i) in item" :key="999-i"
-          class="j-button-item"
+          class="j-button-item bgc"
           :class="{
             active: cate.selected,
             [cate.id]: true
@@ -274,13 +274,6 @@ export default {
         height: 38px;
         overflow: hidden;
       }
-      .j-button-item {
-        border-color: transparent;
-        &.active {
-          color: #fff;
-          background-color: $color-text--highlight;
-        }
-      }
     }
     .select-group-container {
       margin: 0 4px;

src/components/selector/IndustrySelectorContent.vue

@@ -50,7 +50,7 @@
             active: item.selected,
             [item.id]: true,
             'button-level-0': item.level === 0,
-            'button-level-1': item.level === 1,
+            'bgc': item.level === 1,
           }"
           @click="changeIndustryState(item)"
         >{{ item.name }}</button>
@@ -58,7 +58,7 @@
       <div class="select-group-main">
         <button
           v-for="(iitem, iindex) in item.children" :key="999-iindex"
-          class="j-button-item button-level-2"
+          class="j-button-item bgc-opacity"
           :class="{
             active: iitem.selected,
             [iitem.id]: true
@@ -365,32 +365,16 @@ export default {
         height: 38px;
         overflow: hidden;
       }
-      .j-button-item {
-        border-color: transparent;
-      }
       .button-level-0 {
         font-weight: 700;
         border-color: transparent;
       }
-      .button-level-1 {
-        color: $color-text--highlight;
-        &.active {
-          color: #fff;
-          background-color: $color-text--highlight;
-        }
-      }
-      .button-level-2 {
-        &.active {
-          background: rgba(44,183,202,0.10);
-        }
-      }
     }
     .select-group-container {
       position: relative;
       margin: 0 4px;
       display: flex;
       flex-wrap: wrap;
-      width: 100%;
       &:not(:last-of-type)::after {
         content: '';
         position: absolute;

src/components/selector/InfoTypeSelectorContent.vue

@@ -41,7 +41,7 @@
     >
       <div class="select-group-header">
         <button
-          class="j-button-item button-level-1"
+          class="j-button-item bgc"
           :class="{
             active: item.selected
           }"
@@ -51,7 +51,7 @@
       <div class="select-group-main">
         <button
           v-for="(iitem, iindex) in item.children" :key="999-iindex"
-          class="j-button-item button-level-2"
+          class="j-button-item bgc-opacity"
           :class="{
             active: iitem.selected
           }"
@@ -314,25 +314,10 @@ export default {
         height: 38px;
         overflow: hidden;
       }
-      .j-button-item {
-        border-color: transparent;
-      }
       .button-level-0 {
         font-weight: 700;
         border-color: transparent;
       }
-      .button-level-1 {
-        color: $color-text--highlight;
-        &.active {
-          color: #fff;
-          background-color: $color-text--highlight;
-        }
-      }
-      .button-level-2 {
-        &.active {
-          background: rgba(44,183,202,0.10);
-        }
-      }
     }
     .select-group-container {
       margin: 0 4px;

src/components/selector/SelectorCard.vue

@@ -80,9 +80,17 @@ export default {
           &.hover:hover {
             color: #2abed1;
           }
-          &.active {
+          // 选中状态
+          &.active { // 默认蓝色边框蓝色字体
             color: #2abed1;
             border-color: #2abed1;
+            &.bgc { // 默认蓝色背景白色字体
+              color: #fff;
+              background-color: $color-text--highlight;
+            }
+            &.bgc-opacity { // 默认蓝色边框蓝色字体蓝色半透明背景
+              background-color: rgba(44,183,202,0.10);
+            }
           }
         }
 
@@ -216,18 +224,23 @@ export default {
     .selector-content {
       position: relative;
     }
-    ::v-deep .action-button.show-more {
-      display: flex;
-      align-items: center;
-      position: absolute;
-      top: 8px;
-      right: 0;
-      font-size: 12px;
-      line-height: 20px;
-      color: #686868;
-      cursor: pointer;
-      .action-text {
-        margin-right: 4px;
+    ::v-deep{
+      .j-button-item {
+        border-color: transparent;
+      }
+      .action-button.show-more {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 8px;
+        right: 0;
+        font-size: 12px;
+        line-height: 20px;
+        color: #686868;
+        cursor: pointer;
+        .action-text {
+          margin-right: 4px;
+        }
       }
     }
   }