98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import MyEvent from "@/tools/myEvents";
|
|
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'
|
|
const playVideo = ()=>{
|
|
MyEvent.emit("playVideo",{
|
|
url: videoUrl,
|
|
poster: videoPosterUrl,
|
|
});
|
|
}
|
|
|
|
defineExpose({})
|
|
</script>
|
|
<template>
|
|
<section class="ecosystem">
|
|
<div class="content">
|
|
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png" alt="">
|
|
<h2>REVITALISE THE FASHION ECOSYSTEM</h2>
|
|
<h4>through Artificial Intelligence (AI)</h4>
|
|
</div>
|
|
</section>
|
|
<section class="ecosystem-video">
|
|
<div class="content">
|
|
<img src="https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
|
|
<span class="iconfont icon-bofang" @click="playVideo"></span>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.ecosystem{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
> .content{
|
|
margin: 0 auto;
|
|
max-width: 1200px;
|
|
padding: 100px 0px 100px 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
> img{
|
|
width: 300px;
|
|
height: 300px;
|
|
margin-bottom: 20px;
|
|
}
|
|
> h2{
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
}
|
|
> h4{
|
|
color: #333333;
|
|
font-size: 18px;
|
|
}
|
|
|
|
}
|
|
}
|
|
.ecosystem-video{
|
|
width: 100%;
|
|
background-color: #463a37;
|
|
> .content{
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 100px 0;
|
|
position: relative;
|
|
> img{
|
|
width: 100%;
|
|
height: 675px;
|
|
}
|
|
> .icon-bofang{
|
|
font-size: 100px;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
animation: identifier 2s ease-in-out infinite;
|
|
// box-shadow: 0 0 10px #fff;
|
|
transition: .3s all;
|
|
cursor: pointer;
|
|
@keyframes identifier {
|
|
0% {
|
|
transform: translate(-50%,-50%) scale(1);
|
|
filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
|
|
}
|
|
50% {
|
|
transform: translate(-50%,-50%) scale(.95);
|
|
filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
|
|
}
|
|
100% {
|
|
transform: translate(-50%,-50%) scale(1);
|
|
filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|