You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
3.9 KiB
214 lines
3.9 KiB
<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>
|