feat: 首页主题样式调整

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

@@ -6,12 +6,12 @@
         <image
           class="voice-icon"
           v-if="!isVoiceMode"
-          src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_voice_icon.png"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/input_voice_icon.png"
         />
         <image
           class="voice-icon"
           v-else
-          src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_keyboard_icon.png"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/input_keyboard_icon.png"
         />
       </view>
 
@@ -57,7 +57,7 @@
           <image
             v-else
             class="send-icon"
-            src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_send_icon.png"
+            src="https://oss.nianxx.cn/mp/static/version_101/home/input_send_icon.png"
           />
         </view>
       </view>

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

@@ -7,7 +7,7 @@
 
     <!-- 消息列表（可滚动区域） -->
     <scroll-view
-      class="main flex-full"
+      class="main flex-full overflow-hidden scroll-y"
       scroll-y
       :scroll-top="scrollTop"
       :scroll-with-animation="true"
@@ -77,8 +77,7 @@
         </template>
 
         <template v-else-if="item.msgType === MessageRole.ME">
-          <ChatCardMine class="message-item-mine" :text="item.msg">
+          <ChatCardMine class="message-item-mine" :text="item.msg" />
-          </ChatCardMine>
         </template>
 
         <template v-else>

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

@@ -1,4 +1,5 @@
 .footer {
-  height: 118px;
   // touch-action: pan-x;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 8px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
 }

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

@@ -1,22 +1,18 @@
 <template>
-  <view class="quick-access">
+  <view
-    <view class="quick-access-scroll">
+    class="quick-access border-box flex flex-nowrap items-center ml-20 pt-8 pb-8"
-      <view
+  >
-        class="quick-access-item"
+    <view
-        v-for="(item, index) in itemList"
+      class="item border-box rounded-50 flex flex-row items-center"
-        :key="index"
+      v-for="(item, index) in itemList"
-        @click="sendReply(item)"
+      :key="index"
-      >
+      @click="sendReply(item)"
-        <image
+    >
-          class="quick-access-item-bg"
+      <view class="flex items-center justify-center">
-          src="https://oss.nianxx.cn/mp/static/quick/quick_icon_bg.png"
+        <image v-if="item.icon" class="icon" :src="item.icon" />
-          mode="aspectFill"
+        <text class="font-size-14 color-2D91FF line-height-20">
-        />
+          {{ item.title }}
-        <view class="quick-access-item-title">
+        </text>
-          <image class="quick-access-item-icon" :src="item.icon" />
-          <text>{{ item.title }}</text>
-        </view>
-        <text class="quick-access-item-content">{{ item.content }}</text>
       </view>
     </view>
   </view>
@@ -25,7 +21,25 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { currentClientType, ClientType } from "@/constant/base";
-const itemList = ref([]);
+
+const itemList = ref([
+  {
+    icon: "",
+    title: "快速预定",
+  },
+  {
+    icon: "",
+    title: "探索发现",
+  },
+  {
+    icon: "",
+    title: "反馈意见",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
+    title: "更多",
+  },
+]);
 
 const emits = defineEmits(["replySent"]);
 
@@ -33,9 +47,9 @@ const sendReply = (item) => {
   emits("replySent", item); // 向父组件传递数据
 };
 
-onMounted(() => {
+// onMounted(() => {
-  initData();
+//   initData();
-});
+// });
 
 const initData = () => {
   itemList.value =
@@ -43,24 +57,28 @@ const initData = () => {
       ? [
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
+            showIcon: false,
             title: "快速预定",
             content: "预定门票、房间、餐食",
             type: "Command.quickBooking",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
+            showIcon: false,
             title: "探索发现",
             content: "探索玩法、出片佳地",
             type: "Command.discovery",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
+            showIcon: false,
             title: "反馈意见",
             content: "有意见告诉沐沐",
             type: "Command.feedbackCard",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
+            showIcon: false,
             title: "订单/工单",
             content: "我的订单/工单",
             type: "MyOrder",
@@ -69,24 +87,28 @@ const initData = () => {
       : [
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
+            showIcon: false,
             title: "快速预定",
             content: "预定门票、房间、餐食",
             type: "Command.quickBooking",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
+            showIcon: false,
             title: "探索发现",
             content: "探索玩法、出片佳地",
             type: "Command.discovery",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
+            showIcon: false,
             title: "订单/工单",
             content: "我的订单/工单",
             type: "MyOrder",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
+            showIcon: false,
             title: "反馈意见",
             content: "有意见告诉朵朵",
             type: "Command.feedbackCard",

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

@@ -1,67 +1,15 @@
 .quick-access {
-  width: 100%;
+  gap: 0 9px;
-
+}
-  &-scroll {
+
-    display: flex;
+.item {
-    flex-direction: row;
+  border: 1px solid #fff;
-    overflow-x: auto;
+  background-color: rgba(255, 255, 255, 0.5);
-    white-space: nowrap;
+  padding: 4px 8px;
-    -webkit-overflow-scrolling: touch;
+}
-  }
+
-
+.icon {
-  .quick-access-item {
+  width: 20px;
-    flex: 0 0 104px;
+  height: 20px;
-    border-radius: 8px;
+  margin-right: 2px;
-    margin: 4px 4px 8px 4px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    padding: 12px;
-    display: inline-flex;
-    flex-direction: column;
-    position: relative;
-
-    &:first-child {
-      margin-left: 12px;
-    }
-
-    &:last-child {
-      margin-right: 12px;
-    }
-
-    .quick-access-item-bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      border-radius: 8px;
-      width: 128px;
-      height: 56px;
-    }
-
-    .quick-access-item-title {
-      display: flex;
-      align-items: center;
-      z-index: 1;
-
-      .quick-access-item-icon {
-        width: 16px;
-        height: 16px;
-        margin-right: 4px;
-      }
-
-      text {
-        font-weight: 500;
-        font-size: $uni-font-size-sm;
-        color: #201f32;
-        line-height: 16px;
-      }
-    }
-
-    .quick-access-item-content {
-      z-index: 1;
-      margin-top: 4px;
-      font-size: 10px;
-      color: #678cad;
-      line-height: 18px;
-    }
-  }
 }

src/static/scss/margin.scss

@@ -18,3 +18,7 @@
 .mb-12 {
   margin-bottom: 12px;
 }
+
+.ml-20 {
+  margin-left: 20px;
+}

src/static/scss/padding.scss

@@ -3,6 +3,14 @@
   padding: 8px;
 }
 
+.pt-8 {
+  padding-top: 8px;
+}
+
+.pb-8 {
+  padding-bottom: 8px;
+}
+
 .p-12 {
   padding: 12px;
 }

src/static/scss/rounded.scss

@@ -19,6 +19,10 @@
   border-radius: 20px;
 }
 
+.rounded-50 {
+  border-radius: 50px;
+}
+
 .rounded-full {
   border-radius: 50%;
 }