瀏覽代碼

Merge branch 'master' of https://dev.33.cn/tenggouwa/agent

tenggouwa 7 年之前
父節點
當前提交
137dfaae86
共有 1 個文件被更改,包括 62 次插入12 次删除
  1. 62 12
      src/views/home/home.vue

+ 62 - 12
src/views/home/home.vue

@@ -55,7 +55,7 @@
           </el-carousel-item>
         </el-carousel>
         
-        <div class="button-line-box">
+        <div class="button-line-box" :class="{buttonLineBox:isStart}">
           <div class="button-line">
             <div class="about-line">
               <h3>ABOUT</h3>
@@ -65,15 +65,20 @@
               <p class="word-tip">精选主流币种</p>
               <p class="word-tip">多种报价模式</p>
             </div>
-            <div class="button-line">         
-              <button class="btn1">申请代理</button>
-              <!-- <button class="btn2">在线咨询</button> -->
-              <span class="phoneNum">热线电话:4001-566-899</span>
-            </div>          
-          </div>       
+          </div>
+          <div class="button-line" v-show="isStart">
+            <button class="btn1">申请代理</button>
+            <!-- <button class="btn2">在线咨询</button> -->
+            <span class="phoneNum">热线电话:4001-566-899</span>
+          </div>    
         </div>       
         <loginPart></loginPart>                
       </div>
+      <div class="fixLine" v-show="isNotStart">
+        <button class="btn1">申请代理</button>
+        <!-- <button class="btn2">在线咨询</button> -->
+        <span class="phoneNum">热线电话:4001-566-899</span>
+      </div>
       <div class="coin-block">
         <div class="tras-block">
           <ul v-for="(item,index) in coinBlock">
@@ -224,6 +229,8 @@ export default{
       ],
       sectionState:1,
       requtime:'',//轮询计时器
+      isStart:true,
+      isNotStart:false,
     }
   },
   watch:{
@@ -299,6 +306,13 @@ export default{
       let that=this;
       window.onscroll=()=>{
         let num=parseInt(document.documentElement.scrollTop);
+        if(num>=800){
+          this.isStart = false;
+          this.isNotStart = true;
+        }else{
+          this.isStart = true;
+          this.isNotStart = false;
+        }
         if(num<=800){
           this.sectionState=1;
         }
@@ -313,7 +327,7 @@ export default{
         }
         if(num>3200){
           this.sectionState=5;
-        }        
+        }
       };
     },
     
@@ -335,6 +349,40 @@ export default{
 <style>
 .home-content{
   /*padding-top: 75px;*/
+  .fixLine{
+    position: fixed;
+    bottom: 0px;
+    height: 80px;
+    background-color: rgba(0,0,0,0.6);
+    z-index: 11;
+    width: 100%;
+    margin: 0 auto;
+    /* transition: all 0.5s ease; */
+    button{
+      width: 140px;
+      height: 40px;
+      border-radius: 20px;
+      border: 0;
+      font-size: 18px;
+      font-weight: bold;
+      margin-right: 60px;
+      cursor: pointer;
+    }
+    .btn1{
+      background-color: #1a6fa6;
+      color: #fff;
+    }
+    .btn2{
+      color: #1a6fa6;
+      background-color: #fff;
+    }
+    .phoneNum{
+      line-height: 80px;
+      color: #fff;
+      font-size: 25px;
+      font-weight: bold;
+    }
+  }
   .statement-box{
     .el-dialog{
       width: 1100px; 
@@ -766,13 +814,16 @@ export default{
       }
     }
   }
-  
-  .button-line-box{
+  .buttonLineBox{
+    height: 100px;
     background-color: rgba(0,0,0,0.46);
+  } 
+  .button-line-box{
+    /* height: 100px;
+    background-color: rgba(0,0,0,0.46); */
     position: absolute;
     bottom: 0;
     z-index: 10;
-    height: 100px;
     text-align: center;
     width: 100%;
     color: #fff;  
@@ -816,7 +867,6 @@ export default{
     width: 1200px;
     margin: 0 auto;
     position: relative;
-
     button{
       width: 140px;
       height: 40px;