feat: 模块的列表个数需要展示

src/components/PublicComponent/Tabs.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="tabs" v-if="sidebarList.find(({ path }) => path === $route.path)">
-    <div :class="['item', tab.path === $route.path ? 'active' : '']" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
+    <div :class="['item', tab.path === $route.path ? 'active' : '']" v-for="(tab, i) of sidebarList" :key="tab.title" @click="goPage(tab)">
       <div class="icon"><img :src="theme.images[tab.moduleName]" /></div>
       <div class="title">{{ switchLanguage(tab, 'title') }}</div>
+      <div class="count" v-if="i === 0">{{ activityCount }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useStore } from '@/store/root'
 import { storeToRefs } from 'pinia'
 import { useRouter } from 'vue-router'
+import { getActivityList } from '@/http/api'
+const activityCount = ref(0)
 const router = useRouter()
 const store = useStore()
 const { sidebarList, theme } = storeToRefs(store)
@@ -18,6 +22,10 @@ const goPage = item => {
   store.SET_SELECTED_MODULE(item.title)
   router.push(item.path)
 }
+
+getActivityList(1).then(({ data }) => {
+  if (data?.activityList?.length) activityCount.value = data?.activityList?.length
+})
 </script>
 
 <style lang="scss" scoped>
@@ -83,6 +91,25 @@ const goPage = item => {
     flex-direction: column;
     flex: 1;
     height: 170px;
+    .count {
+      position: absolute;
+      right: -10px;
+      top: -10px;
+      width: 41px;
+      height: 32px;
+      background: linear-gradient(113.71deg, #ef294d 0%, #fa784f 100%);
+      border-radius: 100px;
+      font-family: 'Montserrat';
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+      letter-spacing: 0.05em;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
     .icon {
       display: flex;
       justify-content: center;