完成按钮特效与功能

src/components/GuideButton.vue

@@ -3,25 +3,35 @@
         <template v-if="showButtonList">
         <div id="old-exhibition">
             <img class="exbutton" 
-                id='bt1'
+                :class="[btnIndex == 2?'hit':'']"
                 src="@/assets/images/exbutton.png"/>
             <div class="button-text black-text">
-            <a :href="oldUrl">往届博博会</a></div></div>
+                <a :href="jumpUrl[2]"  
+                    :class="[btnIndex == 2?'hit':'']">
+                    {{titles[2]}}</a></div></div>
+
         <div id="cloud-exhibition">
             <img class="exbutton" 
-                id='bt2'
+                :class="[btnIndex == 1?'hit':'']"
                 src="@/assets/images/exbutton.png"/>
             <div class="button-text black-text">
-            <a :href="cloudUrl">参加云展</a></div></div>
+                <a :href="jumpUrl[1]"
+                     :class="[btnIndex == 1?'hit':'']">
+                    {{titles[1]}}</a></div></div>
+        </template>
+        <template v-else>
+            <div id='front'><img src='@/assets/images/front.png'/></div>
+            <div id="back"><img src='@/assets/images/back.png'/></div>
         </template>
-        <div id="mainbutton" >
+
+        <div id="mainbutton">
             <img class="exbutton" 
                 @touchstart='goStart' 
                 @touchmove='goMove'
-                @touchend="goEnd"
-                id='bt3'
+                @touchend='goEnd'
                 src="@/assets/images/mainbutton.png"/>
-            <div class="button-text"><a :href="clickUrl">点击看展</a></div>
+            <div class="button-text">
+                <a :href="jumpUrl[0]">{{titles[0]}}</a></div>
             <img :class="[showButtonList?'':'arrowDown','arrow']"
                 src="@/assets/images/arrow.png"
                 @click.self="buttonList"></div>
@@ -34,16 +44,22 @@ export default {
     data(){
         return{
             showButtonList:false,
-            cloudUrl:'http://www.expo-museums.com/Index/column/id/162',
-            oldUrl:'http://www.expo-museums.com/Index/history/column/143',
-            clickUrl:'',
-            startTime:0,
-            endTime:0,
+            jumpUrl:['http://www.baidu.com',
+                    'http://www.expo-museums.com/Index/history/column/143',
+                    'http://www.expo-museums.com/Index/column/id/162'],
             hit:false,
-            timeOutEvent: 0 // 长按事件定时器
+            timeOutEvent: 0, // 长按事件定时器
+            startPageY:0,
+            currentPageY:0,
+            btnHeight:40,
+            titles:['点击看展','参加云展','往届博博会'],
         }
     },
     methods:{
+        pageJump(url){
+            window.location.href = url;
+            console.log('jump');
+        },
         buttonList(){
             this.showButtonList = !this.showButtonList;
             console.log('buttonlist',this.showButtonList);
@@ -52,44 +68,66 @@ export default {
             let _this = this;
             event.preventDefault();
             clearTimeout(_this.timeOutEvent);
+            let touch = event.targetTouches[0];
+            console.log('起点',touch.pageY);
+            this.startPageY = touch.pageY;
             // 开始触摸
             _this.timeOutEvent = setTimeout(() => {
-                // 长按3秒
-                
                 _this.timeOutEvent = 0
                 console.log('处理长按事件');
                 this.showButtonList = true;
-            }, 2000)
+            }, 1000)
         },
         goMove(event) {
             event.preventDefault();
-            // 看具体需求
-            // clearTimeout(this.timeOutEvent)
-            // this.timeOutEvent = 0
-            console.log(event.targetTouches);
             let touch = event.targetTouches[0];
-            var ele = document.elementFromPoint(touch.pageX, touch.pageY);
-            // console.log(event.changedTouches);
-            console.log('移动中',ele);
+            console.log('移动中',touch.pageY);
+            this.currentPageY = touch.pageY;
         },
         goEnd(){
             let _this = this;
             clearTimeout(this.timeOutEvent)
             if(_this.timeOutEvent !== 0){
-                console.log('处理单击事件')
+                console.log('处理单击事件');
+                this.pageJump(this.jumpUrl[0]);
             }else{
                 console.log('处理长按结束事件');
+                if(this.btnIndex < this.titles.length
+                    && this.btnIndex >= 0){
+                    this.pageJump(this.jumpUrl[this.btnIndex]);
+                }
+                
                 this.showButtonList = false;
+                this.startPageY = this.currentPageY = 0; //因为computed会缓存btnIndex，而需要在切换页面之后恢复原状，所以要改变
             }
         }
-    }
+    },
+    computed:{
+        btnIndex:function(){
+            let index;
+            let relativeY = this.startPageY - this.currentPageY;
+            index = Math.floor(relativeY / this.btnHeight);
+            console.log(index);
+            return index;
+        },
+    }, 
+    beforeUpdate(){
+        this.btnHeight = document.getElementById('mainbutton').clientHeight / 1.7;
+        console.log('btnheight',this.btnHeight);
+    },
 }
 </script>
 
 
 <style scoped>
-#guide-button>div:hover .button-text{
+/* #guide-button>div:henter .button-text{
+    color:#ffffff;
+} */
+.hit{
+    transform: scale(1.03);
     color:#ffffff;
+    opacity:1;
+    transition: all 1s ease;
 }
 #mainbutton {
   position: absolute;
@@ -100,8 +138,7 @@ export default {
   height: 4.3rem;
   z-index:9999;
   /* background: linear-gradient(180deg, #D16914, transparent);
-  border-radius: 6px;
-  opacity: 0.8; */
+  border-radius: 6px;*/
 }
 .arrow{
     position: inherit;
@@ -152,7 +189,28 @@ div.black-text{
     z-index:999;
 }
 a{
-    text-decoration: inherit;
+    text-decoration: none;
     color:inherit;
 }
+
+#front{
+    position: absolute;
+    top:4.9rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width:18.1rem;
+}
+#front img{
+    width:100%;
+}
+#back{
+    position: absolute;
+    top:4.25rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width:16.2rem;
+}
+#back img{
+    width:100%;
+}
 </style>

src/components/GuidePage.vue

@@ -49,7 +49,7 @@ export default {
   },
   methods: {
     contactControl(event) {
-        console.log(event.target.id,2);
+        // console.log(event.target.id,2);
       if (
         event.target.id != "contactButton" &&
         event.target.id != "contactInfo"
@@ -173,6 +173,6 @@ img.img-contact{
   left:50%;
   width:18.9rem;
   height:9.4rem;
-  transform: translateX(-50%);;
+  transform: translateX(-50%);
 }
 </style>