feat: 网站首页添加新内容

- 首页推荐产品

app/pages/index.vue

@@ -1,32 +1,108 @@
 <template>
   <div class="homepage">
-    <div class="carousel">
+    <div v-if="!pending" class="carousel">
-      <el-carousel height="auto" :interval="5000" arrow="never" autoplay>
+      <el-carousel class="homepage-carousel" height="auto" :interval="5000" arrow="never" autoplay>
-        <el-carousel-item v-for="(item, index) in 3" :key="index">
+        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
           <div class="carousel-item">
-            <!-- <el-image class="carousel-image" :src="useStrapiMedia('/uploads/201605211508029798_e37af77a48.png')" fit="fill" /> -->
+            <el-image
-            <p class="image-label">{{ item }}</p>
+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>
 
-<style scoped>
+<script setup lang="ts">
-.carousel-item {
+const { findOne } = useStrapi()
-  width: 100%;
+const { getStrapiLocale } = useLocalizations()
-  height: 100%;
+const strapiLocale = getStrapiLocale()
-  background-color: #f5f7fa;
-}
 
-.carousel-image {
+const carouselImages = ref<StrapiImage[]>([])
-  position: relative;
+const recommend_productions = ref<Production[]>([])
-  width: 100%;
-  height: 100%;
-}
 
-.el-carousel__item {
+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 */
@@ -40,12 +116,90 @@
   margin: 0;
 }
 
-.el-carousel__item:nth-child(2n) {
+.homepage-carousel .carousel-item {
-  /* background-color: #99a9bf; */
+  width: 100%;
+  height: 100%;
+  background-color: #f5f7fa;
 }
 
-.el-carousel__item:nth-child(2n + 1) {
+.carousel-image {
-  /* background-color: #d3dce6; */
+  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 {

app/types/strapi/singleTypes.ts

@@ -8,4 +8,5 @@ export interface StrapiContactInfo extends StrapiEntity {
 
 export interface StrapiHomepage extends StrapiEntity {
     carousel: StrapiImage[];
+    recommend_productions: StrapiRelation<Production>[];
 }