兴蜀人力数据概览大屏

src/views/recruitment/layout/centerModel.vue

@@ -18,23 +18,26 @@
       <div class="num">780,000</div>
       <div class="label">人口总数</div>
     </div>
-    <div class="hjrkDialogBox" v-show="isactive != -1">
-      <div class="titleBox">
-        <div class="title">户籍人口</div>
-        <div class="close" @click="isactive = -1"></div>
+    <transition name="fade">
+      <div class="hjrkDialogBox" v-show="isactive != -1">
+        <div class="titleBox">
+          <div class="title">户籍人口</div>
+          <div class="close" @click="isactive = -1"></div>
+        </div>
+        <ul class="tabsBox">
+          <li
+            v-for="(item, index) in tabsDate.tabs"
+            :key="index"
+            :class="tabsActive == index ? 'active' : ''"
+            @click="tabsActive = index"
+          >
+            {{ item }}
+          </li>
+        </ul>
+
+        <div class="barBox" ref="enterpriseTwoRef"></div>
       </div>
-      <ul class="tabsBox">
-        <li
-          v-for="(item, index) in tabsDate.tabs"
-          :key="index"
-          :class="tabsActive == index ? 'active' : ''"
-          @click="tabsActive = index"
-        >
-          {{ item }}
-        </li>
-      </ul>
-      <div class="barBox" ref="enterpriseTwoRef"></div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -258,8 +261,15 @@ onMounted(() => {
       &:nth-last-child(3) {
         margin-left: 8vw;
       }
-      &.active .num {
-        color: red;
+      &.active {
+        background: url("~@/assets/images/recruitment/model-active-bg.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .num {
+          background: -webkit-linear-gradient(#fff4b3, #ffd901);
+          -webkit-background-clip: text;
+          color: transparent;
+        }
       }
     }
   }