<template>
	<view class="center">
		<view class="topbar">
			<u-navbar :autoBack="true" title="打卡记录" placeholder="true" bgColor="transparent" leftIconColor="#FFF"
				:title-style="{color: '#FFF'}">
			</u-navbar>
			<view class="h-200"></view>
		</view>
		<view class="mlr-25" style="margin-top: -100rpx;">
			<attend-calendar :lateddates="[`2025-5-26`,`2025-5-27`,`2025-6-27`]"
				:truancyeddates="[`2025-5-23`]"></attend-calendar>
		</view>
		<view class="flex-column mlr-25 mt-30" style="background: #EBF5F0;">
			<view class="flex v-center pad-30">
				<text class="fs-28 fw-700">打卡天数：</text>
				<text class="fs-24">25天</text>
			</view>
			<view class="flex v-center pad-30">
				<text class="fs-28 fw-700">缺卡天数：</text>
				<text class="fs-24">1天</text>
			</view>
		</view>
		<view class="overflow-y">
			<scroll-view scroll-y style="height: 100%;">
				<view @click="onClickSelecte(index)" v-for="(item, index) in 10" :key="index">
					<view class="flex v-center pad-30 mlr-25 mt-30" style="background: #EBF5F0;">
						<text class="fs-28 fw-700">打卡时间：</text>
						<text class="fs-24">2025-04-03 10:32:31</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				sex: '',
				columns: [
					['男', '女']
				],

			};
		},
		onLoad(options) {

		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.sex = e.value[0]
				console.log("LMG", e.value[0])
			}

		}
	};
</script>

<style>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}

	.topbar {
		/* 推荐方式：使用静态资源路径 */
		background-image: url('/pagesMine/static/icon_dkbg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>