aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

all-events页面

Browse Source
This commit is contained in:
X1627315083@163.com
2026-05-19 14:48:36 +08:00
parent db73c58525
commit 7e8fdf315b
4 changed files with 241 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/pages/events/all-events.vue Normal file
View File

@@ -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>

2
src/pages/events/index.vue
View File

@@ -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>

74
src/pages/events/swiper.vue
View File

@@ -36,18 +36,20 @@ defineExpose({})
class="events-carousel"
>
<div class="carousel-item" v-for="(item,index) in list" :key="index">
<div class="img-box">
<img :src="item.url" alt="">
<div class="text-box">
<div class="title">
Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create
</div>
<div class="text-box">
<h4 class="title">
Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create
</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{
overflow: hidden;
cursor: pointer;
&:hover{
img{
transform: scale(1.1);
}
}
.img-box{
border-radius: 20px;
height: 600px;
width: 100%;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
background-color: #FFF;
border-radius: 20px;
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;
}
}
}
}
}

20
src/pages/user-stories/index.vue Normal file
View File

@@ -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>