小程序中客服的实现加页面UI

原创

用户6493868

发布于 2022-03-07 18:47:52

4950

发布于 2022-03-07 18:47:52

文章被收录于专栏：vue封装H5vue封装H5

效果图

实现步骤

UI样式

采用按钮button方式实现

<button class="ke-fu" open-type="contact" bindcontact="handleContact">
    <image class="kefu-img" src="../../images/kefu.png"></image>
    <view class="kf-kf">客服</view>
  </button>

css样式文件

.ke-fu {
  margin-left: 640rpx!important;
  width: 12%!important;
  position: fixed;
  bottom: 0;
  margin-bottom: 80rpx;
  text-align: center;
  z-index: 2;
  border: 1px solid #f4ebde;
  border-radius: 50%;
  height: 90rpx;
  background: #f4ebde;
  box-shadow: 2rpx 5rpx 10rpx 5rpx #DBD7D5;
}

.kefu-img {
  width: 50rpx;
  height: 50rpx;
}

.kf-kf {
  vertical-align: top;
  margin-top: -50rpx;
  font-size: 20rpx;
  color: #00ACED;
}

这里需要注意如果你的按钮画出来不是圆形的多半是没有合理调整样式，需要样式穿透!important

js文件：