<template>
	<view class="events-card-list">
		<view class="events-card" v-for="item in 7">
			<view class="events-img-box">
				<image class="events-img" src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
				<image class="tags-img" src="@/static/events-icon1.png" mode="widthFix"></image>
				<view class="tags-text">橄榄球</view>
			</view>
			<view class="events-text">
				<view class="e-name">第一届全龄运动杯橄榄球交流赛</view>
				<view class="e-time">05.10-05.31</view>
				<view class="e-price"><text class="mini-text">￥</text>25.9<text class="mini-text">起</text></view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.events-card-list{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 20rpx;
		.events-card{
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 20rpx;
			width: 300rpx;
			.events-img-box{
				position: relative;
				.events-img{
					width: 296rpx;
					height: 296rpx;
					border-radius: 32rpx;
				}
				.tags-img{
					position: absolute;
					width: 114rpx;
					top: 0;
					left: -18rpx;
				}
				.tags-text{
					font-size: 20rpx;
					color: #222222;
					position: absolute;
					left: 10rpx;
					top:14rpx;
				}
			}
			.events-text{
				margin-top: 20rpx;
				.e-name{
					font-weight: 800;
					font-size: 32rpx;
					color: #222222;
				}
				.e-time{
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #AAAAAA;
				}
				.e-price{
					font-weight: 800;
					font-size: 48rpx;
					color: #FB5B5B;
				}
			}
		}
	}
</style>