diff --git a/src/assets/image/home/375/bg-1.png b/src/assets/image/home/375/bg-1.png
index 8f7782d..e1bbf66 100644
Binary files a/src/assets/image/home/375/bg-1.png and b/src/assets/image/home/375/bg-1.png differ
diff --git a/src/assets/image/home/375/tw/carousel-1.png b/src/assets/image/home/375/tw/carousel-1.png
new file mode 100644
index 0000000..e35cf88
Binary files /dev/null and b/src/assets/image/home/375/tw/carousel-1.png differ
diff --git a/src/assets/image/home/375/tw/组 1713@2x (1).png b/src/assets/image/home/375/tw/carousel-2.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1713@2x (1).png
rename to src/assets/image/home/375/tw/carousel-2.png
diff --git a/src/assets/image/home/375/tw/组 1717@2x.png b/src/assets/image/home/375/tw/carousel-3.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1717@2x.png
rename to src/assets/image/home/375/tw/carousel-3.png
diff --git a/src/assets/image/home/375/tw/组 1720@2x (1).png b/src/assets/image/home/375/tw/carousel-4.png
similarity index 100%
rename from src/assets/image/home/375/tw/组 1720@2x (1).png
rename to src/assets/image/home/375/tw/carousel-4.png
diff --git a/src/assets/image/home/768/bg-1.png b/src/assets/image/home/768/bg-1.png
index 9a1cd5a..07a07ba 100644
Binary files a/src/assets/image/home/768/bg-1.png and b/src/assets/image/home/768/bg-1.png differ
diff --git a/src/locales/zh.js b/src/locales/zh.js
index e57a3bc..9792aab 100644
--- a/src/locales/zh.js
+++ b/src/locales/zh.js
@@ -47,6 +47,8 @@ export default {
section4: {
label: '业务介绍',
title: '多元业务协同，推动文艺影响力腾飞',
+ title1: '多元业务协同',
+ title2: '推动文艺影响力腾飞',
desc: 'FiEE 专注为文艺创作者提供全球化推广与专业运营服务。通过精准定位、多平台联动，打破地域限制，让作品登上国际舞台。依托强大资源网络对接商业机遇，运用 AI与大数据精准营销，高效触达受众，助力创作者实现艺术与商业价值双突破。',
cards1: {
title: '全球花卉产业，适合国际艺术交流中心',
diff --git a/src/views/businessintroduction/size375/index.vue b/src/views/businessintroduction/size375/index.vue
index 70cd801..04e3a74 100644
--- a/src/views/businessintroduction/size375/index.vue
+++ b/src/views/businessintroduction/size375/index.vue
@@ -543,18 +543,22 @@
凭借前沿的传播策略，精准狙击全球受众心智。深度整合顶级媒体资源，让曝光量呈指数级突破，全方位塑造全球品牌影响力，引领文艺潮流走向世界舞台中央
</div>
</div>
- <div class="mt-[46px] mb-[246px] px-[108px]">
- <div
- v-for="(item, idx) in state.marqueeArr"
- :key="idx"
- class="w-full flex flex-wrap justify-center carousel-item"
- >
- <img class="carousel-image" :src="item.imgUrl" />
- <div class="carousel-title w-full">
- <div>{{ item.title }}</div>
- </div>
- <div class="carousel-subtitle">
- <div>{{ item.subTitle }}</div>
+ <div
+ class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
+ >
+ <div ref="carouselTrack" class="carousel-track">
+ <div
+ v-for="(item, idx) in getVisibleItems()"
+ :key="idx"
+ class="carousel-item"
+ >
+ <img class="carousel-image" :src="item.imgUrl" />
+ <div class="carousel-title">
+ <div>{{ item.title }}</div>
+ </div>
+ <div class="carousel-subtitle">
+ <div>{{ item.subTitle }}</div>
+ </div>
</div>
</div>
</div>
@@ -566,7 +570,7 @@
className="flex flex-wrap justify-center"
>
<img
- class="w-[891px] h-[87px] mt-[61px] mb-[56px]"
+ class="w-[580px] h-[55px] my-[85px]"
src="@/assets/image/image-footer.png"
alt="logo"
/>
@@ -625,8 +629,15 @@ const state = reactive({
],
});
+const carouselTrack = ref(null);
let carouselAnimation = null; // 存储 GSAP 动画实例
+const getVisibleItems = () => {
+ const items = state.marqueeArr;
+ // 复制两组用于无缝滚动
+ return [...items, ...items];
+};
+
// 监听窗口大小变化
onMounted(() => {
ctx = gsap.context(() => {
@@ -657,6 +668,32 @@ onMounted(() => {
});
}
});
+ console.log(moveRefs.value);
+ // 初始化轮播动画
+ nextTick(() => {
+ if (carouselTrack.value) {
+ const firstItem = carouselTrack.value.querySelector(".carousel-item");
+ if (!firstItem) return;
+
+ const itemWidth = firstItem.offsetWidth;
+ const itemMargin = parseInt(
+ window.getComputedStyle(firstItem).marginRight
+ );
+ const slideWidth = itemWidth + itemMargin;
+ const totalWidth = slideWidth * state.marqueeArr.length;
+
+ // 创建无限滚动动画
+ carouselAnimation = gsap.to(carouselTrack.value, {
+ x: -totalWidth,
+ duration: 20,
+ ease: "none",
+ repeat: -1,
+ onRepeat: () => {
+ gsap.set(carouselTrack.value, { x: 0 });
+ },
+ });
+ }
+ });
});
});
@@ -773,6 +810,11 @@ const goToSection = (i) => {
bottom: -80px;
right: 0;
}
+.carousel-container {
+ width: 96%;
+ overflow: hidden;
+ position: relative;
+}
.arrow-btn {
cursor: pointer;
@@ -790,14 +832,18 @@ const goToSection = (i) => {
}
.carousel-item {
- margin-top: 154px;
- padding: 46px 36px 118px 51px;
- border-radius: 61px;
- box-shadow: 0 15px 75px 5px rgba(0, 0, 0, 0.16);
+ width: 785px;
+ margin-right: 73px;
+ flex: 0 0 auto;
+ display: block; // 改为 block 布局
+ padding: 23px 20px 40px;
+ border-radius: 30px;
+ box-shadow: 0 8px 35px 3px rgba(0, 0, 0, 0.16);
}
.carousel-image {
- width: 1623px;
+ width: 748px;
+ height: 563px;
object-fit: cover;
display: block;
}
@@ -808,16 +854,15 @@ const goToSection = (i) => {
}
.carousel-title {
- text-align: left;
- font-size: 92px;
+ font-size: 50px;
font-weight: 500;
- margin-top: 87px;
+ margin-top: 48px;
}
.carousel-subtitle {
- margin-top: 51px;
+ margin-top: 23px;
color: #455363;
- font-size: 72px;
+ font-size: 40px;
}
// 添加一个通用的溢出控制类
diff --git a/src/views/home/size375/index.vue b/src/views/home/size375/index.vue
index fba51a9..2b18fba 100644
--- a/src/views/home/size375/index.vue
+++ b/src/views/home/size375/index.vue
@@ -71,7 +71,7 @@
</div>
<div class="content">
<div
- class="text-[#10253E] text-[123px] leading-[164px] font-semibold"
+ class="text-[#10253E] text-[123px] leading-[164px] font-semibold mt-[480px]"
>
{{ t("home.section2.title1") }}
</div>
@@ -90,33 +90,109 @@
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="parallax-bg" style="margin-top: 70px"></div>
- <div class="content3 mt-[348px]">
+ <div class="content3 mt-[451px]">
<div class="text-[#8B59F7] text-[72px]">
{{ t("home.section3.label") }}
</div>
- <div class="text-[#10253E] text-[113pxpx] mt-[43px]">FiEE</div>
- <div class="text-[#455363] text-[72px] mt-[78px] pr-[139px]">
+ <div class="text-[#10253E] text-[113px] mt-[87px]">FiEE</div>
+ <div class="text-[#455363] text-[72px] mt-[159px] pr-[139px]">
{{ t("home.section3.desc") }}
</div>
- </div>
- <div
- class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
- >
- <div ref="carouselTrack" class="carousel-track">
- <div
- v-for="(item, idx) in getVisibleItems()"
- :key="idx"
- class="carousel-item"
- >
- <img class="carousel-image" :src="item.imgUrl" />
- <div class="carousel-title">
- <div>{{ item.title }}</div>
+
+ <n-marquee auto-fill>
+ <div style="display: flex" class="mt-[317px]">
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[973px] h-[973px]"
+ src="@/assets/image/jj1.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.data.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+ >
+ {{ t("home.section3.features.data.desc") }}
+ </div>
</div>
- <div class="carousel-subtitle">
- <div>{{ item.subTitle }}</div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[973px] h-[973px]"
+ src="@/assets/image/jj2.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.ai.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+ >
+ {{ t("home.section3.features.ai.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[973px] h-[973px]"
+ src="@/assets/image/jj3.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.cloud.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+ >
+ {{ t("home.section3.features.cloud.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[973px] h-[973px]"
+ src="@/assets/image/jj4.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.cooperation.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+ >
+ {{ t("home.section3.features.cooperation.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[973px] h-[973px]"
+ src="@/assets/image/jj5.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[82px] mt-[154px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.promotion.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[72px] mt-[72px] max-w-[1024px] break-words"
+ >
+ {{ t("home.section3.features.promotion.desc") }}
+ </div>
</div>
</div>
- </div>
+ </n-marquee>
</div>
</section>
@@ -127,69 +203,77 @@
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
<div class="parallax-bg"></div>
- <div class="content4 mt-[408px]">
- <div class="text-[#8B59F7] text-[72px]">
+ <div class="content4 mt-[451px]">
+ <div class="text-[#8B59F7] text-[113px]">
{{ t("home.section4.label") }}
</div>
- <div class="text-[#10253E] text-[113pxpx] mt-[43px]">
- <div>多元业务协同</div>
- <div>推动文艺影响力腾飞</div>
+ <div class="text-[#10253E] text-[113px] mt-[87px] font-semibold">
+ <div>
+ {{ t("home.section4.title1") }}
+ </div>
+ <div>
+ {{ t("home.section4.title2") }}
+ </div>
</div>
<div
- class="text-[#455363] text-[72px] mt-[78px] leading-[60px] pr-[139px]"
+ class="text-[#455363] text-[72px] mt-[159px] leading-[102px] pr-[139px]"
>
{{ t("home.section4.desc") }}
</div>
- <div class="container">
- <div class="mt-[493px]">
- <div class="card">
- <img
- src="@/assets/image/home/375/imageShow-1.png"
- alt="Image 1"
- />
- <div class="js-detail font-bold">
- {{ t("home.section4.cards1.title") }}
- <div class="text-[#455363] text-[72px] font-normal">
- {{ t("home.section4.cards1.desc") }}
- </div>
- </div>
- </div>
- <div class="card">
- <img
- src="@/assets/image/home/375/imageShow-3.png"
- alt="Image 3"
- />
- <div class="js-detail font-bold">
- {{ t("home.section4.cards3.title") }}
- <div class="text-[#455363] text-[72px] font-normal">
- {{ t("home.section4.cards3.desc") }}
- </div>
+ <div class="container mt-[166px]">
+ <div class="card">
+ <img
+ src="@/assets/image/home/375/imageShow-2.png"
+ alt="Image 2"
+ />
+ <div class="js-detail font-bold">
+ {{ t("home.section4.cards2.title") }}
+ <div
+ class="text-[#455363] text-[72px] font-normal leading-[102px]"
+ >
+ {{ t("home.section4.cards2.desc") }}
</div>
</div>
</div>
- <div class="right mt-[215px]">
- <div class="card">
- <img
- src="@/assets/image/home/375/imageShow-2.png"
- alt="Image 2"
- />
- <div class="js-detail font-bold">
- {{ t("home.section4.cards2.title") }}
- <div class="text-[#455363] text-[72px] font-normal">
- {{ t("home.section4.cards2.desc") }}
- </div>
+ <div class="card">
+ <img
+ src="@/assets/image/home/375/imageShow-1.png"
+ alt="Image 1"
+ />
+ <div class="js-detail font-bold">
+ {{ t("home.section4.cards1.title") }}
+ <div
+ class="text-[#455363] text-[72px] font-normal leading-[102px]"
+ >
+ {{ t("home.section4.cards1.desc") }}
</div>
</div>
- <div class="card">
- <img
- src="@/assets/image/home/375/imageShow-4.png"
- alt="Image 4"
- />
- <div class="js-detail font-bold">
- {{ t("home.section4.cards4.title") }}
- <div class="text-[#455363] text-[72px] font-normal">
- {{ t("home.section4.cards4.desc") }}
- </div>
+ </div>
+ <div class="card">
+ <img
+ src="@/assets/image/home/375/imageShow-4.png"
+ alt="Image 4"
+ />
+ <div class="js-detail font-bold">
+ {{ t("home.section4.cards4.title") }}
+ <div
+ class="text-[#455363] text-[72px] font-normal leading-[102px]"
+ >
+ {{ t("home.section4.cards4.desc") }}
+ </div>
+ </div>
+ </div>
+ <div class="card mb-[217px]">
+ <img
+ src="@/assets/image/home/375/imageShow-3.png"
+ alt="Image 3"
+ />
+ <div class="js-detail font-bold">
+ {{ t("home.section4.cards3.title") }}
+ <div
+ class="text-[#455363] text-[72px] font-normal leading-[102px]"
+ >
+ {{ t("home.section4.cards3.desc") }}
</div>
</div>
</div>
@@ -210,8 +294,8 @@
</template>
<script setup>
-import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
@@ -232,33 +316,6 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
const scrollDownVisible = ref(true);
const { t } = useI18n();
-// 导入图片
-import imageshow3 from "@/assets/image/businessintroduction/375/imageshow-3.png";
-import imageshow4 from "@/assets/image/businessintroduction/375/imageshow-4.png";
-import imageshow5 from "@/assets/image/businessintroduction/375/imageshow-5.png";
-
-const state = reactive({
- marqueeArr: [
- {
- title: "2025年",
- subTitle:
- "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
- imgUrl: imageshow3, // 使用导入的图片
- },
- {
- title: "2026年",
- subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
- imgUrl: imageshow4, // 使用导入的图片
- },
- {
- title: "2027年",
- subTitle:
- "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
- imgUrl: imageshow5, // 使用导入的图片
- },
- ],
-});
-
const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
@@ -271,13 +328,13 @@ const goToSection = (i) => {
// 防止频繁触发
const now = Date.now();
- if (now - lastScrollTime < 500) return; // 500ms 内不重复触发
+ if (now - lastScrollTime < 800) return; // 增加间隔时间到800ms
lastScrollTime = now;
isScrolling = true;
scrollTween = gsap.to(window, {
scrollTo: { y: i * window.innerHeight, autoKill: false },
- duration: 0.8, // 增加动画时间使其更平滑
+ duration: 1, // 增加动画时间到1秒
ease: "power2.inOut",
onComplete: () => {
scrollTween = null;
@@ -287,7 +344,7 @@ const goToSection = (i) => {
});
};
-// 修改handleWheel函数
+// 修改 handleWheel 函数
const handleWheel = (e) => {
if (isScrolling) {
e.preventDefault();
@@ -299,73 +356,44 @@ const handleWheel = (e) => {
const lastPanel = document.querySelector(".panel:last-child");
const isInLastPanel = currentSection === 3;
+ // 添加防抖动
+ if (Math.abs(delta) <= scrollThreshold) {
+ return;
+ }
+
// 在最后一个panel时允许自然滚动
if (isInLastPanel && lastPanel.scrollHeight > window.innerHeight) {
- // 检查是否在panel顶部且向上滚动，或在底部且向下滚动
if (
(lastPanel.scrollTop === 0 && delta < 0) ||
(lastPanel.scrollTop + lastPanel.clientHeight >= lastPanel.scrollHeight &&
delta > 0)
) {
- // 只有在这些边界条件下才触发页面切换
- if (Math.abs(delta) > scrollThreshold) {
- if (delta > 0 && currentSection < 3) {
- goToSection(currentSection + 1);
- } else if (delta < 0 && currentSection > 0) {
- goToSection(currentSection - 1);
- }
+ if (delta > 0 && currentSection < 3) {
+ goToSection(currentSection + 1);
+ } else if (delta < 0 && currentSection > 0) {
+ goToSection(currentSection - 1);
}
}
- return; // 其他情况允许自然滚动
+ return;
}
- // 非最后一个panel的处理保持不变
- if (Math.abs(delta) > scrollThreshold) {
- if (delta > 0 && currentSection < 3) {
- goToSection(currentSection + 1);
- } else if (delta < 0 && currentSection > 0) {
- goToSection(currentSection - 1);
- }
+ // 非最后一个panel的处理
+ if (delta > 0 && currentSection < 3) {
+ goToSection(currentSection + 1);
+ } else if (delta < 0 && currentSection > 0) {
+ goToSection(currentSection - 1);
}
};
// 监听滚轮事件
onMounted(() => {
window.addEventListener("wheel", handleWheel, { passive: false });
- // 初始化轮播动画
- nextTick(() => {
- if (carouselTrack.value) {
- const firstItem = carouselTrack.value.querySelector(".carousel-item");
- if (!firstItem) return;
-
- const itemWidth = firstItem.offsetWidth;
- const itemMargin = parseInt(
- window.getComputedStyle(firstItem).marginRight
- );
- const slideWidth = itemWidth + itemMargin;
- const totalWidth = slideWidth * state.marqueeArr.length;
-
- // 创建无限滚动动画
- carouselAnimation = gsap.to(carouselTrack.value, {
- x: -totalWidth,
- duration: 20,
- ease: "none",
- repeat: -1,
- onRepeat: () => {
- gsap.set(carouselTrack.value, { x: 0 });
- },
- });
- }
- });
});
onUnmounted(() => {
window.removeEventListener("wheel", handleWheel);
ctx?.revert();
ScrollTrigger.killAll();
- if (carouselAnimation) {
- carouselAnimation.kill();
- }
});
watch(
@@ -392,19 +420,54 @@ watch(
// 移除之前的渐入动画代码
panels.forEach((panel, i) => {
- // 背景视差
const bg = panel.querySelector(".parallax-bg");
- if (bg) {
- gsap.to(bg, {
- yPercent: 30,
- ease: "none",
- scrollTrigger: {
- trigger: panel,
- start: "top bottom",
- end: "bottom top",
- scrub: true,
- },
- });
+
+ // 区分处理最后一个面板和其他面板
+ if (i === 3) {
+ // 第四个面板
+ const content = panel.querySelector(".content4");
+ if (bg && content) {
+ const contentHeight = content.offsetHeight;
+ const viewportHeight = window.innerHeight;
+ const parallaxRange = Math.max(
+ 30,
+ (contentHeight / viewportHeight) * 15
+ );
+
+ // 只为第四个面板设置特殊的背景高度
+ gsap.set(bg, {
+ height: `${Math.max(
+ 120,
+ (contentHeight / viewportHeight) * 100
+ )}%`,
+ });
+
+ gsap.to(bg, {
+ yPercent: parallaxRange,
+ ease: "none",
+ scrollTrigger: {
+ trigger: panel,
+ start: "top bottom",
+ end: "bottom top",
+ scrub: true,
+ invalidateOnRefresh: true,
+ },
+ });
+ }
+ } else {
+ // 其他面板保持原有的视差效果
+ if (bg) {
+ gsap.to(bg, {
+ yPercent: 30,
+ ease: "none",
+ scrollTrigger: {
+ trigger: panel,
+ start: "top bottom",
+ end: "bottom top",
+ scrub: true,
+ },
+ });
+ }
}
// 内容视差
@@ -483,6 +546,7 @@ watch(
".content3 > div:nth-child(1)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(3)",
+ ".content3 > .n-marquee",
],
{
opacity: 0,
@@ -516,6 +580,22 @@ watch(
y: 0,
},
"-=0.6"
+ )
+ .to(
+ ".content3 > .n-marquee",
+ {
+ opacity: 1,
+ y: 0,
+ onStart: () => {
+ const marquee = document.querySelector(
+ ".content3 > .n-marquee"
+ );
+ if (marquee) {
+ marquee.style.visibility = "visible";
+ }
+ },
+ },
+ "-=0.6"
);
},
onLeave: () => {
@@ -528,6 +608,7 @@ watch(
tl.to(
[
+ ".content3 > .n-marquee",
".content3 > div:nth-child(3)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(1)",
@@ -550,6 +631,7 @@ watch(
".content3 > div:nth-child(1)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(3)",
+ ".content3 > .n-marquee",
],
{
opacity: 0,
@@ -583,6 +665,14 @@ watch(
y: 0,
},
"-=0.6"
+ )
+ .to(
+ ".content3 > .n-marquee",
+ {
+ opacity: 1,
+ y: 0,
+ },
+ "-=0.6"
);
},
onLeaveBack: () => {
@@ -595,6 +685,7 @@ watch(
tl.to(
[
+ ".content3 > .n-marquee",
".content3 > div:nth-child(3)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(1)",
@@ -614,9 +705,7 @@ watch(
start: "top 80%",
end: "bottom center",
onEnter: () => {
- // 进入第四幕时隐藏
scrollDownVisible.value = false;
- // 初始状态设置
gsap.set(".content4", {
opacity: 1,
y: 0,
@@ -637,13 +726,6 @@ watch(
}
);
- // 单独设置卡片的初始状态
- gsap.set(".content4 .container .card", {
- opacity: 0,
- y: 50,
- immediateRender: true,
- });
-
const tl = gsap.timeline({
defaults: {
duration: 0.6,
@@ -671,47 +753,9 @@ watch(
y: 0,
},
"-=0.4"
- )
- // 卡片动画
- .to(
- ".content4 .container > div:first-child .card:first-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.2"
- )
- .to(
- ".content4 .container > .right .card:first-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
- )
- .to(
- ".content4 .container > div:first-child .card:last-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
- )
- .to(
- ".content4 .container > .right .card:last-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
);
},
onLeave: () => {
- // 离开第四幕时显示
scrollDownVisible.value = true;
gsap
.timeline({
@@ -720,14 +764,6 @@ watch(
ease: "power2.in",
},
})
- .to(".content4 .container .card", {
- opacity: 0,
- y: -30,
- stagger: {
- each: 0.1,
- from: "end",
- },
- })
.to(
[
".content4 > div:nth-child(3)",
@@ -743,7 +779,6 @@ watch(
);
},
onEnterBack: () => {
- // 返回第四幕时隐藏
scrollDownVisible.value = false;
gsap.set(".content4", {
opacity: 1,
@@ -764,12 +799,6 @@ watch(
}
);
- gsap.set(".content4 .container .card", {
- opacity: 0,
- y: -50,
- immediateRender: true,
- });
-
const tl = gsap.timeline({
defaults: {
duration: 0.6,
@@ -796,46 +825,9 @@ watch(
y: 0,
},
"-=0.4"
- )
- .to(
- ".content4 .container > div:first-child .card:first-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.2"
- )
- .to(
- ".content4 .container > .right .card:first-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
- )
- .to(
- ".content4 .container > div:first-child .card:last-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
- )
- .to(
- ".content4 .container > .right .card:last-child",
- {
- opacity: 1,
- y: 0,
- duration: 0.8,
- },
- "-=0.6"
);
},
onLeaveBack: () => {
- // 向上离开第四幕时显示
scrollDownVisible.value = true;
gsap
.timeline({
@@ -844,14 +836,7 @@ watch(
ease: "power2.in",
},
})
- .to(".content4 .container .card", {
- opacity: 0,
- y: 30,
- stagger: {
- each: 0.1,
- from: "end",
- },
- })
+
.to(
[
".content4 > div:nth-child(3)",
@@ -872,13 +857,6 @@ watch(
},
{ immediate: true }
);
-const carouselTrack = ref(null);
-let carouselAnimation = null; // 存储 GSAP 动画实例
-const getVisibleItems = () => {
- const items = state.marqueeArr;
- // 复制两组用于无缝滚动
- return [...items, ...items];
-};
</script>
<style scoped lang="scss">
@@ -938,7 +916,7 @@ const getVisibleItems = () => {
}
.scroll-down {
position: fixed;
- bottom: 50px;
+ bottom: 113px;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
@@ -1058,13 +1036,18 @@ const getVisibleItems = () => {
&:last-child {
position: relative;
overflow-y: auto;
- height: auto;
- min-height: 100vh;
+ height: 100vh;
// 隐藏滚动条但保持功能
&::-webkit-scrollbar {
display: none; // Chrome, Safari, Opera
}
+
+ // 调整最后一个面板的背景
+ .parallax-bg {
+ position: fixed; // 改为固定定位
+ height: 120%;
+ }
}
&.first-panel {
@@ -1089,7 +1072,7 @@ const getVisibleItems = () => {
top: -10%;
left: 0;
width: 100%;
- height: 120%;
+ height: 120%; // 保持原有高度
z-index: 1;
}
@@ -1116,13 +1099,26 @@ const getVisibleItems = () => {
transform: translateY(50px);
will-change: opacity, transform;
}
+
+ > .n-marquee {
+ opacity: 0;
+ transform: translateY(50px);
+ will-change: opacity, transform;
+ visibility: hidden; // 初始隐藏跑马灯
+ }
+}
+// 确保跑马灯内容可见
+:deep(.n-marquee) {
+ .n-marquee-content {
+ visibility: visible !important;
+ }
}
.content4 {
position: relative;
z-index: 5;
padding: 0 184px;
- height: 100%;
+ height: auto;
display: flex;
flex-direction: column;
}
@@ -1156,18 +1152,11 @@ const getVisibleItems = () => {
}
}
-.container {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- /* Two columns */
- gap: 55px;
-}
-
.card {
- margin-top: 75px;
+ margin-top: 154px;
box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.16);
- padding: 22px 18px 57px 20px;
- border-radius: 30px;
+ padding: 46px 36px 118px 51px;
+ border-radius: 60px;
background-color: #ffffff;
display: flex;
flex-direction: column;
@@ -1182,11 +1171,11 @@ const getVisibleItems = () => {
.js-detail {
text-align: left;
- margin-top: 37px;
- font-size: 50px;
+ margin-top: 87px;
+ font-size: 92px;
color: #10253e;
width: 100%;
- padding: 0 20px 0 30px;
+ padding: 0 82px 0 82px;
}
.carousel-container {
@@ -1239,8 +1228,17 @@ const getVisibleItems = () => {
}
.carousel-subtitle {
- margin-top: 23px;
- color: #455363;
- font-size: 40px;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.5;
+ max-height: calc(1.5em * 1);
+}
+
+// 只为第四个面板的背景添加特殊样式
+.panel:last-child .parallax-bg {
+ height: 100%; // 第四个面板的背景初始高度
}
</style>
diff --git a/src/views/home/size768/index.vue b/src/views/home/size768/index.vue
index cc2acaa..d763371 100644
--- a/src/views/home/size768/index.vue
+++ b/src/views/home/size768/index.vue
@@ -94,25 +94,100 @@
<div class="text-[#455363] text-[40px] mt-[78px] pr-[100px]">
{{ t("home.section3.desc") }}
</div>
- </div>
- <div
- class="mt-[140px] mb-[175px] carousel-container px-[80px] py-[40px]"
- >
- <div ref="carouselTrack" class="carousel-track">
- <div
- v-for="(item, idx) in getVisibleItems()"
- :key="idx"
- class="carousel-item"
- >
- <img class="carousel-image" :src="item.imgUrl" />
- <div class="carousel-title">
- <div>{{ item.title }}</div>
+ <n-marquee auto-fill>
+ <div style="display: flex" class="mt-[190px]">
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[475px] h-[475px]"
+ src="@/assets/image/jj1.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.data.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+ >
+ {{ t("home.section3.features.data.desc") }}
+ </div>
</div>
- <div class="carousel-subtitle">
- <div>{{ item.subTitle }}</div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[475px] h-[475px]"
+ src="@/assets/image/jj2.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.ai.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+ >
+ {{ t("home.section3.features.ai.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[475px] h-[475px]"
+ src="@/assets/image/jj3.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.cloud.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+ >
+ {{ t("home.section3.features.cloud.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[475px] h-[475px]"
+ src="@/assets/image/jj4.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.cooperation.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+ >
+ {{ t("home.section3.features.cooperation.desc") }}
+ </div>
+ </div>
+ <div class="text-[#455363] text-[40px] mr-[83px]">
+ <img
+ class="w-[475px] h-[475px]"
+ src="@/assets/image/jj5.png"
+ alt="logo"
+ />
+
+ <div
+ class="text-[#10253E] text-[50px] mt-[70px] break-words carousel-subtitle"
+ >
+ {{ t("home.section3.features.promotion.title") }}
+ </div>
+ <div
+ class="text-[#455363] text-[40px] mt-[35px] max-w-[500px] break-words"
+ >
+ {{ t("home.section3.features.promotion.desc") }}
+ </div>
</div>
</div>
- </div>
+ </n-marquee>
</div>
</section>
@@ -122,14 +197,18 @@
<div class="divider3" style=""></div>
<div class="divider4" style=""></div>
<n-divider class="divider5" vertical />
- <div class="parallax-bg"></div>
+ <div class="parallax-bg" style="height: 100% !important"></div>
<div class="content4 mt-[408px]">
<div class="text-[#8B59F7] text-[40px]">
{{ t("home.section4.label") }}
</div>
<div class="text-[#10253E] text-[85px] mt-[43px]">
- <div>多元业务协同</div>
- <div>推动文艺影响力腾飞</div>
+ <div>
+ {{ t("home.section4.title1") }}
+ </div>
+ <div>
+ {{ t("home.section4.title2") }}
+ </div>
</div>
<div
class="text-[#455363] text-[40px] mt-[78px] leading-[60px] pr-[100px]"
@@ -204,10 +283,9 @@
</footer>
</div>
</template>
-
<script setup>
-import { NCarousel, NDivider, NImage } from "naive-ui";
-import { onUnmounted, ref, watch, onMounted, reactive, nextTick } from "vue";
+import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
+import { onUnmounted, ref, watch, onMounted } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useHome } from "@/store/home/index.js";
@@ -228,33 +306,6 @@ let lastScrollTime = 0; // 添加最后滚动时间记录
const scrollDownVisible = ref(true);
const { t } = useI18n();
-// 导入图片
-import imageshow3 from "@/assets/image/businessintroduction/768/imageshow-3.png";
-import imageshow4 from "@/assets/image/businessintroduction/768/imageshow-4.png";
-import imageshow5 from "@/assets/image/businessintroduction/768/imageshow-5.png";
-
-const state = reactive({
- marqueeArr: [
- {
- title: "2025年",
- subTitle:
- "自媒体平台曝光量突破 5 亿+，通过多平台联动、创意内容营销，提升品牌与创作者曝光度。",
- imgUrl: imageshow3, // 使用导入的图片
- },
- {
- title: "2026年",
- subTitle: "曝光量达 10 亿 +，深化品牌传播，吸引更多潜在用户与合作伙伴。",
- imgUrl: imageshow4, // 使用导入的图片
- },
- {
- title: "2027年",
- subTitle:
- "实现 50 亿 + 跨次元突破，打破行业与文化界限，全方位提升品牌国际影响力，推动文化艺术与科技深度交融 ，塑造行业发展新潮流。",
- imgUrl: imageshow5, // 使用导入的图片
- },
- ],
-});
-
const handleTabClick = (tab) => {
currentTab.value = tab;
router.push("/" + tab);
@@ -328,40 +379,12 @@ const handleWheel = (e) => {
// 监听滚轮事件
onMounted(() => {
window.addEventListener("wheel", handleWheel, { passive: false });
- // 初始化轮播动画
- nextTick(() => {
- if (carouselTrack.value) {
- const firstItem = carouselTrack.value.querySelector(".carousel-item");
- if (!firstItem) return;
-
- const itemWidth = firstItem.offsetWidth;
- const itemMargin = parseInt(
- window.getComputedStyle(firstItem).marginRight
- );
- const slideWidth = itemWidth + itemMargin;
- const totalWidth = slideWidth * state.marqueeArr.length;
-
- // 创建无限滚动动画
- carouselAnimation = gsap.to(carouselTrack.value, {
- x: -totalWidth,
- duration: 20,
- ease: "none",
- repeat: -1,
- onRepeat: () => {
- gsap.set(carouselTrack.value, { x: 0 });
- },
- });
- }
- });
});
onUnmounted(() => {
window.removeEventListener("wheel", handleWheel);
ctx?.revert();
ScrollTrigger.killAll();
- if (carouselAnimation) {
- carouselAnimation.kill();
- }
});
watch(
@@ -479,6 +502,7 @@ watch(
".content3 > div:nth-child(1)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(3)",
+ ".content3 > .n-marquee",
],
{
opacity: 0,
@@ -512,6 +536,22 @@ watch(
y: 0,
},
"-=0.6"
+ )
+ .to(
+ ".content3 > .n-marquee",
+ {
+ opacity: 1,
+ y: 0,
+ onStart: () => {
+ const marquee = document.querySelector(
+ ".content3 > .n-marquee"
+ );
+ if (marquee) {
+ marquee.style.visibility = "visible";
+ }
+ },
+ },
+ "-=0.6"
);
},
onLeave: () => {
@@ -524,6 +564,7 @@ watch(
tl.to(
[
+ ".content3 > .n-marquee",
".content3 > div:nth-child(3)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(1)",
@@ -546,6 +587,7 @@ watch(
".content3 > div:nth-child(1)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(3)",
+ ".content3 > .n-marquee",
],
{
opacity: 0,
@@ -579,6 +621,14 @@ watch(
y: 0,
},
"-=0.6"
+ )
+ .to(
+ ".content3 > .n-marquee",
+ {
+ opacity: 1,
+ y: 0,
+ },
+ "-=0.6"
);
},
onLeaveBack: () => {
@@ -591,6 +641,7 @@ watch(
tl.to(
[
+ ".content3 > .n-marquee",
".content3 > div:nth-child(3)",
".content3 > div:nth-child(2)",
".content3 > div:nth-child(1)",
@@ -868,13 +919,6 @@ watch(
},
{ immediate: true }
);
-const carouselTrack = ref(null);
-let carouselAnimation = null; // 存储 GSAP 动画实例
-const getVisibleItems = () => {
- const items = state.marqueeArr;
- // 复制两组用于无缝滚动
- return [...items, ...items];
-};
</script>
<style scoped lang="scss">
@@ -928,7 +972,7 @@ const getVisibleItems = () => {
}
.scroll-down {
position: fixed;
- bottom: 50px;
+ bottom: 110px;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
@@ -1106,6 +1150,19 @@ const getVisibleItems = () => {
transform: translateY(50px);
will-change: opacity, transform;
}
+ > .n-marquee {
+ opacity: 0;
+ transform: translateY(50px);
+ will-change: opacity, transform;
+ visibility: hidden; // 初始隐藏跑马灯
+ }
+}
+
+// 确保跑马灯内容可见
+:deep(.n-marquee) {
+ .n-marquee-content {
+ visibility: visible !important;
+ }
}
.content4 {
@@ -1229,8 +1286,12 @@ const getVisibleItems = () => {
}
.carousel-subtitle {
- margin-top: 23px;
- color: #455363;
- font-size: 40px;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.5;
+ max-height: calc(1.5em * 1);
}
</style>