Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS

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 scroll-x whitescape-nowrap">
       <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>

src/pages/index/components/module/RecommendPostsList/styles/index.scss

@@ -1,53 +1,27 @@
-.container {
-  width: 100%;
-}
-
 .container-scroll {
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
   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;
 }