更新events页面

src/pages/events/all-events.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
+const props = defineProps({
+	list: {
+		type: Array,
+		default: () => [],
+	},
+})
 const eventList = ref([
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
@@ -17,18 +23,18 @@ defineExpose({})
 		<div class="content">
 			<h2>ALL EVENTS</h2>
 			<div class="all-events">
-				<div v-for="item in eventList" :key="item.url" class="img-item">
+				<div v-for="item in list" :key="item.url" class="img-item">
 					<div class="img-box">
-						<img :src="item.url" alt="">
+						<img :src="item.coverUrl" alt="">
 						<div class="line">
-							<div class="day">11</div>
-							<div class="month">May</div>
+							<div class="day">{{ item?.day }}</div>
+							<div class="month">{{ item?.month }}</div>
 						</div>
 					</div>
 					<h3>{{item.title}}</h3>
 					<div class="info">
 						<p>
-							2026-05-11 10:00 - 12:00
+							{{ item?.brief }}
 						</p>
 					</div>
 					<a href="#" class="read-more" target="_blank">
@@ -119,6 +125,12 @@ defineExpose({})
 						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; 
 					}
 					.read-more{
 						color: #9A2125;
@@ -128,6 +140,7 @@ defineExpose({})
 						position: relative;
 						&:hover{
 							&::after{
+								left: 0;
 								width: 100%;
 							}
 						}
@@ -135,9 +148,10 @@ defineExpose({})
 							content: '';
 							position: absolute;
 							bottom: 0;
-							left: 0;
-							width: 0;
-							height: 1px;
+							right: 0;
+							left: auto;
+							width: 0%;
+							height: 2px;
 							background-color: #9A2125;
 							transition: all .3s;
 						}