minnan-tv/src/views/HomeView.vue

<script setup lang="ts">
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import ImageSwiper from '@/components/small/ImageSwiper.vue';
import Swiper1 from '@/assets/images/Home/swiper1.jpg';
import Swiper2 from '@/assets/images/Home/swiper2.jpg';
import Card1 from '@/assets/images/Home/Card/1.jpg';
import Card2 from '@/assets/images/Home/Card/2.jpg';
import Card3 from '@/assets/images/Home/Card/3.jpg';
import Card4 from '@/assets/images/Home/Card/4.jpg';
import Card5 from '@/assets/images/Home/Card/5.jpg';
import Card6 from '@/assets/images/Home/Card/6.jpg';
import Card7 from '@/assets/images/Home/Card/7.jpg';
import Card8 from '@/assets/images/Home/Card/8.jpg';
import { onMounted } from 'vue';

const router = useRouter();
const mainSwiperData = useSimpleDataLoader(async () => {
  return [
    {
      image: Swiper1,
      title: ''
    },
    {
      image: Swiper2,
      title: ''
    },
  ];
});
const mainCardData = [
  { 
    image: Card1,
    title: '保护概况',
    id: 1,
  },
  { 
    image: Card2,
    title: '闽南精神',
    id: 2,
    },
  { 
    image: Card3,
    title: '古早话仙',
    id: 3,
  },
  { 
    image: Card4,
    title: '民俗风情',
    id: 4,
    },
  { 
    image: Card5,
    title: '保护传承',
    id: 5,
  },
  { 
    image: Card6,
    title: '闽南时尚',
    id: 6,
  },
  { 
    image: Card7,
    title: '文化之旅',
    id: 7,
  },
  { 
    image: Card8,
    title: '厝边记忆',
    id: 8,
  },
];

function handleClick(id: number) {
  router.push({ name: 'Content', query: { tab: id } });
}
</script>

<template>
  <main class="main-content">
    <div class="main-bg absolute">
      <ImageSwiper :items="mainSwiperData.content.value ?? []" :autoplay="4000" :showAddons="false" :tabindex="-1">
        <template #item="{ item }">
          <img :src="item.image" alt="">
        </template>
      </ImageSwiper>
    </div>
    <div class="content absolute d-flex flex-col">
      <img src="@/assets/images/Home/title.png" alt="" class="main-title">
      <div class="main-card-space" />
      <div class="main-card-list">
        <div 
          v-for="(item, index) in mainCardData"
          :key="index"
          :tabindex="1"
          :style="{
            backgroundImage: `url(${item.image})`
          }"
          class="main-card round"
          @click="handleClick(item.id)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.content {
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 6%;
  padding-bottom: 6%;
}
.main-title {
  width: 40%;
}
.main-card-space {
  height: 50%;
}

.main-card-list {
  position: relative;
  height: 45%;
  min-height: 30vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  font-size: 26px;

  .main-card {
    font-size: 3cqh;
    padding: 0 15%;
    color: var(--color-primary);
  }
}

@media (max-width: 800px) {
  .content {
    padding-left: 10%;
    padding-right: 2%;
  }
}
@media (max-height: 400px) {
  .main-card-space {
    height: 16%;
  }
}
@media (max-height: 600px) {
  .content {
    padding-top: 7%;
    padding-bottom: 1%;
  }
  .main-card-space {
    height: 24%;
  }
}

</style>