wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改首页样式

Browse Source
This commit is contained in:
wangxiaowei
2025-08-15 17:11:45 +08:00
parent 85f65bef1e
commit 64aa1aa065
1 changed files with 162 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/pages/index/index.vue
View File

@ -10,65 +10,96 @@
<template> <template>
<view class="home-bg"> <view class="home-bg">
<view class="home-bg w-[100vw] fixed top-0 left-0"> <view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;"> <wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #left> <template #left>
<view class="flex items-center"> <view class="flex items-center line-1 w-130rpx" @click="home.toCity">
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx">上海</view> <view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">上海市</view>
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" /> <wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
</view> </view>
</template> </template>
<template #title> <template #title>
<view class="search-box flex items-center"> <view class="search-box flex items-center ml-26rpx" @click="home.toSearch">
<wd-search <wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
placeholder="搜索茶址名称" placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
disabled </wd-search>
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> </view>
</template> </template>
</wd-navbar> </wd-navbar>
</view> </view>
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }"> <view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="mt-32rpx"> <view class="mt-32rpx mx-30rpx">
<wd-swiper <wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
value-key="image" :indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
height="240rpx" @click="home.handleClick" @change="home.onChange" mode="aspectFit"></wd-swiper>
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>
<view class="mt-40rpx flex items-center h-36rpx"> <view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home_image1.png`" mode="aspectFit"/> <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> <text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
</view> </view>
<view class="mt-16rpx relative w-690rpx h-180rpx"> <view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home_image2.png`" mode="aspectFit"/> <wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home_image2.png`" mode="scaleToFill" />
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded"> <view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
<text class="mr-8rpx">一键约</text> <text class="mr-8rpx">一键约</text>
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit"/> <wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
</view> </view>
</view> </view>
<view class="relative flex justify-center mt-52rpx"> <view class="relative mt-40rpx h-44rpx mx-30rpx">
<wd-img class="absolute-center" width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit"/> <view class="absolute ele-center" >
<text class="text-32rpx text[#303133] leading-44rpx font-500 absolute-center">预约茶室</text> <wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
</view> </view>
<view class=""> <view>
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback"> <mescroll-body @init="mescrollInit" @down="downCallback" @up="home.upCallback" :up="home.upOption" top="28rpx"
<!-- <good-list :list="goods"></good-list> --> :fixed="true">
<view class=""></view> <view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index">
<view class="absolute top--28rpx left-0 z-1">
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home_image4.png`"/>
</view>
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home_image5.png`" radius="10rpx" />
<view class="flex-1 ml-28rpx flex justify-between line-1 items-start relative">
<view class="line-1">
<view class="font-bold text-30rpx leading-42rpx line-1">
凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业凝香茶业</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约300+</view>
<view class="font-400 bg-[#F3F3F3] text-[#818CA9] text-22rpx px-8rpx rounded-4rpx">刚有人预约了</view>
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间:00:00-23:59
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
打烊了
</view>
</view>
<view class="flex items-center mt-20rpx">
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
mode="aspectFit" />
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
青浦区仓路478号
</view>
</view>
</view>
<view class="absolute bottom-0 right-0">
<view class="flex justify-end">
<view class="bg-[#4C9F44] w-72rpx h-40rpx rounded-18rpx flex items-center justify-center">
<wd-icon name="add" color="#fff" size="20rpx" custom-style="font-weight: bold;" />
</view>
</view>
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您14km</view>
</view>
</view>
</view>
</view>
</mescroll-body> </mescroll-body>
</view> </view>
</view> </view>
@ -79,8 +110,8 @@
import { ref, inject } from 'vue' import { ref, inject } from 'vue'
import { getNavBarHeight } from '@/utils/index' import { getNavBarHeight } from '@/utils/index'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app' import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@uni_modules/mescroll-uni/hooks/useMescroll.js"; import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
let navbarHeight = ref(0) let navbarHeight = ref(0)
let OSS = inject('OSS') let OSS = inject('OSS')
let swiperList = ref([ let swiperList = ref([
@ -95,7 +126,58 @@
navbarHeight.value = getNavBarHeight() navbarHeight.value = getNavBarHeight()
}) })
const swiper = { const home = {
upOption: {
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty: {
tip: '~ 搜索无数据 ~', // 提示
btnText: '去看看'
}
},
toCity: () => {
uni.navigateTo({
url: '/pages/city/city'
})
},
toSearch: () => {
uni.navigateTo({
url: '/pages/search/search'
})
},
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
},
handleClick: (item: any) => { handleClick: (item: any) => {
// 处理点击事件 // 处理点击事件
console.log('Clicked item:', item) console.log('Clicked item:', item)
@ -106,73 +188,56 @@
current.value = e.current current.value = e.current
} }
} }
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = (mescroll)=>{
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
// mescroll.endErr(); // 请求失败, 结束加载
// })
}
</script> </script>
<style lang="scss"> <style lang="scss">
page{ page {
background-color: $cz-page-background; background-color: $cz-page-background;
} }
.home-bg { .home-bg {
background-color: $cz-page-background; background-color: $cz-page-background;
background-image: url(#{$OSS}images/home_bg.png); background-image: url(#{$OSS}images/home_bg.png);
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.search-box { .search-box {
display: flex; display: flex;
height: 100%; height: 100%;
margin-right: 32px; margin-right: 40px;
--wot-search-padding: 0; --wot-search-padding: 0;
--wot-search-side-padding: 0; --wot-search-side-padding: 0;
:deep() { :deep() {
.wd-search { .wd-search {
background: transparent !important; background: transparent !important;
width: 100% !important; width: 100% !important;
} }
.wd-search__input { .wd-search__block {
// #ifdef MP background-color: #fff !important;
padding-left: 32px !important; }
padding-right: 32px !important;
// #endif
// #ifndef MP .wd-search__input {
padding-right: 0 !important; // #ifdef MP
// #endif padding-left: 32px !important;
} padding-right: 32px !important;
// #endif
// #ifndef MP
padding-right: 0 !important;
// #endif
} }
} }
}
.rounded { .rounded {
border-radius: 20rpx 0rpx 20rpx 0rpx; border-radius: 20rpx 0rpx 20rpx 0rpx;
} }
.ele-center {
left: 50%;
transform: translateX(-50%);
}
</style> </style>