修改首页样式

src/App.vue

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

src/main.ts

@@ -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,

src/pages/index/index.vue

@@ -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="flex items-center">
-						<view class="">上海</view>
+						<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">
+					<view class="search-box flex items-center">
-						<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
+						<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="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
-		<view class="content" :style="{ paddingTop: navbarHeight + 'px' }">
+			<view class="mt-32rpx">
-			<view v-for="(item, index) in 100" :key="index">123--{{ index }}</view>
+				<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,50 +72,73 @@
 	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;
+		background-color: $cz-page-background;
-	background-image: url(#{$OSS}images/home_bg.png);
+	}
-	background-size: 100% auto;
-	background-repeat: no-repeat;
-}
 
-.search-box {
+	.home-bg {
-	display: flex;
+		background-color: $cz-page-background;
-	height: 100%;
+		background-image: url(#{$OSS}images/home_bg.png);
-	align-items: center;
+		background-size: 100%;
-	--wot-search-padding: 0;
+		background-repeat: no-repeat;
-	--wot-search-side-padding: 0;
+	}
 
-	:deep() {
+	.search-box {
-		.wd-search {
+		display: flex;
-			background: transparent !important;
+		height: 100%;
-		}
+		margin-right: 32px;
+		--wot-search-padding: 0;
+		--wot-search-side-padding: 0;
 
-		.wd-search__input {
+		:deep() {
-			// #ifdef MP
+			.wd-search {
-			padding-left: 32px !important;
+				background: transparent !important;
-			padding-right: 0 !important;
+				width: 100% !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 {
+		border-radius: 20rpx 0rpx 20rpx 0rpx;
+	}
 </style>

src/uni.scss

@@ -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/';