<!-- 住宿记录 -->
<template>
	<view class="record">
		<!-- 住宿信息 -->
		<view class="userinfo">
			<text>姓名：{{name}}</text>
			<text>当前宿舍：{{home}}</text>
		</view>
		<!-- 历史住宿信息 -->
		<view class="box">
			<view class="recordCard" v-for="(item,index) in recordCard" :key="item.index">
				<text class="home">宿舍:{{item.record}}
</text>
				<text>姓名:{{item.studname}}</text>
				<text>学号:{{item.studID}}</text>
				<text>开始日期:{{item.beginData}}</text>
				<text>结束日期:{{item.endData}}</text>
				<text>班级:{{item.studclass}}</text>
				<text>折合月数:{{item.moon}}</text>
				<text>收费标准/10个月:{{item.money}}</text>
				<text>应收费用:{{item.pay}}</text>
				<text>银行卡号:{{item.card}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "李三",
				home: "里建校区 馨园 2栋 1层105",
				recordCard:[{
					record:"长堽校区 长堽校区默认园区 漓江阁 1层101",
					studname:"李三",
					studID:"2021429125",
					beginData:"2024-03-01",
					endData:"2024-04-01",
					studclass:"计算机应用技术3班",
					moon:"1个月",
					money:"1200",
					pay:"1200",
					card:"6228413380010108774"
				},
				{
					record:"里建校区 馨园 2栋 1层103",
					studname:"李三",
					studID:"2021429125",
					beginData:"2024-03-01",
					endData:"2024-04-01",
					studclass:"计算机应用技术3班",
					moon:"1个月",
					money:"1200",
					pay:"1200",
					card:"6228413380010108774"
				}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.record {
		min-height: 100vh;
		background-color: #F5F5F7;

		.userinfo {
		
			padding: 10rpx 40rpx;
			// width: 100%;
			height: 130rpx;
			background-color: #3388CC;
			display: flex;
			flex-direction: column;
			color: white;

			text {
				/* 强制文本内部换行 */
				white-space: pre-wrap;
				margin-bottom: 10rpx;
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			width: 100%;

			.recordCard {
				padding-top: 40rpx;
				padding-left: 40rpx;
				display: flex;
				flex-direction: column;
				width: 90%;
				height: 600rpx;
				background-color: white;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.home{
					color: black;
					font-size: 40rpx;
					font-weight: bold;
				}
				text{
					color: #9C9C9C;
					margin-top: 12rpx;
				}
			}
		}

	}
</style>