remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE: 网站的基本前端服务 #2

Merged
remilia merged 41 commits from dev into master 2025-09-06 16:11:23 +08:00
Conversation 0 Commits 41 Files Changed - -9
1 changed files with 0 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eb175889c6 - Show all commits

196
app/pages/index.vue
View File

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

1
app/types/strapi/singleTypes.ts
View File

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