feat: 首页欢迎语组件布局调整

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

@@ -1,17 +1,17 @@
 <template>
-  <view class="more-tips">
-    <view class="more-tips-scroll">
+  <view class="more-tips bg-white border-box">
+    <view class="font-size-0 whitesspace-nowrap scroll-x">
       <view
-        class="more-tips-item"
-        v-for="(item, index) in itemList"
+        class="more-tips-item border-box inline-block mr-8"
+        v-for="(item, index) in guideWords"
         :key="index"
       >
-        <view
-          class="more-tips-item-title font-500 font-size-12 line-height-24 text-center"
+        <text
+          class="font-500 font-size-12 line-height-24 text-center"
           @click="sendReply(item)"
         >
           {{ item }}
-        </view>
+        </text>
       </view>
     </view>
   </view>
@@ -19,10 +19,11 @@
 
 <script setup>
 import { defineProps } from "vue";
+
 const emits = defineEmits(["replySent"]);
 
 defineProps({
-  itemList: {
+  guideWords: {
     type: Array,
     default: [
       "定温泉票",

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

@@ -1,34 +1,15 @@
 .more-tips {
-  width: 100%;
-
-  &-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-    padding: 8px 0;
-    box-sizing: border-box;
-  }
+  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
+  border-radius: 0px 0px 20px 20px;
+  padding: 12px 0 12px 12px;
 
   .more-tips-item {
-    border-radius: 8px;
-    margin: 0 4px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    background-color: $uni-bg-color;
-    padding: 2px 12px;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    white-space: nowrap;
-    position: relative;
-    &:first-child {
-      margin-left: 0;
-    }
+    background: #f7f7f7;
+    border-radius: 5px;
+    padding: 6px 8px;
 
-    .more-tips-item-title {
-      color: #00a6ff;
-      white-space: nowrap;
+    &:last-child {
+      margin-right: 12px;
     }
   }
 }