152 lines
3.0 KiB
Vue
152 lines
3.0 KiB
Vue
<template>
|
||
<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>
|
||
</un-pages>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
methods: {
|
||
handleTabChange(path) {
|
||
console.log('Tab changed to:', path)
|
||
// tabbar组件已经处理了跳转，这里不需要额外处理
|
||
},
|
||
navigateTo(url) {
|
||
uni.showToast({
|
||
title: '功能开发中',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<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;
|
||
|
||
&:last-child {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.action-title {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recent-section {
|
||
margin-top: 40rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.empty-list {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 80rpx 40rpx;
|
||
text-align: center;
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|