<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();


</script>

<template>
  <main class="main-bg main-bg1 d-flex flex-col align-center justify-start">
    <div class="d-flex flex-row main-box1 align-stretch">
      <div class="d-flex flex-col align-stretch flex-four flex-shrink-1 gap-l">
        <img class="main-image-button w-100 fill2" src="@/assets/images/Button1.png" @click="router.push({ name: 'List', query: { id: 187 } })" alt="">
        <img class="main-image-button w-100 fill2" src="@/assets/images/Button2.png" @click="router.push({ name: 'List', query: { id: 188 } })" alt="">
      </div>
      <div class="d-flex flex-col align-center flex-six flex-shrink-1">
        <img class="main-image-button w-100 fill2" src="@/assets/images/Button6.png" @click="router.push({ name: 'List', query: { id: 189 } })" alt="">
      </div>
      <div class="d-flex flex-col align-center flex-five flex-shrink-1">
        <img class="main-image-button w-100 fill2" src="@/assets/images/Button3.png" @click="router.push({ name: 'List', query: { id: 190 } })" alt="">
        <img class="main-image-button w-100 fill2" src="@/assets/images/Button4.png" @click="router.push({ name: 'List', query: { id: 191 } })" alt="">
        <img class="main-image-button w-100 fill2 disabled" src="@/assets/images/Button5.png" alt="">
      </div>
    </div>
  </main>
</template>

