vue 类似listView

<style>

.div_home ul li {
  float: left;
  list-style-type: none;
}

.div_home ul {
  padding-inline-start: 0px;
  margin-left: 10px;
}

.div_home li {
  margin-top: 5px;
  margin-left: 5px;
}

#box::-webkit-scrollbar {
  display: none;
}

li:nth-of-type(4) {
  clear: both;
}

</style>

<ul
            
            class="infinite-list"
            v-infinite-scroll="loadDeviceList"
            style="height:800px;overflow:auto;overflow-x:hidden;"
          >
            <li v-for="device in deviceList" :key="device.id" @click="showDeviceDetailInfo(device)">
              <el-card class="box-card" style="width:280px">
                <img v-if="device.abnormalState==1" src="../assets/red_circle.gif" />
                <img v-if="device.abnormalState==0" src="../assets/green_circle.png" />
                <div class="div_wapper">
                  <div class="div_cell">
                    <img class="img_device" v-bind:src="device.imgUrl" />
                  </div>
                  <div class="div_cell cell-padding">
                    <label>{{device.workStationRow+"组"+device.workStationColumn+"列"}}</label>
                    <br />
                    <label>{{device.online==true?"在线":"离线"}}</label>
                    <br />
                    <label>{{device.workState==0||device.workState==null?"停止":"缝纫中"}}</label>
                    <br />
                  </div>
                </div>
                <div style=" margin-left: 10px;">
                  <label>{{device.deviceTypeName}}</label>
                  <br />
                  <label>{{device.deviceTypeNo}}</label>
                  <br />
                  <label>开机时间：{{dateFormat(device.bootUpTime)}}</label>
                  <br />
                  <label>开机时长：{{formatWorkTime(device.bootUpDur/1000)}}</label>
                  <br />
                  <label>闲置时长：{{formatWorkTime(device.idleDur/1000)}}</label>
                  <br />
                  <label>工作时长：{{formatWorkTime(device.workDur/1000)}}</label>
                  <br />
                  <!-- <label>{{ $t('message.Standard_Working_Hours') }}：{{device.stdWorkTime}}s</label> -->
                  <!-- <br /> -->
                  <label>{{ $t('message.Machine_Utilization') }}：{{device.useEff}}</label>
                  <br />
                  <label>累计剪线次数：{{device.jxNum}}</label>
                  <br />
                  <label>累计抬压脚次数：{{device.tyjNum}}</label>
                  <br />
                  <label>累计针数：{{device.needleNum}}</label>
                  <br />
                </div>
              </el-card>
            </li>
          </ul>