vue自定义页面2

image.png

  <div class="flex-1">
          <div class="rf" :class="item.e=='新建'?'warn':item.e=='进行中'?'success':'grey'" v-for="(item, index) in dataList" :key="index" @click="detailHandle(item)">
            <div class="item_1">{{item.a}}</div>
            <div class="item_2">{{item.b}}</div>
            <div class="item_3 elps">{{item.c}}</div>
            <div class="item_4">{{item.d}}</div>
            <div class="item_5 ta_c">{{item.e}}</div>
          </div>
        </div>

数据

  dataList: [
        {
          a: '11300003',
          b:'202211',
          c:'薪金店，PU店',
          d: '2022/1/30',
          e: '新建'
        },
        {
          a: '11300002',
          b:'202211',
          c:'铝锭仓库，不不不',
          d: '2022/11/30',
          e: '进行中'
        },
        {
          a: '11300001',
          b:'202210',
          c:'全仓库',
          d: '2022/10/31',
          e: '已完成'
        }
      ]

CSS

.grey{
  background-color: #fafafa;
}
.success{
  background: #67C23A;
}
.warn{
  background: #E6A23C;
}
.item_1, .item_2, .item_3, .item_4, .item_5{
  width: 20%;
  line-height: 24px;
  padding: 5px;
}