fix active style

src/pages/tabs/HomeTab.vue

@@ -5,34 +5,41 @@
 			: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"
+					class="item-wrap"
-					:class="{ quick: item.path === '/customer/quick-sign-in' }"
+					v-entrance-transition="index * 70"
-					@click="go(item.path)"
 				>
-					<div class="body">
+					<t-button
-						<t-icon :name="item.icon" size="1.75rem" />
+						class="item"
-						<h2 v-text="item.title" />
+						:class="{ quick: item.path === '/customer/quick-sign-in' }"
-					</div>
+						variant="text"
+						@click="router.push(item.path)"
+					>
+						<div class="body">
+							<t-icon :name="item.icon" size="1.75rem"/>
+							<h2 v-text="item.title"/>
+						</div>
+					</t-button>
 				</div>
 			</div>
 		</section>
-		<t-button
+		<div class="help-wrap" v-entrance-transition="visibleEntryCount * 70">
-			class="help"
+			<t-button
-			theme="primary"
+				class="help"
-			variant="text"
+				theme="primary"
-			content="使用帮助"
+				variant="text"
-			@click="go('/management/help')"
+				content="使用帮助"
-		>
+				@click="router.push('/management/help')"
-			<template #icon>
+			>
-				<t-icon name="help-circle" />
+				<template #icon>
-			</template>
+					<t-icon name="help-circle"/>
-		</t-button>
+				</template>
+			</t-button>
+		</div>
 	</div>
 </template>
 
@@ -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,13 +239,17 @@ onUnmounted(() => {
 		}
 	}
 
-	.help {
+	.help-wrap {
-		--td-button-border-radius: 1rem;
+		width: fit-content;
-
-		width: 8rem;
 		margin: 0 auto;
-		background: white;
+
-		box-shadow: var(--td-shadow-3);
+		.help {
+			--td-button-border-radius: 1rem;
+
+			width: 8rem;
+			background: white;
+			box-shadow: var(--td-shadow-3);
+		}
 	}
 }