首页动效添加
This commit is contained in:
WindowBird
parent
49cf071694
commit
04c6b546fd
|
|
@ -27,10 +27,18 @@ const cardItems = ref([
|
|||
<div
|
||||
:style="{ backgroundImage: `url('/img/index/3d_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full mb-4">
|
||||
<TitleSection
|
||||
subtitle="CASE FACTS"
|
||||
title="案例实况"
|
||||
/>
|
||||
|
||||
<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="CASE FACTS"
|
||||
title="案例实况"
|
||||
/>
|
||||
</Motion>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-2 gap-6 lg:px-40">
|
||||
<UPageCard
|
||||
|
|
|
|||
|
|
@ -6,10 +6,18 @@
|
|||
<div
|
||||
:style="{ backgroundImage: `url('/img/index/3d_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full ">
|
||||
<TitleSection
|
||||
subtitle="3D INTELLIGENT APIARY"
|
||||
title="3D智慧蜂场"
|
||||
/>
|
||||
|
||||
<Motion
|
||||
:in-view-options="{ once: true }"
|
||||
:initial="{ opacity: 0 ,transform: 'translateX(40px)'}"
|
||||
:transition="{ duration: 0.6,delay: 0.1}"
|
||||
:while-in-view="{ opacity: 1,transform: 'translateX(0px)' }"
|
||||
>
|
||||
<TitleSection
|
||||
subtitle="3D INTELLIGENT APIARY"
|
||||
title="3D智慧蜂场"
|
||||
/>
|
||||
</Motion>
|
||||
<img alt="" class="w-full lg:px-40 " src="/img/index/model2.b444287.gif">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,26 +10,44 @@ const items = [
|
|||
<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>
|
||||
|
||||
|
||||
<TitleSection
|
||||
subtitle="OUR STRENGTHS"
|
||||
title="我们的优势"
|
||||
/>
|
||||
<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]">
|
||||
<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]">
|
||||
<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>
|
||||
</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-6xl mx-auto aspect-video md:aspect-[16/9]">
|
||||
|
||||
<img class="rounded-lg" height="320" src='/img/index/advantage.png'>
|
||||
<img alt="" class="rounded-lg" src='/img/index/advantage.png'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Motion>
|
||||
</view>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,23 +7,35 @@
|
|||
:style="{ backgroundImage: `url('/img/index/strength_bg.png')` , }"
|
||||
class="bg-cover bg-no-repeat bg-center w-full ">
|
||||
|
||||
|
||||
<TitleSection
|
||||
subtitle="PRODUCT INTRODUCTION"
|
||||
title="产品介绍"
|
||||
/>
|
||||
|
||||
<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"
|
||||
<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="产品介绍"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user