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

原创

用户6493868

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

54400

代码可运行

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

运行总次数：0

代码可运行

效果图

实现步骤

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;
}