|
|
@@ -1,56 +1,154 @@
|
|
|
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
|
|
<route lang="json5" type="home">
|
|
|
{
|
|
|
+ layout: 'tabbar',
|
|
|
style: {
|
|
|
navigationStyle: 'custom',
|
|
|
navigationBarTitleText: '首页',
|
|
|
},
|
|
|
}
|
|
|
</route>
|
|
|
-<template>
|
|
|
- <view
|
|
|
- class="bg-white overflow-hidden pt-2 px-4"
|
|
|
- :style="{ marginTop: safeAreaInsets?.top + 'px' }"
|
|
|
- >
|
|
|
- <view class="mt-12">
|
|
|
- <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
|
|
|
- </view>
|
|
|
- <view class="text-center text-4xl main-title-color mt-4">unibest</view>
|
|
|
- <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
|
|
|
-
|
|
|
- <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
|
|
|
- <view class="text-center mt-8">
|
|
|
- 当前平台是：
|
|
|
- <text class="text-green-500">{{ PLATFORM.platform }}</text>
|
|
|
- </view>
|
|
|
- <view class="text-center mt-4">
|
|
|
- 模板分支是：
|
|
|
- <text class="text-green-500">base</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import PLATFORM from '@/utils/platform'
|
|
|
+import Card from '@/components/card.vue'
|
|
|
+import HotActivity from '@/components/hot-activity.vue'
|
|
|
+import MomentItem from '@/components/moment-item.vue'
|
|
|
+import Scaner from '@/components/scaner.vue'
|
|
|
+import TiltedButton from '@/components/tilted-button.vue'
|
|
|
+import useRequest from '@/hooks/useRequest'
|
|
|
+import dayjs from 'dayjs'
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'Home',
|
|
|
})
|
|
|
-
|
|
|
-// 获取屏幕边界到安全区域距离
|
|
|
-const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
-const author = ref('菲鸽')
|
|
|
-const description = ref(
|
|
|
- 'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
|
|
-)
|
|
|
+const items = [
|
|
|
+ { id: 1, title: '设计游学', desc: '游学项目', path: '/pages/study-tour/index', icon: '' },
|
|
|
+ { id: 2, title: '线下活动', desc: '骑行俱乐部', path: '/pages/offine-activity/index', icon: '' },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '设计传播',
|
|
|
+ desc: '运营推广',
|
|
|
+ path: '/pages/spread/index',
|
|
|
+ icon: '',
|
|
|
+ },
|
|
|
+ { id: 4, title: '品质商城', desc: '所需周边', path: '/mall/index', icon: '' },
|
|
|
+]
|
|
|
// 测试 uni API 自动引入
|
|
|
-onLoad(() => {
|
|
|
- console.log(author)
|
|
|
+const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
|
|
|
+ initialData: {
|
|
|
+ banners: [],
|
|
|
+ hots: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '日本研学·东京艺术大学游学',
|
|
|
+ img: '',
|
|
|
+ start: dayjs('2024-07-15').toDate(),
|
|
|
+ end: dayjs('2024-08-10').toDate(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '日本研学·东京艺术大学游学',
|
|
|
+ img: '',
|
|
|
+ start: dayjs('2024-07-15').toDate(),
|
|
|
+ end: dayjs('2024-08-10').toDate(),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dynamics: [
|
|
|
+ {
|
|
|
+ author: {
|
|
|
+ avatar:
|
|
|
+ 'https://images.pexels.com/users/avatars/1127278/ekrulila-867.png?auto=compress&fit=crop&h=50&w=50&dpr=2',
|
|
|
+ nickname: '苏小萌',
|
|
|
+ level: '0',
|
|
|
+ },
|
|
|
+ content: '用心做好设计，为客户创造美好家居环境',
|
|
|
+ images: [
|
|
|
+ 'https://images.pexels.com/photos/27438918/pexels-photo-27438918.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
|
|
+ ],
|
|
|
+ tags: ['意大利游学设计班'],
|
|
|
+ shares: 0,
|
|
|
+ comments: 0,
|
|
|
+ likes: 0,
|
|
|
+ createdAt: dayjs('2024-07-15').toDate(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ author: {
|
|
|
+ avatar:
|
|
|
+ 'https://images.pexels.com/users/avatars/1127278/ekrulila-867.png?auto=compress&fit=crop&h=50&w=50&dpr=2',
|
|
|
+ nickname: '苏小萌',
|
|
|
+ level: '0',
|
|
|
+ },
|
|
|
+ content: '用心做好设计，为客户创造美好家居环境',
|
|
|
+ images: [
|
|
|
+ 'https://images.pexels.com/photos/27351166/pexels-photo-27351166.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
|
|
+ ],
|
|
|
+ tags: ['意大利游学设计班'],
|
|
|
+ shares: 0,
|
|
|
+ comments: 0,
|
|
|
+ likes: 0,
|
|
|
+ createdAt: dayjs('2024-07-15').toDate(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ author: {
|
|
|
+ avatar:
|
|
|
+ 'https://images.pexels.com/users/avatars/1127278/ekrulila-867.png?auto=compress&fit=crop&h=50&w=50&dpr=2',
|
|
|
+ nickname: '苏小萌',
|
|
|
+ level: '0',
|
|
|
+ },
|
|
|
+ content: '用心做好设计，为客户创造美好家居环境',
|
|
|
+ images: [
|
|
|
+ 'https://images.pexels.com/photos/27438918/pexels-photo-27438918.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
|
|
+ 'https://images.pexels.com/photos/27351166/pexels-photo-27351166.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
|
|
|
+ ],
|
|
|
+ tags: ['意大利游学设计班'],
|
|
|
+ shares: 0,
|
|
|
+ comments: 0,
|
|
|
+ likes: 0,
|
|
|
+ createdAt: dayjs('2024-07-15').toDate(),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ studyTour: null,
|
|
|
+ },
|
|
|
})
|
|
|
+console.log(data.value)
|
|
|
+onLoad(() => {})
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.main-title-color {
|
|
|
- color: #d14328;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <view class="">
|
|
|
+ <view class="bg-black w-full pos-relative aspect-[1.26/1]"></view>
|
|
|
+ <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
|
|
|
+ <view class="w-full px-3.5 box-border grid grid-cols-2 grid-gap-4 my-6">
|
|
|
+ <template v-for="it of items" :key="it.id">
|
|
|
+ <view class="">
|
|
|
+ <Card>
|
|
|
+ <view class="flex">
|
|
|
+ <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5">
|
|
|
+ <view class="my-0.75">{{ it.title }}</view>
|
|
|
+ <view class="text-[rgba(0,0,0,0.45)] text-3.5 my-2.5">{{ it.desc }}</view>
|
|
|
+ </view>
|
|
|
+ <view></view>
|
|
|
+ </view>
|
|
|
+ </Card>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ <view class="my-6 mx-3.5">
|
|
|
+ <HotActivity class="my-8"></HotActivity>
|
|
|
+ </view>
|
|
|
+ <view class="my-6 mx-3.5">
|
|
|
+ <Card>一分钟快速了解筑巢荟</Card>
|
|
|
+ </view>
|
|
|
+ <view class="mx-3.5 text-5 font-400">设计圈</view>
|
|
|
+ <view class="mx-3.5">
|
|
|
+ <template v-for="it of data.dynamics" :key="it.id">
|
|
|
+ <view class="my-6">
|
|
|
+ <MomentItem :options="it">{{ it.title }}</MomentItem>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style></style>
|
