studyTest/pages/index/index.vue

<template>
	<view class="index-container">
		<view class="user-info" @click="jumpTo('/pages/userInfo/userInfo')">
			<view class="avatar" />
			<view>
				<view>李慧琳</view>
				<view>706宿舍</view>
			</view>
		</view>

		<view class="swiper1">
			<swiper circular autoplay interval="1000" indicator-dots indicator-color="#8f939c"
				indicator-active-color="#e43d33">
				<swiper-item>
					<img src="/static/bar/爱莉1.jpg" />
				</swiper-item>
				<swiper-item>
					<img src="/static/bar/原始黄其振.jpg" />
				</swiper-item>
				<swiper-item>
					<img src="/static/bar/真我光锥.jpg" />
				</swiper-item>
			</swiper>
		</view>

		<view class="layout-grid">
			<view class="grid-item" @click="jumpTo('/pages/payment/payment')">
				<view class="grid-icon icon1" />
				<view>缴费记录</view>
			</view>

			<view class="grid-item" @click="jumpTo('/pages/expense/expense')">
				<view class="grid-icon icon2" />
				<view>支出记录</view>
			</view>

			<view class="grid-item" @click="showTip">
				<view class="grid-icon icon3" />
				<view>宿舍信息</view>
			</view>

			<view class="grid-item" @click="showTip">
				<view class="grid-icon icon4" />
				<view>没想好写啥</view>
			</view>
		</view>

		<view class="stats">
			<view class="stats-title">费用统计</view>

			<view class="stats-cards">
				<view class="stat-card">
					<view class="stat-value">¥150.00</view>
					<view class="stat-label">本月缴费</view>
				</view>
				<view class="stat-card">
					<view class="stat-value">¥50.00</view>
					<view class="stat-label">本月支出</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'

	const jumpTo = (url) => {
		uni.switchTab({
			url
		})
	}

	const showTip = () => {
		uni.showToast({
			title: '前面的功能以后再来探索吧',
			icon: 'none'
		})
	}

	onShow(() => {
		const isLogin = uni.getStorageSync('isLogin')
		console.log(isLogin)
		if (!isLogin) {
			uni.redirectTo({
				url: '/pages/login/login'
			})
		}
	})
</script>

<style scoped>
	.index-container {
		padding: 20rpx;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.user-info {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.swiper1 {
		width: 100vw;
		height: 20vh;
	}

	.layout-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.grid-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 3vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	}

	.grid-item:active {
		transform: scale(0.95);
	}

	.grid-icon {
		width: 22vw;
		height: 9vh;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.icon1 {
		background-color: #fff0f0;
	}

	.icon2 {
		background-color: #f0f9ff;
	}

	.icon3 {
		background-color: #fff7e6;
	}

	.icon4 {
		background-color: #f6ffed;
	}

	.stats {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.stats-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.stats-cards {
		display: flex;
		justify-content: space-around;
	}

	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #36bffa;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
	}
</style>