|
|
|
|
@ -13,22 +13,57 @@
|
|
|
|
|
<view class="home-bg w-[100vw] fixed top-0 left-0">
|
|
|
|
|
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
|
|
|
|
<template #left>
|
|
|
|
|
<view class="">
|
|
|
|
|
<view class="">上海</view>
|
|
|
|
|
<view class="flex items-center">
|
|
|
|
|
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx">上海</view>
|
|
|
|
|
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<template #title>
|
|
|
|
|
<view class="search-box">
|
|
|
|
|
<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
|
|
|
|
|
<view class="search-box flex items-center">
|
|
|
|
|
<wd-search
|
|
|
|
|
placeholder="搜索茶址名称"
|
|
|
|
|
disabled
|
|
|
|
|
hide-cancel
|
|
|
|
|
:placeholder-left="true"
|
|
|
|
|
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"
|
|
|
|
|
></wd-search>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
</wd-navbar>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 内容区：自动避让粘性导航栏高度 -->
|
|
|
|
|
<view class="content" :style="{ paddingTop: navbarHeight + 'px' }">
|
|
|
|
|
<view v-for="(item, index) in 100" :key="index">123--{{ index }}</view>
|
|
|
|
|
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
|
|
|
|
|
<view class="mt-32rpx">
|
|
|
|
|
<wd-swiper
|
|
|
|
|
value-key="image"
|
|
|
|
|
height="240rpx"
|
|
|
|
|
indicatorPosition="bottom-left"
|
|
|
|
|
:indicator="{ type: 'dots-bar' }"
|
|
|
|
|
:list="swiperList"
|
|
|
|
|
v-model:current="current"
|
|
|
|
|
@click="swiper.handleClick"
|
|
|
|
|
@change="swiper.onChange"
|
|
|
|
|
mode="aspectFit"
|
|
|
|
|
></wd-swiper>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="mt-40rpx flex items-center h-36rpx">
|
|
|
|
|
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home_image1.png`" mode="aspectFit"/>
|
|
|
|
|
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="mt-16rpx relative w-690rpx h-180rpx">
|
|
|
|
|
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home_image2.png`" mode="aspectFit"/>
|
|
|
|
|
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
|
|
|
|
|
<text class="mr-8rpx">一键约</text>
|
|
|
|
|
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit"/>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="relative flex justify-center mt-52rpx">
|
|
|
|
|
<wd-img class="absolute-center" width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit"/>
|
|
|
|
|
<text class="text-32rpx text[#303133] leading-44rpx font-500 absolute-center">预约茶室</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
@ -37,44 +72,63 @@
|
|
|
|
|
import { ref, inject } from 'vue'
|
|
|
|
|
import { getNavBarHeight } from '@/utils/index'
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: 'Home',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
let keyword = ref('')
|
|
|
|
|
let navbarHeight = ref(0)
|
|
|
|
|
let OSS = inject('OSS') // '@/static/'
|
|
|
|
|
let OSS = inject('OSS')
|
|
|
|
|
let swiperList = ref([
|
|
|
|
|
{ id: 1, image: `${OSS}images/banner1.png` },
|
|
|
|
|
{ id: 2, image: `${OSS}images/banner1.png` },
|
|
|
|
|
{ id: 3, image: `${OSS}images/banner1.png` }
|
|
|
|
|
])
|
|
|
|
|
console.log("🚀 ~ swiperList:", swiperList)
|
|
|
|
|
const current = ref<number>(0)
|
|
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
|
navbarHeight.value = getNavBarHeight()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const swiper = {
|
|
|
|
|
handleClick: (item: any) => {
|
|
|
|
|
// 处理点击事件
|
|
|
|
|
console.log('Clicked item:', item)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onChange: (e: any) => {
|
|
|
|
|
// 设置 current.value 为当前轮播索引
|
|
|
|
|
current.value = e.current
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
page{
|
|
|
|
|
background-color: $cz-page-background;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.home-bg {
|
|
|
|
|
background-color: $cz-page-background;
|
|
|
|
|
background-image: url(#{$OSS}images/home_bg.png);
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
height: 100%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 32px;
|
|
|
|
|
--wot-search-padding: 0;
|
|
|
|
|
--wot-search-side-padding: 0;
|
|
|
|
|
|
|
|
|
|
:deep() {
|
|
|
|
|
.wd-search {
|
|
|
|
|
background: transparent !important;
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wd-search__input {
|
|
|
|
|
// #ifdef MP
|
|
|
|
|
padding-left: 32px !important;
|
|
|
|
|
padding-right: 0 !important;
|
|
|
|
|
padding-right: 32px !important;
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
// #ifndef MP
|
|
|
|
|
@ -83,4 +137,8 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounded {
|
|
|
|
|
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
wangxiaowei