|
|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: LiZhiWei
|
|
|
* @LastEditors: LiZhiWei
|
|
|
- * @LastEditTime: 2026-01-15 17:57:13
|
|
|
+ * @LastEditTime: 2026-01-16 10:47:11
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
@@ -70,66 +70,128 @@
|
|
|
]"
|
|
|
@mouseenter="activeIndex = index"
|
|
|
>
|
|
|
- <Transition
|
|
|
- mode="out-in"
|
|
|
- enter-active-class="transition-opacity duration-500 ease-in-out"
|
|
|
- enter-from-class="opacity-0"
|
|
|
- enter-to-class="opacity-100"
|
|
|
- leave-active-class="transition-opacity duration-200 ease-in-out"
|
|
|
- leave-from-class="opacity-100"
|
|
|
- leave-to-class="opacity-0"
|
|
|
+ <!-- Hover State Content -->
|
|
|
+ <div
|
|
|
+ class="h-full w-700px pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 translate-y-0 duration-500'
|
|
|
+ : 'opacity-0 translate-y-20px pointer-events-none duration-300',
|
|
|
+ ]"
|
|
|
>
|
|
|
- <div v-if="index === activeIndex" class="wh-full pt-40px px-48px">
|
|
|
- <div class="font-s-22px text-#000000 pf-sc-semibold">
|
|
|
- {{ solution.hoverTitle }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular whitespace-nowrap"
|
|
|
- >
|
|
|
- {{ solution.hoverDesc }}
|
|
|
- </div>
|
|
|
- <div class="mt-24px flex flex-col gap-8px">
|
|
|
- <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
|
|
|
- <div class="flex gap-8px items-center font-s-14px">
|
|
|
- <i class="i-custom-check-one wh-18px"></i>
|
|
|
- <span class="text-#091221 pf-sc-semibold">
|
|
|
- {{ item.title }}
|
|
|
- </span>
|
|
|
- <span class="text-#091221/70 pf-sc-regular">
|
|
|
- {{ item.itemDesc }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ class="font-s-22px text-#000000 pf-sc-semibold transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 translate-y-0 delay-100 duration-500'
|
|
|
+ : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ solution.hoverTitle }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular whitespace-nowrap transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 translate-y-0 delay-150 duration-500'
|
|
|
+ : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ solution.hoverDesc }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-24px flex flex-col gap-8px transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 translate-y-0 delay-200 duration-500'
|
|
|
+ : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div v-for="item in solution.hoverItems" :key="item.title" class="flex flex-col">
|
|
|
+ <div class="flex gap-8px items-center font-s-14px">
|
|
|
+ <i class="i-custom-check-one wh-18px"></i>
|
|
|
+ <span class="text-#091221 pf-sc-semibold">
|
|
|
+ {{ item.title }}
|
|
|
+ </span>
|
|
|
+ <span class="text-#091221/70 pf-sc-regular">
|
|
|
+ {{ item.itemDesc }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <button
|
|
|
- class="mt-56px h-48px! w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80"
|
|
|
- @click="openConsultation"
|
|
|
- >
|
|
|
- <span class="font-s-16px">立即咨询</span>
|
|
|
- <i class="i-custom-arrow-right wh-18px"></i>
|
|
|
- </button>
|
|
|
- <img
|
|
|
- :src="solution.hoverImg"
|
|
|
- alt=""
|
|
|
- class="wh-280px position-absolute bottom--37px right-0"
|
|
|
- />
|
|
|
</div>
|
|
|
- <div v-else class="wh-full pt-40px px-24px">
|
|
|
- <div class="wh-40px ml-2px bg-white rounded-10px flex-center">
|
|
|
- <img :src="solution.img" alt="" class="wh-35px" />
|
|
|
- </div>
|
|
|
+ <button
|
|
|
+ class="mt-56px h-48px! w-268px! bg-#0F67F8 text-white pf-sc-regular rounded-8px px-16px flex items-center justify-between hover:opacity-80 transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 translate-y-0 delay-300 duration-500'
|
|
|
+ : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
+ ]"
|
|
|
+ @click="openConsultation"
|
|
|
+ >
|
|
|
+ <span class="font-s-16px">立即咨询</span>
|
|
|
+ <i class="i-custom-arrow-right wh-18px"></i>
|
|
|
+ </button>
|
|
|
+ <img
|
|
|
+ :src="solution.hoverImg"
|
|
|
+ alt=""
|
|
|
+ class="wh-280px absolute bottom--37px right-0 transition-all ease-out"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-100 scale-100 delay-100 duration-700'
|
|
|
+ : 'opacity-0 scale-50 delay-0 duration-300',
|
|
|
+ ]"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="mt-18px font-s-18px text-#091221 pf-sc-semibold">
|
|
|
- {{ solution.title }}
|
|
|
- </div>
|
|
|
- <div class="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px">
|
|
|
- {{ solution.desc }}
|
|
|
- </div>
|
|
|
- <i
|
|
|
- class="i-custom-circle-right-up wh-48px position-absolute bottom-24px left-24px"
|
|
|
- ></i>
|
|
|
+ <!-- Normal State Content -->
|
|
|
+ <div
|
|
|
+ class="h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-0 pointer-events-none duration-300'
|
|
|
+ : 'opacity-100 duration-500',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'scale-150 opacity-0 delay-0 duration-300'
|
|
|
+ : 'scale-100 opacity-100 delay-0 duration-500',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <img :src="solution.img" alt="" class="wh-35px" />
|
|
|
</div>
|
|
|
- </Transition>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-0 translate-y-10px delay-0 duration-200'
|
|
|
+ : 'opacity-100 translate-y-0 delay-100 duration-500',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ solution.title }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-0 translate-y-10px delay-0 duration-200'
|
|
|
+ : 'opacity-100 translate-y-0 delay-150 duration-500',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ solution.desc }}
|
|
|
+ </div>
|
|
|
+ <i
|
|
|
+ class="i-custom-circle-right-up wh-48px absolute bottom-24px left-24px transition-all"
|
|
|
+ :class="[
|
|
|
+ index === activeIndex
|
|
|
+ ? 'opacity-0 scale-50 delay-0 duration-200'
|
|
|
+ : 'opacity-100 scale-100 delay-100 duration-500',
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
Lee