<template>
  <div class="home">
    <nut-grid :column-num="4">
      <nut-grid-item square text="任务巡检" @click="jump('/task')">
        <template #default>
          <div class="box icon1">
            <img src="../../assets/images/home/icon1.png" alt="">
          </div>
        </template>
      </nut-grid-item>
      <nut-grid-item text="智能环控" @click="jump('/env')">
        <template #default>
          <div class="box icon2">
            <img src="../../assets/images/home/icon2.png" alt="">
          </div>
        </template>
      </nut-grid-item>
      <nut-grid-item  text="智能能耗" @click="jump('/energy')">
        <template #default>
          <div class="box icon3">
            <img src="../../assets/images/home/icon3.png" alt="">
          </div>
        </template>
      </nut-grid-item>
      <nut-grid-item  text="精准饲喂" @click="jump('/feed')">
        <template #default>
          <div class="box icon4">
            <img src="../../assets/images/home/icon4.png" alt="">
          </div>
        </template>
      </nut-grid-item>
<!--      <nut-grid-item  text="生产管理" @click="jump('/production')">-->
<!--        <template #default>-->
<!--          <div class="box icon5">-->
<!--            <img src="../../assets/images/home/icon5.png" alt="">-->
<!--          </div>-->
<!--        </template>-->
<!--      </nut-grid-item>-->
      <nut-grid-item  text="AI巡检" @click="jump('/ai')">
        <template #default>
          <div class="box icon6">
            <img src="../../assets/images/home/icon6.png" alt="">
          </div>
        </template>
      </nut-grid-item>
      <nut-grid-item  text="视频监控" @click="jump('/video')">
        <template #default>
          <div class="box icon7">
            <img src="../../assets/images/home/video.png" alt="">
          </div>
        </template>
      </nut-grid-item>
<!--      <nut-grid-item text="预警信息" @click="jump('/warn')">-->
<!--        <template #default>-->
<!--          <div class="box icon8">-->
<!--            <img src="../../assets/images/home/warn.png" alt="">-->
<!--          </div>-->
<!--        </template>-->
<!--      </nut-grid-item>-->
    </nut-grid>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const jump = (url) => {
  router.push({
    path: url
  })
}

</script>
<style scoped>
  /deep/.nut-grid-item__content {
    background: transparent;
  }
  .home {
    width: 100%;
  }
  .box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    position: relative;
  }
  .icon1 {
    background-color: #0099FF;
  }
  .icon2 {
    background-color: #44DA96;
  }
  .icon3 {
    background-color: #0090FF;
  }
  .icon4 {
    background-color: #FFCB00;
  }
  .icon5 {
    background-color: #0B65FF;
  }
  .icon6 {
    background-color: #009AFF;
  }
  .icon7 {
    background-color: #25CFFF;
  }
  .icon8 {
    background-color: #2273FF;
  }
  .box img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
</style>
