微信小程序左头像右名称个人语录的实现

wxml：

<view class="title">
<image class="title_img" src="{{icon}}"></image>
<view class="title_box">
<view class="title_nickname">{{nickname}}</view>
<view class="title_context">{{context}}</view>
</view>
</view>

wxss：

.title{
  width: 700rpx;
  border: 2rpx solid gray;
  margin: 20rpx;
  border-radius: 10rpx;
  display:flex;
}
.title_img{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin: 25rpx;
}
.title_box{
  width: 500rpx;
  margin-top: 15rpx;
  margin-bottom: 10rpx;
}
.title_nickname{
  font-size: 40rpx;
}
.title_context{
  font-size: 35rpx;
  margin-top: 15rpx;
}