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-29 17:45:32 +08:00
parent 38f0dbcbe2
commit 6ac45bef6b
8 changed files with 197 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,12 +36,12 @@
</view>
<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/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 mx-30rpx">
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home_image2.png`" mode="scaleToFill" />
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image2.png`" mode="scaleToFill" />
<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" />
@ -50,7 +50,7 @@
<view class="relative mt-40rpx h-44rpx mx-30rpx">
<view class="absolute ele-center" >
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home_image3.png`" mode="aspectFit" />
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
</view>
@ -60,11 +60,11 @@
:fixed="true">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="home.handleToReserveRoom(item)">
<view class="absolute top--28rpx left-0 z-1">
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home_image4.png`"/>
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/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" />
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/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">
@ -107,12 +107,12 @@
</template>
<script lang="ts" setup>
import { getNavBarHeight } from '@/utils/index'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
const navbarHeight = ref<number>(0)
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
@ -123,7 +123,6 @@
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
navbarHeight.value = getNavBarHeight()
})
const home = {
@ -192,7 +191,7 @@ page {
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home_bg.png);
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}