左上角”联系“按钮完成

src/components/GuideButton.vue

@@ -44,15 +44,15 @@ export default {
     data(){
         return{
             showButtonList:false,
-            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, // 长按事件定时器
             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:{
@@ -76,7 +76,7 @@ export default {
                 _this.timeOutEvent = 0
                 console.log('处理长按事件');
                 this.showButtonList = true;
-            }, 1000)
+            },1500)
         },
         goMove(event) {
             event.preventDefault();
@@ -89,14 +89,13 @@ export default {
             clearTimeout(this.timeOutEvent)
             if(_this.timeOutEvent !== 0){
                 console.log('处理单击事件');
-                this.pageJump(this.jumpUrl[0]);
+                // 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，而需要在切换页面之后恢复原状，所以要改变
             }
@@ -136,7 +135,6 @@ export default {
   transform: translateX(-50%);
   width: 18.9rem;
   height: 4.3rem;
-  z-index:9999;
   /* background: linear-gradient(180deg, #D16914, transparent);
   border-radius: 6px;*/
 }

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;
+  top: 38.1rem;
+  left: 50%;
+  width: 18.9rem;
+  height: 9.4rem;
   transform: translateX(-50%);
 }
 </style>