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

src/pages/index/components/chat/ChatCardAi/styles/index.scss

@@ -5,15 +5,10 @@
   overflow-x: hidden; // ✅ 防止横向撑开
 
   .chat-ai {
-    margin: 6px 12px;
+    margin: 6px 0;
-    padding: 0 12px;
+    padding: 0 20px; // 消息内容的内边距 左右20px
-    max-width: 100%; // ✅ 限制最大宽度
     min-width: 100px;
-    background: rgba(255, 255, 255, 0.4);
+    max-width: 100%; // ✅ 限制最大宽度
-    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 4px 20px 20px 20px;
-    border: 1px solid;
-    border-color: #ffffff;
     overflow: hidden; // ✅ 超出内容被切掉
     word-wrap: break-word; // ✅ 长单词自动换行
     word-break: break-all; // ✅ 强制换行

src/pages/index/components/chat/ChatCardMine/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="chat-mine">
+  <view class="chat-mine bg-17294E">
     <text>{{ text }}</text>
     <slot></slot>
   </view>

src/pages/index/components/chat/ChatCardMine/styles/index.scss

@@ -1,12 +1,7 @@
 .chat-mine {
-  margin: 6px 12px;
+  margin: 6px 20px;
   padding: 8px 16px;
-
+  border-radius: 15px;
-  background-color: #00a6ff;
-  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 20px 4px 20px 20px;
-  border: 1px solid;
-  border-color: #ffffff;
 
   display: flex;
   flex-direction: column;

src/pages/index/components/chat/ChatCardOther/styles/index.scss

@@ -1,7 +1,6 @@
 .chat-other {
   width: 100%;
   margin: 6px 0;
-  padding: 0 12px;
   display: flex;
   flex-direction: column;
   max-width: 100%; // ✅ 限制最大宽度

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

@@ -7,13 +7,13 @@
     overflow-x: auto;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
-    padding-bottom: 12px;
+    padding: 8px 16px;
     box-sizing: border-box;
   }
 
   .more-tips-item {
     border-radius: 8px;
-    margin: 4px;
+    margin: 0 4px;
     box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
     background-color: $uni-bg-color;
     padding: 2px 12px;

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)">
+        <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,53 +1,27 @@
-.container {
-  width: 100%;
-}
-
 .container-scroll {
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
   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,5 @@
 @import "./scroll.scss";
 @import "./overflow.scss";
 @import "./width.scss";
+@import "./z-index.scss";
+@import "./white-scape.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/white-scape.scss

@@ -0,0 +1,3 @@
+.whitescape-nowrap {
+  white-space: nowrap;
+}

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