微信小程序 MiniProgram-左中右

左中右布局

一般出现在列表，如优惠券列表或者带头像+文字的

index.wxml

<view wx:for="{{items || []}}" class="items-content-item" wx:key="*this">
  <view class="left">
    <image wx:if="{{item.isMe}}" mode="widthFix" src="{{imgUrl}}coupon-divide/avatar-me.png?v=20221" class="avatar" ></image>
    <image wx:else mode="widthFix" src="{{imgUrl}}coupon-divide/avatar-friend.png?v=20221" class="avatar"></image>
  </view>
  <view class="info">
    <view wx:if="{{item.isMe}}" class="info-nickname">我</view>
    <view wx:else class="info-nickname info-nickname-friend">好友</view>
    <view class="info-time">{{item.addTime}}</view>
  </view>
  <view class="right">
  <view>{{item.amount}}元优惠券</view>
    <view class="top1" wx:if="{{model.status!=0 && item.isTop1}}">
      <image mode="widthFix" src="{{imgUrl}}coupon-divide/icon-crown.png?v=20221" class="icon-crown" ></image>
      手气最佳
    </view>
  </view>
</view>

index.wxss

.items-content-item {
  display: flex;
  margin: 0 10rpx;
  justify-content: space-between;
  position: relative;
  height: 120rpx;
  padding-top: 0rpx;
  padding-bottom: 16rpx;
  border-bottom: #EEEEEE 2rpx solid;
}

.items-content-item .left {
  width: 120rpx;
}

.items-content-item .left .avatar {
  width: 100rpx;
  height: 100rpx;
}

.items-content-item .info {
  min-width: 340rpx;
}

.items-content-item .info .info-nickname {
  margin-top: 20rpx;
  font-size: 25rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #EF8F13;
  height: 34rpx;
  background: #FFEBCF;
  border-radius: 17rpx;
  width: 120rpx;
  text-align: center;
}

.items-content-item .info .info-nickname-friend {
  color: #F44893;
  background: #FFE0EE;
}

.items-content-item .info .info-time {
  font-size: 22rpx;
  font-weight: 400;
  color: #AAAAAA;
  line-height: 46rpx;
}

.items-content-item .right {
  width: 170rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #EE4D95;
  padding-top: 16rpx;
  text-align: right;
}