uniapp栅格布局

利用uniapp自带的组件可以进行快速的造页面，比手搓样式快很多，而且不用写什么样式。

循环卡片

 

 <view>

        //<uni-card>
      <uni-list v-for="(item, index) in alarmList" :key="item.id">
          <view style="border: 1px solid #fcfcfc; margin-bottom: 10px; ">
              <view style="padding: 5px; margin-left: 5px;">
                  <uni-row>
                    <uni-col :span="24">
                      <text style="font-size: 12px;">{ { item.sceneName || '---'}}>{ { item.deviceName || '---'}}</text>
                    </uni-col>
                  </uni-row>
              </view>
         
         <view style="padding: 5px; margin-left: 5px;">
          <uni-row>
            <uni-col :span="14">
              <text style="font-size:12px;">传感器MAC: { { item.mac || '---'}}</text>
            </uni-col>
            <uni-col :span="10">
              <text style="font-size: 12px;">报警类型: </text><text style="font-size: 12px; color: #de0000;"> { { item.typeLabel || '---'}}</text>
            </uni-col>
          </uni-row>
          </view>
          
          <view style="padding: 5px; margin-left: 5px;">
          <uni-row>
            <uni-col :span="14">
              <text style="font-size: 12px;">传感器类型: { { item.deviceCategoryLabel || '---'}}</text>
            </uni-col>
            <uni-col :span="10">
              <text style="font-size: 12px;">传感器型号: { { item.deviceModel || '---'}}</text>
            </uni-col>
          </uni-row>
          </view>
          
          <view style="padding: 5px; margin-left: 5px;">
          <uni-row>
            <uni-col :span="24">
              <text style="font-size: 12px;">报警时间: { { formatDate(item.createTime) || '---'}}</text>
            </uni-col>
          </uni-row>
          </view>
          
          <view style="padding: 5px; margin-left: 5px;">
          <uni-row>
            <uni-col :span="24">
              <text style="font-size: 12px;">处理时间: { { formatDate(item.processTime) || '---'}}</text>
            </uni-col>
          </uni-row>
          </view>
          
          <uni-row >
            <uni-col :span="24">
              <button
                :class="{
                  'unprocessed-button': item.status === 0,
                  'processed-button': item.status !== 0
                }"
                style="width: 100%; height: 30px; line-height: 30px; border: none; padding: 0; box-sizing: border-box;"
                @click="goConfirm(item)"
              >
                { { item.status === 0 ? '未处理' : '已处理' }}
              </button>
            </uni-col>
          </uni-row>
          
          </view>
      </uni-list>
     //</uni-card>
    </view>

可以加上uni-card这样直接布局，不用调边距，但是由于特殊页面需要，没有使用

下面来一个对比的手搓页面，体会组件的方便

 

循环卡片

 <!-- 温湿度设备卡片 -->
    <view class="card-container">
      <view class="card" v-for="(item, index) in deviceList.list" :key="index" :class="{
        'gray-background': item.status === 0,
        'blue-background': item.status === 1,
        'gray-background': item.status === 2,
        'gray-background': item.status === 3,
        'red-background': item.alarmTime != null,
    
      }">
        <view class="info-status" @click="goChartIndex(item)">
          <div class="info">
            <div class="info-header">
              <text class="info-title">温湿度传感器</text>
              <div class="status-text">
                <p v-show="item.status === 0">未激活</p>
                <p v-show="item.status === 1">在线</p>
                <p v-show="item.status === 2">离线</p>
                <p v-show="item.status === 3">禁用</p>
              </div>
            </div>
              <div class="info-details">
                <div class="info-right">
                  <b>{ { item.mac || '---' }}</b>
                  <div class="battery-level">
                    <image class="small-icon" src="/static/images/device/quantity.png"></image>
                    <text>{ { item.status === 2 ? '---' : (item.batteryLevel != null ? item.batteryLevel + '%' : '---') }}</text>
                  </div>
                </div>
                <div class="info-line">
                  { { item.sceneName || '---' }}>{ { item.name || '---' }}>{ { item.deviceModel || '---' }}
                </div>
                <div class="info-line">
                  网关:{ { item.gatewayMac || '---' }}>{ { item.rssi !=