<template>
  <div class="container">
    <div class="item" @click="SettingReport(menu.name)" v-for="menu of menuList">
      <img class="img" :src="menu.img_url" alt="" />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import test2 from '@/assets/image/home/experiment.png';
import debugImg from '@/assets/image/home/debug.png';
const menuList = [
  {
    name: '/debug',
    img_url: debugImg,
    title: '燃烧速率试验'
  },
  // {
  //   name: '/test1',
  //   img_url: test2,
  //   title: '燃烧速率试验'
  // },
  {
    name: '/experiment',
    img_url: test2,
    title: '实验'
  }
];

const router = useRouter();
const SettingReport = async (path) => {
  await router.push(path);
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .item {
    width: 240px;
    height: 410px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .item + .item  {
    margin-left: 60px;
  }
}
</style>
