gdy-web/src/home.vue

<template>
	<div class="all-box">
		<el-scrollbar class="mian-content" ref="scrollBarRef">
			<Header></Header>
			<div class="main">
				<router-view />
			</div>
			<Footer></Footer>
		</el-scrollbar>
		<!-- 右边漂浮框mos+ -->
		<div class="back-top-container" v-show="isShow">
			<div class="yb_conct">
				<div class="yb_bar">
					<ul>
						<li class="yb_top" @click="backTop">返回顶部</li>
						<li class="yb_phone">400-6877-880</li>
						<li class="yb_shouji">13322611222</li>
						<li class="yb_QQ" @click="$openUrl">在线咨询</li>
						<li class="yb_ercode" style="height: 53px;">
							<div style="position: relative;left: -8px;">扫码体验手机版</div>
							<img style="width: 140px;" src="@/assets/images/public/qrcord_m.png" alt="积分系统"  title="积分系统" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'
	import Footer from '@/components/Footer.vue'

	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				scrollTop: 0, //默认距离顶部的距离
				isShow:false,
			};
		},
		created() {

		},
		
		mounted () {
		  window.addEventListener('scroll', this.scrollToTop)
		},
		destroyed () {
		  window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			 // 点击图片回到顶部方法，加计时器是为了过渡顺滑
			  backTop () {
			      const that = this
			      let timer = setInterval(() => {
			        let ispeed = Math.floor(-that.scrollTop / 5)
			        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
			        if (that.scrollTop === 0) {
			          clearInterval(timer)
			        }
			      }, 16)
			  },
			  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			  scrollToTop () {
			    const that = this
			    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			    that.scrollTop = scrollTop
			    if (that.scrollTop > 60) {
				  this.isShow=true;
			    } else {
				  this.isShow=false;
			    }
			  }
		}
	};
</script>
<style scoped="scoped">
	/* 右边漂浮框 */
	.back-top-container {
		display: block;
		position: fixed;
		right: 50px;
		bottom: 50px;
		cursor: pointer;
		z-index: 99999;
	}

	.back-top {
		opacity: 0.8;
		width: 32px;
		height: 32px;
		z-index: 10000000;
		background: #868686
	}

	.back-top:hover {
		opacity: 1;
	}

	.back-top-text {
		margin-top: 3px;
		padding-left: 7.5px;
		width: 32px;
		border: 1px solid #000;
		border-radius: 5px;
		background: #fff;
	}

	.back-top:hover {
		opacity: 1;
	}

	.yb_conct {
		position: fixed;
		z-index: 9999999;
		top: 200px;
		right: -127px;
		/* right: 0px; */
		cursor: pointer;
		transition: all .3s ease;
	}

	.yb_conct:hover {
		right: 0px;
	}

	.yb_conct:hover .yb_ercode {
		height: 200px !important;
	}

	.yb_bar ul li {
		width: 180px;
		height: 53px;
		font: 15px/53px 'Microsoft YaHei';
		color: #fff;
		text-indent: 54px;
		margin-bottom: 1px;
		border-radius: 3px;
		transition: all .5s ease;
		overflow: hidden;
	}


	.yb_bar .yb_top {
		background: #409eff url(@/assets/images/public/return_top.png) no-repeat 10px 10px;
	}


	.yb_bar .yb_phone {
		background: #409eff url(@/assets/images/public/zuoji.png) no-repeat 10px 10px;
	}


	.yb_bar .yb_shouji {
		background: #409eff url(@/assets/images/public/shouji2.png) no-repeat 10px 10px;
	}

	.yb_bar .yb_QQ {
		background: #409eff url(@/assets/images/public/shangqiao.png) no-repeat 10px 10px;
	}

	.yb_bar .yb_ercode {
		background: #409eff url(@/assets/images/public/ercode.png) no-repeat 10px 10px;
		text-align: center;
	}

	.yb_QQ a {
		display: block;
		text-indent: 54px;
		font-size: 15px;
		width: 100%;
		height: 100%;
		color: #fff;
	}
</style>