view的重叠问题

废话不多说先看效果!

这个布局如何实现对于新手的我来说还是比较难的 研究了半天搞出来了

 <view class = "view-groupComponent">        <view class = "view-component">          <view class = "view-componentL">              <view class = "view-mixtureImg">                  <image src="../../images/head.jpg" class = "img-rectStyle"   ></image>                   <image src="../../images/icon_champion.png" class = "img-wrapRect" ></image>              </view>              <view >                    <text class = "text-ellipsiStyle">青春梦想队</text>                </view>          </view>

样式

/*图像*/.view-mixtureImg{  height: 200rpx;}.img-rectStyle{  width:  170rpx;  height: 170rpx;  border-radius: 15rpx;}.img-inside{  width:  180rpx;  height: 180rpx;  border-radius: 50%;}/*外部边框图*/.img-wrap{  width: 260rpx;  height: 200rpx;  position: relative;  bottom: 200rpx;  text-align: center;}

还有另一种效果

布局

     <block wx:for="{{groups}}" wx:key = "{{index}}">              <view class = "view-groupItem">                  <view class = "view-memberClickNum">                      <image src="{{item.groupImg}}"></image>                        <text  class = "text-itemNum">0</text>                    </view>                  <text class="text-groupName">{{item.groupName}}</text>              </view>          </block>

样式

/*用户的图像*/.view-groupItem{  display: inline-block;  width: 115rpx;  height: 120rpx;  margin: 10rpx;  text-align: center;  margin-top: 20rpx;}.view-memberClickNum{  position: relative;}.view-memberClickNum image{  width: 115rpx;  height: 115rpx;  border-radius: 15rpx;}.text-groupName{  font-size: 26rpx;  width: 115rpx;  display: block;  overflow: hidden;  color: #978378;  word-break: keep-all;  white-space: nowrap;   text-overflow: ellipsis;}