feat: 首页的调整

src/pages/ChatMain/HomeWelcome/index.vue

@@ -1,17 +1,17 @@
 <template>
   <view class="flex border-box w-full">
-    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
-      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
-      :displayWidth="spriteStyle.displayWidth" :fps="16" />
-
-    <view class="flex flex-col flex-full min-width-0">
+    <view class="flex flex-col flex-full min-width-0 mr-12">
       <view class="flex flex-row flex-items-center flex-justify-between min-width-0">
-        <text class="flex-full min-width-0 font-size-20 font-500 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
+        <text class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
         <text class="flex-shrink-0 font-size-20 font-500 color-white mt-4"> {{ weatherText }} </text>
       </view>
 
-      <NoticeMessage />
+      <NoticeMessage :sceneName="props.mainPageDataModel.sceneName" />
     </view>
+
+    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
+      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
+      :displayWidth="spriteStyle.displayWidth" :fps="16" />
   </view>
 </template>
 <script setup>

src/pages/ChatMain/NoticeMessage/index.vue

@@ -1,18 +1,17 @@
 <template>
-
-  <view >
+  <view v-if="hasBannerList">
     <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
       :duration="duration" :indicator-dots="false">
       <swiper-item v-for="item in bannerList" :key="item.entityName">
         <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
-          <text class="font-size-12 font-600 color-B45309">
+          <text class="text-color font-size-12 font-600">
             {{ item.entityName }}
           </text>
           <view class="flex flex-row flex-justify-between">
-            <text class="font-size-10 font-500 color-D97706">
+            <text class="text-color font-size-10 font-500">
               发布时间：{{ item.effectiveStartTime }}
             </text>
-            <text class="font-size-10 font-500 color-B45309 underline-text">
+            <text class="text-color font-size-10 font-500 underline-text">
               详情
             </text>
           </view>
@@ -26,19 +25,35 @@
     
   </view>
 
+  <view v-else-if="props.sceneName">
+    <view class="noMessage">
+      <text class="noMessage-text text-color font-size-12 font-600">
+        {{ props.sceneName }}
+      </text>
+    </view>
+  </view>
+
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { getTimeNoticeList } from "@/request/api/MainPageDataApi";
 import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constant/constant";
 
+const props = defineProps({
+  sceneName: {
+    type: String,
+    default: "",
+  },
+});
+
 const autoplay = ref(true);
 const interval = ref(7000);
 const duration = ref(500);
 
 const currentIndex = ref(0);
 const bannerList = ref([]);
+const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);
 
 const onSwiperChange = (e) => {
   currentIndex.value = e.detail.current;
@@ -47,7 +62,7 @@ const onSwiperChange = (e) => {
 const getTimeNoticeListData = async () => {
   const res = await getTimeNoticeList();
   if (res && res.code === 0) {
-    bannerList.value = res.data;
+    bannerList.value = Array.isArray(res.data) ? res.data : [];
   }
 }
 
@@ -75,15 +90,38 @@ const clickItem = (item) => {
 .swiper-item {
   display: block;
   height: 46px;
-  background: #fffbeb;
+  background: #EBEFFF;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   border-radius: 12px;
-  border: 2px solid #fef3c7;
+  border: 1px solid #C7D2FE;
 }
 
+.text-color {
+  color: $theme-color-500;
+}
 .underline-text {
   text-decoration: underline;
-  text-decoration-color: #b45309;
+  text-decoration-color: $theme-color-500;
+}
+
+.noMessage {
+  display: inline-flex;
+  margin-top: 8px;
+  padding: 4px 12px;
+  background: #EBEFFF;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  border: 1px solid #C7D2FE;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.noMessage-text {
+  line-height: 18px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-all;
 }
 
 </style>