sfms3.0-ui/src/views/Home/components/warehouseKeeper.vue

<template>
  <div class="row">
    <div class="data">
      <div class="small-data-item small-data-item1">
        <div class="small-data-item-txt">
          <div>今日到货计划(已发货)</div>
          <div>22<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item2 ml-14px">
        <div class="small-data-item-txt">
          <div>今日备料计划(已发料)</div>
          <div>2456<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item3 ml-14px">
        <div class="small-data-item-txt">
          <div>今日叫料请求(已发料)</div>
          <div>255<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item4 ml-14px">
        <div class="small-data-item-txt">
          <div>空闲库位数/总库位数</div>
          <div style="font-size: 20px;">2555<span>个</span>/65555<span>个</span></div>
        </div>
        <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[50%]">
        <div class="title">呆滞库存预警</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="name" label="发布人" />
          <el-table-column prop="date" label="发布日期" />
        </el-table>
      </div>
      <div class="data1 w-[50%] ml-14px">
        <div class="title">超期库存预警</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="name" label="发布人" />
          <el-table-column prop="date" label="发布日期" />
        </el-table>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[50%]">
        <div class="title">高低储预警</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="name" label="发布人" />
          <el-table-column prop="date" label="发布日期" />
        </el-table>
      </div>
      <div class="data1 w-[50%] ml-14px">
        <div class="title">待处理任务</div>
        <el-table :data="tableData" style="width: 100%" stripe height="240px">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="name" label="发布人" />
          <el-table-column prop="date" label="发布日期" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    title: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    title: 'Tom',
    name: 'Tom',
    text: 'No. 189, Grove St, Los Angeles'
  }
]

</script>
<style scoped lang="scss">
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-left: 10px;
  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: #3c7adf;
    left: 0px;
    top: 3px;
    border-radius: 8px;
  }
}
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .small-data-item {
    width:25%;
    height: 90px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: white;
    padding: 0px 20px;
    .small-data-item-txt {
      flex: 1;
      div {
        &:nth-child(1) {
          font-size: 14px;
         
        }
        &:nth-child(2) {
          font-size: 26px;
          margin-top: 4px;
          font-weight: bold;
          span {
            font-size: 14px;
            padding-left: 6px;
          font-weight: normal;
          }
        }
      }
    }
    .img {
      width: 40px;
      opacity: 0.5;
    }
  }
  .small-data-item1 {
    background: linear-gradient(to left, #fd817d, #fcad80);
  }
  .small-data-item2 {
    background: linear-gradient(to left, #46c6fa, #336bfe);
  }
  .small-data-item3 {
    background: linear-gradient(to left, #96a6cc, #595f82);
  }
  .small-data-item4 {
    background: linear-gradient(to left, #08dcd5, #46e2bb);
  }
  .small-data-item5 {
    background: linear-gradient(to left, #f4c46b, #ffb313);
  }
  .small-data-item6 {
    background: linear-gradient(to left, #6eccf8, #02acfd);
  }
}
.two-row {
  display: flex;
  align-content: center;
  .data1 {
    background: white;
    padding: 14px;
  }
}
</style>