支付宝小程序使用 CSS 自定义智能客服组件的页面布局
CSS 小程序 About 716 words布局
<view class="contact-box">
<text>这是客服按钮</text>
<contact-button tnt-inst-id="" scene="" />
</view>
样式
最主要是父标签中的position: relative
属性。
以及子标签中的position: absolute
、opacity: 0
、z-index
,否则无法响应contact-button
的点击事件
.contact-box {
width: 500rpx;
height: 92rpx;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
font-weight: 600;
color: #F8F8F8;
background: #00cc88;
border-radius: 16rpx;
}
.contact-box contact-button {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 100;
}
参考
Views: 450 · Posted: 2024-02-05
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...