|
|
@ -78,12 +78,12 @@ export default { |
|
|
// 容器高度(像素)转rem(假设1rem=80px,根据你的项目基准调整) |
|
|
// 容器高度(像素)转rem(假设1rem=80px,根据你的项目基准调整) |
|
|
const containerHeightRem = this.swiperHeight / 80 || 6.8125 |
|
|
const containerHeightRem = this.swiperHeight / 80 || 6.8125 |
|
|
// 封面宽度 = 容器高度的 20%(可根据需要调整比例) |
|
|
// 封面宽度 = 容器高度的 20%(可根据需要调整比例) |
|
|
const imgWidthRem = containerHeightRem * 0.22 |
|
|
|
|
|
|
|
|
const imgWidthRem = containerHeightRem * 0.18 |
|
|
// 封面高度 = 宽度 × 1.34(图书封面标准比例 3:4 左右) |
|
|
// 封面高度 = 宽度 × 1.34(图书封面标准比例 3:4 左右) |
|
|
const imgHeightRem = imgWidthRem * 1.34 |
|
|
const imgHeightRem = imgWidthRem * 1.34 |
|
|
// 文字区域字体大小 = 容器高度的 3.5% |
|
|
// 文字区域字体大小 = 容器高度的 3.5% |
|
|
const titleFontSize = containerHeightRem * 0.04 |
|
|
|
|
|
const authorFontSize = containerHeightRem * 0.034 |
|
|
|
|
|
|
|
|
const titleFontSize = containerHeightRem * 0.038 |
|
|
|
|
|
const authorFontSize = containerHeightRem * 0.030 |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
imgWidth: `${imgWidthRem}rem`, |
|
|
imgWidth: `${imgWidthRem}rem`, |
|
|
@ -102,7 +102,10 @@ export default { |
|
|
spaceBetween: 0, |
|
|
spaceBetween: 0, |
|
|
height: this.swiperHeight || 540, // 使用动态高度,备用值540 |
|
|
height: this.swiperHeight || 540, // 使用动态高度,备用值540 |
|
|
loop: false, |
|
|
loop: false, |
|
|
autoplay: true, |
|
|
|
|
|
|
|
|
autoplay: { |
|
|
|
|
|
delay: 10000, |
|
|
|
|
|
direction: 'down' |
|
|
|
|
|
}, |
|
|
observer: true, |
|
|
observer: true, |
|
|
observeParents: true, |
|
|
observeParents: true, |
|
|
autoHeight: false, |
|
|
autoHeight: false, |
|
|
@ -273,7 +276,7 @@ export default { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
justify-content: flex-start; |
|
|
padding: 0.1rem; |
|
|
padding: 0.1rem; |
|
|
&.empty-card { |
|
|
&.empty-card { |
|
|
visibility: hidden; |
|
|
visibility: hidden; |
|
|
@ -305,7 +308,7 @@ export default { |
|
|
font-weight: normal; |
|
|
font-weight: normal; |
|
|
display: -webkit-box; |
|
|
display: -webkit-box; |
|
|
-webkit-box-orient: vertical; |
|
|
-webkit-box-orient: vertical; |
|
|
-webkit-line-clamp: 1; |
|
|
|
|
|
|
|
|
-webkit-line-clamp: 2; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
text-overflow: ellipsis; |
|
|
} |
|
|
} |
|
|
@ -318,6 +321,7 @@ export default { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
text-overflow: ellipsis; |
|
|
line-height: 1.2; |
|
|
line-height: 1.2; |
|
|
|
|
|
margin-top: 4px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|