hxx/uni-app-shopping
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物底栏

Browse Source
This commit is contained in:
jqtmviyu@gmail.com 2021-02-27 18:11:41 +08:00
parent 3c2262a444
commit 0b9fdb5c7a
2 changed files with 76 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@ -33,4 +33,17 @@
/* 移除图片标签默认的3px 间隙 */
vertical-align: middle;
}
// 分享按钮, 子绝父相, 透明度0
.open_type_button_wrap {
position: relative;
.open_type_button {
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
</style>

72
src/pages/goods_detail/goods_detail.vue
View File

@ -28,6 +28,22 @@
<view class="detail_title">图文详情</view>
<rich-text :nodes="goods_introduce"></rich-text>
</view>
<!-- 4.0 底部栏 -->
<view class="bottom">
<view class="icon_btn open_type_button_wrap">
<view class="iconfont icon-kefu"></view>
<text class="icon_btn_text">联系客服</text>
<button class="open_type_button" open-type="contact">客服按钮</button>
</view>
<view class="icon_btn">
<view class="iconfont icon-gouwuche"></view>
<text class="icon_btn_text">购物车</text>
</view>
<view class="button">加入购物车</view>
<view class="button">立即购买</view>
</view>
</view>
</template>
@ -116,19 +132,8 @@ export default {
}
}
// 分享按钮, 子绝父相, 透明度0
.open_type_button_wrap {
position: relative;
.open_type_button {
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.detail {
padding-bottom: 94rpx;
.detail_title {
height: 80rpx;
display: flex;
@ -136,9 +141,50 @@ export default {
justify-content: center;
align-items: center;
}
}
// 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器
.img {
/* 覆盖默认基线对齐造成的图片底部缝隙影响 */
vertical-align: top;
}
.bottom {
height: 94rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
display: flex;
align-items: center;
padding: 20rpx;
.icon_btn {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.iconfont {
font-size: 40rpx;
}
.icon_btn_text {
font-size: 20rpx;
}
}
.button {
width: 196rpx;
height: 60rpx;
border-radius: 30rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: #fcaa23;
margin: 0 10rpx;
&:last-child {
background-color: #ea4350;
}
}
}
</style>