xzlz_GjWeb/src/views/home/components/beonDuty.vue

<template>
  <div class="checkpoint-list noScollLine">
    <el-timeline style="max-width: 375px">
      <el-timeline-item
        v-for="(item, index) in warningList.listData"
        :key="index"
        :timestamp="item.yjSj"
        placement="top"
        :hollow="true"
        color="#061b44"
      >
        <div class="item_card">
          <div style="line-height: 18px">
            {{ item.yjNr }}
          </div>
          <el-divider border-style="dashed" class="dashed" />
          <div class="flex">
            <div class="warning-image">
              <img :src="item.yjTp" alt="预警图片" />
            </div>
            <div class="inform">
              <div class="flex align-center">
                <div class="inform_name">
                  姓名：<span>{{ item.yjRyxm }}</span>
                </div>
                <div class="inform_tag" v-if="item.yjlyBqmc">{{ item.yjlyBqmc }}</div>
              </div>

              <div>身份证：{{ item.yjRysfzh }}</div>
              <div>
                购票时间：<span>{{ item.gpsj }}</span>
              </div>
              <div>购买路线：{{ item.gmlx }}</div>
              <div>购买地点：{{ item.gmdd }}</div>
            </div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <Empty :show="warningList.listData.length == 0" />
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
import Empty from "@/components/Empty/index.vue";
const warningList = reactive({
  listData: [],
  total: 0
});
const linQuery = reactive({
  pageCurrent: 1,
  pageSize: 10
});
const gettbGjclselectPage = () => {
  tbGjYjgetPageList(linQuery).then((res) => {
    warningList.listData =
      linQuery.pageCurrent == 1
        ? res.records
        : warningList.listDat.concat(res.records);
    warningList.total = res.total;
  });
};
const scroll = () => {
  if (warningList.total > warningList.listData.length) {
    gettbGjclselectPage();
    linQuery.pageCurrent++;
  }
};
gettbGjclselectPage();
</script>

<style scoped lang="scss">
.checkpoint-list {
  margin-top: 20px;
  margin-left: 18px;
  height: calc(100% - 40px);
  overflow: hidden;
  overflow-y: auto;
  padding: 4px;
  box-sizing: border-box;
  .item_card {
    font-size: 14px;
    color: #fff;
    padding: 18px 13px 8px 15px;
    width: 359px;
    height: 190px;
    border-radius: 4px;
    border: 1px solid #0468e1;
    opacity: 0.86;
    background: url("~@/assets/images/bi/jmk.png") no-repeat center center;
    background-size: 100% 100%;
    .dashed {
      width: 100%;
      border-top: 1px #0468e1 dashed;
      margin: 10px 0px 9px;
    }
    .warning-image {
      border: 1px solid #0468e1;
      padding: 10px 10px 10px 14px;
      width: 103px;
      height: 99px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .inform {
      box-sizing: border-box;
      margin-left: 11px;
      width: 215px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      .inform_name {
        width: 120px;
      }
      .inform_tag {
        font-family: "Source Han Sans CN";
        font-weight: 300;
        font-size: 10px;
        color: #f9411c;
        border: 1px solid #f9411c;
        padding: 0px 8px;
        font-weight: 800;
        border-radius: 8px;
      }
    }
  }
}

::v-deep .el-timeline-item__node {
  border-color: rgb(13, 216, 37);
}
::v-deep .el-timeline-item__tail {
  border-left: 2px solid #06366d;
}
::v-deep .el-timeline-item__wrapper {
  padding-left: 10px;
}
::v-deep .is-top {
  margin-bottom: 12px;
  padding-top: 2px;
  font-size: 14px;
  margin-left: 10px;
  color: #fff;
}
</style>