<template>
	<view class="detail">
		<!-- 顶部tab -->
		<view class="tab">
			<text :class="{'selected':selected == 1}" @click="swcthTab(1)">全部</text>
			<text :class="{'selected':selected == 2}" @click="swcthTab(2)">收入</text>
			<text :class="{'selected':selected == 3}" @click="swcthTab(3)">支出</text>
		</view>
		<!-- 顶部tab -->
		
		<view class="content">
			<!-- 余额明细 -->
			<MoneyDetail v-for="(item,index) in moneyDetail" :itemInfo="item" :key="index" />
			<!-- 余额明细 -->
		</view>
	</view>
</template>

<script>
	import MoneyDetail from '../mineComponent/moneyDetail/index.vue'
	export default {
		components:{
			MoneyDetail
		},
		data() {
			return {
				selected:1,//判断选中某个tab栏
				//存放余额明细数据
				moneyDetail: [{
						name: '充值',
						time: '2024-1-1 09:34:31',
						money: '+400'
					},
					{
						name: '提现',
						time: '2024-1-1 09:34:31',
						money: '-400'
					},
					{
						name: '充值',
						time: '2024-1-1 09:34:31',
						money: '+400'
					},
				]
			}
		},
		methods: {
			swcthTab(num){
				this.selected = num
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	width: 100%;
	height: 100vh;
	background-color: #fff;
	.tab{
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgba(34, 34, 34, 0.6);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		height: 90rpx;
	}
	.selected{
		color: #222;
		font-weight: 600;
		position: relative;
	}
	.selected::before{
		content: '';
		display: block;
		height: 4rpx;
		background-color: #f83224;
		width: 100%;
		position: absolute;
		bottom: -24rpx;
	}
	.content{
		padding: 0 32rpx;
	}
}
</style>
