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

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

@@ -1,51 +1,59 @@
 <template>
-  <view class="top-bg-content">
-    <view class="top-item">
-      <!-- :style="backgroundStyle" -->
-      <image
-        class="top-item-left"
-        :src="initPageImages.welcomeImageUrl"
-        mode="aspectFit"
-      ></image>
-      <image
-        class="top-item-right"
-        :src="initPageImages.logoImageUrl"
-        mode="aspectFit"
-      ></image>
+  <view class="welcome-content border-box p-20">
+    <view class="wrap rounded-20">
+      <view
+        class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
+      >
+        <image
+          class="ip relative"
+          :src="initPageImages.logoImageUrl"
+          mode="aspectFit"
+        />
+        <view
+          class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
+        >
+          {{ welcomeContent }}
+        </view>
+      </view>
+
+      <ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
     </view>
-    <ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
   </view>
 </template>
 
 <script setup>
 import { defineProps, computed } from "vue";
-import ChatCardAI from "../ChatCardAi/index.vue";
+import ChatMoreTips from "../ChatMoreTips/index.vue";
 
 const props = defineProps({
-  initPageImages: {
+  mainPageDataModel: {
     type: Object,
-    default: {
-      backgroundImageUrl: "",
-      logoImageUrl: "",
-      welcomeImageUrl: "",
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        },
+        welcomeContent:
+          "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
+        guideWords: [
+          "定温泉票",
+          "定酒店",
+          "优惠套餐",
+          "亲子玩法",
+          "了解交通",
+          "看看酒店",
+          "看看美食",
+        ],
+      };
     },
   },
-  welcomeContent: {
-    type: String,
-    default:
-      "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
-  },
 });
 
-// 计算背景样式
-const backgroundStyle = computed(() => {
-  return {
-    backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-  };
-});
+const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
+const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
+const guideWords = computed(() => props.mainPageDataModel.guideWords);
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,25 +1,10 @@
-.top-bg-content {
-  display: flex;
-  justify-content: flex-end;
-  align-items: stretch;
-  flex-direction: column;
+.wrap {
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
-.top-item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 32px;
-  margin-bottom: -6px;
-}
-
-.top-item-left {
-  width: 118px;
-  height: 52px;
-}
-
-.top-item-right {
-  width: 130px;
-  height: 130px;
+.ip {
+  flex: 0 0 123px;
+  width: 123px;
+  height: 166px;
+  margin-top: -20px;
 }