|
|
@@ -1,61 +1,51 @@
|
|
|
<template>
|
|
|
- <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>
|
|
|
+ <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>
|
|
|
- <SolveQuestion />
|
|
|
- <FunctionIntroduction />
|
|
|
- <Project />
|
|
|
- <WhyFactoryDirector />
|
|
|
- <UserSound />
|
|
|
- <Increase @contant="contant" />
|
|
|
-
|
|
|
- <Bottom />
|
|
|
- <AnchorPoint />
|
|
|
- <Form :dialogTableVisible2="dialogTableVisible2" @clos="close" />
|
|
|
- <ContactExpert :dialogTableVisible="dialogTableVisible" @close="close" />
|
|
|
</div>
|
|
|
+ <SolveQuestion v-if="showAssembly.showSolve" />
|
|
|
+ <FunctionIntroduction v-if="showAssembly.showIntroduction" />
|
|
|
+ <Project v-if="showAssembly.showProject" />
|
|
|
+ <WhyFactoryDirector v-if="showAssembly.showDirector" />
|
|
|
+ <UserSound v-if="showAssembly.showSound" />
|
|
|
+ <Increase @contant="contant" />
|
|
|
+
|
|
|
+ <Bottom />
|
|
|
+ <AnchorPoint />
|
|
|
+ <Form :dialogTableVisible2="dialogTableVisible2" @clos="close" />
|
|
|
+ <ContactExpert :dialogTableVisible="dialogTableVisible" @close="close" />
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import "animate.css";
|
|
|
-import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- onMounted,
|
|
|
- nextTick,
|
|
|
- defineAsyncComponent,
|
|
|
- shallowRef,
|
|
|
-} from "vue";
|
|
|
+import { ref, reactive, onMounted, watch } 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 WhyFactoryDirector from "./component/whyFactoryDirector.vue";
|
|
|
import UserSound from "./component/userSound.vue";
|
|
|
import Increase from "./component/increase.vue";
|
|
|
import Form from "../../components/Form/from.vue";
|
|
|
@@ -70,57 +60,22 @@ const imgList = reactive({
|
|
|
banneImageList: [],
|
|
|
});
|
|
|
|
|
|
-let SolveQuestion: any = shallowRef("");
|
|
|
-// let FunctionIntroduction: any = ref("");
|
|
|
-let Project: any = shallowRef("");
|
|
|
-let WhyFactoryDirector: any = shallowRef("");
|
|
|
-// let UserSound: any = ref("");
|
|
|
-// let Increase: any = ref("");
|
|
|
-// let Bottom: any = ref("");
|
|
|
+const showAssembly = reactive({
|
|
|
+ showSolve: false,
|
|
|
+ showIntroduction: false,
|
|
|
+ showProject: false,
|
|
|
+ showDirector: false,
|
|
|
+ showSound: false,
|
|
|
+});
|
|
|
|
|
|
const dialogTableVisible2 = ref(false);
|
|
|
const dialogTableVisible = ref(false);
|
|
|
|
|
|
const introduceVideo: any = ref({});
|
|
|
|
|
|
-function handleScroll(event) {
|
|
|
+const handleScroll = (event: any) => {
|
|
|
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");
|
|
|
- });
|
|
|
- }
|
|
|
- // if (event.target.scrollTop > 2900 && UserSound.value == "") {
|
|
|
- // UserSound.value = defineAsyncComponent(() => {
|
|
|
- // return import("./component/userSound.vue");
|
|
|
- // });
|
|
|
- // }
|
|
|
- // if (event.target.scrollTop > 3550 && Increase.value == "") {
|
|
|
- // Increase.value = defineAsyncComponent(() => {
|
|
|
- // return import("./component/increase.vue");
|
|
|
- // });
|
|
|
- // }
|
|
|
- // // if (event.target.scrollTop > 3550 && Bottom.value == "") {
|
|
|
- // // Bottom.value = defineAsyncComponent(() => {
|
|
|
- // // return import("../../components/Layout/bottom.vue");
|
|
|
- // // });
|
|
|
- // // }
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
//跳转产品文档
|
|
|
const toDocument = () => {
|
|
|
@@ -189,17 +144,74 @@ const getInfo = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const data = reactive({
|
|
|
+ oldScrollTop: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const scrolling = () => {
|
|
|
+ // 滚动条距文档顶部的距离
|
|
|
+ let scrollTop =
|
|
|
+ window.pageYOffset ||
|
|
|
+ document.documentElement.scrollTop ||
|
|
|
+ document.body.scrollTop;
|
|
|
+ // 滚动条滚动的距离
|
|
|
+
|
|
|
+ let scrollStep = scrollTop - data.oldScrollTop;
|
|
|
+ console.log("header 滚动距离 ", scrollTop);
|
|
|
+ if (scrollTop >= 100) {
|
|
|
+ showAssembly.showSolve = true;
|
|
|
+ }
|
|
|
+ if (scrollTop >= 800) {
|
|
|
+ showAssembly.showIntroduction = true;
|
|
|
+ }
|
|
|
+ if (scrollTop >= 1800) {
|
|
|
+ showAssembly.showProject = true;
|
|
|
+ }
|
|
|
+ if (scrollTop >= 2300) {
|
|
|
+ showAssembly.showDirector = true;
|
|
|
+ }
|
|
|
+ if (scrollTop >= 2800) {
|
|
|
+ showAssembly.showSound = true;
|
|
|
+ }
|
|
|
+ // 更新——滚动前，滚动条距文档顶部的距离
|
|
|
+ data.oldScrollTop = scrollTop;
|
|
|
+
|
|
|
+ //变量windowHeight是可视区的高度
|
|
|
+ let windowHeight =
|
|
|
+ document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
+ //变量scrollHeight是滚动条的总高度
|
|
|
+ let scrollHeight =
|
|
|
+ document.documentElement.scrollHeight || document.body.scrollHeight;
|
|
|
+
|
|
|
+ //滚动条到底部的条件
|
|
|
+ if (scrollTop + windowHeight == scrollHeight) {
|
|
|
+ //你想做的事情
|
|
|
+ console.log("header 你已经到底部了");
|
|
|
+ }
|
|
|
+ if (scrollStep < 0) {
|
|
|
+ console.log("header 滚动条向上滚动了！");
|
|
|
+ } else {
|
|
|
+ console.log("header 滚动条向下滚动了！");
|
|
|
+ }
|
|
|
+ // 判断是否到了最顶部
|
|
|
+ if (scrollTop <= 0) {
|
|
|
+ console.log("header 到了最顶部");
|
|
|
+ }
|
|
|
+};
|
|
|
+watch(
|
|
|
+ () => window.scrollY,
|
|
|
+ (newVal) => {
|
|
|
+ console.log(newVal);
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
+ window.addEventListener("scroll", scrolling);
|
|
|
+ console.log(window.scrollY);
|
|
|
getInfo();
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.scroll-container {
|
|
|
- padding-bottom: 200px;
|
|
|
- height: 100vh;
|
|
|
- overflow-y: scroll;
|
|
|
- overflow-x: hidden;
|
|
|
-}
|
|
|
.video-information {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
