<script lang="ts" setup>
const items = [
  'https://picsum.photos/640/640?random=1',
  'https://picsum.photos/640/640?random=2',

]
</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="OUR STRENGTHS"
          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 }"
    >
      <view class="flex items-center flex-col lg:px-80 sm:flex-row">

        <div class="relative w-full max-w-5xl mx-auto aspect-video md:aspect-[16/9]">
          <UCarousel v-slot="{ item }" :items="items" arrows class="w-full max-w-xs mx-auto">
            <nuxt-img :src="item" class="rounded-lg" height="320" width="320"/>
          </UCarousel>
        </div>


        <div class="relative w-full max-w-6xl mx-auto aspect-video md:aspect-[16/9]">

          <img alt="" class="rounded-lg" src='/img/index/advantage.png'>

        </div>

      </view>
    </Motion>
  </div>
</template>

<style scoped>

</style>