dev/dcp-web-gate/src_old/views/routerItem.vue

<template>
	<div>
		<div class="heard">
			<HeaderItem :selectShow="selectShow"></HeaderItem>
			<!-- <button id="change" @click="click">中英文切换</button>
              <div>{{ $t('common.home')}}</div> -->
			<tabers ref="child2Container"></tabers>
		</div>
		<router-view></router-view>
		<div style="clear: both"></div>
		<div style="width: 100%">
			<footers style="width: 100%"></footers>
		</div>
		<div
			style="
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(610px, -50%);
				width: 70px;
				background: #fff;
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
			"
		>
			<div
				style="
					width: 70px;
					height: 70px;
					background: #2a548c;
					text-align: center;
					font-size: 12px;
					color: #fff;
				"
				@click="toView('customerService')"
			>
				<img
					src="@/assets/img/home/footer/customerServiceexport@2x.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $t('common.Online') }}</div>
			</div>
			<div
				style="
					width: 70px;
					height: 70px;
					text-align: center;
					font-size: 12px;
					color: #666;
					border-bottom: 1px solid rgba(241, 241, 241, 1);
					cursor: pointer;
				"
				@mouseover="mouseOver"
				@mouseleave="mouseLeave"
			>
				<img
					src="@/assets/img/home/footer/QRcodeexport@2x.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $i18n.locale == 'zh' ? '手机网页版' : 'Mobile Web' }}</div>
			</div>
			<div
				ref="QRCode"
				id="qrcode"
				style="
					position: absolute;
					transform: translate(-120%, -50%);
					display: none;
				"
			></div>
			<div
				style="
					width: 70px;
					height: 70px;
					text-align: center;
					font-size: 12px;
					color: #666;
					border-bottom: 1px solid rgba(241, 241, 241, 1);
					cursor: pointer;
				"
				@click="ShareChange"
			>
				<img
					src="@/assets/img/home/footer/rectangle@2x.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $t('common.Share') }}</div>
			</div>
			<div
				style="position: absolute; transform: translate(90%, -90%)"
				v-show="ShareNum"
			>
				<!-- <vshare></vshare> -->
				<share style="width: 84px" :config="vshareConfig"></share>
			</div>
			<div
				style="
					width: 70px;
					height: 70px;
					text-align: center;
					font-size: 12px;
					color: #666;
					border-bottom: 1px solid rgba(241, 241, 241, 1);
					cursor: pointer;
				"
				@click="toView('appDownload')"
			>
				<img
					src="@/assets/img/home/footer/app.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $t('common.appDownload') }}</div>
			</div>
			<div
				style="
					width: 70px;
					height: 70px;
					text-align: center;
					font-size: 12px;
					color: #666;
					border-bottom: 1px solid rgba(241, 241, 241, 1);
					cursor: pointer;
				"
				@click="toView('home')"
			>
				<img
					src="@/assets/img/home/footer/home@2x.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $t('common.Home') }}</div>
			</div>
			<div
				class="cursor"
				style="
					width: 70px;
					height: 70px;
					text-align: center;
					display: none;
					font-size: 12px;
					color: #666;
					border-bottom: 1px solid rgba(241, 241, 241, 1);
				"
				@click="toUp"
				id="toUp"
			>
				<img
					src="@/assets/img/home/footer/BackTopexport@2x.png"
					alt=""
					style="width: 30px; margin-top: 10px"
				/>
				<div>{{ $t('common.Top') }}</div>
			</div>
		</div>
	</div>
