zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页顶部的搭建

Browse Source
This commit is contained in:
zoujing
2026-04-25 23:44:13 +08:00
parent 59e8b0325b
commit 9d734d6a4f
9 changed files with 1118 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/Home/components/HomeWelcome.vue Normal file
View File

@@ -0,0 +1,122 @@
<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="duration"
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 spriteStyle = computed(() => {
return {
ipLargeImage:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/onefeel/2045694865984802818.webp",
frameWidth: 353,
frameHeight: 353,
totalFrames: 96,
columns: 10,
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>

63
src/pages/Home/index.vue
View File

@@ -1,35 +1,54 @@
<template>
<view class="relative flex flex-col h-screen">
<view class="absolute top-0 left-0 w-full z-10" :style="{ paddingTop: statusBarHeight + 'px' }">
<view
class="absolute top-0 left-0 w-full z-10"
:style="{ paddingTop: statusBarHeight + 'px' }"
>
<HomeNavBar />
</view>
<view class="content relative flex-1">
<view class="relative flex-full">
<view class="relative">
<image class="w-full" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
mode="widthFix" />
<view class="absolute bottom-0 left-0 right-0 w-full head-content ">
<image
class="w-full block"
src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
mode="widthFix"
/>
<view
class="absolute bottom-0 left-0 right-0 flex-full px-12 pt-12 pb-4"
>
<HomeWelcome />
</view>
</view>
<AiTabSwitch v-model="tabIndex" :list="['探索发现', 'AI伴游']" @change="handleChange" />
<AiTabSwitch
v-model="tabIndex"
:list="['探索发现', 'AI伴游']"
@change="handleChange"
/>
<view>
<view class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
<text class="font-size-24 font-bold color-white mb-4">欢迎来到AI助手</text>
<text class="font-size-16 color-white mb-8">您的智能聊天伴侣，随时为您提供帮助</text>
<view
class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center"
>
<text class="font-size-24 font-bold color-white mb-4"
>欢迎来到AI助手</text
>
<text class="font-size-16 color-white mb-8"
>您的智能聊天伴侣，随时为您提供帮助</text
>
<view class="flex space-x-4">
<view class="px-6 py-2 bg-green-500 text-white rounded-lg">开始聊天</view>
<view class="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg">了解更多</view>
<view class="px-6 py-2 bg-green-500 text-white rounded-lg"
>开始聊天</view
>
<view class="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg"
>了解更多</view
>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
@@ -37,10 +56,10 @@ import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import HomeNavBar from "./components/HomeNavBar.vue";
import HomeWelcome from "./components/HomeWelcome.vue";
import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
const tabIndex = ref(0);
const handleChange = (i) => {
@@ -58,18 +77,10 @@ onLoad(() => {
},
});
});
</script>
<style scoped>
.head-content {
.bg-color {
background: red;
height: 104px;
}
</style>