From 4b14ea4f08f037061c3be7ab3eecf957d99e6de5 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 14 Oct 2025 19:44:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4RecommendPostsList?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../module/RecommendPostsList/index.vue       | 23 +++++--
 .../RecommendPostsList/styles/index.scss      | 67 ++++++-------------
 src/static/scss/font-size.scss                |  4 ++
 src/static/scss/index.scss                    |  1 +
 src/static/scss/margin.scss                   |  8 +++
 src/static/scss/padding.scss                  |  4 ++
 src/static/scss/rounded.scss                  |  8 +++
 src/static/scss/z-index.scss                  | 15 +++++
 8 files changed, 79 insertions(+), 51 deletions(-)
 create mode 100644 src/static/scss/z-index.scss

diff --git a/src/pages/index/components/module/RecommendPostsList/index.vue b/src/pages/index/components/module/RecommendPostsList/index.vue
index e76aa5b..e2c8605 100644
--- a/src/pages/index/components/module/RecommendPostsList/index.vue
+++ b/src/pages/index/components/module/RecommendPostsList/index.vue
@@ -1,17 +1,28 @@
 <template>
   <view class="container">
     <ModuleTitle :title="recommendTheme.themeName" />
-    <view class="container-scroll">
+
+    <view class="container-scroll font-size-0">
       <view
+        class="card-item bg-white inline-block rounded-20 mr-8"
         v-for="(item, index) in recommendTheme.recommendPostsList"
         :key="index"
+        @click="sendReply(item)"
       >
-        <view class="mk-card-item" @click="sendReply(item)">
-          <image class="card-img" :src="item.coverPhoto" mode="aspectFill" />
+        <view class="m-4 relative">
+          <image
+            class="card-img rounded-16 relative z-10"
+            :src="item.coverPhoto"
+            mode="aspectFill"
+          />
 
-          <view class="overlay-gradient">
-            <text class="overlay-text">{{ item.topic }}</text>
-          </view>
+          <view class="shadow absolute rounded-16"></view>
+        </view>
+
+        <view
+          class="card-text color-171717 font-size-14 line-height-20 border-box"
+        >
+          {{ item.topic }}
         </view>
       </view>
     </view>
diff --git a/src/pages/index/components/module/RecommendPostsList/styles/index.scss b/src/pages/index/components/module/RecommendPostsList/styles/index.scss
index b7a29be..23c230b 100644
--- a/src/pages/index/components/module/RecommendPostsList/styles/index.scss
+++ b/src/pages/index/components/module/RecommendPostsList/styles/index.scss
@@ -1,7 +1,3 @@
-.container {
-  width: 100%;
-}
-
 .container-scroll {
   display: flex;
   flex-direction: row;
@@ -9,45 +5,26 @@
   margin: 4px 0 6px;
 }
 
-.mk-card-item {
-  flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
-  width: 142px;
-  height: 126px;
-  border-radius: 10px;
-  overflow: hidden;
-  margin-right: 8px;
-  position: relative;
-
-  .card-img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  /* 渐变背景层 */
-  .overlay-gradient {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 50px; /* 渐变层高度，可调 */
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.001) 0%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
-    display: flex;
-    align-items: flex-end; /* 文字贴近底部 */
-    padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
-    box-sizing: border-box;
-  }
-
-  /* 渐变层上的文字 */
-  .overlay-text {
-    color: #fff;
-    font-weight: 500;
-    font-size: $uni-font-size-sm;
-    text-align: left;
-    width: 100%;
-  }
+.card-item {
+  width: 128px;
+  height: 164px;
+}
+
+.card-img {
+  height: 120px;
+  width: 120px;
+}
+
+.shadow {
+  background-color: #e5e8ee;
+  height: 96px;
+  width: 96px;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.card-text {
+  padding: 4px 8px 8px;
 }
diff --git a/src/static/scss/font-size.scss b/src/static/scss/font-size.scss
index c0f61da..b67e26c 100644
--- a/src/static/scss/font-size.scss
+++ b/src/static/scss/font-size.scss
@@ -1,4 +1,8 @@
 // 字体-size
+.font-size-0 {
+  font-size: 0px;
+}
+
 .font-size-12 {
   font-size: 12px;
 }
diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss
index ee25cc5..a8526f7 100644
--- a/src/static/scss/index.scss
+++ b/src/static/scss/index.scss
@@ -17,3 +17,4 @@
 @import "./scroll.scss";
 @import "./overflow.scss";
 @import "./width.scss";
+@import "./z-index.scss";
diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss
index 39370e1..00ad927 100644
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -1,4 +1,12 @@
 // 外边距-bottom
+.m-4 {
+  margin: 4px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
 .mb-10 {
   margin-bottom: 10px;
 }
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index 64a4c9a..988e645 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -1,4 +1,8 @@
 // 内边距
+.p-8 {
+  padding: 8px;
+}
+
 .p-12 {
   padding: 12px;
 }
diff --git a/src/static/scss/rounded.scss b/src/static/scss/rounded.scss
index 1c4b4e6..8e9fa31 100644
--- a/src/static/scss/rounded.scss
+++ b/src/static/scss/rounded.scss
@@ -11,6 +11,14 @@
   border-radius: 12px;
 }
 
+.rounded-16 {
+  border-radius: 16px;
+}
+
+.rounded-20 {
+  border-radius: 20px;
+}
+
 .rounded-full {
   border-radius: 50%;
 }
diff --git a/src/static/scss/z-index.scss b/src/static/scss/z-index.scss
new file mode 100644
index 0000000..560e3bd
--- /dev/null
+++ b/src/static/scss/z-index.scss
@@ -0,0 +1,15 @@
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}