第一次上传

2026-06-11 09:53:11 +08:00
commit e257f2009e
89 changed files with 4336 additions and 0 deletions
@@ -0,0 +1,85 @@
+<template>
+	<view class="surface-card tabbar">
+		<view
+			v-for="item in tabs"
+			:key="item.id"
+			class="tab-item"
+			:class="{ active: current === item.id }"
+			@click="navigate(item)"
+		>
+			<view class="tab-dot" :style="{ background: current === item.id ? item.color : 'var(--line-soft)' }"></view>
+			<text class="tab-label">{{ item.label }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	current: {
+		type: String,
+		default: 'home'
+	}
+})
+
+const tabs = [
+	{ id: 'home', label: '首页', path: '/pages/home/index', color: '#1f6f5f' },
+	{ id: 'bills', label: '账单', path: '/pages/bills/index', color: '#d36c43' },
+	{ id: 'budget', label: '预算', path: '/pages/budget/index', color: '#5f8df5' },
+	{ id: 'stats', label: '报表', path: '/pages/stats/index', color: '#7f56d9' },
+	{ id: 'mine', label: '我的', path: '/pages/mine/index', color: '#44546a' }
+]
+
+function navigate(item) {
+	if (item.id === props.current) {
+		return
+	}
+
+	uni.redirectTo({
+		url: item.path
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+.tabbar {
+	position: fixed;
+	left: 24rpx;
+	right: 24rpx;
+	bottom: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 18rpx 12rpx calc(env(safe-area-inset-bottom));
+	z-index: 20;
+}
+
+.tab-item {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10rpx;
+	padding: 14rpx 0;
+	border-radius: 22rpx;
+}
+
+.tab-item.active {
+	background: var(--brand-soft);
+}
+
+.tab-dot {
+	width: 18rpx;
+	height: 18rpx;
+	border-radius: 50%;
+}
+
+.tab-label {
+	font-size: 22rpx;
+	color: var(--text-secondary);
+}
+
+.tab-item.active .tab-label {
+	color: var(--text-primary);
+	font-weight: 600;
+}
+</style>