92 lines
2.2 KiB
Vue
92 lines
2.2 KiB
Vue
<route lang="json5" type="home">
|
|
{
|
|
style: {
|
|
navigationStyle: 'custom',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<scroll-view class="" :scroll-y="true">
|
|
<view class="gradient-background relative">
|
|
<wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
|
|
<template #left>
|
|
<navigator open-type="navigate" class="left-icon" url="/pages/home/city/index">
|
|
<text class="color-[#303030] font-[28rpx] font-medium">
|
|
{{ cityStore.userCity.city.provincename }}
|
|
</text>
|
|
</navigator>
|
|
</template>
|
|
<template #title>
|
|
<view class="title">
|
|
<image class="w-[198rpx] h-[28rpx]" src="/static/svg/app-logo.svg"></image>
|
|
</view>
|
|
</template>
|
|
</wd-navbar>
|
|
<image
|
|
class="h-[700rpx] w-full absolute top-0 left-0 z-[-1]"
|
|
src="/static/images/home/home-background.png"
|
|
/>
|
|
</view>
|
|
<view class="h-full mt-[48rpx]">
|
|
<Banner />
|
|
<HomeSubMenu />
|
|
<HotRank />
|
|
<Consultation />
|
|
<Fab />
|
|
</view>
|
|
</scroll-view>
|
|
<TabBar :current-page="0"></TabBar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TabBar from '@/components/bar/TabBar.vue'
|
|
import { useCityInfo } from '@/hooks/useCityInfoHook'
|
|
import { useCityStore } from '@/store/city'
|
|
|
|
import Banner from '@/components/home/Banner.vue'
|
|
import HomeSubMenu from '@/components/home/SubMenu.vue'
|
|
import HotRank from '@/components/home/HotRank.vue'
|
|
import Consultation from '@/components/home/Consultation.vue'
|
|
import Fab from '@/components/fab/Fab.vue'
|
|
|
|
const cityStore = useCityStore()
|
|
|
|
useCityInfo()
|
|
|
|
// 当前下拉刷新状态
|
|
const isTriggered = ref(false)
|
|
// 自定义下拉刷新被触发
|
|
const onRefresherRefresh = async () => {
|
|
// 开始动画
|
|
isTriggered.value = true
|
|
setTimeout(function fn() {
|
|
console.log('refresh - onRefresherRefresh')
|
|
// 关闭动画
|
|
isTriggered.value = false
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.left-icon {
|
|
position: absolute;
|
|
left: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: max-content;
|
|
height: 40rpx;
|
|
color: #000;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 44px;
|
|
font-size: 32rpx;
|
|
color: #000;
|
|
}
|
|
</style>
|