优化动画

src/components/ContentDesign.vue

@@ -1,20 +1,20 @@
 <template>
-  <div class="content-design" :style="'background:url(' + modBackground + ')'">
+  <div
+    class="content-design"
+    :style="'background:url(' + modBackground + ')'"
+    ref="pronbit"
+    v-if="mod.isShow === '1'"
+  >
     <!-- type === 1 -->
-    <div class="content-margin">
-      <div
-        v-if="
-          (mod.desc === '左文右图' || mod.desc === '左图右文') &&
-          mod.isShow === '1'
-        "
-      >
+    <div class="content-margin" v-show="isShow">
+      <div v-if="mod.desc === '左文右图' || mod.desc === '左图右文'">
         <div
           class="content-text"
           :style="
             'float:' +
-            getDescStyle('text',mod.desc) +
+            getDescStyle('text', mod.desc) +
             ';text-align:' +
-            getDescStyle('text',mod.desc)
+            getDescStyle('text', mod.desc)
           "
         >
           <div class="mod-title">{{ mod.mainText }}</div>
@@ -22,8 +22,11 @@
           <div class="mod-content">{{ mod.content }}</div>
         </div>
 
-        <div class="content-img" :style="'float:' + getDescStyle('img',mod.desc)">
-          <img  style="width: 100%" :src="mod.mainImage" alt="" />
+        <div
+          class="content-img"
+          :style="'float:' + getDescStyle('img', mod.desc)"
+        >
+          <img style="width: 100%" :src="mod.mainImage" alt="" />
         </div>
       </div>
 
@@ -32,7 +35,7 @@
         class="modtype2-box"
         v-if="mod.desc === '两侧文中间图' && mod.isShow === '1'"
       >
-        <div>
+        <div class="left-text-content">
           <div class="type-title">{{ mod.leftSetting.mainText }}</div>
           <div class="type-subText">{{ mod.leftSetting.subText }}</div>
 
@@ -42,10 +45,10 @@
         </div>
 
         <div class="content-img">
-          <img  style="width: 100%" :src="mod.mainImage" alt="" />
+          <img style="width: 100%" :src="mod.mainImage" alt="" />
         </div>
 
-        <div>
+        <div class="right-text-content">
           <div class="type-title" style="text-align: right">
             {{ mod.rightSetting.mainText }}
           </div>
@@ -64,7 +67,7 @@
         v-if="mod.desc === '上图下文样式' && mod.isShow === '1'"
       >
         <div class="modFor-box" v-for="(item, index) in modList" :key="index">
-          <img  class="item-img" :src="item.img" />
+          <img class="item-img" :src="item.img" />
           <div class="type3-title">{{ item.mainText }}</div>
           <div class="type3-subheading">{{ item.subText }}</div>
           <div class="type3-content">{{ item.content }}</div>
@@ -100,7 +103,7 @@ export default {
     },
 
     getDescStyle: function () {
-      return function (value,desc) {
+      return function (value, desc) {
         if (desc === "左图右文") {
           if (value === "text") {
             return "right";
@@ -126,9 +129,37 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      winHeight: 0,
+      isShow: false,
+    };
   },
   mounted() {},
+
+  created() {
+    if (
+      (this.mod.desc === "左文右图" ||
+        this.mod.desc === "左图右文" ||
+        this.mod.desc === "两侧文中间图" ||
+        this.mod.desc === "上图下文样式") &&
+      this.mod.isShow === "1"
+    ) {
+      window.addEventListener("scroll", this.handleScrollx, true);
+      this.winHeight =
+        document.documentElement.clientHeight / 2 ||
+        document.body.clientHeight / 2;
+    }
+  },
+  methods: {
+    handleScrollx() {
+ 
+      if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
+        this.isShow = true;
+
+        window.removeEventListener('scroll', this)
+      }
+    },
+  },
 };
 </script>
 
@@ -139,7 +170,6 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
   display: flex;
-  overflow: hidden;
   align-items: center;
 }
 
