微信小程序（第十章）- 页面客服的实现

做微信小程序的理念

不要添加无意义的组件或标签！！！

普遍问题

如何给两个组件之间设置不同颜色的背景色间隔。
错误做法：多写一份组件。XXXXX
正确做法：给整个页面设置理想的背景色，其中组件的背景色根据需求写。

在线客服实现

页面结构实现

1. 定义一个view，用来承载在线客服相关内容，使其定义id：onlineView;
2. 在onlineView里面定义图片和文本；
   代码如下：

<!--在线客服-->
<view id="onlineView">
    <image src="/images/xsdkq_index_zxkf.png"></image>
    <text> 回答助理在线客服</text>
    <!--右箭头实现-->
    <view class="arrow"></view>
</view>

样式实现

1. 给onlineView里面的图片设置宽高；
2. 给onlineView设置高度和背景颜色、上下外边距、左右内边距；
3. 给onlineView里面的文字设置字体大小、字体加粗；
4. 图片和文字对齐；

右箭头实现

其他博主的实现方式
position:absolute;使用绝对定位，绝对定位是相对于父元素进行定位，前提父元素具备定位属性。
代码如下：

/*在线客服样式*/
#onlineView{
  height:88rpx;
  background:#fff;
  /*设置上下外边距*/
  margin:24rpx 0 ;
  /*设置左右内边距*/
  padding:0 30rpx;
  line-height: 88rpx;
  position: relative;
}
#onlineView > image{
  width:60rpx;
  height:60rpx;
  vertical-align: middle;
}
#onlineView > text{
  /*字体大小*/
  font-size:26rpx;
  /*字体加粗*/
  font-weight: bold;
  vertical-align: middle;
}
/*右箭头实现*/
/*实现原理：一个正方形，保留上右边框，旋转45度即可得到*/
.arrow{
  width: 16rpx;
  height:16rpx;
  border-top:4rpx solid #999;
  border-right: 4rpx solid #999;
  /*旋转45度*/
  transform:rotate(45deg);
  /*调整位置*/
  position:absolute;
  right:30rpx;
  top:38rpx;
}