Code-Create/src/pages/events/all-events.vue

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(['clickItem'])
const props = defineProps({
	list: {
		type: Array,
		default: () => [],
	},
})
defineExpose({})
</script>
<template>
	<section class="mission">
		<div class="content">
			<h2>ALL EVENTS</h2>
			<div class="all-events">
				<div v-for="item  in list as any" :key="item.url" class="img-item">
					<div class="img-box">
						<img :src="item.coverUrl" alt="">
						<div class="line">
							<div class="day">{{ item?.day }}</div>
							<div class="month">{{ item?.month }}</div>
						</div>
					</div>
					<h3>{{item.title}}</h3>
					<div class="info">
						<p>
							{{ item?.brief }}
						</p>
					</div>
					<div class="read-more" @click="$emit('clickItem', item)">
						Read More
						<span class="iconfont icon-direction-right"></span>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.mission{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			margin: 0 auto;
			padding: 40px 0px 40px 0px;
			max-width: 1120px;
			@media (max-width: 1000px) {
				padding: 40px 10px;
				width: 100%;
			}
			> h2{
				text-align: center;
				margin-bottom: 50px;
				font-size: 40px;
				color: #222222;
				font-family: "Poppins", Sans-serif;
				@media (max-width: 1000px) {
					font-size: 28px;
					margin-bottom: 40px;
				}
			}
			> .all-events{
			    display: grid;
				grid-template-columns: repeat(3, minmax(100px, 1fr));
				grid-gap: 20px 30px;
				@media (max-width: 1000px) {
					grid-template-columns: repeat(1, minmax(100px, 1fr));
					grid-gap: 30px;
				}
				> .img-item{
					&:hover{
						> .img-box{
							> img{
								transform: scale(1.1);
							}
						}
					}
					> .img-box{
						border-radius: 20px;
						overflow: hidden;
						max-width: 100%;
						width: 100%;
						position: relative;
						margin-bottom: 20px;
						> img{
							transition: all .3s;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
						> .line{
							position: absolute;
							width: 54px;
							height: 54px;
							left: 15px;
							top: 15px;
							border-radius: 50%;
							background-color: #fff;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							> .day{
								font-family: "Poppins", Sans-serif;
								font-size: 20px;
								font-weight: 600;
								line-height: 1;
							}
							> .month{
								font-size: 12px;
								line-height: 1;
							}
						}
					}
					> h3{
						font-size: 20px;
						font-weight: 600;
						line-height: 1;
						margin-bottom: 10px;
						@media (max-width: 1000px) {
							font-size: 18px;
						}
						&:hover{
							color: #626262;
						}
					}
					> .info{
						font-size: 16px;
						font-weight: 400;
						line-height: 1;
						color: #555;
						margin-bottom: 15px;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-word; 
						@media (max-width: 1000px) {
							font-size: 14px;
						}
					}
					.read-more{
						color: #9A2125;
						box-shadow: none;
						font-size: 14px;
						text-decoration: none;
						position: relative;
						width: min-content;
						white-space: nowrap;
						&:hover{
							&::after{
								left: 0;
								width: 100%;
							}
						}
						&::after{
							content: '';
							position: absolute;
							bottom: 0;
							right: 0;
							left: auto;
							width: 0%;
							height: 2px;
							background-color: #9A2125;
							transition: all .3s;
						}
						> span{
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
</style>