</template>
<script>
import Cookies from 'js-cookie' //引入cookie操作依赖
import Bus from '@/api/bus' //注意引入
import HeaderItem from '@/components/headerItem'
import tabers from '@/components/taber'
import footers from '@/components/footers'
import Enterprise from '@/views/enterprise/Enterprise'
import QRCode from 'qrcodejs2'
import vshare from 'vshare'
import Share from 'vue-social-share'
export default {
	name: 'routerItem',
	components: { tabers, HeaderItem, footers, Enterprise, vshare, Share },
	data() {
		return {
			routerView: 'Enterprise',
			ShareNum: false,
			selectShow: true,
			vshareConfig: {
				shareList: [
					// 此处放分享列表（ID）
					'weixin',
				],
				common: {
					//此处放置通用设置
					bdUrl: window.location.href,
				},
				share: [
					{
						//此处放置分享按钮设置
					},
				],
				url: window.location.href.replace('#/', ''), // 网址，默认使用
				sites: ['wechat'],
				wechatQrcodeTitle: '',
				wechatQrcodeHelper: '<p>https://www.geidcp.com</p>',
				image: [
					//此处放置图片分享设置
				],
				selectShare: [
					//此处放置划词分享设置
				],
			},
			// id:this.$router.params.key,
		}
	},
	destroyed() {
		window.removeEventListener('scroll', this.scrollToTop)
	},

	watch: {
		'$route.path'() {
			let path = this.$route.path.substr(1)
			this.$store.commit('modify', path)
			window.localStorage.setItem('router', path)
		},
		$route(to, from) {
			// alert(to.path, form)
			if (to.path == '/WholeStationSearch') {
				this.selectShow = false
			} else {
				this.selectShow = true
			}
		},
		'$i18n.locale'() {
			this.qrcode()
		},
	},
	mounted() {
		if (window._bd_share_main) {
			window._bd_share_main.init()
		}

		let path = this.$route.path.substr(1)
		this.$store.commit('modify', path)
		window.localStorage.setItem('router', path)

		window.addEventListener('scroll', this.showbtn, true)
		// if(window.localStorage.getItem("router")){
		//   this.$store.commit('modify', localStorage.getItem("routerItem")?localStorage.getItem("routerItem"):localStorage.getItem("router"));
		// }
		let router = null
		Bus.$on('title', (val) => {
			if (val.router) {
				router = val.router
			}
		})
		// if(Cookies.get('login')){
		//   window.sessionStorage.setItem('token','res.data.token');
		// }else {
		//   window.sessionStorage.removeItem('token');
		// }
		// if( window.sessionStorage.setItem('token')){
		//   Cookies.get('login','login');
		// }else {
		//   // window.sessionStorage.removeItem('token');
		//   Cookies.remove('login');
		// }
		if (this.$route.query.key && this.$route.query.key.length > 0) {
			let query = this.$route.query
			this.$router.replace({
				name: router ? router : this.$store.state.router,
				query: {
					...query,
				},
			})
		} else {
			this.$router.replace({ name: this.$store.state.router })
		}
		// var sUserAgent = navigator.userAgent;
		// if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {
		//    this.$route.push('http://baidu.com');
		// } else {

		// }
	},

	methods: {
		qrcode() {
			document.getElementById('qrcode').innerHTML = ''
			this.url = window.location.href
			const that = this
			let qrcode = new QRCode('qrcode', {
				width: 132,
				height: 132,
				text: 'https://m.geidcp.com/#/?language=' + that.$i18n.locale, // 二维码地址
			})
		},
		ShareChange() {
			this.ShareNum = !this.ShareNum
		},
		save() {
			this.$refs.child2Container.getSave()
		},
		mouseOver() {
			// this.$refs['QRCode'][0].style.display='block';
			this.qrcode()
			this.ShareNum = false
			this.$refs['QRCode'].style.display = 'block'
		},
		mouseLeave() {
			this.$refs['QRCode'].style.display = 'none'
		},
		showbtn() {
			let topBtn = document.getElementById('toUp')
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop
			let browserHeight = window.outerHeight
			if (scrollTop > 400) {
				if (topBtn !== null) {
					topBtn.style.display = 'block'
				}
			} else {
				if (topBtn !== null) {
					topBtn.style.display = 'none'
				}
			}
		},
		// 返回顶部
		toUp() {
			// window.scrollTo(0,0);
			var timer = setInterval(function () {
				let osTop =
					document.documentElement.scrollTop || document.body.scrollTop
				let ispeed = Math.floor(-osTop / 5)
				document.documentElement.scrollTop = document.body.scrollTop =
					osTop + ispeed
				this.isTop = true
				if (osTop === 0) {
					clearInterval(timer)
				}
			}, 30)
		},
		toView(router, json) {
			this.$router.push({ name: router, query: { key: json } })
		},
	},
}
</script>
<style scoped>
.heard {
	height: 230px;
	margin: auto;
	width: 100%;
	background: url('../assets/img/home/banner2.jpg');
	background-size: 100% 230px;
	/* z-index: 99; */
	animation: panoramic 10s linear infinite;
	-moz-animation: panoramic 10s linear infinite;
	-o-animation: panoramic 10s linear infinite;
}
.heard:hover {
	animation-play-state: paused;
}

@-webkit-keyframes panoramic {
	0% {
		background-position: 0 0;
	}
	12% {
		background-position: 60% 10px;
	}
	25% {
		background-position: 120% 20px;
	}
	38% {
		background-position: 60% 10px;
	}
	50% {
		background-position: 0 0;
	}
	62% {
		background-position: -60% -10px;
	}
	75% {
		background-position: -120% -20px;
	}
	88% {
		background-position: -60% -10px;
	}
	100% {
		background-position: 0 0;
	}
}
@-moz-keyframes panoramic {
	0% {
		background-position: 0 0;
	}
	12% {
		background-position: 60% 10px;
	}
	25% {
		background-position: 120% 20px;
	}
	38% {
		background-position: 60% 10px;
	}
	50% {
		background-position: 0 0;
	}
	62% {
		background-position: -60% -10px;
	}
	75% {
		background-position: -120% -20px;
	}
	88% {
		background-position: -60% -10px;
	}
	100% {
		background-position: 0 0;
	}
}
@-o-keyframes panoramic {
	0% {
		background-position: 0 0;
	}
	12% {
		background-position: 60% 10px;
	}
	25% {
		background-position: 120% 20px;
	}
	38% {
		background-position: 60% 10px;
	}
	50% {
		background-position: 0 0;
	}
	62% {
		background-position: -60% -10px;
	}
	75% {
		background-position: -120% -20px;
	}
	88% {
		background-position: -60% -10px;
	}
	100% {
		background-position: 0 0;
	}
}
@keyframes panoramic {
	0% {
		background-position: 0 0;
	}
	12% {
		background-position: 60% 10px;
	}
	25% {
		background-position: 120% 20px;
	}
	38% {
		background-position: 60% 10px;
	}
	50% {
		background-position: 0 0;
	}
	62% {
		background-position: -60% -10px;
	}
	75% {
		background-position: -120% -20px;
	}
	88% {
		background-position: -60% -10px;
	}
	100% {
		background-position: 0 0;
	}
}
/* @keyframes panoramic {
    to {
        background-position: 100% 50px;
    }
  }  */
</style>