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

fix: 修正首页产品卡片样式

Browse Source 
- 去除虚线边框
This commit is contained in:
R2m1liA
2025-09-08 15:23:56 +08:00
parent 968fd1532f
commit 031bf4a55e
1 changed files with 49 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/pages/index.vue
View File

@ -4,30 +4,24 @@
<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"> <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
<div class="carousel-item"> <div class="carousel-item">
<el-image <el-image class="carousel-image" :src="useStrapiMedia(item.url || '')"
class="carousel-image" :src="useStrapiMedia(item.url || '')"
:alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy /> :alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy />
<p v-if="item.caption" class="caption">{{ item.caption }}</p> <p v-if="item.caption" class="caption">{{ item.caption }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="recommend-production" style="padding: 2rem;"> <section>
<div class="section">
<h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2> <h2 style="font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;">推荐产品</h2>
<p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p> <p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p>
<el-carousel <el-carousel class="production-carousel" height="auto" arrow="never" indicator-position="outside"
class="production-carousel" height="auto" arrow="never" indicator-position="outside"
:autoplay="false"> :autoplay="false">
<el-carousel-item <el-carousel-item v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
class="production-list"> class="production-list">
<div class="block-group"> <div class="block-group">
<el-card <el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
class="block production-card" @click="handleProductionCardClick(item.documentId || '')"> class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
<template #header> <template #header>
<el-image <el-image :src="useStrapiMedia(item.cover?.url || '')"
:src="useStrapiMedia(item.cover?.url || '')"
:alt="item.cover?.alternativeText || item.title" fit="cover" :alt="item.cover?.alternativeText || item.title" fit="cover"
style="width: 100%; height: 200px; border-radius: 8px;" lazy /> style="width: 100%; height: 200px; border-radius: 8px;" lazy />
</template> </template>
@ -43,8 +37,7 @@ v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="i
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </section>
</div>
</div> </div>
<div v-else class="loading"> <div v-else class="loading">
<el-skeleton :rows="3" animated /> <el-skeleton :rows="3" animated />
@ -102,6 +95,16 @@ const handleProductionCardClick = (documentId: string) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
section {
padding: 0 2rem;
}
section p {
color: var(--el-text-color-regular);
line-height: 1.6;
}
.homepage-carousel .el-carousel__item { .homepage-carousel .el-carousel__item {
width: 100%; width: 100%;
height: 33vw; height: 33vw;
@ -165,12 +168,6 @@ const handleProductionCardClick = (documentId: string) => {
} }
.block {
width: 30%;
height: 100%;
border: 2px dashed #a3aac6;
}
.production-card { .production-card {
transition: all 0.3s ease; transition: all 0.3s ease;
text-align: center; text-align: center;
@ -201,9 +198,4 @@ const handleProductionCardClick = (documentId: string) => {
padding: 0px auto; padding: 0px auto;
height: 100px; height: 100px;
} }
.section p {
color: var(--el-text-color-regular);
line-height: 1.6;
}
</style> </style>