all-events页面

src/pages/events/swiper.vue

@@ -36,18 +36,20 @@ defineExpose({})
 				class="events-carousel"
 			>
 				<div class="carousel-item" v-for="(item,index) in list" :key="index">
-					<img :src="item.url" alt="">
+					<div class="img-box">
+						<img :src="item.url" alt="">
+					</div>
 					<div class="text-box">
-						<div class="title">
+						<h4 class="title">
 							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
-						</div>
+						</h4>
 						<div class="info">
 							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
 						</div>
-						<div class="read-more">
+						<a href="#" class="read-more" target="_blank">
 							Read More
 							<span class="iconfont icon-direction-right"></span>
-						</div>
+						</a>
 					</div>
 				</div>
 				
@@ -68,19 +70,77 @@ defineExpose({})
 	.events-swiper{
 		width: 100%;
 		background-color: #f9f9f9;
-		padding: 40px 0px 40px 0px;
 		> .content{
+			padding: 40px 0px 40px 0px;
 			margin: 0 auto;
 			max-width: 1120px;
 			position: relative;
 			> .events-carousel{
 				.carousel-item{
-					img{
+					overflow: hidden;
+					cursor: pointer;
+					&:hover{
+						img{
+							transform: scale(1.1);
+						}
+					}
+					.img-box{
+						border-radius: 20px;
 						height: 600px;
 						width: 100%;
-						object-fit: cover;
-						background-color: #FFF;
-						border-radius: 20px;
+						overflow: hidden;
+						img{
+							width: 100%;							
+							height: 100%;
+							object-fit: cover;
+							background-color: #FFF;
+							transition: all .3s;
+						}
+					}
+					> .text-box{
+						margin-top: -40px;	
+						padding: 25px;
+						width: 560px;
+						background-color: #fff;
+						position: relative;
+						z-index: 22;
+						.title{
+							font-family: Poppins, sans-serif;
+							font-weight: 600;
+							letter-spacing: 2px;
+							color: #222222;
+							text-transform: capitalize;
+							font-size: 20px;
+							margin-bottom: 9px;
+						}
+						.info{
+							color: #555;
+							font-size: 16px;
+							margin-bottom: 15px;
+						}
+						.read-more{
+							color: #9A2125;
+							box-shadow: none;
+							font-size: 14px;
+							text-decoration: none;
+							position: relative;
+							&:hover{
+
+							}
+							&::after{
+								content: '';
+								position: absolute;
+								bottom: 0;
+								left: 0;
+								width: 100%;
+								height: 2px;
+								background-color: #9A2125;
+								transition: all .3s;
+							}
+							> span{
+								margin-left: 10px;
+							}
+						}
 					}
 				}
 			}