调整工时管家官网的化简为繁的动画效果

fhKeeper/formulahousekeeper/inva_4_tivo/css/index.css

@@ -3,6 +3,7 @@
     width: 100%;
     height: 6.375rem;
     position: relative;
+    box-shadow: 0px 0px 0px #fff;
 }
 .navigationBarBack {
     width: 100%;
@@ -153,25 +154,46 @@
     text-align: center;
     font-size: 1.625rem !important;
     color: #595959;
+    position: relative;
 }
 .manContent img {
-    /* margin-top: 10.5625rem;
-    margin-bottom: 1.6875rem; */
-    margin-top: 16.25rem;
+    margin-top: 18.25rem;
     margin-bottom: 3.4375rem;
-    width: 12.875rem;
-    height: 12.875rem;
+    width: 9.875rem;
+    height: 9.875rem;
 }
 .manContent p {
-    font-size: 1.9375rem !important;
+    font-size: 1.75rem !important;
     color: #595959;
     font-weight: bold;
     word-spacing: .9375rem;
-    letter-spacing:.3125rem
+    letter-spacing:.3125rem;
 }
 .manContent span {
     color: #5e95f8;
 }
+.manConDD {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    text-align: center;
+    position: absolute;
+    width: 256px;
+}
+.manConDD img {
+    width: 6rem !important;
+    height: 6rem !important;
+    margin-top: 0;
+    margin-bottom: .625rem;
+}
+.manContent .manConDD p {
+    width: 100%;
+    text-align: center;
+    font-size: 16px !important;
+    font-weight: normal;
+    word-spacing: 0;
+    letter-spacing:0
+}
 /* 智能 */
 .smart {
     width: 100%;
@@ -697,7 +719,8 @@
 /* 尝试滚动 */
 .jiesao {
     /* height: 200vh; */
-    height: 125.8125rem;
+    /* height: 125.8125rem; */
+    height: 137.5rem;
     width: 100%;
 }
 .managements {
@@ -736,6 +759,7 @@ body {
     /* background: url(../image/backk.jpg) no-repeat;
     background-size: 100%; */
     background: #fff;
+    box-shadow: 1px 3px 5px 0px #ddd;
 }
 .abc .til {
     color: #fff !important;

fhKeeper/formulahousekeeper/inva_4_tivo/index.html

@@ -97,8 +97,39 @@
             <!-- <div class="manImg"><img src="./image/gongshi.jpg" alt=""></div> -->
             <div class="connont">
                 <div class="manContent">
-                    <img id="jiesaoImg" src="./image/gsgj.png" alt="" style="padding-top: 300px;">
-                    <p id="jiesaoP" style="opacity: 0;">化繁为简  只需一个<span>工时管家</span></p>
+                    <!-- <img id="jiesaoImg" src="./image/gsgj.png" alt="" style="padding-top: 300px;"> -->
+                    <div style="position: relative;z-index: 2;">
+                        <img id="jiesaoImg" src="./image/gsgj.png" alt="">
+                        <p id="jiesaoP">化繁为简  只需一个<span>工时管家</span></p>
+                    </div>
+                    <div class="manConDD" id="manConDD1" style="left: 50%;margin-left: -128px;top: 30px;transform:translate(0,293px);">
+                        <img src="./image/dd1.png" alt="">
+                        <p id="manConDDp1" style="opacity: 0;">可集成到企业微信、钉钉</p>
+                    </div>
+                    <div class="manConDD" id="manConDD2" style="right: 160px;top: 200px;transform:translate(-362px,123px);">
+                        <img src="./image/dd2.png" alt="">
+                        <p id="manConDDp2" style="opacity: 0;">可以设置工时审批流</p>
+                    </div>
+                    <div class="manConDD" id="manConDD3" style="right: 160px;bottom: -60px;transform:translate(-362px,-141px);">
+                        <img src="./image/dd3.png" alt="">
+                        <p id="manConDDp3" style="opacity: 0;">多层级项目任务结构</p>
+                    </div>
+                    <div class="manConDD" id="manConDD4" style="right: 360px;bottom: -260px;transform:translate(-162px,-339px);">
+                        <img src="./image/dd4.png" alt="">
+                        <p id="manConDDp4" style="opacity: 0;">支持定制开发、私有化部署</p>
+                    </div>
+                    <div class="manConDD" id="manConDD5" style="left: 360px;bottom: -260px;transform:translate(162px,-339px);">
+                        <img src="./image/dd5.png" alt="">
+                        <p id="manConDDp5" style="opacity: 0;">图形化统计、Excel报表</p>
+                    </div>
+                    <div class="manConDD" id="manConDD6" style="left: 160px;bottom: -60px;transform:translate(362px,-141px);">
+                        <img src="./image/dd6.png" alt="">
+                        <p id="manConDDp6" style="opacity: 0;">模板可搭配、最高性价比</p>
+                    </div>
+                    <div class="manConDD" id="manConDD7" style="left: 160px;top: 200px;transform:translate(362px,123px);">
+                        <img src="./image/dd7.png" alt="">
+                        <p id="manConDDp7" style="opacity: 0;">自动下发漏填、待审核提醒</p>
+                    </div>
                 </div>
             </div>
         </div>

fhKeeper/formulahousekeeper/inva_4_tivo/js/index.js

@@ -37,7 +37,7 @@ $('.auss li').hover(function () {
 let screenHeight = $(window).height()
 // 系统智能的高度
 let jiesaoTop = $('.jiesao').offset().top
-
+ 
 // 智能引擎的高度
 let znyqTop = $('.znyq').offset().top
 
@@ -66,9 +66,24 @@ $(window).scroll(function () {
     // 系统管理滚动计算
     if (currentTop > jiesaoTop && currentTop < (jiesaoTop + screenHeight)) {
         let jiesaoopacity = (currentTop - jiesaoTop) / screenHeight
-        let jiesaopadding = (1 - jiesaoopacity) * 300 + 'px'
-        $('#jiesaoP').css({'opacity': jiesaoopacity})
-        $('#jiesaoImg').css({'padding-top': jiesaopadding})
+        // let jiesaopadding = (1 - jiesaoopacity) * 300 + 'px'
+        let jieMIngcs = jiesaoopacity > 0.8 ? jiesaoopacity : '0'
+        // 文字加透明
+        $('#manConDDp1').css({'opacity': jieMIngcs})
+        $('#manConDDp2').css({'opacity': jieMIngcs})
+        $('#manConDDp3').css({'opacity': jieMIngcs})
+        $('#manConDDp4').css({'opacity': jieMIngcs})
+        $('#manConDDp5').css({'opacity': jieMIngcs})
+        $('#manConDDp6').css({'opacity': jieMIngcs})
+        $('#manConDDp7').css({'opacity': jieMIngcs})
+        // 偏移
+        $('#manConDD1').css({'transform': `translate(0, ${(1 - jiesaoopacity) * 293}px)`})
+        $('#manConDD2').css({'transform': `translate(-${(1 - jiesaoopacity) * 362}px, ${(1 - jiesaoopacity) * 123}px)`})
+        $('#manConDD3').css({'transform': `translate(-${(1 - jiesaoopacity) * 362}px, -${(1 - jiesaoopacity) * 141}px)`})
+        $('#manConDD4').css({'transform': `translate(-${(1 - jiesaoopacity) * 162}px, -${(1 - jiesaoopacity) * 339}px)`})
+        $('#manConDD5').css({'transform': `translate(${(1 - jiesaoopacity) * 162}px, -${(1 - jiesaoopacity) * 339}px)`})
+        $('#manConDD6').css({'transform': `translate(${(1 - jiesaoopacity) * 362}px, -${(1 - jiesaoopacity) * 141}px)`})
+        $('#manConDD7').css({'transform': `translate(${(1 - jiesaoopacity) * 362}px, ${(1 - jiesaoopacity) * 123}px)`})
     }
     // 智能引擎滚动计算
     if(currentTop > znyqTop && currentTop < (znyqTop + screenHeight) && currentTop < 3000) {

fhKeeper/formulahousekeeper/timesheet/src/views/quanx/quanx.vue

@@ -2,7 +2,7 @@
   <div>
       <!-- 表头 -->
       <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
-          <el-form :inline="true" style="width: 87%">
+          <el-form :inline="true" style="width: 100%">
               <el-form-item label="角色权限">
               </el-form-item>
               <el-form-item >
@@ -12,7 +12,7 @@
                   </el-input>
                   </div>
               </el-form-item>
-              <el-form-item style="float: right">
+              <el-form-item style="float: right;padding-right: 125px">
                   <el-link type="primary" :underline="false" @click="handleAdd('添加角色', '立即添加')">添加角色</el-link>
                   <el-link type="primary" :underline="false" @click="modify()" style="margin-left: 20px;">修改默认角色</el-link>
               </el-form-item>
@@ -26,7 +26,7 @@
             </template>
         </el-table-column>
         <el-table-column prop="roleDescribe" label="描述"></el-table-column>
-        <el-table-column prop="date" label="操作">
+        <el-table-column prop="date" label="操作" fixed="right" width="400px">
             <template slot-scope="scope">
                 <div>
                     <el-button size="small" @click="handleAdd('编辑角色', '立即修改', scope.row)" :style="scope.row.rolename != '超级管理员' ? '' : 'visibility:hidden;'">编辑角色</el-button>