feat: 调整RecommendPostsList组件样式

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)">
+        <view class="m-4 relative">
-          <image class="card-img" :src="item.coverPhoto" mode="aspectFill" />
+          <image
+            class="card-img rounded-16 relative z-10"
+            :src="item.coverPhoto"
+            mode="aspectFill"
+          />
 
-          <view class="overlay-gradient">
+          <view class="shadow absolute rounded-16"></view>
-            <text class="overlay-text">{{ item.topic }}</text>
         </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,7 +1,3 @@
-.container {
-  width: 100%;
-}
-
 .container-scroll {
   display: flex;
   flex-direction: row;
@@ -9,45 +5,26 @@
   margin: 4px 0 6px;
 }
 
-.mk-card-item {
+.card-item {
-  flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
+  width: 128px;
-  width: 142px;
+  height: 164px;
-  height: 126px;
+}
-  border-radius: 10px;
+
-  overflow: hidden;
+.card-img {
-  margin-right: 8px;
+  height: 120px;
-  position: relative;
+  width: 120px;
-
+}
-  .card-img {
+
-    width: 100%;
+.shadow {
-    height: 100%;
+  background-color: #e5e8ee;
-    display: block;
+  height: 96px;
-  }
+  width: 96px;
-
+  bottom: -4px;
-  /* 渐变背景层 */
+  left: 50%;
-  .overlay-gradient {
+  transform: translateX(-50%);
-    position: absolute;
+  z-index: 1;
-    bottom: 0;
+}
-    left: 0;
+
-    width: 100%;
+.card-text {
-    height: 50px; /* 渐变层高度，可调 */
+  padding: 4px 8px 8px;
-    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%;
-  }
 }

src/static/scss/font-size.scss

@@ -1,4 +1,8 @@
 // 字体-size
+.font-size-0 {
+  font-size: 0px;
+}
+
 .font-size-12 {
   font-size: 12px;
 }

src/static/scss/index.scss

@@ -17,3 +17,4 @@
 @import "./scroll.scss";
 @import "./overflow.scss";
 @import "./width.scss";
+@import "./z-index.scss";

src/static/scss/margin.scss

@@ -1,4 +1,12 @@
 // 外边距-bottom
+.m-4 {
+  margin: 4px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
 .mb-10 {
   margin-bottom: 10px;
 }

src/static/scss/padding.scss

@@ -1,4 +1,8 @@
 // 内边距
+.p-8 {
+  padding: 8px;
+}
+
 .p-12 {
   padding: 12px;
 }

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%;
 }

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;
+}