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

106
app/pages/index.vue
View File

@ -4,47 +4,40 @@
<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 || '')"
<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>
<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>
</el-card>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<!-- Description -->
<div class="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">
<el-skeleton :rows="3" animated />
@ -102,6 +95,16 @@ const handleProductionCardClick = (documentId: string) => {
</script>
<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 {
width: 100%;
height: 33vw;
@ -165,45 +168,34 @@ const handleProductionCardClick = (documentId: string) => {
}
.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);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.production-name {
font-size: 1rem;
font-weight: 600;
font-size: 1rem;
font-weight: 600;
}
.card-description {
font-size: 0.8rem;
margin-top: 5px;
font-size: 0.8rem;
margin-top: 5px;
}
.production-card .el-image {
height: 150px;
border-radius: 4px;
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;
margin: 10px auto;
padding: 0px auto;
height: 100px;
}
</style>