九宫格布局

 

 

<view wx:if="{{listStatus}}" class="listStatusOne" bindtap='closeClick'>
    <view wx:for="{{loomList}}" wx:key="id" class='statusOne'>
      <!-- 开机 -->
      <view wx:if="{{item.state == 1}}" class='statusOne-judge'>
        <image src='/image/open.png'></image>
        <view>{{item.code}}</view>
      </view>
      <!-- 停机 -->
      <view wx:elif="{{item.state == 2}}" class='statusOne-judge'>
        <image src='/image/stop.png'></image>
        <view>{{item.code}}</view>
      </view>
      <!-- 闲机 -->
      <view wx:if="{{item.state == 3}}" class='statusOne-judge'>
        <image src='/image/leisure.png'></image>
        <view>{{item.code}}</view>
      </view>
    </view>
  </view>

 

 

.listStatusOne{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.statusOne{
  width: 25%;
  height: 139rpx;
  border-right: 1rpx solid #DADADA;
  border-bottom: 1rpx solid #DADADA;
  /* border不占宽度 */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
}
.statusOne-judge{
  margin: auto;
}
.statusOne image{
  width: 50rpx;
  height: 54rpx;
  display:block;
}
.statusOne-judge view{
  text-align: center;
  font-size: 28rpx;
  color: #353535;
}