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-14 17:29:24 +08:00
parent a52154d9fc
commit 4d77a1070a
4 changed files with 132 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/App.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
import { navigateToInterceptor } from '@/router/interceptor'
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
import { navigateToInterceptor } from '@/router/interceptor'
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
onLaunch((options) => {
onLaunch((options) => {
// 处理直接进入页面路由的情况：如h5直接输入路由、微信小程序分享后进入等
// https://github.com/unibest-tech/unibest/issues/192
console.log('App Launch', options)
@ -13,26 +13,28 @@ onLaunch((options) => {
else {
navigateToInterceptor.invoke({ url: '/' })
}
})
onShow((options) => {
})
onShow((options) => {
console.log('App Show', options)
})
onHide(() => {
})
onHide(() => {
console.log('App Hide')
})
})
</script>
<style lang="scss">
swiper,
scroll-view {
swiper,
scroll-view {
flex: 1;
height: 100%;
overflow: hidden;
}
}
image {
image {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.absolute-center {position: absolute !important;left: 50%;top: 50%;transform: translate(-50%, -50%);}
</style>

2
src/main.ts
View File

@ -14,7 +14,7 @@ export function createApp() {
app.use(routeInterceptor)
app.use(requestInterceptor)
app.use(VueQueryPlugin)
app.provide('OSS', '/src/static/')
app.provide('OSS', 'https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/')
return {
app,

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

@ -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">
.home-bg {
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 {
.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
@ -82,5 +136,9 @@
// #endif
}
}
}
}
.rounded {
border-radius: 20rpx 0rpx 20rpx 0rpx;
}
</style>

3
src/uni.scss
View File

@ -76,5 +76,6 @@ $uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
/* chazhi 自定义 */
$cz-page-background: #F6F7F9; // 页面背景色
$OSS: '/src/static/';
$OSS: 'https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/';