jinshen-website/app/pages/index.vue

<template>
  <div class="homepage">
    <div v-if="!pending" class="carousel">
      <el-carousel class="homepage-carousel" height="auto" :interval="5000" arrow="never" autoplay>
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <div class="carousel-item">
            <el-image
class="carousel-image" :src="useStrapiMedia(item.url || '')"
              :alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy />
            <p v-if="item.caption" class="caption">{{ item.caption }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="recommend-production" style="padding: 2rem;">
        <div class="section">
          <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
          <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
          <el-carousel
class="production-carousel" height="auto" arrow="never" indicator-position="outside"
            :autoplay="false">
            <el-carousel-item
v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
              class="production-list">
              <div class="block-group">
                <el-card
v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
                  class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
                  <template #header>
                    <el-image
:src="useStrapiMedia(item.cover?.url || '')"
                      :alt="item.cover?.alternativeText || item.title" fit="cover"
                      style="width: 100%; height: 200px; border-radius: 8px;" lazy />
                  </template>
                  <div class="card-body">
                    <!-- Name -->
                    <div class="text-center">
                      <span class="production-name">{{ item.title }}</span>
                    </div>
                    <!-- Description -->
                    <div class="card-description text-left opacity-25">{{ item.summary }}</div>
                  </div>
                </el-card>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div v-else class="loading">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()

const carouselImages = ref<StrapiImage[]>([])
const recommend_productions = ref<Production[]>([])

const pending = ref(true)

onMounted(async () => {
  try {
    const response = await findOne<StrapiHomepage>('homepage', undefined, {
      populate: {
        carousel: {
          populate: '*',
        },
        recommend_productions: {
          populate: {
            cover: {
              populate: '*',
            },
          },
        }
      },
      locale: strapiLocale,
    })
    if (response.data) {
      carouselImages.value = response.data.carousel || []
      recommend_productions.value = response.data.recommend_productions || []
      console.log('推荐产品:', recommend_productions.value)
    }
  } catch (error) {
    console.error('Error fetching homepage data:', error)
  } finally {
    pending.value = false
  }
})

const handleProductionCardClick = (documentId: string) => {
  // 使用路由导航到产品详情页
  if (documentId) {
    const localePath = useLocalePath()
    const router = useRouter()
    router.push(localePath(`/productions/${documentId}`))
  }
}
</script>

<style scoped lang="scss">
.homepage-carousel .el-carousel__item {
  width: 100%;
  height: 33vw;
  /* 16:9 Aspect Ratio */
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.8;
  line-height: 300px;
  margin: 0;
}

.homepage-carousel .carousel-item {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
}

.carousel-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
}

.production-carousel :deep(.el-carousel__button) {
  /* 指示器按钮样式 */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #475669;
  transition: all 0.3s ease;
}

.production-list {
  display: flex;
  padding: 1rem;
  height: 400px;
}

.block-group {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}


.block {
  width: 30%;
  height: 100%;
  border: 2px dashed #a3aac6;
}

.production-card {
  transition: all 0.3s ease;
  text-align: center;
}

.production-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.production-name {
    font-size: 1rem;
    font-weight: 600;
}

.card-description {
    font-size: 0.8rem;
    margin-top: 5px;
}

.production-card .el-image {
    height: 150px;
    border-radius: 4px;
}

.card-body {
    margin: 10px auto;
    padding: 0px auto;
    height: 100px;
}

.section p {
  color: var(--el-text-color-regular);
  line-height: 1.6;
}
</style>