fix: 修正首页产品卡片样式
- 去除虚线边框
This commit is contained in:
@ -4,47 +4,40 @@
|
|||||||
<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 class="production-carousel" height="auto" arrow="never" indicator-position="outside"
|
||||||
<el-carousel
|
:autoplay="false">
|
||||||
class="production-carousel" height="auto" arrow="never" indicator-position="outside"
|
<el-carousel-item v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
|
||||||
:autoplay="false">
|
class="production-list">
|
||||||
<el-carousel-item
|
<div class="block-group">
|
||||||
v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n"
|
<el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
|
||||||
class="production-list">
|
class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
|
||||||
<div class="block-group">
|
<template #header>
|
||||||
<el-card
|
<el-image :src="useStrapiMedia(item.cover?.url || '')"
|
||||||
v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index"
|
:alt="item.cover?.alternativeText || item.title" fit="cover"
|
||||||
class="block production-card" @click="handleProductionCardClick(item.documentId || '')">
|
style="width: 100%; height: 200px; border-radius: 8px;" lazy />
|
||||||
<template #header>
|
</template>
|
||||||
<el-image
|
<div class="card-body">
|
||||||
:src="useStrapiMedia(item.cover?.url || '')"
|
<!-- Name -->
|
||||||
:alt="item.cover?.alternativeText || item.title" fit="cover"
|
<div class="text-center">
|
||||||
style="width: 100%; height: 200px; border-radius: 8px;" lazy />
|
<span class="production-name">{{ item.title }}</span>
|
||||||
</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>
|
</div>
|
||||||
</el-card>
|
<!-- Description -->
|
||||||
</div>
|
<div class="card-description text-left opacity-25">{{ item.summary }}</div>
|
||||||
</el-carousel-item>
|
</div>
|
||||||
</el-carousel>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</section>
|
||||||
</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,45 +168,34 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.production-card:hover {
|
.production-card:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.production-name {
|
.production-name {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-description {
|
.card-description {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.production-card .el-image {
|
.production-card .el-image {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.card-body {
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
padding: 0px auto;
|
padding: 0px auto;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
|
||||||
|
|
||||||
.section p {
|
|
||||||
color: var(--el-text-color-regular);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user