门户首页添加动画效果

frontend/saas-portal-web/src/components/conenter/enterprise.vue

@@ -236,6 +236,11 @@ import { setTimeout } from 'timers';
                 size: 10,//每页显示数量
             }
         },
+        created() {
+            if (!this.mytoken) {
+                this.$router.push({path:'/home'})
+            }
+        },
         mounted(){
             let phone = this.mytoken.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
             this.mobile = phone;
@@ -257,7 +262,7 @@ import { setTimeout } from 'timers';
             },
             //红点
             ishongdian(){
-                return this.$store.state.ishongdian;
+                // return this.$store.state.ishongdian;
             },
         },
         methods: {
@@ -361,7 +366,7 @@ import { setTimeout } from 'timers';
                 frame.postMessage('', '*')
                 Session.remove()
                 window.location.href=this.$url.sso+'/logquit?appId=sp&returnURL='+window.location.origin
-                // this.$router.puth({path:'/home'})
+                // this.$router.push({path:'/home'})
             },
             //修改密码
             changpasd(){

frontend/saas-portal-web/src/components/conenter/home.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div id="scroll">
       <div class="top-nav">
         <div class="container">
           <ul>
@@ -118,37 +118,37 @@
           <!-- 1 -->
           <div class="ts-box">
             <div>
-              <img class="left" src="/static/img/feature/for2x.png" alt="">
+              <img class="left animate1" src="/static/img/feature/for2x.png" alt="">
             </div>
             <div>
-              <img class="right" src="/static/img/feature/onemin2x.png" alt="">
+              <img class="right animate1" src="/static/img/feature/onemin2x.png" alt="">
             </div>
           </div>
           <!-- 2 -->
           <div class="ts-box ts-boxtow">
             <div>
-              <img class="left" src="/static/img/feature/towmin2x.png" alt="">
+              <img class="left animate2" src="/static/img/feature/towmin2x.png" alt="">
             </div>
             <div>
-              <img class="right" style="margin-right:20px; width:80%" src="/static/img/feature/three2x.png" alt="">
+              <img class="right animate2" style="margin-right:20px; width:80%" src="/static/img/feature/three2x.png" alt="">
             </div>
           </div>
           <!-- 3 -->
           <div class="ts-box" style="padding-bottom:0px">
             <div>
-              <img class="left" style="width:88%" src="/static/img/feature/one2x.png" alt="">
+              <img class="left animate3" style="width:88%" src="/static/img/feature/one2x.png" alt="">
             </div>
             <div>
-              <img class="right" style="margin-top:-30%;" src="/static/img/feature/threemin2x.png" alt="">
+              <img class="right animate3-2" style="margin-top:-30%;" src="/static/img/feature/threemin2x.png" alt="">
             </div>
           </div>
           <!-- 4 -->
           <div class="ts-box ts-boxtow ts-forbox" style="padding-bottom:0px">
             <div>
-              <img class="left" style="margin-top:-39%;" src="/static/img/feature/formin2x.png" alt="">
+              <img class="left animate4-1" style="margin-top:-39%;" src="/static/img/feature/formin2x.png" alt="">
             </div>
             <div>
-              <img class="right" style="margin-right:30px;" src="/static/img/feature/tow2x.png" alt="">
+              <img class="right animate4" style="margin-right:30px;" src="/static/img/feature/tow2x.png" alt="">
             </div>
           </div>
         </div>
@@ -329,6 +329,82 @@
       // 从本地加载已经登录的信息
       this.account = Session.getAccount()
       document.documentElement.scrollTop = this.isfeature;
+      $(window).scroll(function() {
+        let Y = $(window).scrollTop();
+        console.log(Y);
+        if (Y >= 500 && Y <= 1500) {
+          $(".animate1").stop();
+          $(".animate1").animate({
+            top:'0px',
+            opacity:'1'
+          },1000);
+        } else {
+          $(".animate1").stop();
+          $(".animate1").animate({
+            top:'100px',
+            opacity:'0'
+          },1000);
+        };
+        if (Y > 1200 && Y < 2200) {
+          $(".animate2").stop();
+          $(".animate2").animate({
+            top:'0px',
+            opacity:'1'
+          },1000);
+        } else {
+          $(".animate2").stop();
+          $(".animate2").animate({
+            top:'100px',
+            opacity:'0'
+          },1000);
+        };
+        if (Y > 1900 && Y < 2900) {
+          $(".animate3").stop();
+          $(".animate3").animate({
+            top:'0px',
+            opacity:'1'
+          },1000);
+          $(".animate3-2").stop();
+          $(".animate3-2").animate({
+            marginTop:'-60%',
+            opacity:'1'
+          },1000);
+        } else {
+          $(".animate3").stop();
+          $(".animate3").animate({
+            top:'100px',
+            opacity:'0'
+          },1000);
+          $(".animate3-2").stop();
+          $(".animate3-2").animate({
+            marginTop:'-30%',
+            opacity:'0'
+          },1000);
+        };
+        if (Y > 2600 && Y < 3600) {
+          $(".animate4").stop();
+          $(".animate4").animate({
+            top:'0px',
+            opacity:'1'
+          },1000);
+          $(".animate4-1").stop();
+          $(".animate4-1").animate({
+            marginTop:'-60%',
+            opacity:'1'
+          },1000);
+        } else {
+          $(".animate4").stop();
+          $(".animate4").animate({
+            top:'100px',
+            opacity:'0'
+          },1000);
+          $(".animate4-1").stop();
+          $(".animate4-1").animate({
+            marginTop:'-30%',
+            opacity:'0'
+          },1000);
+        };
+      })
     },
     computed: {
       setTokenPage() {
@@ -490,6 +566,14 @@
 </script>
 
 <style scoped>
+.ts-box {
+  height: 700px;
+}
+.animate1, .animate2, .animate3, .animate4, .animate4-1, .animate3-2 {
+  position: relative;
+  opacity: 0;
+  top: 100px;
+}
 .shut {
   cursor: pointer;
   position: absolute;

frontend/saas-portal-web/static/css/main.css

@@ -161,6 +161,10 @@ main > section {
     color: #FFFFFF;
     border: 0;
 }
+.my-tiyan:hover {
+    background: #317ef3;
+    margin-top: 1px;
+}
 /* 特色 .......................................*/
 .ts-worp {
     width: 100%;
@@ -359,18 +363,20 @@ main > section {
 .footer .container{
     margin: 0 auto;
     width: 80%;
-    height: 260px;
+    /* height: 260px; */
     overflow: hidden;
     text-align: center;
 }
 .footer-section .link{
     overflow: hidden;
     float: left;
-    margin-right: 100px;
+    /* margin-right: 100px; */
+    width: 52%;
 }
 .footer-section ul{
     float: left;
-    margin-right: 45px;
+    /* margin-right: 45px; */
+    width: 25%;
 }
 .footer-section ul:last-child {
     margin-right: 0;
@@ -403,8 +409,9 @@ main > section {
 }
 .footer-section .about{
     float: left;
-    margin-right: 30px;
-    width: 245px;
+    /* margin-right: 30px;
+    width: 245px; */
+    width: 25%;
     text-align: left;
 }
 .footer-section .about .logo{
@@ -449,6 +456,8 @@ main > section {
 }
 .footer .footer-list{
     margin: 55px auto 22px;
+    overflow: hidden;
+    width: 100%;
 }
 
 

frontend/saas-portal-web/static/js/mains.js

@@ -55,7 +55,7 @@ $(document).ready(function(){
     //         $(".el-menu--popup-bottom-start").css("margin-top","5px")
     //     }
     // });
-
+    
 	/* ========================================================================= */
 	/*	Fix Slider Height
 	/* ========================================================================= */