添加全局视频

src/pages/about-us/ecosystem.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-defineExpose({})
+	import { ref } from "vue";
+	import MyEvent from "@/directives/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">
@@ -11,6 +22,8 @@ defineExpose({})
 	</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>
@@ -48,6 +61,36 @@ defineExpose({})
 			max-width: 1200px;
 			margin: 0 auto;
 			padding: 100px 0;
+			position: relative;
+			> img{
+				width: 100%;
+			}
+			> .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>