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

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>