From 21d8a69871e561c44eca8061c2d358b8a1c6ec7f Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Fri, 13 Jan 2023 15:15:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9D=97=E7=9A=84=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=B8=AA=E6=95=B0=E9=9C=80=E8=A6=81=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PublicComponent/Tabs.vue | 29 ++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/PublicComponent/Tabs.vue b/src/components/PublicComponent/Tabs.vue
index 7325b84..16ad183 100644
--- a/src/components/PublicComponent/Tabs.vue
+++ b/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;