百度小程序-循环数据,图文左右互换排列

.swan

            <view class="content">
                <view class="server">
                    <block s-for="item,index in DataInfo">
                    <navigator class="server-item" url="/pages/detail/detail?id={{item.id}}&title={{item.title}}">
                        <view class="server-item-img {{index%2==0?'server-iteml':'server-itemr'}}" >
                            <image  src="{{item.cover_id}}" mode="widthFix" lazy-load="true"></image>
                        </view>
                        <view class="server-item-box {{index%2==0?'server-iteml':'server-itemr'}}">
                                <view class="server-item-title">{{item.title}}</view>
                                <view class="server-item-link {{index%2==0?'server-iteml':'server-itemr'}}">查看更多</view>           
                        </view>
                    </navigator>
                    </block>
                </view>
            </view>

.css

.server-item{overflow:hidden;box-shadow:0px 5px 5px 0px rgba(0,0,0,0.24);height:160rpx;margin-bottom:17rpx}
.server-iteml{float:left;text-align:left}
.server-itemr{float:right;text-align:right}
.server-item-img,.server-item-box{width:50%;height:100%}
.server-item-box{background:#1C83C5;height:100%;padding:20rpx 50rpx;box-sizing:border-box}
.server-item-img{}
.server-item-img image{width:100%;display:block;height:100px}
.server-item-title{font-size:26rpx;font-weight:normal;font-stretch:normal;line-height:33px;letter-spacing:0px;color:#ffffff}
.server-item-link{width:142rpx;height:38rpx;line-height:40rpx;font-size:22rpx;text-align:center;letter-spacing:0px;background:#fff;color:#1c83c5}

效果图