<template>
  <div class="work-box-1">
    <!-- 最新工单 -->
    <Title1 title="最新工单" />
    <!-- 列表 -->
    <div class="list">
      <div class="li" v-for="(item, index) in list" :key="index">
        <span :class="item.level">{{ item.level_text }}</span>
        <p>{{ item.title }}</p>
        <span class="time">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getListApi } from '@/api/workOrder'
  let list = ref([])
  const getList = async () => {
    let res = await getListApi()
    list.value = res.data
  }
  onMounted(() => {
    getList()
  })
</script>

<style lang="scss" scoped>
  .work-box-1 {
    width: vw(1000);
    height:100%;
    margin-top: vh(120);
    box-sizing: border-box;
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

    padding: 0 vw(20);
    .list {
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      height: vh(895);
	  height:100%;
      overflow: auto;
      .li:nth-child(odd) {
        background: rgba(3, 78, 153, 0.3);
      }
      .li:nth-child(even) {
        background-color: transparent;
      }
      .li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: vh(8) vh(10);
        .label {
          // width: vw(60);
          // height: vh(24);
          line-height: vh(24);
          color: #fff;
          border-radius: vw(2);
          font-size: font-vw(20);
          text-align: center;
          display: inline-block;
          margin-right: vw(10);
		  padding:vw(15);
        }
        .normal {
          @extend .label;
          background: #2380fb;
        }
        .warn {
          @extend .label;
          background: #feae00;
        }
        .important {
          @extend .label;
          background: #d9011b;
        }
        .time {
          font-weight: 400;
          font-size: font-vw(20);
          color: rgba(255, 255, 255, 0.6);
          // line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-left: vw(30);
        }
        p {
          font-weight: 400;
          font-size: font-vw(22);
          color: #ffffff;
          text-align: left;
          font-style: normal;
          text-transform: none;
          flex: 1;
          /*1. 先强制一行内显示文本*/
          white-space: nowrap;
          /*2. 超出的部分隐藏*/
          overflow: hidden;
          /*3. 文字用省略号替代超出的部分*/
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
