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 间隙 */ /* 移除图片标签默认的3px 间隙 */
vertical-align: middle; 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> </style>

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

@ -28,6 +28,22 @@
<view class="detail_title">图文详情</view> <view class="detail_title">图文详情</view>
<rich-text :nodes="goods_introduce"></rich-text> <rich-text :nodes="goods_introduce"></rich-text>
</view> </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> </view>
</template> </template>
@ -116,29 +132,59 @@ export default {
} }
} }
// 分享按钮, 子绝父相, 透明度0 .detail {
.open_type_button_wrap { padding-bottom: 94rpx;
position: relative; .detail_title {
.open_type_button {
position: absolute;
opacity: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
.detail_title {
height: 80rpx; height: 80rpx;
display: flex; display: flex;
font-size: 26rpx; font-size: 26rpx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
} }
// 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器 // 小程序规定，要修改富文本的标签样式，只能通过类选择器修改，不支持HTML标签选择器
.img { .img {
/* 覆盖默认基线对齐造成的图片底部缝隙影响 */ /* 覆盖默认基线对齐造成的图片底部缝隙影响 */
vertical-align: top; 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> </style>