feat: 页面结构的调整

2026-04-29 12:31:50 +08:00
parent 3b0fb23a5c
commit 3d6fe2642c
9 changed files with 95 additions and 151 deletions
--- a/src/pages/ChatMain/HomeWelcome/index.vue
+++ b/src/pages/ChatMain/HomeWelcome/index.vue
@@ -0,0 +1,120 @@
+<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">
+      <view class="flex flex-row flex-items-center flex-justify-between">
+        <text class="font-size-20 font-500 color-white"> 小七欢迎你～ </text>
+        <text class="font-size-20 font-500 color-white mt-4"> 26°C ☀️ </text>
+      </view>
+
+      <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
+        :duration="duration" :indicator-dots="false">
+        <swiper-item v-for="item in bannerList" :key="item.title">
+          <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10">
+            <text class="font-size-12 font-600 color-B45309">
+              {{ item.title }}
+            </text>
+            <view class="flex flex-row flex-justify-between">
+              <text class="font-size-10 font-500 color-D97706">
+                发布时间：{{ item.time }}
+              </text>
+              <text class="font-size-10 font-500 color-B45309 underline-text">
+                详情
+              </text>
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
+
+      <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" :duration="0.5" default-width="4px"
+        active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
+        active-color="rgba(255,255,255,1)" />
+    </view>
+  </view>
+</template>
+<script setup>
+import { ref } from "vue";
+import { defineProps, computed } from "vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+
+const autoplay = ref(true);
+const interval = ref(7000);
+const duration = ref(500);
+
+const currentIndex = ref(0);
+const bannerList = ref([
+  {
+    title: "小七欢迎你～",
+    time: "2025年7月12日 09:30",
+  },
+  {
+    title: "小8欢迎你～",
+    time: "2025年7月13日 09:30",
+  },
+  {
+    title: "小9欢迎你～",
+    time: "2025年7月15日 09:30",
+  },
+]);
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        }
+      };
+    },
+  },
+});
+
+const initPageImages = computed(() => {
+  return props.mainPageDataModel?.initPageImages || {};
+});
+
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    backgroundImageUrl: images.backgroundImageUrl,
+    ipLargeImage: images.ipLargeImage,
+    frameWidth: images.ipLargeImageWidth,
+    frameHeight: images.ipLargeImageHeight,
+    totalFrames: images.ipLargeTotalFrames,
+    columns: images.ipLargeColumns,
+    displayWidth: 105,
+  };
+});
+
+const onSwiperChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+
+</script>
+
+<style scoped>
+.swiper {
+  height: 50px;
+  margin-top: 8px;
+}
+
+.swiper-item {
+  display: block;
+  height: 46px;
+  background: #fffbeb;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  border: 2px solid #fef3c7;
+}
+
+.underline-text {
+  text-decoration: underline;
+  text-decoration-color: #b45309;
+}
+</style>