|
|
@@ -1,521 +0,0 @@
|
|
|
-<template>
|
|
|
- <section id="history" ref="timelineRef" class="history">
|
|
|
- <div
|
|
|
- class="history-container"
|
|
|
- :class="[isTimelineVisible ? 'translate-y-0 opacity-100' : 'translate-y-50px 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>
|
|
|
-
|
|
|
- <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>
|
|
|
- <TransitionGroup
|
|
|
- :name="'timeline-' + slideDirection"
|
|
|
- tag="div"
|
|
|
- class="history-mobile-nodes"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="yearIndex in mobileTimelineIndices"
|
|
|
- :key="yearIndex"
|
|
|
- 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>
|
|
|
- </TransitionGroup>
|
|
|
- </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>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
- import { historyYears } from '@/constants/common'
|
|
|
-
|
|
|
- const timelineRef = ref<HTMLElement | null>(null)
|
|
|
- const { isVisible: isTimelineVisible } = useScrollReveal(timelineRef)
|
|
|
-
|
|
|
- const currentYearIndex = ref(historyYears.length - 1)
|
|
|
- const currentEventIndex = ref(0)
|
|
|
- const slideDirection = ref<'next' | 'prev'>('next')
|
|
|
-
|
|
|
- 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 []
|
|
|
- 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) {
|
|
|
- slideDirection.value = 'next'
|
|
|
- currentYearIndex.value++
|
|
|
- currentEventIndex.value = 0
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const prevYear = () => {
|
|
|
- if (currentYearIndex.value > 0) {
|
|
|
- slideDirection.value = 'prev'
|
|
|
- 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) => {
|
|
|
- slideDirection.value = index > currentYearIndex.value ? 'next' : 'prev'
|
|
|
- currentYearIndex.value = index
|
|
|
- currentEventIndex.value = 0
|
|
|
- }
|
|
|
-
|
|
|
- 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]',
|
|
|
- ]
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .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');
|
|
|
- @screen lt-sm {
|
|
|
- background-image: url('@/assets/images/history-bg-mobile.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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* Timeline Animation */
|
|
|
- .timeline-next-move,
|
|
|
- .timeline-prev-move {
|
|
|
- transition: all 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-next-enter-active,
|
|
|
- .timeline-next-leave-active,
|
|
|
- .timeline-prev-enter-active,
|
|
|
- .timeline-prev-leave-active {
|
|
|
- transition: all 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-next-leave-active {
|
|
|
- position: absolute;
|
|
|
- left: 100px;
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-prev-leave-active {
|
|
|
- position: absolute;
|
|
|
- right: 100px;
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-next-enter-from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(100%);
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-next-leave-to {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(-100%);
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-prev-enter-from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(-100%);
|
|
|
- }
|
|
|
-
|
|
|
- .timeline-prev-leave-to {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(100%);
|
|
|
- }
|
|
|
-</style>
|
Lee