<template>
  <div class="pt21 pl30">
    <div class="content">
      <div
        class="w-full h-full bg-white flex flex-wrap items-start content-start"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="bg-white w240 h250 flex justify-center items-center content-center flex-wrap mb20"
        >
          <router-link :to="'/markLine?parentId='+item.id+'&signClassName='+item.signClassName">
            <img class="h150 cursor-pointer" :src="item.signUrl" />
          </router-link>

          <div class="font-bold w-full mt15">{{ item.signClassName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import api from "@/api";
import { trafficApi } from "@/api/traffic/type";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    onMounted(() => {
      api.traffic.trafficClassList().then((res) => {
        list.value = res.rows;
      });
    });
    let list = ref<trafficApi.classList["rows"]>([]);

    return {
      list,
    };
  },
});
</script>

<style scoped>
.content {
  width: 1603px;
  height: 885px;
  display: flex;
  flex-wrap: wrap;
}
</style>