|
|
@@ -0,0 +1,335 @@
|
|
|
+<template>
|
|
|
+ <div id="guide-button">
|
|
|
+ <template v-if="showButtonList">
|
|
|
+ <div id="old-exhibition1" v-if="titles[4]" @click="isShow(e)">
|
|
|
+ <img
|
|
|
+ class="exbutton"
|
|
|
+ :class="[btnIndex == 4 ? 'hit' : '']"
|
|
|
+ src="@/assets/images/exbutton.png"
|
|
|
+ />
|
|
|
+ <div class="button-text black-text">
|
|
|
+ <a :href="jumpUrl[4]" :class="[btnIndex == 4 ? 'hit' : '']">
|
|
|
+ {{ titles[e] }}</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="old-exhibition2" v-if="titles[3]" @click="isShow(d)">
|
|
|
+ <img
|
|
|
+ class="exbutton"
|
|
|
+ :class="[btnIndex == 3 ? 'hit' : '']"
|
|
|
+ src="@/assets/images/exbutton.png"
|
|
|
+ />
|
|
|
+ <div class="button-text black-text">
|
|
|
+ <a :href="jumpUrl[3]" :class="[btnIndex == 3 ? 'hit' : '']">
|
|
|
+ {{ titles[d] }}</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="old-exhibition" @click="isShow(c)">
|
|
|
+ <img
|
|
|
+ class="exbutton"
|
|
|
+ :class="[btnIndex == 2 ? 'hit' : '']"
|
|
|
+ src="@/assets/images/exbutton.png"
|
|
|
+ />
|
|
|
+ <div class="button-text black-text">
|
|
|
+ <a :href="jumpUrl[2]" :class="[btnIndex == 2 ? 'hit' : '']">
|
|
|
+ {{ titles[c] }}</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="cloud-exhibition" @click="isShow(b)">
|
|
|
+ <img
|
|
|
+ class="exbutton"
|
|
|
+ :class="[btnIndex == 1 ? 'hit' : '']"
|
|
|
+ src="@/assets/images/exbutton.png"
|
|
|
+ />
|
|
|
+ <div class="button-text black-text">
|
|
|
+ <a :href="jumpUrl[1]" :class="[btnIndex == 1 ? 'hit' : '']">
|
|
|
+ {{ titles[b] }}</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">
|
|
|
+ <img
|
|
|
+ class="exbutton"
|
|
|
+ @touchstart="goStart"
|
|
|
+ @touchmove="goMove"
|
|
|
+ @touchend="goEnd"
|
|
|
+ src="@/assets/images/mainbutton.png"
|
|
|
+ />
|
|
|
+ <div class="button-text">
|
|
|
+ <a :href="jumpUrl[0]">{{ titles[a] }}</a>
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ :class="[showButtonList ? '' : 'arrowDown', 'arrow']"
|
|
|
+ src="@/assets/images/arrow.png"
|
|
|
+ @click.self="buttonList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ titles: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ jumpUrl: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "GuideButton",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ a: 0,
|
|
|
+ b: 1,
|
|
|
+ c: 2,
|
|
|
+ d: 3,
|
|
|
+ e: 4,
|
|
|
+ showButtonList: false,
|
|
|
+ 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: {
|
|
|
+ change(val) {
|
|
|
+ if (val===undefined) return;
|
|
|
+ console.log(val);
|
|
|
+ // if(val===1) val='德国博物馆'
|
|
|
+ // else if(val===2) val='南京博物馆'
|
|
|
+ // else if(val===3) val='南通博物馆'
|
|
|
+ // else if(val===4) val='广东省博物馆'
|
|
|
+ // else val='高淳博物馆'
|
|
|
+ if (val === 0) {
|
|
|
+ this.a = val;
|
|
|
+ this.b = val + 1;
|
|
|
+ this.c = val + 2;
|
|
|
+ this.d = val + 3;
|
|
|
+ this.e = val + 4;
|
|
|
+ }
|
|
|
+ if (val === 1) {
|
|
|
+ this.a = val;
|
|
|
+ this.b = val + 1;
|
|
|
+ this.c = val + 2;
|
|
|
+ this.d = val + 3;
|
|
|
+ this.e = val - 1;
|
|
|
+ }
|
|
|
+ if (val === 2) {
|
|
|
+ this.a = val;
|
|
|
+ this.b = val + 1;
|
|
|
+ this.c = val + 2;
|
|
|
+ this.d = val - 1;
|
|
|
+ this.e = val - 2;
|
|
|
+ }
|
|
|
+ if (val === 3) {
|
|
|
+ this.a = val;
|
|
|
+ this.b = val + 1;
|
|
|
+ this.c = val - 1;
|
|
|
+ this.d = val - 2;
|
|
|
+ this.e = val - 3;
|
|
|
+ }
|
|
|
+ if (val === 4) {
|
|
|
+ this.a = val;
|
|
|
+ this.b = val - 1;
|
|
|
+ this.c = val - 2;
|
|
|
+ this.d = val - 3;
|
|
|
+ this.e = val - 4;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isShow(val) {
|
|
|
+ this.buttonList();
|
|
|
+ this.change(val);
|
|
|
+ },
|
|
|
+ pageJump(url) {
|
|
|
+ window.location.href = url;
|
|
|
+ // console.log('jump');
|
|
|
+ },
|
|
|
+ buttonList() {
|
|
|
+ this.showButtonList = !this.showButtonList;
|
|
|
+ // console.log('buttonlist',this.showButtonList);
|
|
|
+ },
|
|
|
+ goStart(event) {
|
|
|
+ let _this = this;
|
|
|
+ event.preventDefault();
|
|
|
+ clearTimeout(_this.timeOutEvent);
|
|
|
+ let touch = event.targetTouches[0];
|
|
|
+ // console.log('起点',touch.pageY);
|
|
|
+ this.startPageY = touch.pageY;
|
|
|
+ // 开始触摸
|
|
|
+ _this.timeOutEvent = setTimeout(() => {
|
|
|
+ _this.timeOutEvent = 0;
|
|
|
+ // console.log('处理长按事件');
|
|
|
+ this.showButtonList = true;
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ goMove(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ let touch = event.targetTouches[0];
|
|
|
+ // console.log('移动中',touch.pageY);
|
|
|
+ //1379-1440
|
|
|
+ this.currentPageY = touch.pageY;
|
|
|
+ },
|
|
|
+ goEnd() {
|
|
|
+ // 触发切换事件
|
|
|
+ let temp;
|
|
|
+ if (this.btnIndex === 4) temp = this.e;
|
|
|
+ if (this.btnIndex === 3) temp = this.d;
|
|
|
+ if (this.btnIndex === 2) temp = this.c;
|
|
|
+ if (this.btnIndex === 1) temp = this.b;
|
|
|
+ if (this.btnIndex === 0) temp = this.a;
|
|
|
+ this.change(temp);
|
|
|
+// 1228 1260
|
|
|
+ // let _this = this;
|
|
|
+ clearTimeout(this.timeOutEvent);
|
|
|
+ // _this.timeOutEvent !== 0
|
|
|
+
|
|
|
+ // 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:henter .button-text{
|
|
|
+ color:#ffffff;
|
|
|
+} */
|
|
|
+.hit {
|
|
|
+ transform: scale(1.03);
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 1s ease;
|
|
|
+}
|
|
|
+#mainbutton {
|
|
|
+ position: absolute;
|
|
|
+ top: 5.6rem;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 18.9rem;
|
|
|
+ height: 4.3rem;
|
|
|
+ /* background: linear-gradient(180deg, #D16914, transparent);
|
|
|
+ border-radius: 6px;*/
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+#old-exhibition1,
|
|
|
+#old-exhibition2 {
|
|
|
+ position: absolute;
|
|
|
+ top: -5.6rem;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 18.9rem;
|
|
|
+ height: 4.3rem;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+#old-exhibition2 {
|
|
|
+ top: -2.8rem;
|
|
|
+}
|
|
|
+a {
|
|
|
+ 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>
|
