更新events页面

src/pages/events/swiper.vue

@@ -2,24 +2,15 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 import '@kagol/vue-carousel/dist/style.css'
-//const props = defineProps({
-//})
+const props = defineProps({
+	list: {
+		type: Array,
+		default: () => [],
+	},
+})
 //const emit = defineEmits([
 //])
-let list = ref([
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
-	},
-	{
-		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
-	},
-])
+
 const activePage = ref(0)
 onMounted(()=>{
 })
@@ -37,14 +28,14 @@ defineExpose({})
 			>
 				<div class="carousel-item" v-for="(item,index) in list" :key="index">
 					<div class="img-box">
-						<img :src="item.url" alt="">
+						<img :src="item?.coverUrl" alt="">
 					</div>
 					<div class="text-box">
 						<h4 class="title">
-							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
+							{{ item?.title }}				
 						</h4>
 						<div class="info">
-							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
+							{{ item?.brief }}		
 						</div>
 						<a href="#" class="read-more" target="_blank">
 							Read More
@@ -117,6 +108,12 @@ defineExpose({})
 							color: #555;
 							font-size: 16px;
 							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;
@@ -125,14 +122,18 @@ defineExpose({})
 							text-decoration: none;
 							position: relative;
 							&:hover{
-
+								&::after{
+									left: 0;
+									width: 100%;
+								}
 							}
 							&::after{
 								content: '';
 								position: absolute;
 								bottom: 0;
-								left: 0;
-								width: 100%;
+								right: 0;
+								left: auto;
+								width: 0%;
 								height: 2px;
 								background-color: #9A2125;
 								transition: all .3s;