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

Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

Browse Source
This commit is contained in:
李志鹏
2026-05-28 10:18:50 +08:00
parent 5fc6656e6e 33e879aed5
commit 750ed13534
11 changed files with 54 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/video-model.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue"; import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import MyEvent from "@/directives/myEvents"; import MyEvent from "@/tools/myEvents";
//const props = defineProps({ //const props = defineProps({
//}) //})
//const emit = defineEmits([ //const emit = defineEmits([

0
src/directives/tween-animation.ts → src/directives/tween.ts
View File

2
src/pages/about-us/ecosystem.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import MyEvent from "@/directives/myEvents"; import MyEvent from "@/tools/myEvents";
let videoUrl = 'https://code-create.com.hk/wp-content/uploads/2023/05/codec_brand_vid_16x9_ENG.mp4' let videoUrl = 'https://code-create.com.hk/wp-content/uploads/2023/05/codec_brand_vid_16x9_ENG.mp4'
let videoPosterUrl = 'https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg' let videoPosterUrl = 'https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg'
const playVideo = ()=>{ const playVideo = ()=>{

149
src/pages/events-detail/all-events.vue
View File

@@ -1,149 +0,0 @@
<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>

5
src/pages/events-detail/index.vue
View File

@@ -1,7 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import Swiper from './swiper.vue'
import AllEvents from './all-events.vue'
import listEn from './list-en.js' import listEn from './list-en.js'
import listZhCn from './list-zh-cn.js' import listZhCn from './list-zh-cn.js'
import listZhTw from './list-zh-tw.js' import listZhTw from './list-zh-tw.js'
@@ -22,8 +20,7 @@ defineExpose({})
<template> <template>
<div class="events"> <div class="events">
<div class="placeholder"></div> <div class="placeholder"></div>
<Swiper />
<AllEvents />
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

175
src/pages/events-detail/swiper.vue
View File

@@ -1,175 +0,0 @@
<script setup lang="ts">
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 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(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
</script>
<template>
<section class="events-swiper">
<div class="content">
<KagolCarousel
:autoplay="false"
:interval="1000"
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>
<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>
<a href="#" class="read-more" target="_blank">
Read More
<span class="iconfont icon-direction-right"></span>
</a>
</div>
</div>
<template #pagination="{ prevPage, nextPage }">
<div class="prev-page" @click="prevPage">
<span class="iconfont icon-direction-left"></span>
</div>
<div class="next-page" @click="nextPage">
<span class="iconfont icon-direction-right"></span>
</div>
</template>
<template #indicator></template>
</KagolCarousel>
</div>
</section>
</template>
<style lang="less" scoped>
.events-swiper{
width: 100%;
background-color: #f9f9f9;
> .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;
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;
}
}
}
}
}
.prev-page, .next-page{
width: 96px;
height: 96px;
margin: 0 10px;
border: 1px solid #e1e1e1;
background-color: #fff;
border-radius: 50%;
transition: all .3s;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
> span{
font-size: 38px;
}
&:hover{
border: 1px solid #000;
}
}
.prev-page{
right: 112px;
}
.next-page{
right: 0;
}
}
}
</style>

30
src/pages/events/all-events.vue
View File

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

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

@@ -17,13 +17,16 @@ const allList = computed(() => {
} }
return listEn return listEn
}) })
const swiperList = computed(() => {
return allList.value.slice(0, 5)
})
defineExpose({}) defineExpose({})
</script> </script>
<template> <template>
<div class="events"> <div class="events">
<div class="placeholder"></div> <div class="placeholder"></div>
<Swiper /> <Swiper :list="swiperList" />
<AllEvents /> <AllEvents :list="allList" />
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

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

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

2
src/pages/user-stories/user-list.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import MyEvent from "@/directives/myEvents"; import MyEvent from "@/tools/myEvents";
const playVideo = (item)=>{ const playVideo = (item)=>{
MyEvent.emit("playVideo",{ MyEvent.emit("playVideo",{
url: item.videoUrl, url: item.videoUrl,

0
src/directives/myEvents.ts → src/tools/myEvents.ts
View File