<template>
	<view>
		<view class="zhou">
			<view class="day" v-for="(item,index) in 7">
				<view class="day_top">
					<view>08/03</view>
					<view class="zhou_title">周六</view>
				</view>
				<view class="yu">余20</view>
			</view>
			<view class="xian_k">
				<view class="xian"></view>
			</view>
			<view class="rili_icon">
				<uni-icons type="calendar" size="30" color="#239EA3"></uni-icons>
				<text>更多</text>
			</view>
		</view>
		<view class="hengxian"></view>
		<view class="timelist">
			<view v-for="(item,index) in 24" class="time">07:33</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
	.zhou {
		display: flex;
		justify-content: space-between;
	}

	.day {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;
		color: #131313;
	}

	.day_top {
		font-size: 24rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		align-items: center;

		padding: 10rpx;
		border-radius: 16rpx;
	}

	.selected {
		background-color: #239EA3;
		color: #fff;
	}

	.zhou_title {
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 6rpx;
	}

	.yu {
		background-color: #EFEFEF;
		margin-top: 8rpx;
		border-radius: 10rpx;
		padding: 2rpx 8rpx;
		font-size: 22rpx;
	}

	.xian_k {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.xian {

		height: 70rpx;
		border-left: 1px solid #d8d8d8;
	}

	.rili_icon {
		font-size: 26rpx;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #239EA3;
		font-weight: 500;
	}

	.hengxian {
		width: 100%;
		border-top: 1px solid #C0C6C7;
		margin-top: 18rpx;
	}

	.timelist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		justify-content: flex-start;
	}

	.timelist::after {
		content: '';
		flex: auto;
		/* 或者 flex: 1; */
	}

	.time {
		font-size: 28rpx;
		width: 104rpx;
		text-align: center;
		margin-top: 40rpx;
		border-radius: 14rpx;
		padding: 8rpx 0rpx;
		flex: 0 0 calc(20% - 32rpx);
		/* 假设一行有4个项目，减去想要的间隔 */
		margin-right: 40rpx;
		/* 设置右侧边距 */
		color: #111111;

	}

	.time:nth-child(5n) {
		margin-right: 0;
	}
</style>