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,
             hit:false,
-            timeOutEvent: 0 // 长按事件定时器
+            timeOutEvent: 0, // 长按事件定时器
+            startPageY:0,
+            currentPageY:0,
+            btnHeight:40,
+            titles:['点击看展','参加云展','往届博博会'],
+            jumpUrl:['',
+              'http://www.expo-museums.com/Index/history/column/143',
+              'http://www.expo-museums.com/Index/column/id/162'],
         }
     },
     methods:{
+        pageJump(url){
+            window.location.href = url;
+            console.log('jump');
+        },
         buttonList(){
             this.showButtonList = !this.showButtonList;
             console.log('buttonlist',this.showButtonList);
@@ -52,44 +68,65 @@ 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)
+            },1500)
         },
         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;
@@ -98,10 +135,8 @@ export default {
   transform: translateX(-50%);
   width: 18.9rem;
   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 +187,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

@@ -1,32 +1,40 @@
 <template>
-  <div id="guide" @click="contactControl">
+  <div id="guide" @click="openContactInfo">
     <img id="background1" src="@/assets/images/background.png" />
     <div id="contact">
-      <img id="contactButton" 
-        @click="isShowContact=!isShowContact" 
-        src="@/assets/images/contactbutton.png"/>
+      <img
+        id="contactButton"
+        @click="isShowContact = !isShowContact"
+        src="@/assets/images/contactbutton.png"
+      />
       <div id="info" v-show="isShowContact">
-        <img id="contactInfo" src="@/assets/images/contactinfo.png"/>
+        <img id="contactInfo" src="@/assets/images/contactinfo.png" />
         <div id="phone">
           <div class="contact-title">
-            <img class="img-contact" src='@/assets/images/phoneIcon.png'/>
-            商务合作电话：</div>
-          <div class="contact-content"
-            v-for="(phoneNumber,index) of phones" 
-            :key="index">
-            {{phoneNumber}}</div>
+            <img class="img-contact" src="@/assets/images/phoneIcon.png" />
+            商务合作电话：
+          </div>
+          <div
+            class="contact-content"
+            v-for="(phoneNumber, index) of phones"
+            :key="index"
+          >
+            {{ phoneNumber }}
+          </div>
         </div>
         <div id="email">
           <div class="contact-title">
-            <img class="img-contact" src='@/assets/images/emailIcon.png'/>
-            商务合作邮箱：</div>
-            <div class="contact-content">{{email}}</div>
+            <img class="img-contact" src="@/assets/images/emailIcon.png" />
+            商务合作邮箱：
+          </div>
+          <div class="contact-content">{{ email }}</div>
         </div>
         <div id="weChat">
           <div class="contact-title">
-            <img class="img-contact" src='@/assets/images/wechatIcon.png'/>
-            商务合作微信：</div>
-            <div class="qrcode"><img src='@/assets/images/qrcode.png'/></div>
+            <img class="img-contact" src="@/assets/images/wechatIcon.png" />
+            商务合作微信：
+          </div>
+          <div class="qrcode"><img class="img-qrcode" src="@/assets/images/qrcode.png" /></div>
         </div>
       </div>
     </div>
@@ -35,26 +43,37 @@
 </template>
 
 <script>
-import GuideButton from './GuideButton.vue';
+import GuideButton from "./GuideButton.vue";
 export default {
   components: { GuideButton },
   name: "GuidePage",
-  props: {},
   data() {
     return {
       isShowContact: false,
-      phones:['13581625033（黎先生）','15733737800（刘小姐）'],
-      email:'sales@4dage.com',
+      phones: ["13581625033（黎先生）", "15733737800（刘小姐）"],
+      email: "sales@4dage.com",
+      buttoInGuidePage: {
+        titles: ["点击看展", "参加云展", "往届博博会"],
+      },
     };
   },
   methods: {
-    contactControl(event) {
-        console.log(event.target.id,2);
+    openContactInfo(event) {
+      let contactId = [
+        "contactButton",
+        "contactInfo",
+        "phone",
+        "email",
+        "weChat",
+      ];
       if (
-        event.target.id != "contactButton" &&
-        event.target.id != "contactInfo"
+        !contactId.includes(event.target.id) &&
+        ![].slice.call(event.target.classList).includes("contact-content") &&
+        ![].slice.call(event.target.classList).includes("contact-title") && 
+        ![].slice.call(event.target.classList).includes("img-qrcode")
       ) {
         this.isShowContact = false;
+
         //TODO:测试下点击其他组件时能不能收回
       }
     },
@@ -79,7 +98,7 @@ export default {
   width: 3.6rem;
   height: 3.6rem;
 }
-@media screen and (min-width:780px){
+@media screen and (min-width: 780px) {
   #contact {
     position: absolute;
     right: 0.5rem;
@@ -88,91 +107,92 @@ export default {
     height: 3.6rem;
   }
 }
-#contactButton{
-  width:3.6rem;
-  height:3.6rem;
+#contactButton {
+  width: 3.6rem;
+  height: 3.6rem;
 }
-#info{
-  position:absolute;
-  right:1rem;
-  top:3.6rem;
-  width:20.7rem;
-  height:27.3rem;
+#info {
+  position: absolute;
+  right: 1rem;
+  top: 3.6rem;
+  width: 20.7rem;
+  height: 27.3rem;
 }
-#contactInfo{
-  width:100%;
+#contactInfo {
+  width: 100%;
   height: 100%;
   opacity: 0.8;
 }
-#phone{
-  position:absolute;
-  top:2rem;
-  left:50%;
+#phone {
+  position: absolute;
+  top: 2rem;
+  left: 50%;
   transform: translateX(-50%);
-  width:13.3rem;
-  height:4.4rem;
+  width: 13.3rem;
+  height: 4.4rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-#info .contact-title{
+#info .contact-title {
   width: 9.8rem;
   height: 1.3rem;
   font-size: 1rem;
   font-family: Microsoft YaHei;
   font-weight: 400;
-  color: #D06814;
+  color: #d06814;
   opacity: 1;
 }
-.contact-content{
+.contact-content {
   position: relative;
-  left:2.5rem;
-  color:#ffffff;
+  left: 2.5rem;
+  color: #ffffff;
   font-size: 0.9rem;
   text-align: left;
 }
-#email{
-  position:absolute;
-  top:11rem;
-  left:50%;
+#email {
+  position: absolute;
+  top: 11rem;
+  left: 50%;
   transform: translateX(-50%);
-  width:13.3rem;
-  height:3.1rem;
+  width: 13.3rem;
+  height: 3.1rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-div.qrcode{
-  width:4.6rem;
-  height:4.6rem;
+div.qrcode {
+  width: 4.6rem;
+  height: 4.6rem;
 }
-.qrcode>img{
+.qrcode > img {
   position: relative;
-  width:100%;
-  left:2.5rem;
-  top:1.3rem
+  width: 100%;
+  left: 2.5rem;
+  top: 1.3rem;
 }
 
-#weChat{
-  position:absolute;
-  top:18rem;
-  left:50%;
+#weChat {
+  position: absolute;
+  top: 18rem;
+  left: 50%;
   transform: translateX(-50%);
-  width:13.3rem;
+  width: 13.3rem;
 }
-img.img-contact{
-  width:1.4rem;
-  height:1.4rem;
+img.img-contact {
+  width: 1.4rem;
+  height: 1.4rem;
   vertical-align: sub;
-  margin-right:0.3rem;
+  margin-right: 0.3rem;
+  pointer-events: none;
 }
 
-#guide-button{
+#guide-button {
   position: absolute;
-  top:38.1rem;
-  left:50%;
-  width:18.9rem;
-  height:9.4rem;
-  transform: translateX(-50%);;
+  top: 38.1rem;
+  left: 50%;
+  width: 18.9rem;
+  height: 9.4rem;
+  transform: translateX(-50%);
 }
 </style>