@@ -152,6 +182,53 @@ export default {
   width: 600px;
   display: flex;
   flex-flow: column;
+  padding-top: 78px;
+  color: #999999;
+  font-size: 16px;
+  line-height: 36px;
+  font-weight: 400;
+  /* transform: translate(-600px) scale(.5); */
+  animation: leftRight 1.7s forwards;
+  /* animation-delay: .6s; */
+  opacity: 0;
+}
+
+@keyframes leftRight {
+  40% {
+    transform: translate(30px, 0) scale(0.7);
+    opacity: 1;
+    color: #000;
+  }
+  80% {
+    transform: translate(0) scale(1.4);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(0) scale(1);
+    opacity: 1;
+  }
+}
+
+.left-text-content {
+  animation: leftContent 1.7s;
+}
+
+@keyframes leftContent {
+  from {
+    transform: translateX(-200px);
+    opacity: 0;
+  }
+}
+
+.right-text-content {
+  animation: rightContent 1.7s;
+}
+
+@keyframes rightContent {
+  from {
+    transform: translateX(200px);
+    opacity: 0;
+  }
 }
 
 .mod-title {
@@ -170,20 +247,18 @@ export default {
   margin-bottom: 20px;
 }
 
-.content-text {
-  color: #999999;
-  font-size: 16px;
-  line-height: 36px;
-  font-weight: bold;
-}
-
 .content-img {
   width: 260px;
-  display: flex;
+  animation-name: adinmation-contentImg;
+  animation-duration: 1.2s;
+  opacity: 1;
 }
 
-.content-text {
-  padding-top: 78px;
+@keyframes adinmation-contentImg {
+  from {
+    opacity: 0;
+    transform: translateY(-200px);
+  }
 }
 
 .modtype2-box {
@@ -225,6 +300,30 @@ export default {
   display: flex;
   flex-flow: column;
   font-weight: bold;
+  animation-name: adinmation-modFor;
+
+  /* opacity: 0; */
+}
+
+.modFor-box:nth-child(1) {
+  animation-duration: 0.7s;
+}
+.modFor-box:nth-child(2) {
+  animation-duration: 1.4s;
+}
+.modFor-box:nth-child(3) {
+  animation-duration: 1.9s;
+}
+
+@keyframes adinmation-modFor {
+  from {
+    opacity: 0;
+    transform: rotate(-180deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
 }
 
 .item-img {
@@ -236,7 +335,7 @@ export default {
 }
 
 .type3-title {
-  font-size: 40px;
+  font-size: 33px;
 }
 
 .type3-content {
@@ -254,7 +353,11 @@ export default {
 }
 
 .type3-subheading {
-  font-size: 24px;
+  font-size: 20px;
+  line-height: 30px;
+  color: #4a4a4a;
+  font-weight: 500;
+  margin-top: 10px;
 }
 
 .type-subText {

src/components/Download.vue

@@ -1,17 +1,21 @@
 <template>
-  <div class="download-box">
+  <div class="download-box" ref="pronbit">
     <div class="title">
       <span>下载软件地址</span>
     </div>
 
-    <div class="download-bg" :style="'background:url(' + mod.bgImage + ')'">
+    <div
+      class="download-bg"
+      :style="'background:url(' + mod.bgImage + ')'"
+      v-show="isShow"
+    >
       <div class="mainImg-box" style="float: right">
-        <img  :src="mod.mainImage" style="width: 100%" alt="" />
+        <img :src="mod.mainImage" style="width: 100%" alt="" />
       </div>
 
       <div class="mainRight-box" style="float: left">
         <div class="modLogo-text">
-          <img  class="modLogo" :src="mod.applyLogo" alt="" />
+          <img class="modLogo" :src="mod.applyLogo" alt="" />
           <span>{{ mod.mainText }}</span>
         </div>
         <div class="subText">{{ mod.subText }}</div>
@@ -22,7 +26,7 @@
               :style="getHoversColor"
               @click="downloadLink(linkData.iosLink)"
             >
-              <img 
+              <img
                 :src="mod.iosDownloadBtn"
                 style="width: 42px; height: 42px"
                 alt=""
@@ -35,7 +39,7 @@
               :style="getHoversColor"
               @click="downloadLink(linkData.iosLink)"
             >
-              <img 
+              <img
                 :src="mod.androidDownloadBtn"
                 style="width: 42px; height: 42px"
                 alt=""
@@ -45,7 +49,7 @@
           </div>
 
           <div class="download-content-code">
-            <img  class="modQrCde" :src="mod.qrcode" alt="" />
+            <img class="modQrCde" :src="mod.qrcode" alt="" />
             <div>扫一扫轻松下载</div>
           </div>
         </div>
@@ -68,6 +72,12 @@ export default {
       };
     },
   },
+  data() {
+    return {
+      winHeight: 0,
+      isShow: false,
+    };
+  },
 
   props: {
     mod: {
@@ -79,16 +89,23 @@ export default {
       default: () => {},
     },
   },
-  data() {
-    return {};
-  },
-  mounted() {
-    // console.log(this.mod)
+  created() {
+    window.addEventListener("scroll", this.handleScrollx, true);
+    this.winHeight =
+      document.documentElement.clientHeight / 2 ||
+      document.body.clientHeight / 2;
   },
   methods: {
     downloadLink: function (link) {
       window.open(link);
     },
+    handleScrollx() {
+      if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
+        this.isShow = true;
+
+        window.removeEventListener("scroll", this);
+      }
+    },
   },
 };
 </script>
@@ -97,6 +114,7 @@ export default {
 <style scoped>
 .download-box {
   width: 1200px;
+  height: 610px;
   margin: 0 auto;
   display: flex;
   flex-flow: column;
@@ -129,12 +147,29 @@ export default {
   box-sizing: border-box;
   overflow: hidden;
   padding: 94px 110px 0;
+  opacity: 0;
+  animation: aniamtionDownload 1.2s ease-in-out forwards;
+}
+
+@keyframes aniamtionDownload {
+  100% {
+    opacity: 1;
+  }
 }
 
 .mainImg-box {
   width: 344px;
   position: relative;
+  animation: aniamtionMainImg 1.2s forwards;
+  transform: translateY(600px);
 }
+
+@keyframes aniamtionMainImg {
+  100% {
+    transform: translateX(0);
+  }
+}
+
 .mainImg-box::after {
   content: "";
   height: 100px;
@@ -143,7 +178,7 @@ export default {
     rgb(255, 255, 255) 100%
   );
   width: 100%;
-  bottom: 0px;
+  top: 326px;
   z-index: 99;
   position: absolute;
   left: 0px;
@@ -152,6 +187,14 @@ export default {
 .mainRight-box {
   display: flex;
   flex-flow: column;
+  transform: translateX(-220px);
+  animation: aniamtionMainRight 1.2s ease-in-out forwards;
+}
+
+@keyframes aniamtionMainRight {
+  100% {
+    transform: translateX(0px);
+  }
 }
 
 .modLogo-text {
@@ -231,4 +274,10 @@ export default {
   box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
   transition: color 0.35s, background-color 0.35s, box-shadow　0.35s;
 }
+
+@media screen and (max-width: 1500px) {
+  .mainImg-box {
+    width: 300px;
+  }
+}
 </style>

src/components/HomeStyle.vue

@@ -3,6 +3,8 @@
     class="home-style"
     :style="'background:url(' + mod.bgImage + ')'"
     v-if="mod"
+    id="home-style"
+    ref="pronbit"
   >
     <transition name="el-fade-in-linear">
       <div class="home-margin" v-show="showLinear">
@@ -20,7 +22,7 @@
               :style="getHoversColor"
               @click="downloadLink(linkData.iosLink)"
             >
-              <img 
+              <img
                 class="storeSvg"
                 :src="mod.iosDownloadBtn"
                 alt=""
@@ -33,7 +35,7 @@
               :style="getHoversColor"
               @click="downloadLink(linkData.androidLink)"
             >
-              <img 
+              <img
                 class="storeSvg"
                 :src="mod.androidDownloadBtn"
                 alt=""
@@ -49,21 +51,24 @@
               placement="bottom"
             >
               <template #content>
-                <img 
+                <img
                   class="codeSvg"
                   :src="mod.applyLogo"
                   style="width: 120px; height: 120px"
                 />
               </template>
               <div class="button-boxs code-button" :style="getHoversColor">
-                <img  class="codeSvg" :src="mod.applyLogo" alt="" srcset="" />
+                <img class="codeSvg" :src="mod.applyLogo" alt="" srcset="" />
               </div>
             </el-tooltip>
           </div>
         </div>
 
-        <div class="homeImgStyle" :style="'float:' + getDescStyle('img', mod.desc)">
-          <img  class="iphone12" :src="mod.mainImage" alt="" />
+        <div
+          class="homeImgStyle"
+          :style="'float:' + getDescStyle('img', mod.desc)"
+        >
+          <img class="iphone12" :src="mod.mainImage" alt="" />
         </div>
       </div>
     </transition>
@@ -114,6 +119,9 @@ export default {
       default: () => {},
     },
   },
+  created() {
+    window.addEventListener("scroll", this.handleScrollx, true);
+  },
 
   mounted() {
     this.showLinear = true;
@@ -123,6 +131,7 @@ export default {
     return {
       codeSvg: false,
       showLinear: false,
+    
     };
   },
 
@@ -130,6 +139,13 @@ export default {
     downloadLink: function (link) {
       window.open(link);
     },
+
+    handleScrollx() {
+      // console.log(
+      //   "距离顶部高度",
+      //   this.$refs.pronbit.getBoundingClientRect().top
+      // );
+    },
   },
 };
 </script>
@@ -154,18 +170,32 @@ export default {
   width: 570px;
   height: 100%;
   box-sizing: border-box;
-  padding-top: 330px;
+  /* align-items: center; */
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  animation: animationTitleFont 1.4s ease-in-out forwards;
+  opacity: 0;
 }
 
+ 
+
+@keyframes animationTitleFont {
+  100% {
+    opacity: 1;
+  }
+}
+
+
 .homeImgStyle {
-  width: 430px;
+  width: 350px;
   height: 100%;
-  padding-top: 233px;
   box-sizing: border-box;
-  position: relative;
+  display: flex;
+  align-items: center;
 }
 
-.homeImgStyle::after {
+/* .homeImgStyle::after {
   content: "";
   height: 99px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
@@ -174,15 +204,21 @@ export default {
   z-index: 99;
   position: absolute;
   left: 0;
-}
+} */
 
 .text-titleFont {
   font-size: 80px;
   font-weight: bold;
   color: #333;
   line-height: 80px;
-  letter-spacing: 12px;
+  letter-spacing: 12px; 
 }
+
+ 
+
+
+
+
 .text-contentFont {
   font-weight: 600;
   color: #333333;
@@ -259,5 +295,45 @@ export default {
 
 .iphone12 {
   width: 100%;
+  transform:  translateY(-300px);
+  opacity: 0;
+  animation: fallPerspective 0.8s ease-in-out forwards;
+  /* position: absolute;
+  bottom: 0; */
+}
+
+@keyframes fallPerspective {
+  100% {
+    transform:  translateY(0px);
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 1600px) {
+  .homeImgStyle {
+    width: 330px;
+  }
+  .text-titleFont {
+    font-size: 70px;
+  }
+}
+
+@media screen and (max-width: 1500px) {
+  .homeImgStyle {
+    width: 300px;
+    position: relative;
+  }
+  .text-titleFont {
+    font-size: 60px;
+  }
+  .text-contentFont {
+    font-size: 26px;
+    letter-spacing: 4px;
+    margin: 20px 0 30px;
+  }
+  .home-margin {
+    box-sizing: border-box;
+    padding: 0 60px;
+  }
 }
 </style>

src/components/NavigationBar.vue

@@ -2,7 +2,7 @@
   <div class="head-view">
     <div class="head-left">
       <div class="logo-box">
-        <img  :src="mod.applyLogo" style="width: 100%; height: 100%" alt="" />
+        <img :src="mod.applyLogo" style="width: 100%; height: 100%" alt="" />
       </div>
       <div class="for-item" v-for="(item, index) in mod.listStyle" :key="index">
         <a :href="item.url" :style="colorHover(item)" target="_blank">{{
@@ -10,7 +10,7 @@
         }}</a>
       </div>
     </div>
-<!-- 
+    <!-- 
     <div class="head-right">
       <div class="myTou-box">
         <img 
@@ -70,7 +70,7 @@ export default {
 
 <style scoped>
 .head-view {
-  height: 40px;
+  height: 76px;
   display: flex;
   align-items: center;
   padding: 18px 0;
@@ -79,6 +79,7 @@ export default {
   margin: 0 auto;
   left: 0;
   z-index: 99;
+  box-sizing: border-box;
   right: 0;
 }
 
@@ -131,4 +132,10 @@ a {
 a:hover {
   color: var(--text-color-hover);
 }
+
+@media screen and (max-width: 1500px) {
+  .head-view {
+    padding: 18px 60px;
+  }
+}
 </style>