46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:style="{ backgroundImage: `url('/img/index/strength_bg.png')` , }"
|
|
class="bg-cover bg-no-repeat bg-center w-full ">
|
|
|
|
<Motion
|
|
:in-view-options="{ once: true }"
|
|
:initial="{ opacity: 0,scale:0 }"
|
|
:transition="{ duration: 0.6,delay: 0.1}"
|
|
:while-in-view="{ opacity: 1,scale:1 }"
|
|
>
|
|
<TitleSection
|
|
subtitle="PRODUCT INTRODUCTION"
|
|
title="产品介绍"
|
|
/>
|
|
</Motion>
|
|
<Motion
|
|
:in-view-options="{ once: true }"
|
|
:initial="{ opacity: 0,scale:0 }"
|
|
:transition="{ duration: 0.6,delay: 0.1}"
|
|
:while-in-view="{ opacity: 1,scale:1 }"
|
|
>
|
|
<div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
|
|
<video
|
|
|
|
class="w-full h-full object-cover rounded-lg shadow-lg"
|
|
controls
|
|
loop
|
|
muted
|
|
poster="/img/index/banner.png"
|
|
src="https://www.caasbee.com/image/cpjs.mp4"
|
|
/>
|
|
</div>
|
|
</Motion>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |