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