Browse Source

管家官网修改定价展现形式,添加使用说明完成

Lljy-ai 4 years ago
parent
commit
5d97f021f3

+ 37 - 0
fhKeeper/formulahousekeeper/inva_4_tivo/css/revision.css

@@ -94,4 +94,41 @@
 .popups {
     position: absolute;
     /* background: ; */
+}
+
+/* 使用说明样式 */
+.instructions {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    position: absolute;
+    top: 0;
+    z-index: 9999;
+}
+.popup {
+    width: 40rem;
+    height: 20rem;
+    margin: auto;
+    box-sizing: border-box;
+    background: #fff;
+    margin-top: 8.333333rem;
+    position: relative;
+    z-index: 999999999999999999999;
+}
+.use {
+    padding: 1rem;
+    height: 3.5rem;
+}
+.use h5 {
+    float: left;
+}
+.use span {
+    float: right;
+    cursor:pointer;
+}
+.use span:hover {
+    color: red;
+}
+.docums {
+    padding: 3rem 1rem 0 1rem;
 }

+ 44 - 8
fhKeeper/formulahousekeeper/inva_4_tivo/index.html

@@ -37,7 +37,7 @@
     </script>
     
 </head>
-<body data-spy="scroll" data-target=".fixed-top">
+<body data-spy="scroll" data-target=".fixed-top" style="overflow-y:none">
 	<div class="spinner-wrapper">
         <div class="spinner">
             <div class="bounce1"></div>
@@ -122,7 +122,7 @@
                                 </a>
                                 <a class="btn-solid-lg page-scroll" href="http://worktime.ttkuaiban.com/#/login" target="_blank">免费使用</a>
                                 <a class="btn-solid-lg page-scroll" href="./mobile.html" target="_blank">手机版</a>
-                                <!-- <span id="xyz" class="btn-solid-lg page-scroll" >使用说明</span> -->
+                                <span id="xyz" style="color: #555555;" class="btn-solid-lg btn-solid-lg-white page-scroll overload">使用说明</span>
                             </div>
                         </div>
                     </div>
@@ -131,10 +131,47 @@
         </div>
     </header>
 
+    <!-- 使用说明弹出层 -->
+    <div class="instructions" id="instructions" style="display: none;">
+        <div class="popup" id="popup">
+            <div class="use">
+                <h5>使用说明</h5>
+                <span id="colse">X</span>
+            </div>
+            <div class="docums">
+                <p><a style="color:#409EFF;text-decoration:none" href="http://worktime.ttkuaiban.com/upload/工时管家使用说明_管理员.docx" download="工时管家使用说明_管理员.docx" 
+                    target="_blank">工时管家使用说明_管理员.docx</a></p>
+                <p><a style="color:#409EFF;text-decoration:none" href="http://worktime.ttkuaiban.com/upload/工时管家使用说明_项目经理.docx" download="工时管家使用说明_项目经理.docx" 
+                    target="_blank">工时管家使用说明_项目经理.docx</a></p>
+                <p><a style="color:#409EFF;text-decoration:none" href="http://worktime.ttkuaiban.com/upload/工时管家使用说明_普通员工.docx" download="工时管家使用说明_普通员工.docx" 
+                    target="_blank">工时管家使用说明_普通员工.docx</a></p>
+                <p><a style="color:#409EFF;text-decoration:none" href="http://worktime.ttkuaiban.com/upload/团队协作使用文档.docx" download="团队协作使用文档.docx" 
+                    target="_blank">团队协作使用文档.docx</a></p>
+            </div>
+        </div>
+    </div>
+
     <script type="text/javascript">
-        let cli = document.getElementById('xyz')
+        let cli = document.getElementById('xyz') // 首页使用说明的按钮
+        let colse = document.getElementById('colse') // 使用说明弹出层关闭按钮
+        let instructions = document.getElementById('instructions') // 使用说明弹出层
+        let popup = document.getElementById('popup') // 使用说明中间白色内容部分
+        let bod = document.getElementsByTagName("body")[0] // body 元素
         cli.addEventListener('click', function(){
-            
+            instructions.style['display'] = 'block'
+            bod.style['overflow'] = 'hidden'
+        })
+        colse.addEventListener('click', function(){
+            instructions.style['display'] = 'none'
+            bod.style['overflow'] = ''
+        })
+        instructions.addEventListener('click', function(){
+            instructions.style['display'] = 'none'
+            bod.style['overflow'] = ''
+        })
+        popup.addEventListener('click', function(event){
+            event.stopPropagation()
+            console.log(event);
         })
     </script>
 
@@ -521,7 +558,7 @@
                 <div id="common" class="common simple">
                     <div class="upper">
                         <p>简易版</p>
-                        <p>¥100人/年</p>
+                        <p>¥100/人/年</p>
                         <span> <a href="http://worktime.ttkuaiban.com/#/login" target="_blank">立即注册</a></span>
                     </div>
                     <div class="middle">
@@ -529,7 +566,6 @@
                         <p><i><img src="../timesheet/src/assets/image/dui.png" alt=""></i>30个项目数</p>
                     </div>
                     <div class="whole">
-                        <p><i><img src="../timesheet/src/assets/image/dui.png" alt=""></i>系统设置</p>
                         <p><i><img src="../timesheet/src/assets/image/dui.png" alt=""></i>系统设置</p>
                         <p><i><img src="../timesheet/src/assets/image/dui.png" alt=""></i>工时填报</p>
                         <p><i><img src="../timesheet/src/assets/image/dui.png" alt=""></i>工时审核</p>
@@ -541,7 +577,7 @@
                 <div id="common" class="common basics">
                     <div class="upper">
                         <p class="sale">基础版</p>
-                        <p>¥250人/年</p>
+                        <p>¥250/人/年</p>
                         <span><a href="http://worktime.ttkuaiban.com/#/login" target="_blank">立即注册</a></span>
                     </div>
                     <div class="middle">
@@ -564,7 +600,7 @@
                 <div id="common" class="common specialty">
                     <div class="upper">
                         <p>专业版</p>
-                        <p>¥350人/年</p>
+                        <p>¥350/人/年</p>
                         <span><a href="http://worktime.ttkuaiban.com/#/login" target="_blank">立即注册</a></span>
                     </div>
                     <div class="middle">