<template> <div class=""> <div class="flexd"> <div class="top" @click="goTop" ref="btn"><i></i></div> <div class="dialogue"> <div><i></i></div> <p @click="connectConver('1')">立即咨询</p> </div> <div class="mining"> <div><i></i></div> <p @click="connectConver('2')">集采</p> </div> <div class="order"> <div><i></i></div> <p @click="connectConver('3')">集采清单</p> </div> </div> </div> </template> <script> export default { props: [], components: {}, data () { return {} }, watch: {}, computed: {}, methods: { needScroll () { let clientHeight = document.documentElement.clientHeight let obtn = this.$refs.btn window.onscroll = function () { let osTop = document.documentElement.scrollTop || document.body.scrollTop if (osTop >= clientHeight) { obtn.style.display = 'block' } else { obtn.style.display = 'none' } if (!this.isTop) { // clearInterval(timer) } this.isTop = false } }, goTop () { // 备注回到头部 let 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) } }, created () { }, mounted () { } } </script> <style lang="scss"> .flexd { position: fixed; right: 0; bottom: 150px; z-index: 10000; .dialogue,.mining,.order,.top{ div{ 40px; height: 40px; text-align: center; } p { padding: 0 7px; 40px; text-align: center; background: $white; cursor: pointer; } } .top { background: #33cde5; cursor: pointer; display: none; i { display: inline-block; margin-top: 9px; margin-left: 11px; 16px; height: 21px; background: url("../static/img/index/index_fiex_icon.png") no-repeat 0px 0px; } } .dialogue { div { background: #00b7d3; i { display: inline-block; margin-top: 10px; 22px; height: 18px; background: url("../static/img/index/index_fiex_icon.png") no-repeat -25px 0px; } } p { height: 80px; display: none; } } .mining { div { background: #33cde5; i { display: inline-block; margin-top: 6px; 25px; height: 24px; background: url("../static/img/index/index_fiex_my.png") no-repeat 3px 0px; } } p { height: 40px; display: none; } } .order{ div { background: #33cde5; i { display: inline-block; margin-top: 6px; 25px; height: 24px; background: url("../static/img/index/index_fiex_order.png") no-repeat 2px 0px; } } p { height: 80px; display: none; } } .mining:hover p,.dialogue:hover p,.order:hover p{ display: block; } } </style>