khyznh-ui/src/components/HomeStatics/messageTable.vue

<template>
  <div class="countPageClass" style="padding-left: 1vw;padding-top: 1.5vh;padding-right: 2vw;">
    <div>
      <div class="title" style="padding-left: 0.5vw;">车辆报站</div>
      <div style="margin-left: 1vw;max-height: 20vh;overflow-y: scroll;" class="tableClass">
        <div v-for="(item, index) in messageList" :key="index">
          <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 20px;">
            <div :class="item.type == '1' ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
            <div class="contentClass">{{ "即将到达" }}</div>
            <div class="stationClass">{{ item.station }}</div>
            <div class="timeClass">{{ moment(item.time).format("MM/DD HH:mm") }}</div>
          </div>
          <el-divider />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CarInfo" lang="ts">
import moment from 'moment';
import { playlist } from '@/api/gpsData';


const messageList = ref([
]);

const getList = () => {
    playlist().then(res => {
        console.log(res);
        messageList.value = res;
    });
};


onMounted(() => {
    getList();
});
</script>
<style scoped lang="scss">
.countPageClass {
    height: 28vh;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px 8px 8px 8px;
    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);

    .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 20px;
        color: #000000;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.tableClass::-webkit-scrollbar {
      display: none;
    }

.contentClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.stationClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.timeClass {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.el-divider--horizontal {
    margin-top: 10px;
    margin-bottom: 0px;
}

.carClass {
    background: url("@/assets/images/home/Bg(2).png") no-repeat;
    background-size: 100% 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    width: 5vw;
    text-align: center;
    height: 24px;
    line-height: 24px;
}

.goodClass {
    background: url("@/assets/images/home/Bg(3).png") no-repeat;
    background-size: 100% 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #6A4119;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    width: 5vw;
    text-align: center;
    height: 24px;
    line-height: 24px;
}
</style>