|
|
@@ -1,13 +1,13 @@
|
|
|
<!--
|
|
|
* @Author: LiZhiWei
|
|
|
* @LastEditors: LiZhiWei
|
|
|
- * @LastEditTime: 2026-01-15 11:03:00
|
|
|
+ * @LastEditTime: 2026-01-15 15:15:11
|
|
|
* @Description:
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="landing">
|
|
|
<section class="hero">
|
|
|
- <div class="flex items-center pb-48px px-240px pt-200px">
|
|
|
+ <div class="hero-content flex items-center pb-48px pt-200px">
|
|
|
<div class="text-left">
|
|
|
<div class="font-s-48px font-semibold text-#000000">智慧社区整体解决方案</div>
|
|
|
<p class="font-s-18px text-#091221/70">
|
|
|
@@ -48,7 +48,7 @@
|
|
|
<section
|
|
|
id="solution"
|
|
|
ref="solutionRef"
|
|
|
- class="h-744px px-240px pt-120px transition-all duration-1000 ease-out"
|
|
|
+ class="solution h-744px pt-120px transition-all duration-1000 ease-out"
|
|
|
:class="[isSolutionVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
>
|
|
|
<div class="text-center mb-45px">
|
|
|
@@ -194,7 +194,7 @@
|
|
|
<section
|
|
|
id="cases"
|
|
|
ref="casesRef"
|
|
|
- class="px-240px pt-120px pb-46px transition-all duration-1000 ease-out"
|
|
|
+ class="cases pt-120px pb-46px transition-all duration-1000 ease-out"
|
|
|
:class="[isCasesVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
|
|
|
>
|
|
|
<div class="text-center mb-60px">
|
|
|
@@ -246,7 +246,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
- <section id="partnership" class="px-200px py-60px overflow-hidden">
|
|
|
+ <section id="partnership" class="partnership py-60px overflow-hidden">
|
|
|
<div class="flex-center gap-32px mb-40px">
|
|
|
<div class="h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)]"></div>
|
|
|
<div class="text-center font-s-18px lh-21px text-#9CA0A7 pf-sc-regular whitespace-nowrap">
|
|
|
@@ -295,7 +295,7 @@
|
|
|
>
|
|
|
发展历程
|
|
|
</div>
|
|
|
- <div class="font-s-16px text-#091221/70 pf-sc-regular text-center lh-30px mb-80px">
|
|
|
+ <div class="font-s-16px text-#091221/70 pf-sc-regular text-center lh-30px mb-50px">
|
|
|
从探索到引领，绘家科技每一步都坚实有力
|
|
|
</div>
|
|
|
|
|
|
@@ -390,7 +390,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部大切换 -->
|
|
|
- <div class="flex gap-24px mt-40px">
|
|
|
+ <div class="flex gap-24px mt-45px">
|
|
|
<i
|
|
|
class="wh-56px i-custom-button-previous hover:i-custom-button-previous-active flex-center cursor-pointer"
|
|
|
:class="{
|
|
|
@@ -558,9 +558,14 @@
|
|
|
|
|
|
.hero {
|
|
|
@apply h-680px relative overflow-hidden;
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
background-image: url('@/assets/images/banner.png');
|
|
|
|
|
|
+ .hero-content {
|
|
|
+ @extend %landing-container;
|
|
|
+ }
|
|
|
+
|
|
|
.metric {
|
|
|
@apply flex items-start flex-col;
|
|
|
|
|
|
@@ -574,12 +579,25 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .solution {
|
|
|
+ @extend %landing-container;
|
|
|
+ }
|
|
|
+
|
|
|
.ability {
|
|
|
- @apply px-240px py-120px;
|
|
|
+ @apply py-120px;
|
|
|
+ @extend %landing-container;
|
|
|
background-size: 100% 100%;
|
|
|
background-image: url('@/assets/images/bg-ability.png');
|
|
|
}
|
|
|
|
|
|
+ .cases {
|
|
|
+ @extend %landing-container;
|
|
|
+ }
|
|
|
+
|
|
|
+ .partnership {
|
|
|
+ @extend %landing-container;
|
|
|
+ }
|
|
|
+
|
|
|
.tab-fade-enter-active {
|
|
|
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
}
|
|
|
@@ -632,14 +650,17 @@
|
|
|
}
|
|
|
|
|
|
.history {
|
|
|
- @apply overflow-hidden relative py-60px px-260px;
|
|
|
- background-size: 100% 100%;
|
|
|
+ @apply overflow-hidden relative py-60px;
|
|
|
+ @extend %landing-container;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
background-image: url('@/assets/images/history-bg.png');
|
|
|
}
|
|
|
|
|
|
.cta {
|
|
|
@apply w-full h-276px;
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
background-image: url('@/assets/images/bg-3.png');
|
|
|
}
|
|
|
</style>
|
Lee