更新

resources/mobile/pages/index/index.vue

@@ -1,52 +1,151 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+	<un-pages
+		:show-nav-bar="true"
+		nav-bar-title="首页"
+		:show-back="false"
+		:show-tab-bar="true"
+		@tab-change="handleTabChange"
+	>
+		<view class="page-content">
+			<view class="welcome-section">
+				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
+				<text class="welcome-title">欢迎使用家庭记账</text>
+				<text class="welcome-desc">简单好用的家庭记账助手</text>
+			</view>
+
+			<view class="quick-actions">
+				<view class="action-card" @tap="navigateTo('/pages/account/bill/add')">
+					<uni-icons type="plus" size="40" color="#667eea"></uni-icons>
+					<text class="action-title">记一笔</text>
+				</view>
+				<view class="action-card" @tap="navigateTo('/pages/account/bill/index')">
+					<uni-icons type="list" size="40" color="#f093fb"></uni-icons>
+					<text class="action-title">账单</text>
+				</view>
+			</view>
+
+			<view class="recent-section">
+				<view class="section-header">
+					<text class="section-title">最近记录</text>
+					<text class="section-more" @tap="navigateTo('/pages/account/bill/index')">查看更多 ></text>
+				</view>
+				<view class="empty-list">
+					<text class="empty-text">暂无记录</text>
+				</view>
+			</view>
 		</view>
-	</view>
+	</un-pages>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
+export default {
+	methods: {
+		handleTabChange(path) {
+			console.log('Tab changed to:', path)
+			// tabbar组件已经处理了跳转，这里不需要额外处理
 		},
-		onLoad() {
-
-		},
-		methods: {
-
+		navigateTo(url) {
+			uni.showToast({
+				title: '功能开发中',
+				icon: 'none',
+				duration: 2000
+			})
 		}
 	}
+}
 </script>
 
-<style>
-	.content {
+<style lang="scss" scoped>
+.page-content {
+	padding: 40rpx 30rpx;
+}
+
+.welcome-section {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 60rpx 0;
+
+	.logo {
+		width: 160rpx;
+		height: 160rpx;
+		margin-bottom: 30rpx;
+		border-radius: 20rpx;
+		background: rgba(255, 255, 255, 0.9);
+		padding: 20rpx;
+	}
+
+	.welcome-title {
+		font-size: 44rpx;
+		font-weight: bold;
+		color: #333;
+		margin-bottom: 16rpx;
+	}
+
+	.welcome-desc {
+		font-size: 28rpx;
+		color: #999;
+	}
+}
+
+.quick-actions {
+	display: flex;
+	justify-content: space-between;
+	margin: 60rpx 0;
+
+	.action-card {
+		flex: 1;
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		border-radius: 20rpx;
+		padding: 40rpx 20rpx;
+		margin: 0 10rpx;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-	}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+		&:last-child {
+			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+		}
 
-	.text-area {
+		.action-title {
+			font-size: 28rpx;
+			color: #fff;
+			margin-top: 20rpx;
+		}
+	}
+}
+
+.recent-section {
+	margin-top: 40rpx;
+
+	.section-header {
 		display: flex;
-		justify-content: center;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 30rpx;
+
+		.section-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333;
+		}
+
+		.section-more {
+			font-size: 26rpx;
+			color: #667eea;
+		}
 	}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.empty-list {
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 80rpx 40rpx;
+		text-align: center;
+
+		.empty-text {
+			font-size: 28rpx;
+			color: #999;
+		}
 	}
+}
 </style>