fix active style

src/pages/tabs/HomeTab.vue

@@ -5,35 +5,42 @@
 			:key="group.title"
 			class="entry-group"
 		>
-			<h2 v-text="group.title" />
+			<h2 v-text="group.title"/>
 			<div class="items" :class="group.layout">
 				<div
-					v-entrance-transition="index * 70"
 					v-for="(item, index) in group.entryList"
 					:key="item.path"
+					class="item-wrap"
+					v-entrance-transition="index * 70"
+				>
+					<t-button
 						class="item"
 						:class="{ quick: item.path === '/customer/quick-sign-in' }"
-					@click="go(item.path)"
+						variant="text"
+						@click="router.push(item.path)"
 					>
 						<div class="body">
-						<t-icon :name="item.icon" size="1.75rem" />
-						<h2 v-text="item.title" />
+							<t-icon :name="item.icon" size="1.75rem"/>
+							<h2 v-text="item.title"/>
 						</div>
+					</t-button>
 				</div>
 			</div>
 		</section>
+		<div class="help-wrap" v-entrance-transition="visibleEntryCount * 70">
 			<t-button
 				class="help"
 				theme="primary"
 				variant="text"
 				content="使用帮助"
-			@click="go('/management/help')"
+				@click="router.push('/management/help')"
 			>
 				<template #icon>
-				<t-icon name="help-circle" />
+					<t-icon name="help-circle"/>
 				</template>
 			</t-button>
 		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -126,16 +133,10 @@ const visibleEntryGroupList = computed(() => entryGroupList
 		entryList: group.entryList.filter(item => userStore.hasPermissions(item.permission))
 	}))
 	.filter(group => group.entryList.length));
+const visibleEntryCount = computed(() => visibleEntryGroupList.value
+	.reduce((count, group) => count + group.entryList.length, 0));
 const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
 
-async function go(path: string): Promise<void> {
-	await router.push(path);
-}
-
-async function goNotifyList(): Promise<void> {
-	await router.push("/notify");
-}
-
 async function loadUnreadNotifyCount(): Promise<void> {
 	try {
 		unreadNotifyCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
@@ -151,7 +152,9 @@ async function loadUnreadNotifyCount(): Promise<void> {
 onMounted(async () => {
 	navBarStore.clearRight();
 	if (canReadNotify.value) {
-		navBarStore.setRightIcon("notification", goNotifyList);
+		navBarStore.setRightIcon("notification", async () => {
+			await router.push("/notify");
+		});
 		navBarStore.setRightBadge(0);
 		await loadUnreadNotifyCount();
 	}
@@ -165,7 +168,7 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .home-tab {
-	gap: 2rem;
+	gap: 1rem;
 	display: flex;
 	padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
 	flex-direction: column;
@@ -184,15 +187,21 @@ onUnmounted(() => {
 		}
 
 		.items {
+			--td-button-border-radius: 1.75rem;
+
 			gap: .875rem;
 			display: grid;
 			grid-template-columns: repeat(3, minmax(0, 1fr));
 
 			.item {
 				--entry-color: #0f766e;
+				--entry-color-active: #0a5d56;
 				--entry-background: rgba(255, 255, 255, .92);
 
 				color: var(--entry-color);
+				width: 100%;
+				height: auto;
+				margin: 0;
 				padding: 1rem;
 				display: flex;
 				position: relative;
@@ -201,11 +210,12 @@ onUnmounted(() => {
 				box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
 				align-items: center;
 				aspect-ratio: 1;
-				border-radius: 1.4rem;
 				flex-direction: column;
 				justify-content: center;
 
 				&.quick {
+					--td-button-default-text-active-bg-color: var(--entry-color-active);
+
 					color: var(--entry-background);
 					background: var(--entry-color);
 				}
@@ -229,14 +239,18 @@ onUnmounted(() => {
 		}
 	}
 
+	.help-wrap {
+		width: fit-content;
+		margin: 0 auto;
+
 		.help {
 			--td-button-border-radius: 1rem;
 
 			width: 8rem;
-		margin: 0 auto;
 			background: white;
 			box-shadow: var(--td-shadow-3);
 		}
+	}
 }
 
 :global(html.theme-dark) {