feat: 实现了无限轮播的展示卡片组件

2026-04-28 13:59:43 +08:00
parent 2c9377c019
commit 4d975417da
3 changed files with 566 additions and 8 deletions
--- a/src/pages/Discovery/components/CardSwiper/styles/index.scss
+++ b/src/pages/Discovery/components/CardSwiper/styles/index.scss
@@ -0,0 +1,97 @@
+.card-swiper {
+  width: 100%;
+}
+
+.swiper-stage {
+  position: relative;
+  width: 100%;
+  height: 278px;
+  overflow: hidden;
+}
+
+.swiper-card {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 236px;
+  height: 234px;
+  max-width: calc(100% - 56px);
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+.card-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.14);
+}
+
+.card-media {
+  width: 100%;
+  height: 142px;
+  margin: 0;
+  overflow: hidden;
+  border-radius: 20px;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.card-body {
+  padding: 0 8px;
+}
+
+.card-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+  min-width: 50px;
+  max-width: 100%;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: #fff4db;
+  color: #d78621;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.card-title {
+  margin-top: 6px;
+  color: #172033;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.card-desc {
+  margin-top: 2px;
+  color: #7f8ea3;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.card-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.42);
+  pointer-events: none;
+}
+
+.is-current .card-shell {
+  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
+}
+
+.is-single .swiper-stage {
+  overflow: visible;
+}