<template>
  <div class="item" @click="routerpush(isLink)">
    <div class="img">
      <el-image style="width: 100%; height: 100%;" :src="props.url" :fit="'scale-down'" lazy>
      </el-image>
    </div>
    <div class="text">{{ props.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
let props = defineProps<{
  path: any;
  isLink: boolean
  title: any;
  url: any;
}>();
function routerpush(isLink:boolean=false) {
  if (isLink) {
    location.href = props.path
  } else {
    router.push({
    path: props.path,
  })
  }
  
}
</script>

<style scoped>
.item {
  width: 20%;
  height: 30%;
  margin: 30px;
}

.img {
  height: 80%;
  width: 100%;
  /* background-color: red; */
  border-radius: 20px;
}

.item .text {
  height: 20%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 1.5rem;
}
</style>
