You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/pages/index/module/TabbarFixed.vue

161 lines
3.8 KiB

<template>
<div
v-if="tabBarVisible"
class="home-tabbar-fixed flex"
:class="{ 'home-tabbar-fixed--change': appHover }"
:style="tabBarStyle"
>
<div v-show="appHover" class="home-tabbar-fixed__qrcode">
<img src="~/assets/img/common/app-qrcode.jpg" />
<p>扫一扫上方二维码 关注公众号</p>
</div>
<div
class="home-tabbar-fixed__box flex flex-column flex-middle"
:class="{ 'home-tabbar-fixed__box--height-short': !showToTop }"
>
<div
@mouseenter="appHover = true"
@mouseleave="appHover = false"
class="tabbar-fixed-box__common flex flex-middle"
>
<span v-show="appHover">关注公众号</span>
<img v-show="!appHover" src="~/assets/img/home/icon-app.png" />
</div>
<div class="tabbar-fixed-box__line"></div>
<div
@mouseenter="messageHover = true"
@mouseleave="messageHover = false"
@click="onOpenMessagePage"
class="tabbar-fixed-box__common flex flex-middle"
>
<span v-show="messageHover">消息通知</span>
<img v-show="!messageHover" src="~/assets/img/home/icon-message.png" />
</div>
<div v-show="showToTop">
<div class="tabbar-fixed-box__line"></div>
<div
@mouseenter="totopHover = true"
@mouseleave="totopHover = false"
@click="toPageTop"
class="tabbar-fixed-box__common flex flex-middle"
>
<img
v-show="totopHover"
src="~/assets/img/home/icon-totop-light.png"
/>
<img v-show="!totopHover" src="~/assets/img/home/icon-totop.png" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeTabbarFixed",
props: {
scrollTop: {
type: Number,
default: 0,
},
},
data() {
return {
appHover: false,
messageHover: false,
totopHover: false,
tabBarVisible: false,
tabBarStyle: null,
};
},
computed: {
showToTop() {
return this.scrollTop > 400;
},
},
mounted() {
this.getTabBarVisible();
this.getTabBarStyle();
},
methods: {
getTabBarVisible() {
const clientWidth = document.body.clientWidth;
if (clientWidth >= 1200) {
this.tabBarVisible = true;
}
},
// 根据屏高计距离顶部高度
getTabBarStyle() {
const clientHeight = document.body.clientHeight;
const TOP = 630;
const NORMAL_HEIGHT = 1080;
this.tabBarStyle = {
top: `${(TOP / NORMAL_HEIGHT) * clientHeight}px`,
};
},
onOpenMessagePage() {
if (!this.$isLoginValidate()) {
return;
}
window.open(`${location.origin}/account/message`);
},
toPageTop() {
document.querySelector("body").scrollIntoView({ behavior: "smooth" });
},
},
};
</script>
<style lang="scss" scoped>
.home-tabbar-fixed {
position: fixed;
z-index: 99;
left: 50%;
margin-left: 630px;
border: 1px solid #f8f8f8;
&--change {
margin-left: 390px;
}
.home-tabbar-fixed__qrcode {
width: 230px;
height: 260px;
background: #ffffff;
box-shadow: 0px 4px 30px 1px rgba(0, 0, 0, 0.1);
font-size: 14px;
color: #666666;
padding: 22px 20px;
margin-right: 10px;
img {
width: 186px;
height: 186px;
margin-bottom: 14px;
}
}
.home-tabbar-fixed__box {
width: 60px;
height: 180px;
background: #ffffff;
border-radius: 2px;
&--height-short {
height: 120px;
}
.tabbar-fixed-box__common {
height: 60px;
padding: 0 15px;
cursor: pointer;
font-size: 14px;
color: #ff875b;
img {
width: 22px;
height: 22px;
}
}
.tabbar-fixed-box__line {
width: 30px;
height: 1px;
background: #eeeeee;
margin: 0 auto;
}
}
}
</style>