<script setup lang="ts">
import dataList from "@/data/data";

const getAssetURL = (image: string) => {
  return new URL(`../../assets/img/home/${image}`, import.meta.url).href;
};

const router = useRouter();
const goDetail = (id: string) => {

  router.push(
    {
      path: "/exhibitionList",
      query: {
        id: id,
      },
    },
    5000
  );
};
onMounted(() => {
  //console.log(dataList);
});
</script>

<template>
  <div class="all">
    <div
      v-for="(item, index) in dataList"
      :key="item.id"
      class="box"
      :style="{
        marginBottom: index == dataList.length - 1 ? '' : '20px',
      }"
      @click="goDetail(item.id)"
    >
      <img :src="getAssetURL(item.coverImg)" alt="" />
      <div class="title-box">{{ item.name }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.all {
  width: 100%;
  height: 100%;
  padding: 8%;
  overflow: auto;
  .box {
    width: 100%;
    height: 31%;
    position: relative;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
    .title-box {
      width: 100%;
      height: 2.5rem;
      background: #2c2c2c;
      position: absolute;
      bottom: 0px;
      border-radius: 0 0 8px 8px;
      font-family: "Microsoft YaHei-Bold, Microsoft YaHei";
      font-size: 14px;
      color: #ffffff;
      line-height: 2.5rem;
      letter-spacing: 2px;
      font-weight: bold;
      padding-left: 5%;
    }
  }
}
</style>
