|
|
@@ -1,1543 +1,35 @@
|
|
|
<!--
|
|
|
* @Author: LiZhiWei
|
|
|
* @LastEditors: LiZhiWei
|
|
|
- * @LastEditTime: 2026-01-20 10:29:56
|
|
|
+ * @LastEditTime: 2026-01-20 11:18:49
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="landing">
|
|
|
- <section class="hero">
|
|
|
- <div class="hero-content">
|
|
|
- <div class="hero-text">
|
|
|
- <div class="hero-title">智慧社区整体解决方案</div>
|
|
|
- <div class="hero-subtitle">
|
|
|
- 绘家科技助力物业管理数字化转型，提升服务品质与业主满意度。
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="hero-metrics">
|
|
|
- <div class="metric">
|
|
|
- <div class="metric-value">300+</div>
|
|
|
- <div class="metric-label">服务客户</div>
|
|
|
- </div>
|
|
|
- <div class="metric">
|
|
|
- <div class="metric-value">800+</div>
|
|
|
- <div class="metric-label">管理小区</div>
|
|
|
- </div>
|
|
|
- <div class="metric">
|
|
|
- <div class="metric-value">50w+</div>
|
|
|
- <div class="metric-label">管理房屋</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="hero-actions">
|
|
|
- <button class="btn-primary hero-btn-primary">查看方案</button>
|
|
|
- <button class="hero-btn-outline" @click="openConsultation">免费咨询</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section
|
|
|
- id="solution"
|
|
|
- ref="solutionRef"
|
|
|
- class="solution transition-all duration-1000 ease-out"
|
|
|
- :class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
- >
|
|
|
- <div class="solution-header">
|
|
|
- <div class="solution-title">物业管理正面临这些挑战</div>
|
|
|
- <div class="solution-desc">
|
|
|
- 传统物业管理模式效率低下、成本高昂、服务体验差，急需数字化转型
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div ref="solutionListRef" class="solution-list" @scroll="handleSolutionScroll">
|
|
|
- <div
|
|
|
- v-for="(solution, index) in solutions"
|
|
|
- :key="solution.id"
|
|
|
- class="solution-card"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'active bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]'
|
|
|
- : 'bg-[linear-gradient(180deg,#E8F6FD_50.48%,#A5D7FD_100%)] lt-sm:bg-[linear-gradient(0deg,#E5E9F5_0%,#EFF2FB_100%)]',
|
|
|
- ]"
|
|
|
- @mouseenter="activeIndex = index"
|
|
|
- @click="scrollToSolution(index)"
|
|
|
- >
|
|
|
- <!-- Hover State Content -->
|
|
|
- <div
|
|
|
- class="solution-card-hover"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 translate-y-0 duration-500'
|
|
|
- : 'opacity-0 translate-y-20px pointer-events-none duration-300 mobile-show',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="solution-card-title pf-sc-semibold text-overflow"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 translate-y-0 delay-100 duration-500'
|
|
|
- : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <span class="lt-sm:hidden">{{ solution.hoverTitle }}</span>
|
|
|
- <span>{{ solution.title }}解决方案</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="solution-card-desc pf-sc-regular"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 translate-y-0 delay-150 duration-500'
|
|
|
- : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <span>{{ solution.hoverDesc }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="solution-card-items"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 translate-y-0 delay-400 duration-700'
|
|
|
- : 'opacity-0 translate-y-20px delay-0 duration-300',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <div v-for="item in solution.hoverItems" :key="item.title" class="solution-card-item">
|
|
|
- <div class="solution-card-item-header">
|
|
|
- <i class="i-custom-check-one solution-card-item-icon"></i>
|
|
|
- <div class="solution-card-item-content">
|
|
|
- <span class="text-#091221 pf-sc-semibold">
|
|
|
- {{ item.title }}
|
|
|
- </span>
|
|
|
- <span class="text-#091221/70 pf-sc-regular line-clamp-1">
|
|
|
- {{ item.itemDesc }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <button
|
|
|
- class="solution-card-btn pf-sc-regular"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 translate-y-0 delay-500 duration-700'
|
|
|
- : 'opacity-0 translate-y-20px delay-0 duration-200',
|
|
|
- ]"
|
|
|
- @click="openConsultation"
|
|
|
- >
|
|
|
- <span class="font-s-16px lt-sm:font-s-26px">立即咨询</span>
|
|
|
- <i class="i-custom-arrow-right wh-18px lt-sm:wh-28px"></i>
|
|
|
- </button>
|
|
|
- <img
|
|
|
- :src="solution.hoverImg"
|
|
|
- alt=""
|
|
|
- class="solution-card-img"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-100 scale-100 delay-200 duration-500'
|
|
|
- : 'opacity-0 scale-50 delay-0 duration-300',
|
|
|
- ]"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Normal State Content -->
|
|
|
- <div
|
|
|
- class="solution-card-normal"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-0 pointer-events-none duration-300'
|
|
|
- : 'opacity-100 duration-500',
|
|
|
- ]"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="solution-card-icon-wrapper"
|
|
|
- :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>
|
|
|
-
|
|
|
- <div
|
|
|
- class="solution-card-normal-title pf-sc-semibold"
|
|
|
- :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="solution-card-normal-desc pf-sc-regular"
|
|
|
- :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 solution-card-normal-arrow"
|
|
|
- :class="[
|
|
|
- index === activeIndex
|
|
|
- ? 'opacity-0 scale-50 delay-0 duration-200'
|
|
|
- : 'opacity-100 scale-100 delay-100 duration-500',
|
|
|
- ]"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="solution-dots lt-sm:flex hidden">
|
|
|
- <div
|
|
|
- v-for="(_, index) in solutions"
|
|
|
- :key="index"
|
|
|
- class="dot"
|
|
|
- :class="{ active: index === activeIndex }"
|
|
|
- @click="scrollToSolution(index)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section
|
|
|
- id="ability"
|
|
|
- ref="abilityRef"
|
|
|
- class="ability transition-all duration-1000 ease-out"
|
|
|
- :class="[isAbilityVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
- >
|
|
|
- <div class="ability-title pf-sc-semibold">一体化智慧解决方案</div>
|
|
|
- <div class="ability-desc pf-sc-regular">
|
|
|
- 绘家科技提供从软件到硬件的完整解决方案，覆盖物业管理的全场景需求
|
|
|
- </div>
|
|
|
- <div class="ability-content">
|
|
|
- <div class="ability-tabs">
|
|
|
- <!-- 滑块背景 -->
|
|
|
- <div class="ability-tab-indicator" :style="abilityTabIndicatorStyle"></div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-for="tab in abilityTabs"
|
|
|
- :key="tab.title"
|
|
|
- class="ability-tab-item"
|
|
|
- :class="[
|
|
|
- activeAbilityTab.id === tab.id ? 'text-white' : 'text-#091221 hover:text-#0F67F8',
|
|
|
- ]"
|
|
|
- @click="handleAbilityTabClick(tab)"
|
|
|
- >
|
|
|
- {{ tab.title }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tab-content">
|
|
|
- <Transition name="tab-fade" mode="out-in">
|
|
|
- <div :key="activeAbilityTab.id" class="ability-grid">
|
|
|
- <div
|
|
|
- v-for="ability in abilities[activeAbilityTab.id]"
|
|
|
- :key="ability.title"
|
|
|
- class="ability-card"
|
|
|
- >
|
|
|
- <i :class="ability.icon" class="ability-card-icon"></i>
|
|
|
- <div class="ability-card-title pf-sc-semibold">
|
|
|
- {{ ability.title }}
|
|
|
- </div>
|
|
|
- <div class="ability-card-desc pf-sc-regular">
|
|
|
- {{ ability.desc }}
|
|
|
- </div>
|
|
|
- <div class="ability-card-link">
|
|
|
- 查看详情
|
|
|
- <i
|
|
|
- class="i-custom-arrow-right-c color-#0F67F8 wh-18px lt-sm:wh-28px transition-transform group-hover:translate-x-4px"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section
|
|
|
- id="cases"
|
|
|
- ref="casesRef"
|
|
|
- class="cases transition-all duration-1000 ease-out"
|
|
|
- :class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
- >
|
|
|
- <div class="cases-header">
|
|
|
- <div class="cases-title pf-sc-semibold">知识产权和案例</div>
|
|
|
- <div class="cases-desc pf-sc-regular">
|
|
|
- 绘家科技凭借强大的技术实力和丰富的实践经验，为客户提供卓越的智慧社区解决方案
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div ref="casesListRef" class="cases-list" @scroll="handleCaseScroll">
|
|
|
- <div
|
|
|
- v-for="(caseItem, index) in cases"
|
|
|
- :key="caseItem.title"
|
|
|
- class="cases-card"
|
|
|
- :class="{ active: index === activeCaseIndex }"
|
|
|
- >
|
|
|
- <div class="flex flex-col h-full">
|
|
|
- <img :src="caseItem.img" class="cases-card-img" alt="" />
|
|
|
- <div class="cases-card-title pf-sc-semibold">
|
|
|
- {{ caseItem.title }}
|
|
|
- </div>
|
|
|
- <div class="cases-card-desc pf-sc-regular">
|
|
|
- {{ caseItem.desc }}
|
|
|
- </div>
|
|
|
- <div class="cases-card-points">
|
|
|
- <div v-for="point in caseItem.points" :key="point.title" class="cases-card-point">
|
|
|
- <i class="i-custom-check-one cases-card-point-icon"></i>
|
|
|
- <div class="cases-card-point-title pf-sc-semibold">
|
|
|
- {{ point.title }}
|
|
|
- </div>
|
|
|
- <div class="cases-card-point-desc pf-sc-regular">
|
|
|
- {{ point.itemDesc }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <button class="cases-btn">
|
|
|
- {{ caseItem.btnText }}
|
|
|
- <i class="i-custom-arrow-right-c cases-card-btn-icon"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="cases-dots lt-sm:flex hidden">
|
|
|
- <div
|
|
|
- v-for="(_, index) in cases"
|
|
|
- :key="index"
|
|
|
- class="dot"
|
|
|
- :class="{ active: index === activeCaseIndex }"
|
|
|
- @click="scrollToCase(index)"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section
|
|
|
- id="partnership"
|
|
|
- ref="partnershipRef"
|
|
|
- class="partnership transition-all duration-1000 ease-out"
|
|
|
- :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
- >
|
|
|
- <div class="partnership-header">
|
|
|
- <div class="partnership-line-left"></div>
|
|
|
- <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
|
|
|
- <div class="partnership-line-right"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="partnership-content">
|
|
|
- <!-- 第一行 -->
|
|
|
- <InspiraMarquee class="partnership-marquee-row1">
|
|
|
- <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
|
|
|
- <img :src="partner" alt="" class="wh-full object-contain" />
|
|
|
- </div>
|
|
|
- </InspiraMarquee>
|
|
|
- <!-- 第二行 -->
|
|
|
- <InspiraMarquee reverse class="partnership-marquee-row2">
|
|
|
- <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
|
|
|
- <img :src="partner" alt="" class="wh-full object-contain" />
|
|
|
- </div>
|
|
|
- </InspiraMarquee>
|
|
|
- <!-- 左右渐变遮罩 -->
|
|
|
- <div class="partnership-mask-left"></div>
|
|
|
- <div class="partnership-mask-right"></div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section id="history" ref="timelineRef" class="history">
|
|
|
- <div
|
|
|
- class="history-container"
|
|
|
- :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-40px opacity-0']"
|
|
|
- >
|
|
|
- <div class="history-title pf-sc-semibold">发展历程</div>
|
|
|
- <div class="history-subtitle pf-sc-regular">从探索到引领，绘家科技每一步都坚实有力</div>
|
|
|
-
|
|
|
- <!-- 上部内容区 -->
|
|
|
- <div class="history-top">
|
|
|
- <!-- 左侧大年份 -->
|
|
|
- <div class="history-year-wrapper">
|
|
|
- <Transition name="year-flow">
|
|
|
- <div :key="currentYearData?.year" class="history-year-content">
|
|
|
- <span class="history-year-text pf-sc-bold">
|
|
|
- {{ currentYearData?.year }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 右侧事件描述 -->
|
|
|
- <div class="history-event-wrapper">
|
|
|
- <Transition name="event-fade" mode="out-in">
|
|
|
- <div
|
|
|
- :key="currentYearData?.year + '-' + currentEventIndex"
|
|
|
- class="history-event-content"
|
|
|
- >
|
|
|
- <div class="history-event-header">
|
|
|
- <span class="history-event-month pf-sc-semibold">
|
|
|
- {{ currentEventData?.month }}
|
|
|
- </span>
|
|
|
- <!-- 右上方小切换 -->
|
|
|
- <div
|
|
|
- v-if="(currentYearData?.events?.length ?? 0) > 1"
|
|
|
- class="history-event-controls"
|
|
|
- >
|
|
|
- <i
|
|
|
- class="i-custom-arrow-circle-left history-event-arrow"
|
|
|
- :class="[
|
|
|
- currentEventIndex === 0
|
|
|
- ? 'opacity-30 cursor-not-allowed'
|
|
|
- : 'cursor-pointer hover:i-custom-arrow-circle-left-active hover:scale-110 active:scale-95',
|
|
|
- ]"
|
|
|
- @click="prevEvent"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- class="i-custom-arrow-circle-right history-event-arrow"
|
|
|
- :class="[
|
|
|
- currentEventIndex === (currentYearData?.events?.length ?? 0) - 1
|
|
|
- ? 'opacity-30 cursor-not-allowed'
|
|
|
- : 'cursor-pointer hover:i-custom-arrow-circle-right-active hover:scale-110 active:scale-95',
|
|
|
- ]"
|
|
|
- @click="nextEvent"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="history-event-line"></div>
|
|
|
- <div class="history-event-desc pf-sc-regular">
|
|
|
- {{ currentEventData?.content }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 时间轴 -->
|
|
|
- <div class="history-timeline lt-sm:hidden">
|
|
|
- <!-- 轨道容器 -->
|
|
|
- <div class="history-timeline-track">
|
|
|
- <!-- 进度条：从轨道最左侧开始到当前点 -->
|
|
|
- <div class="history-timeline-progress" :style="progressStyle"></div>
|
|
|
-
|
|
|
- <!-- 内部轨道（用于定位时间点） -->
|
|
|
- <div class="history-timeline-nodes">
|
|
|
- <!-- 时间点列表 -->
|
|
|
- <div
|
|
|
- v-for="(item, index) in historyYears"
|
|
|
- :key="item.year"
|
|
|
- class="history-timeline-node"
|
|
|
- :style="getTimelineNodePositionStyle(index)"
|
|
|
- @click="selectYear(index)"
|
|
|
- >
|
|
|
- <!-- 圆点 -->
|
|
|
- <div
|
|
|
- class="history-timeline-dot"
|
|
|
- :class="getTimelineDotClasses(index)"
|
|
|
- :style="getTimelineDotStyle(index)"
|
|
|
- ></div>
|
|
|
- <!-- 年份文字 -->
|
|
|
- <span class="history-timeline-year" :class="getTimelineYearTextClasses(index)">
|
|
|
- {{ item.year }}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- Mobile Timeline -->
|
|
|
- <div class="history-timeline-mobile lt-sm:flex hidden">
|
|
|
- <i
|
|
|
- class="i-custom-button-previous-mobile history-mobile-btn"
|
|
|
- :class="[
|
|
|
- currentYearIndex === 0
|
|
|
- ? 'cursor-not-allowed i-custom-button-previous-mobile-disabled'
|
|
|
- : 'active:i-custom-button-previous-mobile-active',
|
|
|
- ]"
|
|
|
- @click="prevYear"
|
|
|
- ></i>
|
|
|
-
|
|
|
- <div class="history-mobile-track-container">
|
|
|
- <div class="history-mobile-track-line"></div>
|
|
|
- <div class="history-mobile-nodes">
|
|
|
- <div
|
|
|
- v-for="(yearIndex, i) in mobileTimelineIndices"
|
|
|
- :key="i"
|
|
|
- class="history-mobile-node"
|
|
|
- :class="{ invisible: yearIndex < 0 || yearIndex >= historyYears.length }"
|
|
|
- @click="yearIndex >= 0 && yearIndex < historyYears.length && selectYear(yearIndex)"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="history-mobile-dot"
|
|
|
- :class="{ active: yearIndex === currentYearIndex }"
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class="history-mobile-year"
|
|
|
- :class="{ active: yearIndex === currentYearIndex }"
|
|
|
- >
|
|
|
- {{ historyYears[yearIndex]?.year }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <i
|
|
|
- class="i-custom-button-next-mobile history-mobile-btn"
|
|
|
- :class="[
|
|
|
- currentYearIndex === historyYears.length - 1
|
|
|
- ? 'cursor-not-allowed i-custom-button-next-mobile-disabled'
|
|
|
- : 'active:i-custom-button-next-mobile-active',
|
|
|
- ]"
|
|
|
- @click="nextYear"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部大切换 -->
|
|
|
- <div class="history-nav">
|
|
|
- <i
|
|
|
- class="i-custom-button-previous history-nav-btn"
|
|
|
- :class="{
|
|
|
- 'opacity-30 cursor-not-allowed hover:i-custom-button-previous!':
|
|
|
- currentYearIndex === 0,
|
|
|
- }"
|
|
|
- @click="prevYear"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- class="i-custom-button-next history-nav-btn"
|
|
|
- :class="{
|
|
|
- 'opacity-30 cursor-not-allowed hover:i-custom-button-next!':
|
|
|
- currentYearIndex === historyYears.length - 1,
|
|
|
- }"
|
|
|
- @click="nextYear"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section class="cta">
|
|
|
- <div class="cta-title pf-sc-semibold">开启您的智慧社区转型之旅</div>
|
|
|
- <div class="cta-desc pf-sc-light">
|
|
|
- 提交您的需求，我们的专属顾问将在24小时内为您提供定制化解决方案
|
|
|
- </div>
|
|
|
- <button class="cta-btn pf-sc-regular" @click="openConsultation">
|
|
|
- <span class="cta-btn-text">立即咨询</span>
|
|
|
- <i class="i-custom-arrow-right cta-btn-icon"></i>
|
|
|
- </button>
|
|
|
- </section>
|
|
|
+ <HeroSection />
|
|
|
+ <SolutionSection />
|
|
|
+ <AbilitySection />
|
|
|
+ <CasesSection />
|
|
|
+ <PartnershipSection />
|
|
|
+ <HistorySection />
|
|
|
+ <CtaSection />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import {
|
|
|
- abilityTabs,
|
|
|
- solutions,
|
|
|
- abilities,
|
|
|
- cases,
|
|
|
- partnersRow1,
|
|
|
- partnersRow2,
|
|
|
- historyYears,
|
|
|
- } from '@/constants/common'
|
|
|
-
|
|
|
- const { openConsultation } = useConsultation()
|
|
|
-
|
|
|
- const activeIndex = ref(0)
|
|
|
- const solutionListRef = ref<HTMLElement | null>(null)
|
|
|
-
|
|
|
- const handleSolutionScroll = (e: Event) => {
|
|
|
- const el = e.target as HTMLElement
|
|
|
- const scrollLeft = el.scrollLeft
|
|
|
- const width = el.offsetWidth
|
|
|
- // 计算当前处于中间的卡片索引
|
|
|
- // 卡片宽度为 85%，加上 gap 16px
|
|
|
- const cardWidth = width * 0.85
|
|
|
- const gap = 16
|
|
|
- const newIndex = Math.round(scrollLeft / (cardWidth + gap))
|
|
|
- if (newIndex !== activeIndex.value) {
|
|
|
- activeIndex.value = newIndex
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const scrollToSolution = (index: number) => {
|
|
|
- // 桌面端点击不触发滚动
|
|
|
- if (window.innerWidth >= 640) return
|
|
|
-
|
|
|
- if (!solutionListRef.value) return
|
|
|
-
|
|
|
- // 立即更新状态，提升响应速度
|
|
|
- activeIndex.value = index
|
|
|
-
|
|
|
- const width = solutionListRef.value.offsetWidth
|
|
|
- const cardWidth = width * 0.85
|
|
|
- const gap = 16
|
|
|
- solutionListRef.value.scrollTo({
|
|
|
- left: index * (cardWidth + gap),
|
|
|
- behavior: 'smooth',
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- const activeCaseIndex = ref(0)
|
|
|
- const casesListRef = ref<HTMLElement | null>(null)
|
|
|
-
|
|
|
- const handleCaseScroll = (e: Event) => {
|
|
|
- const el = e.target as HTMLElement
|
|
|
- const scrollLeft = el.scrollLeft
|
|
|
- const width = el.offsetWidth
|
|
|
- const cardWidth = width * 0.9
|
|
|
- const gap = 16
|
|
|
- const newIndex = Math.round(scrollLeft / (cardWidth + gap))
|
|
|
- if (newIndex !== activeCaseIndex.value) {
|
|
|
- activeCaseIndex.value = newIndex
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const scrollToCase = (index: number) => {
|
|
|
- if (!casesListRef.value) return
|
|
|
- const width = casesListRef.value.offsetWidth
|
|
|
- const cardWidth = width * 0.9
|
|
|
- const gap = 16
|
|
|
- casesListRef.value.scrollTo({
|
|
|
- left: index * (cardWidth + gap),
|
|
|
- behavior: 'smooth',
|
|
|
- })
|
|
|
- }
|
|
|
- const solutionRef = ref<HTMLElement | null>(null)
|
|
|
- const abilityRef = ref<HTMLElement | null>(null)
|
|
|
- const partnershipRef = ref<HTMLElement | null>(null)
|
|
|
- const casesRef = ref<HTMLElement | null>(null)
|
|
|
- const timelineRef = ref<HTMLElement | null>(null)
|
|
|
- const isSolutionVisible = ref(false)
|
|
|
- const isAbilityVisible = ref(false)
|
|
|
- const isPartnershipVisible = ref(false)
|
|
|
- const isCasesVisible = ref(false)
|
|
|
- const isTimelineVisible = ref(false)
|
|
|
-
|
|
|
- // 发展历程状态
|
|
|
- const currentYearIndex = ref(historyYears.length - 1)
|
|
|
- const currentEventIndex = ref(0)
|
|
|
-
|
|
|
- const currentYearData = computed(() => {
|
|
|
- const data = historyYears[currentYearIndex.value]
|
|
|
- return data || historyYears[0]
|
|
|
- })
|
|
|
- const currentEventData = computed(() => {
|
|
|
- const events = currentYearData.value?.events || []
|
|
|
- return events[currentEventIndex.value] || events[0]
|
|
|
- })
|
|
|
-
|
|
|
- const mobileTimelineIndices = computed(() => {
|
|
|
- const total = historyYears.length
|
|
|
- if (total <= 0) return []
|
|
|
- // Always return 3 positions centered on currentYearIndex
|
|
|
- const prev = currentYearIndex.value - 1
|
|
|
- const curr = currentYearIndex.value
|
|
|
- const next = currentYearIndex.value + 1
|
|
|
- return [prev, curr, next]
|
|
|
- })
|
|
|
-
|
|
|
- const progressStyle = computed(() => {
|
|
|
- const totalSteps = Math.max(historyYears.length - 1, 1)
|
|
|
- if (currentYearIndex.value === totalSteps) {
|
|
|
- return {
|
|
|
- width: '100%',
|
|
|
- }
|
|
|
- }
|
|
|
- const percentage = currentYearIndex.value / totalSteps
|
|
|
- return {
|
|
|
- width: `calc(60px + ${percentage} * (100% - 120px))`,
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const nextYear = () => {
|
|
|
- if (currentYearIndex.value < historyYears.length - 1) {
|
|
|
- currentYearIndex.value++
|
|
|
- currentEventIndex.value = 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const prevYear = () => {
|
|
|
- if (currentYearIndex.value > 0) {
|
|
|
- currentYearIndex.value--
|
|
|
- currentEventIndex.value = 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const nextEvent = () => {
|
|
|
- const events = currentYearData.value?.events || []
|
|
|
- if (currentEventIndex.value < events.length - 1) {
|
|
|
- currentEventIndex.value++
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const prevEvent = () => {
|
|
|
- if (currentEventIndex.value > 0) {
|
|
|
- currentEventIndex.value--
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const selectYear = (index: number) => {
|
|
|
- currentYearIndex.value = index
|
|
|
- currentEventIndex.value = 0
|
|
|
- }
|
|
|
-
|
|
|
- const activeAbilityTab = ref<AbilityTab>(abilityTabs[0] as AbilityTab)
|
|
|
-
|
|
|
- const abilityTabIndicatorStyle = computed(() => {
|
|
|
- const activeTabIndex = abilityTabs.findIndex((tab) => tab.id === activeAbilityTab.value.id)
|
|
|
- return {
|
|
|
- transform: `translateX(${activeTabIndex * 100}%)`,
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const handleAbilityTabClick = (tab: AbilityTab) => {
|
|
|
- activeAbilityTab.value = tab
|
|
|
- }
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- const revealSections = [
|
|
|
- { elRef: solutionRef, visible: isSolutionVisible },
|
|
|
- { elRef: abilityRef, visible: isAbilityVisible },
|
|
|
- { elRef: partnershipRef, visible: isPartnershipVisible },
|
|
|
- { elRef: casesRef, visible: isCasesVisible },
|
|
|
- { elRef: timelineRef, visible: isTimelineVisible },
|
|
|
- ]
|
|
|
-
|
|
|
- const observer = new IntersectionObserver(
|
|
|
- (entries) => {
|
|
|
- entries.forEach((entry) => {
|
|
|
- if (entry.isIntersecting) {
|
|
|
- const matched = revealSections.find((item) => item.elRef.value === entry.target)
|
|
|
- if (matched) {
|
|
|
- matched.visible.value = true
|
|
|
- }
|
|
|
- observer.unobserve(entry.target)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- { threshold: 0.1 }
|
|
|
- )
|
|
|
-
|
|
|
- revealSections.forEach(({ elRef }) => {
|
|
|
- if (elRef.value) {
|
|
|
- observer.observe(elRef.value)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- const getTimelineNodePositionStyle = (index: number) => {
|
|
|
- return { left: `${(index / (historyYears.length - 1)) * 100}%` }
|
|
|
- }
|
|
|
-
|
|
|
- const getTimelineDotClasses = (index: number) => {
|
|
|
- return [
|
|
|
- index < currentYearIndex.value
|
|
|
- ? 'wh-13px'
|
|
|
- : 'wh-16px border-#0F67F8 group-hover:border-[#2563EB] border-1',
|
|
|
- index === currentYearIndex.value
|
|
|
- ? 'wh-16px scale-150 outline-6px outline-#CEE0FF outline-solid border-none'
|
|
|
- : '',
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
- const getTimelineDotStyle = (index: number) => {
|
|
|
- if (index === currentYearIndex.value) {
|
|
|
- return { background: 'linear-gradient(90deg, #779EFF 0%, #0A50FF 100%)' }
|
|
|
- }
|
|
|
- if (index < currentYearIndex.value) {
|
|
|
- return { background: '#FFFFFF' }
|
|
|
- }
|
|
|
- return {}
|
|
|
- }
|
|
|
-
|
|
|
- const getTimelineYearTextClasses = (index: number) => {
|
|
|
- return [
|
|
|
- index === currentYearIndex.value
|
|
|
- ? 'text-#2563EB font-bold pf-sc-bold scale-110'
|
|
|
- : 'text-#94A3B8 group-hover:text-[#64748B]',
|
|
|
- ]
|
|
|
- }
|
|
|
+ import HeroSection from './components/HeroSection.vue'
|
|
|
+ import SolutionSection from './components/SolutionSection.vue'
|
|
|
+ import AbilitySection from './components/AbilitySection.vue'
|
|
|
+ import CasesSection from './components/CasesSection.vue'
|
|
|
+ import PartnershipSection from './components/PartnershipSection.vue'
|
|
|
+ import HistorySection from './components/HistorySection.vue'
|
|
|
+ import CtaSection from './components/CtaSection.vue'
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
|
.landing {
|
|
|
@apply lt-sm:pt-120px;
|
|
|
color: var(--hj-text);
|
|
|
background: var(--hj-bg);
|
|
|
}
|
|
|
-
|
|
|
- .hero {
|
|
|
- @apply h-680px relative overflow-hidden;
|
|
|
- @apply lt-sm:w-full lt-sm:h-auto lt-sm:aspect-[750/880];
|
|
|
-
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-image: url('@/assets/images/banner.png');
|
|
|
-
|
|
|
- @screen lt-sm {
|
|
|
- @apply w-full h-auto;
|
|
|
- aspect-ratio: 750/880;
|
|
|
- background-image: url('@/assets/images/banner-mobile.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-content {
|
|
|
- @extend %landing-container;
|
|
|
- @apply flex items-center pb-48px pt-200px;
|
|
|
- @apply lt-sm:pt-80px;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-text {
|
|
|
- @apply text-left w-full;
|
|
|
- @apply lt-sm:text-center;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-metrics {
|
|
|
- @apply mt-35px flex items-center gap-48px;
|
|
|
- @apply lt-sm:justify-center lt-sm:mt-20px lt-sm:gap-76px;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-title {
|
|
|
- @apply font-s-48px font-semibold text-#000000;
|
|
|
- @apply lt-sm:font-s-58px;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-subtitle {
|
|
|
- @apply font-s-18px text-#091221/70;
|
|
|
- @apply lt-sm:mt-12px lt-sm:font-s-26px lt-sm:px-25px;
|
|
|
- @apply lt-xs:px-0;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-actions {
|
|
|
- @apply mt-35px flex items-center gap-16px;
|
|
|
- @apply lt-sm:justify-center lt-sm:absolute lt-sm:bottom-80px lt-sm:left-1/2 lt-sm:-translate-x-1/2;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-btn-primary {
|
|
|
- @apply w-127px h-56px rounded-8px text-white font-s-18px pf-sc-semibold;
|
|
|
- @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
|
|
|
- }
|
|
|
-
|
|
|
- .hero-btn-outline {
|
|
|
- @apply w-127px h-56px bg-white border-#0F67F8 border-1 rounded-8px hover:opacity-80 font-s-18px font-semibold text-#0F67F8;
|
|
|
- @apply lt-sm:w-168px lt-sm:h-71px lt-sm:font-s-24px lt-sm:rounded-8px;
|
|
|
- }
|
|
|
-
|
|
|
- .metric {
|
|
|
- @apply flex items-start flex-col;
|
|
|
- @apply lt-sm:items-center;
|
|
|
-
|
|
|
- .metric-value {
|
|
|
- @apply font-s-32px font-semibold text-#0F67F8;
|
|
|
- @apply lt-sm:font-s-52px;
|
|
|
- }
|
|
|
-
|
|
|
- .metric-label {
|
|
|
- @apply font-s-14px text-#384146;
|
|
|
- @apply lt-sm:font-s-24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .solution {
|
|
|
- @extend %landing-container;
|
|
|
- @apply py-120px lt-sm:py-120px lt-sm:px-0;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-header {
|
|
|
- @apply text-center mb-45px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-title {
|
|
|
- @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
|
|
|
- @apply lt-sm:font-s-48px lt-sm:lh-60px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-desc {
|
|
|
- @apply font-s-16px text-#091221/70 lh-30px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:px-110px lt-sm:mt-16px lt-sm:lh-40px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-list {
|
|
|
- @apply flex h-365px w-full gap-24px;
|
|
|
- @apply lt-sm:h-auto lt-sm:gap-16px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-24px;
|
|
|
- @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
|
|
|
- &::-webkit-scrollbar {
|
|
|
- @apply lt-sm:hidden;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
- cursor: pointer;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 24px;
|
|
|
- will-change: transform, opacity;
|
|
|
- transition:
|
|
|
- transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
|
- opacity 600ms ease,
|
|
|
- flex 600ms ease-in-out,
|
|
|
- background-color 600ms ease-in-out;
|
|
|
-
|
|
|
- @media (min-width: 768px) {
|
|
|
- &.active {
|
|
|
- flex: 1 1 0%;
|
|
|
- }
|
|
|
- &:not(.active) {
|
|
|
- flex: 0 0 220px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @apply lt-sm:flex-[0_0_90%] lt-sm:min-h-750px lt-sm:w-630px;
|
|
|
- @apply lt-sm:[scroll-snap-align:center];
|
|
|
-
|
|
|
- &:not(.active) {
|
|
|
- @apply lt-sm:scale-96 lt-sm:opacity-50;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- @apply lt-sm:scale-100 lt-sm:opacity-100;
|
|
|
- }
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- @apply lt-sm:ml-36px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- @apply lt-sm:mr-36px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-hover {
|
|
|
- @apply h-full w-full pt-40px px-48px absolute left-0 top-0 transition-all ease-in-out;
|
|
|
- @apply lt-sm:relative lt-sm:pt-40px lt-sm:px-36px lt-sm:pb-32px lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
|
|
|
-
|
|
|
- &.mobile-show {
|
|
|
- @apply lt-sm:opacity-100 lt-sm:translate-y-0 lt-sm:pointer-events-auto;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-title {
|
|
|
- @apply font-s-22px text-#000000 transition-all;
|
|
|
- @apply lt-sm:font-s-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-desc {
|
|
|
- @apply font-s-14px lh-24px mt-8px text-#091221/70 pf-sc-regular text-overflow transition-all;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:mt-8px lt-sm:lh-normal;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-items {
|
|
|
- @apply mt-24px flex flex-col gap-8px transition-all;
|
|
|
- @apply lt-sm:mt-48px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-item {
|
|
|
- @apply flex flex-col;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-item-header {
|
|
|
- @apply flex gap-8px items-center font-s-14px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:gap-12px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-item-icon {
|
|
|
- @apply wh-18px;
|
|
|
- @apply lt-sm:wh-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-item-content {
|
|
|
- @apply flex items-center gap-8px;
|
|
|
- @apply lt-sm:flex-col lt-sm:items-start lt-sm:gap-8px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-btn {
|
|
|
- @apply 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;
|
|
|
- @apply lt-sm:w-270px lt-sm:h-95px lt-sm:rounded-16px lt-sm:mt-102px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-img {
|
|
|
- @apply wh-280px absolute bottom--37px right-0 transition-all duration-300 ease-in-out;
|
|
|
- @apply lt-sm:wh-264px lt-sm:bottom--26px;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-normal {
|
|
|
- @apply h-full w-220px pt-40px px-24px absolute left-0 top-0 transition-all ease-in-out;
|
|
|
- @apply lt-sm:hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-icon-wrapper {
|
|
|
- @apply wh-40px ml-2px bg-white rounded-10px flex-center transition-all ease-in-out;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-normal-title {
|
|
|
- @apply mt-18px font-s-18px text-#091221 pf-sc-semibold transition-all;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-normal-desc {
|
|
|
- @apply mt-8px font-s-14px lh-24px text-#091221/60 pf-sc-regular w-172px transition-all;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-card-normal-arrow {
|
|
|
- @apply wh-48px absolute bottom-24px left-24px transition-all;
|
|
|
- }
|
|
|
-
|
|
|
- .solution-dots {
|
|
|
- @apply lt-sm:mt-40px flex-center lt-sm:gap-16px;
|
|
|
- .dot {
|
|
|
- @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
|
|
|
- &.active {
|
|
|
- @apply bg-#0F67F8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ability {
|
|
|
- @apply py-120px;
|
|
|
- @extend %landing-container;
|
|
|
- @apply lt-sm:py-120px lt-sm:px-32px;
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: url('@/assets/images/bg-ability.png');
|
|
|
-
|
|
|
- @screen lt-sm {
|
|
|
- background-size: 100% 100%;
|
|
|
- background-image: url('@/assets/images/bg-ability-mobile.png');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ability-title {
|
|
|
- @apply font-s-36px text-#000000 pf-sc-semibold flex-center lh-60px;
|
|
|
- @apply lt-sm:font-s-48px lt-sm:lh-60px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-desc {
|
|
|
- @apply font-s-16px text-#091221/70 pf-sc-regular lh-30px flex-center mt-4px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:text-center lt-sm:px-60px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-content {
|
|
|
- @apply mt-24px flex-center flex-col;
|
|
|
- @apply lt-sm:mt-40px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-tabs {
|
|
|
- @apply relative flex items-center rounded-14px border border-#ECEFF6 bg-#F6F8FD p-6px;
|
|
|
- @apply lt-sm:rounded-16px lt-sm:p-8px lt-sm:w-[calc(100%-40px)];
|
|
|
- }
|
|
|
-
|
|
|
- .ability-tab-indicator {
|
|
|
- @apply absolute w-136px h-[calc(100%-12px)] transition-all duration-300 ease-out rounded-8px bg-#0F67F8;
|
|
|
- @apply lt-sm:w-[calc((100%-16px)/3)] lt-sm:h-[calc(100%-16px)] lt-sm:rounded-12px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-tab-item {
|
|
|
- @apply relative z-1 cursor-pointer py-14px px-20px text-center font-s-16px transition-colors duration-300 pf-sc-regular;
|
|
|
- @apply lt-sm:flex-1 lt-sm:px-0 lt-sm:py-20px lt-sm:font-s-24px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-content {
|
|
|
- @apply pt-45px;
|
|
|
- @apply lt-sm:pt-40px lt-sm:w-full;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-grid {
|
|
|
- @apply grid grid-cols-3 gap-24px;
|
|
|
- @apply lt-sm:grid-cols-2 lt-sm:gap-25px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-card {
|
|
|
- @apply group relative flex flex-col rounded-16px border border-#ECEFF6 bg-[linear-gradient(0deg,_#FFFFFF_0%,_rgba(255,255,255,0.6)_100%)] p-24px transition-all duration-300 hover:border-#0F67F8/30 hover:shadow-[0_8px_24px_rgba(15,103,248,0.08)];
|
|
|
- @apply lt-sm:p-24px lt-sm:rounded-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-card-icon {
|
|
|
- @apply wh-48px;
|
|
|
- @apply lt-sm:wh-78px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-card-title {
|
|
|
- @apply mt-16px font-s-18px font-semibold text-#091221 pf-sc-semibold;
|
|
|
- @apply lt-sm:font-s-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-card-desc {
|
|
|
- @apply mt-8px flex-1 font-s-14px text-#091221/70 pf-sc-regular;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:mt-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ability-card-link {
|
|
|
- @apply mt-24px flex items-center gap-8px font-s-16px pf-sc-regular text-#0F67F8 transition-colors hover:text-#0A50FF cursor-pointer;
|
|
|
- @apply lt-sm:mt-48px lt-sm:font-s-28px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases {
|
|
|
- @apply pt-120px pb-46px lt-sm:pt-120px lt-sm:pb-60px lt-sm:px-32px;
|
|
|
- @extend %landing-container;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-header {
|
|
|
- @apply text-center mb-60px lt-sm:mb-60px lt-sm:px-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-title {
|
|
|
- @apply font-s-36px font-semibold text-#000000 mb-4px lh-60px;
|
|
|
- @apply lt-sm:font-s-48px lt-sm:mb-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-desc {
|
|
|
- @apply font-s-16px text-#091221/70 lh-30px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:px-70px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-list {
|
|
|
- @apply flex gap-24px;
|
|
|
- @apply lt-sm:gap-36px lt-sm:overflow-x-auto lt-sm:overflow-y-hidden lt-sm:px-0 lt-sm:pb-10px;
|
|
|
- @apply lt-sm:[scroll-snap-type:x_mandatory] lt-sm:[scrollbar-width:none];
|
|
|
- &::-webkit-scrollbar {
|
|
|
- @apply lt-sm:hidden;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card {
|
|
|
- @apply group flex-1 overflow-hidden rounded-16px bg-#F6F8FD p-32px transition-all duration-300;
|
|
|
- @apply lt-sm:flex-none lt-sm:w-[calc(100vw-84px)] lt-sm:min-w-[calc(100vw-84px)] lt-sm:p-32px lt-sm:rounded-16px;
|
|
|
- @apply lt-sm:[scroll-snap-align:center];
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- @apply lt-sm:ml-42px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- @apply lt-sm:mr-42px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-img {
|
|
|
- @apply w-full h-218px rounded-12px;
|
|
|
- @apply lt-sm:h-320px lt-sm:rounded-12px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-title {
|
|
|
- @apply font-s-18px font-semibold text-#091221 mt-24px;
|
|
|
- @apply lt-sm:font-s-32px lt-sm:mt-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-desc {
|
|
|
- @apply mt-8px font-s-14px lh-24px text-#091221/70;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:lh-36px lt-sm:mt-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-points {
|
|
|
- @apply mt-24px flex flex-col gap-8px flex-1;
|
|
|
- @apply lt-sm:mt-32px lt-sm:gap-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-point {
|
|
|
- @apply flex items-center gap-8px;
|
|
|
- @apply lt-sm:gap-12px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-point-icon {
|
|
|
- @apply wh-20px mt-2px;
|
|
|
- @apply lt-sm:wh-32px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-point-title {
|
|
|
- @apply font-s-14px font-semibold text-#091221;
|
|
|
- @apply lt-sm:font-s-24px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-point-desc {
|
|
|
- @apply font-s-14px text-#091221/70;
|
|
|
- @apply lt-sm:font-s-24px;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-btn {
|
|
|
- @apply mt-56px flex items-center justify-between gap-8px rounded-8px bg-white px-16px py-15px font-s-16px text-#0F67F8 transition-all hover:bg-#0F67F8 hover:text-white;
|
|
|
- @apply lt-sm:mt-48px lt-sm:h-96px lt-sm:rounded-8px lt-sm:px-32px lt-sm:font-s-28px lt-sm:bg-#0F67F8 lt-sm:text-white;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-card-btn-icon {
|
|
|
- @apply wh-18px;
|
|
|
- @apply lt-sm:wh-32px lt-sm:text-white;
|
|
|
- }
|
|
|
-
|
|
|
- .cases-dots {
|
|
|
- @apply lt-sm:mt-40px lt-sm:flex-center lt-sm:gap-16px;
|
|
|
- .dot {
|
|
|
- @apply lt-sm:w-60px lt-sm:h-10px bg-#E5E9F5 rounded-full transition-all cursor-pointer;
|
|
|
- &.active {
|
|
|
- @apply bg-#0F67F8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .partnership {
|
|
|
- @extend %landing-container;
|
|
|
- @media screen and (min-width: 1920px) {
|
|
|
- padding-left: 220px;
|
|
|
- padding-right: 220px;
|
|
|
- }
|
|
|
- @apply py-60px overflow-hidden;
|
|
|
- @apply lt-sm:py-60px lt-sm:px-0;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-header {
|
|
|
- @apply flex-center gap-32px mb-40px;
|
|
|
- @apply lt-sm:mb-40px lt-sm:gap-30px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-line-left {
|
|
|
- @apply h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)];
|
|
|
- @apply lt-sm:w-85px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-title {
|
|
|
- @apply text-center font-s-18px lh-21px text-#9CA0A7 whitespace-nowrap;
|
|
|
- @apply lt-sm:font-s-28px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-line-right {
|
|
|
- @apply h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)];
|
|
|
- @apply lt-sm:w-85px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-content {
|
|
|
- @apply relative flex flex-col gap-0px -mt-24px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-marquee-row1 {
|
|
|
- @apply [--duration:80s] [--gap:24px] mb--31px;
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-marquee-row2 {
|
|
|
- @apply [--duration:80s] [--delay:-20s] [--gap:24px];
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-mask-left {
|
|
|
- @apply pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)];
|
|
|
- }
|
|
|
-
|
|
|
- .partnership-mask-right {
|
|
|
- @apply pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)];
|
|
|
- }
|
|
|
-
|
|
|
- .partner-item {
|
|
|
- @apply flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px;
|
|
|
- @apply lt-sm:h-105px lt-sm:w-290px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-fade-enter-active {
|
|
|
- transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-fade-leave-active {
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-fade-enter-from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(30px);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-fade-leave-to {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(-30px);
|
|
|
- }
|
|
|
-
|
|
|
- /* 卡片级联动画 */
|
|
|
- .grid > div {
|
|
|
- animation: card-slide-up 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
|
|
- }
|
|
|
-
|
|
|
- .grid > div:nth-child(1) {
|
|
|
- animation-delay: 0.05s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(2) {
|
|
|
- animation-delay: 0.1s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(3) {
|
|
|
- animation-delay: 0.15s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(4) {
|
|
|
- animation-delay: 0.2s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(5) {
|
|
|
- animation-delay: 0.25s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(6) {
|
|
|
- animation-delay: 0.3s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(7) {
|
|
|
- animation-delay: 0.35s;
|
|
|
- }
|
|
|
- .grid > div:nth-child(8) {
|
|
|
- animation-delay: 0.4s;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes card-slide-up {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(20px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-primary {
|
|
|
- @apply bg-gradient-to-r from-[#779EFF] to-[#0A50FF];
|
|
|
-
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- //hover 背景颜色
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .history {
|
|
|
- @apply overflow-hidden relative py-60px;
|
|
|
- @apply lt-sm:pt-60px lt-sm:pb-160px lt-sm:px-32px;
|
|
|
- @extend %landing-container;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-image: url('@/assets/images/history-bg.png');
|
|
|
- }
|
|
|
-
|
|
|
- .history-container {
|
|
|
- @apply flex flex-col items-center transition-all duration-1000;
|
|
|
- }
|
|
|
-
|
|
|
- .history-title {
|
|
|
- @apply font-semibold font-s-36px text-#000000 lh-60px text-center mb-4px;
|
|
|
- @apply lt-sm:font-s-48px lt-sm:lh-60px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-subtitle {
|
|
|
- @apply font-s-16px text-#091221/70 text-center lh-30px mb-50px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:lh-40px lt-sm:mb-88px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-top {
|
|
|
- @apply w-full h-255px flex py-50px items-center;
|
|
|
- @apply lt-sm:h-176px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-year-wrapper {
|
|
|
- @apply relative pl-127px w-600px shrink-0 h-170px overflow-hidden;
|
|
|
- @apply lt-sm:hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .history-year-content {
|
|
|
- @apply absolute left-127px top-0 h-full flex items-center w-full;
|
|
|
- }
|
|
|
-
|
|
|
- .history-year-text {
|
|
|
- @apply text-170px font-bold text-#0F67F8 select-none leading-none;
|
|
|
- -webkit-text-stroke: 1px #2563eb;
|
|
|
- text-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-wrapper {
|
|
|
- @apply flex-1 h-full relative overflow-hidden pt-14px;
|
|
|
- @apply lt-sm:h-176px lt-sm:pt-0;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-content {
|
|
|
- @apply absolute left-0 top-14px w-full flex flex-col pr-114px;
|
|
|
- @apply lt-sm:pr-0 static;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-header {
|
|
|
- @apply flex justify-between items-center w-full;
|
|
|
- @apply lt-sm:h-45px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-month {
|
|
|
- @apply font-s-22px font-semibold lh-30.8px text-#091221 flex-1;
|
|
|
- @apply lt-sm:font-s-32px lt-sm:lh-30.8px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-controls {
|
|
|
- @apply flex gap-12px relative z-10;
|
|
|
- @apply lt-sm:gap-16px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-arrow {
|
|
|
- @apply wh-32px transition-all;
|
|
|
- @apply lt-sm:wh-45px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-line {
|
|
|
- @apply h-2px w-34px bg-#0F67F8 mt-11px origin-left;
|
|
|
- @apply lt-sm:h-4px lt-sm:w-68px lt-sm:mt-25px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-event-desc {
|
|
|
- @apply w-full font-s-20px lh-35px text-#091221/70 mt-26px;
|
|
|
- @apply lt-sm:font-s-24px lt-sm:mt-26px lt-sm:lh-normal;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline {
|
|
|
- @apply w-full relative pt-47px pb-60px;
|
|
|
- @apply lt-sm:py-0 lt-sm:mt-70px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-track {
|
|
|
- @apply relative h-16px w-full bg-white rounded-full px-60px;
|
|
|
- @apply lt-sm:h-16px lt-sm:px-60px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-progress {
|
|
|
- @apply absolute left-0 top-0 h-full bg-gradient-to-r from-[#60A5FA] to-[#2563EB] rounded-full transition-all duration-500 ease-out z-1;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-nodes {
|
|
|
- @apply relative h-full w-full;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-node {
|
|
|
- @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center cursor-pointer group z-2;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-dot {
|
|
|
- @apply rounded-full transition-all duration-300 relative bg-white;
|
|
|
- @apply lt-sm:wh-14px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-year {
|
|
|
- @apply absolute top-24px text-16px transition-all duration-300 whitespace-nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .history-nav {
|
|
|
- @apply flex gap-24px mt-45px;
|
|
|
- @apply lt-sm:hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .history-nav-btn {
|
|
|
- @apply wh-56px flex-center cursor-pointer;
|
|
|
- }
|
|
|
-
|
|
|
- /* 发展历程动画 - 新版流式 */
|
|
|
- .year-flow-enter-active,
|
|
|
- .year-flow-leave-active {
|
|
|
- transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .year-flow-enter-from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(100%) scale(0.9);
|
|
|
- }
|
|
|
-
|
|
|
- .year-flow-leave-to {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(-100%) scale(0.9);
|
|
|
- }
|
|
|
-
|
|
|
- /* 事件内容渐隐渐显 */
|
|
|
- .event-fade-enter-active,
|
|
|
- .event-fade-leave-active {
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .event-fade-enter-from,
|
|
|
- .event-fade-leave-to {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* 时间轴圆点呼吸效果 */
|
|
|
-
|
|
|
- .cta {
|
|
|
- @apply w-full h-276px py-60px flex-center flex-col;
|
|
|
- @apply lt-sm:h-345px lt-sm:py-60px;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-image: url('@/assets/images/bg-3.png');
|
|
|
- @screen lt-sm {
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-image: url('@/assets/images/bg-3-mobile.png');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .cta-title {
|
|
|
- @apply font-s-40px lh-56px text-center;
|
|
|
- @apply lt-sm:font-s-40px lt-sm:lh-56px;
|
|
|
- }
|
|
|
-
|
|
|
- .cta-desc {
|
|
|
- @apply font-s-18px text-#232325;
|
|
|
- @apply lt-sm:font-s-18px lt-sm:mt-24px;
|
|
|
- }
|
|
|
-
|
|
|
- .cta-btn {
|
|
|
- @apply h-52px mt-22px w-268px bg-#0F67F8 text-white rounded-8px px-16px flex items-center justify-between hover:opacity-80;
|
|
|
- @apply lt-sm:h-84px lt-sm:w-391px lt-sm:mt-24px lt-sm:rounded-8px;
|
|
|
- }
|
|
|
-
|
|
|
- .cta-btn-text {
|
|
|
- @apply font-s-16px;
|
|
|
- @apply lt-sm:font-s-26px;
|
|
|
- }
|
|
|
-
|
|
|
- .cta-btn-icon {
|
|
|
- @apply i-custom-arrow-right wh-18px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-timeline-mobile {
|
|
|
- @apply flex items-center justify-between w-full px-0;
|
|
|
- @apply lt-sm:mt-70px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-btn {
|
|
|
- @apply shrink-0 cursor-pointer transition-all absolute;
|
|
|
- @apply lt-sm:wh-64px z-10;
|
|
|
- &.i-custom-button-previous-mobile {
|
|
|
- @apply left-0;
|
|
|
- }
|
|
|
- &.i-custom-button-next-mobile {
|
|
|
- @apply right-0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-track-container {
|
|
|
- @apply relative flex-1;
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-track-line {
|
|
|
- @apply absolute left-0 right-0 bg-white rounded-full;
|
|
|
- @apply lt-sm:h-16px lt-sm:top-1/2 lt-sm:translate-y--1/2;
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-nodes {
|
|
|
- @apply hidden relative w-full h-full justify-between items-center z-1;
|
|
|
- @apply lt-sm:px-100px lt-sm:h-16px lt-sm:flex;
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-node {
|
|
|
- @apply relative flex flex-col items-center cursor-pointer;
|
|
|
- @apply lt-sm:w-60px;
|
|
|
- &.invisible {
|
|
|
- @apply transition-none;
|
|
|
- .history-mobile-dot,
|
|
|
- .history-mobile-year {
|
|
|
- @apply transition-none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-dot {
|
|
|
- @apply rounded-full bg-white transition-all z-2 border-#0F67F8 border-1;
|
|
|
- @apply lt-sm:wh-18px;
|
|
|
-
|
|
|
- &.active {
|
|
|
- @apply scale-150 outline-#CEE0FF outline-solid border-none bg-[linear-gradient(90deg,#779EFF_0%,#0A50FF_100%)];
|
|
|
- @apply lt-sm:wh-22px lt-sm:outline-8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .history-mobile-year {
|
|
|
- @apply hidden absolute text-#091221/60 pf-sc-regular transition-all whitespace-nowrap;
|
|
|
- @apply lt-sm:font-s-22px lt-sm:top-58px lt-sm:block;
|
|
|
- &.active {
|
|
|
- @apply text-#0F67F8 font-semibold scale-110;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
Lee