<template>
	<view class="assemble">
		<view style="height: 50rpx;"></view>
		<view class="ul">
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
			<view class="li">
				<view class="left">
					<view class="title">篮球少儿课</view>
					<view class="date">上课时间：2020.05.30 15:30 - 17:30</view>
				</view>
				<view class="right">
					<view class="btn" style="background-color: #29d3b4;">1课时</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.assemble {
		width: 100%;
		height: 100vh;
		background: #333333;
		overflow: auto;
	}

	.ul {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background-color: #fff;
		width: 90%;
		margin: 0 auto 30rpx;
		padding: 26rpx;
		border-radius: 16rpx;
	}

	.li {
		padding: 30rpx 20rpx;
		border: 1px solid #29D3B4;
		border-radius: 18rpx;
		background-color: rgba(41, 211, 180, 0.16);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.btn {
		width: 110rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 8rpx;
		background-color: rgba(41, 211, 180, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		text-align: center;
	}
</style>