From 7e8fdf315b7a15f4eb9fc1dc5523a00bcc5b87c4 Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Tue, 19 May 2026 14:48:36 +0800
Subject: [PATCH] =?UTF-8?q?all-events=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/events/all-events.vue  | 149 +++++++++++++++++++++++++++++++
 src/pages/events/index.vue       |   2 +
 src/pages/events/swiper.vue      |  80 ++++++++++++++---
 src/pages/user-stories/index.vue |  20 +++++
 4 files changed, 241 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/events/all-events.vue
 create mode 100644 src/pages/user-stories/index.vue

diff --git a/src/pages/events/all-events.vue b/src/pages/events/all-events.vue
new file mode 100644
index 0000000..2d4baf9
--- /dev/null
+++ b/src/pages/events/all-events.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const eventList = ref([
+	{
+		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
+		title:'Elevate Operation Efficiency',
+	},
+	{
+		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-600x750.gif',
+		title:'Elevate Operation Efficiency',
+	},
+])
+defineExpose({})
+</script>
+<template>
+	<section class="mission">
+		<div class="content">
+			<h2>ALL EVENTS</h2>
+			<div class="all-events">
+				<div v-for="item in eventList" :key="item.url" class="img-item">
+					<div class="img-box">
+						<img :src="item.url" alt="">
+						<div class="line">
+							<div class="day">11</div>
+							<div class="month">May</div>
+						</div>
+					</div>
+					<h3>{{item.title}}</h3>
+					<div class="info">
+						<p>
+							2026-05-11 10:00 - 12:00
+						</p>
+					</div>
+					<a href="#" class="read-more" target="_blank">
+						Read More
+						<span class="iconfont icon-direction-right"></span>
+					</a>
+				</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;
+			> h2{
+				text-align: center;
+				margin-bottom: 50px;
+				font-size: 40px;
+				color: #222222;
+				font-family: "Poppins", Sans-serif;
+			}
+			> .all-events{
+			    display: grid;
+				grid-template-columns: repeat(3, minmax(100px, 1fr));
+				grid-gap: 20px 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;
+					}
+					> .info{
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 1;
+						color: #555;
+						margin-bottom: 15px;
+					}
+					.read-more{
+						color: #9A2125;
+						box-shadow: none;
+						font-size: 14px;
+						text-decoration: none;
+						position: relative;
+						&:hover{
+							&::after{
+								width: 100%;
+							}
+						}
+						&::after{
+							content: '';
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 0;
+							height: 1px;
+							background-color: #9A2125;
+							transition: all .3s;
+						}
+						> span{
+							margin-left: 10px;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/events/index.vue b/src/pages/events/index.vue
index 6d04d1c..7743920 100644
--- a/src/pages/events/index.vue
+++ b/src/pages/events/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Swiper from './swiper.vue'
+import AllEvents from './all-events.vue'
 
 defineExpose({})
 </script>
@@ -7,6 +8,7 @@ defineExpose({})
 	<div class="events">
 		<div class="placeholder"></div>
 		<Swiper />
+		<AllEvents />
 	</div>
 </template>
 <style lang="less" scoped>
diff --git a/src/pages/events/swiper.vue b/src/pages/events/swiper.vue
index 8547534..8bb0961 100644
--- a/src/pages/events/swiper.vue
+++ b/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;
+							}
+						}
 					}
 				}
 			}
diff --git a/src/pages/user-stories/index.vue b/src/pages/user-stories/index.vue
new file mode 100644
index 0000000..96afefa
--- /dev/null
+++ b/src/pages/user-stories/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+defineExpose({})
+</script>
+<template>
+	<div class="user-stores">
+		<div class="placeholder"></div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.user-stores{
+		.placeholder{
+			height: var(--main-header-height, 100px);
+			width: 100%;
+			position: sticky;
+			top: 0;
+			background-color: #000;
+		}
+	}
+</style>