增加效果

src/assets/css/common.less

@@ -8,7 +8,7 @@ html {
   margin: 0;
   padding: 0;
   border-radius: 0;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 #app {
   width: 100%;

src/components/Layout/header.vue

@@ -292,7 +292,7 @@ onMounted(() => {
 .header {
   width: 100%;
   position: absolute;
-  top: 0;
+  top: 14px;
   height: 60px;
   line-height: 60px;
   display: flex;

src/view/Home/component/functionIntroduction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="Introduction">
+  <div class="Introduction animate__animated animate__bounceInUp">
     <p class="Introduction-title">云厂长功能介绍</p>
     <p class="introduction-information">
       多种功能增强包，不同的版本功能，智能的OA系统，总有一款适合您
@@ -30,6 +30,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import "animate.css";
 import { ref,reactive,onMounted } from "vue";
 import { getIntroduction } from '../../../api/home'
 import type { TabsPaneContext } from "element-plus";

src/view/Home/component/project.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="information">
+  <div class="information animate__animated animate__bounceInUp">
     <div class="left-blue"></div>
     <p class="title">赋能企业数字化转型</p>
     <p class="introduce">一切为了用户，全方位赋能，助力企业数字化转型</p>
@@ -74,7 +74,9 @@
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import "animate.css";
+</script>
 <style scoped lang="less">
 .information {
   width: 100%;

src/view/Home/component/solveQuestion.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="solve-question">
-    <div class="question-content">
+    <div class="question-content animate__animated animate__bounceInUp">
       <p class="solve">我们能为您解决什么问题</p>
       <p class="introduce">
         "云厂长"通过先进的AIGC技术和全流程管理功能，为制造业企业提供从市场洞察到生产优化的一站式解决方案，助力企业高效运营和智能决策。
@@ -32,6 +32,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import "animate.css";
 import { reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { getQuestionList } from "../../../api/home";

src/view/Home/index.vue

@@ -1,53 +1,63 @@
 <template>
-  <Banne :banneImageList="imgList.banneImageList" />
-  <div class="video-information">
-    <div class="conetnt">
-      <video
-        class="video-1"
-        :src="introduceVideo.introduction_video"
-        controls
-        autoplay
-        muted
-        loop
-      ></video>
-      <div>
-        <p class="brief-introduction">云厂长视频简介</p>
-        <p class="information">
-          {{ introduceVideo.introduction_content }}
-        </p>
-        <div class="btn-list">
-          <button class="explanation btn" @click="toDocument">十分钟详解</button
-          ><button class="btn" @click="startTrial">开始试用</button
-          ><button class="btn" @click="toPlugIn">插件介绍</button>
+  <div class="scroll-container" @scroll="handleScroll">
+    <Banne :banneImageList="imgList.banneImageList" />
+    <div class="video-information animate__animated animate__bounceInUp">
+      <div class="conetnt">
+        <video
+          class="video-1"
+          :src="introduceVideo.introduction_video"
+          controls
+          autoplay
+          muted
+          loop
+        ></video>
+        <div>
+          <p class="brief-introduction">云厂长视频简介</p>
+          <p class="information">
+            {{ introduceVideo.introduction_content }}
+          </p>
+          <div class="btn-list">
+            <button class="explanation btn" @click="toDocument">
+              十分钟详解</button
+            ><button class="btn" @click="startTrial">开始试用</button
+            ><button class="btn" @click="toPlugIn">插件介绍</button>
+          </div>
         </div>
       </div>
     </div>
+    <Suspense>
+      <template #default>
+        <SolveQuestion />
+      </template>
+    </Suspense>
+    <FunctionIntroduction />
+    <Project />
+    <WhyFactoryDirector />
+    <UserSound />
+    <Increase @contant="contant" />
+    <div class="start">
+      <p class="start-title">
+        免费试用云厂长的核心功能，开启您的智能制造之旅！
+      </p>
+      <button class="free">免费体验</button>
+    </div>
+    <Bottom />
+    <AnchorPoint />
+    <Form :dialogTableVisible2="dialogTableVisible2" @clos="close" />
+    <ContactExpert :dialogTableVisible="dialogTableVisible" @close="close" />
   </div>
-  <SolveQuestion />
-  <FunctionIntroduction />
-  <Project />
-  <WhyFactoryDirector />
-  <UserSound />
-  <Increase @contant="contant" />
-  <div class="start">
-    <p class="start-title">免费试用云厂长的核心功能，开启您的智能制造之旅！</p>
-    <button class="free">免费体验</button>
-  </div>
-  <AnchorPoint />
-  <Form :dialogTableVisible2="dialogTableVisible2" @clos="close" />
-  <ContactExpert :dialogTableVisible="dialogTableVisible" @close="close" />
-  <Bottom />
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted, nextTick } from "vue";
+import "animate.css";
+import { ref, reactive, onMounted, nextTick, defineAsyncComponent } from "vue";
 import { getBanneList } from "../../api/home";
 import { config } from "../../api/config";
 import Banne from "../../components/Banne/index.vue";
-import SolveQuestion from "./component/solveQuestion.vue";
-import Project from "./component/project.vue";
+// import SolveQuestion from "./component/solveQuestion.vue";
+// import Project from "./component/project.vue";
 import Bottom from "../../components/Layout/bottom.vue";
-import FunctionIntroduction from "./component/functionIntroduction.vue";
-import WhyFactoryDirector from "./component/whyFactoryDirector.vue";
+// import FunctionIntroduction from "./component/functionIntroduction.vue";
+// import WhyFactoryDirector from "./component/whyFactoryDirector.vue";
 import UserSound from "./component/userSound.vue";
 import Increase from "./component/increase.vue";
 import Form from "../../components/Form/from.vue";
@@ -62,11 +72,40 @@ const imgList = reactive({
   banneImageList: [],
 });
 
+let SolveQuestion: any = ref("");
+let FunctionIntroduction: any = ref("");
+let Project: any = ref("");
+let WhyFactoryDirector: any = ref("");
+
 const dialogTableVisible2 = ref(false);
 const dialogTableVisible = ref(false);
 
 const introduceVideo: any = ref({});
 
+function handleScroll(event) {
+  console.log("event", event.target.scrollTop);
+  if (event.target.scrollTop > 200 && SolveQuestion.value == "") {
+    SolveQuestion.value = defineAsyncComponent(() => {
+      return import("./component/solveQuestion.vue");
+    });
+  }
+  if (event.target.scrollTop > 900 && FunctionIntroduction.value == "") {
+    FunctionIntroduction.value = defineAsyncComponent(() => {
+      return import("./component/functionIntroduction.vue");
+    });
+  }
+  if (event.target.scrollTop > 1800 && Project.value == "") {
+    Project.value = defineAsyncComponent(() => {
+      return import("./component/project.vue");
+    });
+  }
+  if (event.target.scrollTop > 2400 && WhyFactoryDirector.value == "") {
+    WhyFactoryDirector.value = defineAsyncComponent(() => {
+      return import("./component/whyFactoryDirector.vue");
+    });
+  }
+}
+
 //跳转产品文档
 const toDocument = () => {
   router.push({
@@ -139,6 +178,11 @@ onMounted(() => {
 });
 </script>
 <style lang="less" scoped>
+.scroll-container {
+  height: 100vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
 .video-information {
   display: flex;
   justify-content: center;