style: 调整代码格式
- 根据ESLint文件规范格式化app文件夹中的代码
This commit is contained in:
@ -1,28 +1,62 @@
|
||||
<template>
|
||||
<div class="homepage">
|
||||
<div v-if="!pending" class="carousel">
|
||||
<el-carousel class="homepage-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 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="carousel-image-caption">{{ item.caption }}</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="carousel-image-caption">
|
||||
{{ item.caption }}
|
||||
</p>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<section>
|
||||
<h2>推荐产品</h2>
|
||||
<p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
|
||||
<el-carousel class="recommend-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="recommend-list">
|
||||
<p>
|
||||
探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
|
||||
</p>
|
||||
<el-carousel
|
||||
class="recommend-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="recommend-list"
|
||||
>
|
||||
<div class="recommend-card-group">
|
||||
<el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
|
||||
class="recommend-card" @click="handleProductionCardClick(item.documentId || '')">
|
||||
<el-card
|
||||
v-for="(item, index) in recommend_productions.slice(
|
||||
(n - 1) * 3,
|
||||
n * 3
|
||||
)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleProductionCardClick(item.documentId || '')"
|
||||
>
|
||||
<template #header>
|
||||
<el-image :src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
</template>
|
||||
<div class="recommend-card-body">
|
||||
<!-- Title -->
|
||||
@ -30,7 +64,9 @@
|
||||
<span class="recommend-card-title">{{ item.title }}</span>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div>
|
||||
<div class="recommend-card-description text-left opacity-25">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -40,15 +76,35 @@
|
||||
<section>
|
||||
<h2>推荐解决方案</h2>
|
||||
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
|
||||
<el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside"
|
||||
:autoplay="false">
|
||||
<el-carousel-item v-for="n in Math.floor(recommend_solutions.length / 3) + 1" :key="n" class="recommend-list">
|
||||
<el-carousel
|
||||
class="recommend-carousel"
|
||||
height="auto"
|
||||
arrow="never"
|
||||
indicator-position="outside"
|
||||
:autoplay="false"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="n in Math.floor(recommend_solutions.length / 3) + 1"
|
||||
:key="n"
|
||||
class="recommend-list"
|
||||
>
|
||||
<div class="recommend-card-group">
|
||||
<el-card v-for="(item, index) in recommend_solutions.slice((n - 1) * 3, n * 3)" :key="index"
|
||||
class="recommend-card" @click="handleSolutionCardClick(item.documentId || '')">
|
||||
<el-card
|
||||
v-for="(item, index) in recommend_solutions.slice(
|
||||
(n - 1) * 3,
|
||||
n * 3
|
||||
)"
|
||||
:key="index"
|
||||
class="recommend-card"
|
||||
@click="handleSolutionCardClick(item.documentId || '')"
|
||||
>
|
||||
<template #header>
|
||||
<el-image :src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy />
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.cover?.url || '')"
|
||||
:alt="item.cover?.alternativeText || item.title"
|
||||
fit="cover"
|
||||
lazy
|
||||
/>
|
||||
</template>
|
||||
<div class="recommend-card-body">
|
||||
<!-- Title -->
|
||||
@ -56,13 +112,14 @@
|
||||
<span class="recommend-card-title">{{ item.title }}</span>
|
||||
</div>
|
||||
<!-- Description -->
|
||||
<div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div>
|
||||
<div class="recommend-card-description text-left opacity-25">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
@ -72,72 +129,71 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi()
|
||||
const { getStrapiLocale } = useLocalizations()
|
||||
const strapiLocale = getStrapiLocale()
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const carouselImages = ref<StrapiImage[]>([])
|
||||
const recommend_productions = ref<Production[]>([])
|
||||
const recommend_solutions = ref<Solution[]>([])
|
||||
const carouselImages = ref<StrapiImage[]>([]);
|
||||
const recommend_productions = ref<Production[]>([]);
|
||||
const recommend_solutions = ref<Solution[]>([]);
|
||||
|
||||
const pending = ref(true)
|
||||
const pending = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiHomepage>('homepage', undefined, {
|
||||
const response = await findOne<StrapiHomepage>("homepage", undefined, {
|
||||
populate: {
|
||||
carousel: {
|
||||
populate: '*',
|
||||
populate: "*",
|
||||
},
|
||||
recommend_productions: {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
populate: "*",
|
||||
},
|
||||
},
|
||||
},
|
||||
recommend_solutions: {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
populate: "*",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
});
|
||||
if (response.data) {
|
||||
carouselImages.value = response.data.carousel || []
|
||||
recommend_productions.value = response.data.recommend_productions || []
|
||||
recommend_solutions.value = response.data.recommend_solutions || []
|
||||
console.log('推荐产品:', recommend_productions.value)
|
||||
console.log('推荐解决方案:', recommend_solutions.value)
|
||||
carouselImages.value = response.data.carousel || [];
|
||||
recommend_productions.value = response.data.recommend_productions || [];
|
||||
recommend_solutions.value = response.data.recommend_solutions || [];
|
||||
console.log("推荐产品:", recommend_productions.value);
|
||||
console.log("推荐解决方案:", recommend_solutions.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching homepage data:', error)
|
||||
console.error("Error fetching homepage data:", error);
|
||||
} finally {
|
||||
pending.value = false
|
||||
pending.value = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const handleProductionCardClick = (documentId: string) => {
|
||||
// 使用路由导航到产品详情页
|
||||
if (documentId) {
|
||||
const localePath = useLocalePath()
|
||||
const router = useRouter()
|
||||
router.push(localePath(`/productions/${documentId}`))
|
||||
const localePath = useLocalePath();
|
||||
const router = useRouter();
|
||||
router.push(localePath(`/productions/${documentId}`));
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleSolutionCardClick = (documentId: string) => {
|
||||
// 使用路由导航到解决方案详情页
|
||||
if (documentId) {
|
||||
const localePath = useLocalePath()
|
||||
const router = useRouter()
|
||||
router.push(localePath(`/solutions/${documentId}`))
|
||||
const localePath = useLocalePath();
|
||||
const router = useRouter();
|
||||
router.push(localePath(`/solutions/${documentId}`));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -157,7 +213,6 @@ section p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
.homepage-carousel .el-carousel__item {
|
||||
width: 100%;
|
||||
height: 33vw;
|
||||
@ -220,7 +275,6 @@ section p {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.recommend-card {
|
||||
width: 33%;
|
||||
transition: all 0.3s ease;
|
||||
@ -237,7 +291,6 @@ section p {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.recommend-card-body {
|
||||
margin: 10px auto;
|
||||
padding: 0px auto;
|
||||
@ -257,4 +310,4 @@ section p {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user