在detail文件夹下的childComps下新建DetailBottomBar.vue,在它里面封装详情页的底部工具栏。
在Detail.vue中注册,导入,使用
<detail-bottom-bar></detail-bottom-bar>
其中DetailBottomBar.vue如下:
<template>
<div class="bottom-bar">
<div class="bar-item bar-left">
<div>
<i class="icon service"></i>
<span class="text">客服</span>
</div>
<div>
<i class="icon shop"></i>
<span class="text">店铺</span>
</div>
<div>
<i class="icon select"></i>
<span class="text">收藏</span>
</div>
</div>
<div class="bar-item bar-right">
<div class="cart">加入购物车</div>
<div class="buy">购买</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailBottomBar',
methods:{
addToCart(){
this.$emit('addCart');
}
}
};
</script>
<style scoped>
.bottom-bar {
height: 58px;
position: fixed;
background-color: #fff;
left: 0;
right: 0;
bottom: 0;
display: flex;
text-align: center;
}
.bar-item {
flex: 1;
display: flex;
}
.bar-item>div {
flex: 1;
}
.bar-left .text {
font-size: 13px;
}
.bar-left .icon {
display: block;
width: 26px;
height: 26px;
margin: 10px auto 3px;
background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
}
.bar-left .service {
background-position:0 -62px;
}
.bar-left .shop {
background-position:0 -115px;
}
.bar-right {
font-size: 15px;
color: #fff;
line-height: 58px;
}
.bar-right .cart {
background-color: #ffe817;
color: #333;
}
.bar-right .buy {
background-color: #f69;
}
</style>
结果如下:
我们会发现我们最底部还是会有遮住的内容
在Detail中多减去49px
.content {
height: calc(100% - 44px - 49px);
}