弹出按钮

src/components/GuideButton.vue

@@ -0,0 +1,158 @@
+<template>
+    <div id="guide-button">
+        <template v-if="showButtonList">
+        <div id="old-exhibition">
+            <img class="exbutton" 
+                id='bt1'
+                src="@/assets/images/exbutton.png"/>
+            <div class="button-text black-text">
+            <a :href="oldUrl">往届博博会</a></div></div>
+        <div id="cloud-exhibition">
+            <img class="exbutton" 
+                id='bt2'
+                src="@/assets/images/exbutton.png"/>
+            <div class="button-text black-text">
+            <a :href="cloudUrl">参加云展</a></div></div>
+        </template>
+        <div id="mainbutton" >
+            <img class="exbutton" 
+                @touchstart='goStart' 
+                @touchmove='goMove'
+                @touchend="goEnd"
+                id='bt3'
+                src="@/assets/images/mainbutton.png"/>
+            <div class="button-text"><a :href="clickUrl">点击看展</a></div>
+            <img :class="[showButtonList?'':'arrowDown','arrow']"
+                src="@/assets/images/arrow.png"
+                @click.self="buttonList"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name:'GuideButton',
+    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 // 长按事件定时器
+        }
+    },
+    methods:{
+        buttonList(){
+            this.showButtonList = !this.showButtonList;
+            console.log('buttonlist',this.showButtonList);
+        },
+        goStart(event) {
+            let _this = this;
+            event.preventDefault();
+            clearTimeout(_this.timeOutEvent);
+            // 开始触摸
+            _this.timeOutEvent = setTimeout(() => {
+                // 长按3秒
+                
+                _this.timeOutEvent = 0
+                console.log('处理长按事件');
+                this.showButtonList = true;
+            }, 2000)
+        },
+        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);
+        },
+        goEnd(){
+            let _this = this;
+            clearTimeout(this.timeOutEvent)
+            if(_this.timeOutEvent !== 0){
+                console.log('处理单击事件')
+            }else{
+                console.log('处理长按结束事件');
+                this.showButtonList = false;
+            }
+        }
+    }
+}
+</script>
+
+
+<style scoped>
+#guide-button>div:hover .button-text{
+    color:#ffffff;
+}
+#mainbutton {
+  position: absolute;
+  top:5.6rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 18.9rem;
+  height: 4.3rem;
+  z-index:9999;
+  /* background: linear-gradient(180deg, #D16914, transparent);
+  border-radius: 6px;
+  opacity: 0.8; */
+}
+.arrow{
+    position: inherit;
+    top:30%;
+    right:1.7rem;
+    width:1.2rem;
+}
+.arrow.arrowDown{
+    transform-origin: center;
+    transform:rotate(180deg);
+
+}
+.exbutton{
+    width:18.9rem;
+    opacity: 0.8;
+}
+div.button-text{
+    position:absolute;
+    top:40%; left:50%;
+    transform:translate(-50%,-50%);
+    display: block;
+    text-align: center;
+    font-weight: normal;
+    color: #ffffff;
+    font-size: 1rem;
+    font-family: "Microsoft YaHei", "serif";
+    opacity: 1;
+}
+div.black-text{
+    color:#000000;
+}
+#cloud-exhibition{
+    position: absolute;
+    top:2.8rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 18.9rem;
+    height: 4.3rem;
+    z-index:999;
+}
+#old-exhibition{
+    position: absolute;
+    top:0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 18.9rem;
+    height: 4.3rem;
+    z-index:999;
+}
+a{
+    text-decoration: inherit;
+    color:inherit;
+}
+</style>

src/components/GuidePage.vue

@@ -1,31 +1,50 @@
 <template>
   <div id="guide" @click="contactControl">
-    <img id="background1" src="@/assets/images/demobackground.png" />
+    <img id="background1" src="@/assets/images/background.png" />
     <div id="contact">
       <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"/>
-        <div id="phone"></div>
-        <div id="email"></div>
-        <div id="weChat"></div>
+        <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>
+        </div>
+        <div id="email">
+          <div class="contact-title">
+            <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>
+        </div>
       </div>
     </div>
-    <div id="button"><p>点击看展</p></div>
-    <template v-if="show">
-      <div class="orther-button"></div>
-    </template>
+    <guide-button></guide-button>
   </div>
 </template>
 
 <script>
+import GuideButton from './GuideButton.vue';
 export default {
+  components: { GuideButton },
   name: "GuidePage",
   props: {},
   data() {
     return {
       isShowContact: false,
+      phones:['13581625033（黎先生）','15733737800（刘小姐）'],
+      email:'sales@4dage.com',
     };
   },
   methods: {
@@ -60,7 +79,16 @@ export default {
   width: 3.6rem;
   height: 3.6rem;
 }
-#contact img{
+@media screen and (min-width:780px){
+  #contact {
+    position: absolute;
+    right: 0.5rem;
+    top: 1rem;
+    width: 3.6rem;
+    height: 3.6rem;
+  }
+}
+#contactButton{
   width:3.6rem;
   height:3.6rem;
 }
@@ -71,29 +99,80 @@ export default {
   width:20.7rem;
   height:27.3rem;
 }
-#info img{
+#contactInfo{
   width:100%;
   height: 100%;
   opacity: 0.8;
 }
-#button {
-  position: absolute;
-  top: 47.1rem;
-  left: 50%;
+#phone{
+  position:absolute;
+  top:2rem;
+  left:50%;
   transform: translateX(-50%);
-  width: 18.9rem;
-  height: 4.3rem;
-  background: linear-gradient(180deg, #d06814, transparent);
-  border-radius: 6px;
-  opacity: 0.8;
+  width:13.3rem;
+  height:4.4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-#button p {
-  display: block;
-  text-align: center;
-  font-weight: normal;
-  color: #ffffff;
+#info .contact-title{
+  width: 9.8rem;
+  height: 1.3rem;
   font-size: 1rem;
-  font-family: "Microsoft YaHei", "serif";
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #D06814;
   opacity: 1;
 }
+.contact-content{
+  position: relative;
+  left:2.5rem;
+  color:#ffffff;
+  font-size: 0.9rem;
+  text-align: left;
+}
+#email{
+  position:absolute;
+  top:11rem;
+  left:50%;
+  transform: translateX(-50%);
+  width:13.3rem;
+  height:3.1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+div.qrcode{
+  width:4.6rem;
+  height:4.6rem;
+}
+.qrcode>img{
+  position: relative;
+  width:100%;
+  left:2.5rem;
+  top:1.3rem
+}
+
+#weChat{
+  position:absolute;
+  top:18rem;
+  left:50%;
+  transform: translateX(-50%);
+  width:13.3rem;
+}
+img.img-contact{
+  width:1.4rem;
+  height:1.4rem;
+  vertical-align: sub;
+  margin-right:0.3rem;
+}
+
+#guide-button{
+  position: absolute;
+  top:38.1rem;
+  left:50%;
+  width:18.9rem;
+  height:9.4rem;
+  transform: translateX(-50%);;
+}
 </style>