<!-- 首页，支持店铺装修 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="首页" navbar="cu"
		tabbar="/pages/XDHome/homePage/homePage">
		<view class="body homepage-wrap ss-w-100 box-sizing">
			<!-- 头部 -->
			<view class="head ss-bg box-sizing" :style="'padding-top:' + bottomHeight">
				<!-- 定位 客服 消息 -->
				<view class="ss-flex ss-flex-nowrap" style="box-sizing: border-box;margin-top: 20rpx;">
					<text class="textIcon icon-position icon-navigation" style="margin-left: 10rpx;" @click="popup"></text>
					<view style="color: #fff;margin-left: 5rpx;font-size: 24rpx;">烟台市芝罘区</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-kefu icon-navigation" @click="popup"></text>
					<text class="textIcon icon-xiaoxitongzhi"
						style="margin-left: 25rpx;margin-right: 20rpx;font-size: 44rpx;color: #fff;font-weight: 650;"></text>
				</view>
				<!-- 预约上门 到店尊享 快捷下单 -->
				<view class="ss-flex ss-flex-nowrap ss-row-around ss-margin-width" style="padding-top:25rpx">
					<view class="ss-flex ss-flex-nowrap ss-row-center" style="position: relative">
						<text class="textIcon icon-yuyueshangmen1 icon-navigation2" @click="jumpTechnician"></text>
						<view class="ss-text ss-margin-left4" @click="jumpTechnician">
							<view>预约上门</view>
							<view class="red-box">附近技师</view>
						</view>
					</view>
					<view class="ss-flex ss-flex-nowrap ss-row-center" style="position: relative">
						<text class="textIcon icon-dianpufill icon-navigation2" @click="goShop"></text>
						<view class="ss-text ss-margin-left4" @click="goShop">
							<view>到店尊享</view>
							<view class="red-box">会员优惠</view>
						</view>
					</view>
					<view class="ss-flex ss-flex-nowrap ss-row-center" style="position: relative">
						<text class="textIcon icon-emizhifeiji icon-navigation2" style="font-size: 50rpx;" @click="goShop"></text>
						<view class="ss-text ss-margin-left4" @click="jumpProject">
							<view>快捷上门</view>
							<view class="red-box">快人一步</view>
						</view>
					</view>
				</view>
				<!-- 功能区域 -->
				<view class="ss-flex ss-flex-nowrap ss-row-around function-box">
					<view class="ss-flex ss-flex-wrap ss-row-around" @click="jumpSign">
						<view class="ss-image">
							<image class="icon_5" referrerpolicy="no-referrer"
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/efed74f8e4604d4eb08e7b731007fa9d_mergeImage.png" />
						</view>
						<view class="ss-font-2 ss-margin-top6"> 打卡签到 </view>
					</view>
					<view class="ss-flex ss-flex-wrap ss-row-around">
						<view class="ss-image">
							<image class="icon_5" referrerpolicy="no-referrer"
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f7dc0ce749ea4c02b7cdb3c84a8c6f3c_mergeImage.png" />
						</view>
						<view class="ss-font-2 ss-margin-top6"> 优惠活动 </view>
					</view>
					<view class="ss-flex ss-flex-wrap ss-row-around">
						<view class="ss-image">
							<image class="icon_5" referrerpolicy="no-referrer"
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/f8a6d69731334d19b323258208ed7b04_mergeImage.png" />
						</view>
						<view class="ss-font-2 ss-margin-top6"> 会员权益 </view>
					</view>
					<view class="ss-flex ss-flex-wrap ss-row-around">
						<view class="ss-image">
							<image class="icon_5" referrerpolicy="no-referrer"
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/60a631e8455641e993ec3febb2b72243_mergeImage.png" />
						</view>
						<view class="ss-font-2 ss-margin-top6"> 招聘合作 </view>
					</view>
					<view class="ss-flex ss-flex-wrap ss-row-around">
						<view class="ss-image">
							<image class="icon_5" referrerpolicy="no-referrer"
								src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/ae105b8c0a594e84ba9985cdcdae6223_mergeImage.png" />
						</view>
						<view class="ss-font-2 ss-margin-top6"> 邀请赚钱 </view>
					</view>
				</view>
			</view>

			<view class="list-wrap-two" style="margin-top: 20rpx">
				<scroll-view scroll-y="true" class="list-two">
					<!-- 中部 -->
					<view class="list-wrap">
						<view class="ss-flex ss-margin-width2" style="background-color: #eeeeef">
							<view :class="nactiveIndex == 1 ? 'title-box-two' : 'title-box'" @click="nactiveInfo(1)">
								手法专业</view>
							<view :class="nactiveIndex == 2 ? 'title-box-two' : 'title-box'" @click="nactiveInfo(2)">
								明星技师</view>
							<view :class="nactiveIndex == 3 ? 'title-box-two' : 'title-box'" @click="nactiveInfo(3)">
								新人入驻</view>
							<view :class="nactiveIndex == 4 ? 'title-box-two' : 'title-box'" @click="nactiveInfo(4)">
								推拿师</view>
						</view>
						<!-- 两个左右箭头 -->
						<view class="left-jian">
							<image class="icon_5" referrerpolicy="no-referrer" @click="prev()"
								src="/static/lanhu_shouye/6461e1be91dd49c48afbbacf664a38ec_mergeImage.png" />
						</view>
						<view class="right-jian">
							<image class="icon_5" referrerpolicy="no-referrer" @click="next()"
								src="/static/lanhu_shouye/46bef50168b84fd6aaa29f4bcc551759_mergeImage.png" />
						</view>
						<view class="list">
							<XD-swiper :current="currentIndex" :interval="4000" :duration="1000" :multipleItems="3"
								:height="'400rpx'" :imageHeight="'354rpx'" :imageWidth="'209rpx'" :swiperList="swiperListOne"
								@jump="jumpTechnicianDetails">
								<template v-slot="slotProps">
									<view style="height: 30rpx; padding: 5rpx; line-height: 30rpx"
										class="ss-flex ss-flex-nowrap">
										<view class="ss-font-2">{{ slotProps.data.name }}</view>
										<view class="ss-flex-1"> </view>
										<view style="width: 26rpx; height: 20rpx; padding-bottom: 15rpx">
											<image class="icon_5" referrerpolicy="no-referrer"
												src="/static/lanhu_shouye/2d4bbfdd92454ce390099cd0b3f4827d_mergeImage.png" />
										</view>
									</view>
								</template>
							</XD-swiper>
						</view>
					</view>
					<!-- 当前服务模块 -->
					<view class="ss-flex ss-flex-nowrap service-module">
						<view class="isShow-info-box"></view>
						<view class="service-text">
							<text style="color: red">当前</text><text>服务</text>
						</view>
						<view class="broadcast">
							<!-- 当前服务轮播 -->
							<swiper :current="currentIndex" vertical circular :autoplay="true" interval="8000"
								duration="1000" display-multiple-items="3" style="height: 135rpx; width: 100%;box-sizing: border-box;"
								@change="changeSwiper">
								<swiper-item v-for="(item, index) in swiperList" :key="index + '_jhy'"
									style="height: 45rpx; width: 100%;border-bottom: 1rpx dashed #999;box-sizing: border-box;padding: 5rpx;">
									<view style="display: flex; flex-wrap: nowrap; width: 100%;">
										<view style="width: 35rpx; height: 35rpx">
											<image class="wh" referrerpolicy="no-referrer"
												src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
										</view>
										<view class="ss-flex-1">
											<uni-notice-bar v-if="index == swiperIndex" :speed="120"
												background-color="#fff" :showIcon="false"
												style="width: 100%; height: 40rpx" scrollable
												text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台">
											</uni-notice-bar>
										</view>
										<view style="width: 120rpx; background-color: #fff">
											<view class="f-button" @click="jumpTechnicianDetails">提前预约</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<!-- 服务项目 -->

					<view class="project-box">
						<view class="ss-flex ss-flex-nowrap" style="padding: 10rpx">
							<view style="font-size: 26rpx">服务项目</view>
							<view class="ss-flex-1"></view>
							<view class="ss-flex-2 ss-col-center" @click="jumpItemList">
								<view style="margin-left: 5rpx; font-size: 20rpx; color: #929699">更多</view>
								<text class="textIcon icon-gengduo-shuangjiantou"
									style="font-size: 22rpx; color: #929699; margin-left: 5rpx"
									@click="jumpTechnicianDetails"></text>
							</view>
						</view>
						<view style="margin-top: 10rpx">
							<XD-swiper :current="currentIndex" :interval="5000" :duration="1000" :multipleItems="4"
								:height="'185rpx'" :imageHeight="'140rpx'" :imageWidth="'140rpx'" :swiperList="swiperListTwo"
								@jump="jumpProject">
								<template v-slot="slotProps">
									<view style="height: 30rpx; padding: 5rpx; line-height: 30rpx"
										class="ss-flex ss-flex-nowrap">
										<view style="font-size: 16rpx; height: 20rpx">{{
                      slotProps.data.projectName
                    }}</view>
										<view class="ss-flex-1"> </view>
										<view style="height: 20rpx; font-size: 16rpx; padding-top: 5rpx; color: red">
											￥{{ slotProps.data.maney }}
										</view>
									</view>
								</template>
							</XD-swiper>
						</view>
					</view>
					<!-- 技师列表展示（瀑布流） -->
					<view class="waterfall-box">
						<view class="ss-flex ss-flex-nowrap" style="padding: 10rpx">
							<view :class="waterIndex == 1 ? 'list-active-title' : 'list-title'"
								@click="waterClickTitle(1)">推荐
							</view>
							<view :class="waterIndex == 2 ? 'list-active-title' : 'list-title'"
								@click="waterClickTitle(2)">附近
							</view>
							<view :class="waterIndex == 3 ? 'list-active-title' : 'list-title'"
								@click="waterClickTitle(3)">关注
							</view>
							<view class="ss-flex-1"></view>
						</view>
						<!-- 瀑布流布局 -->
						<view style="padding: 10rpx">
							<view class="content-test">
								<view class="list-test" v-for="(item, index) in swiperList" :key="item.id">
									<view v-if="index == 1 || index == 7" style="padding-bottom: 30rpx">
										<swiper class="box-sizing" style="height: 318rpx;width:319rpx;" :current="currentIndex"
											circular :autoplay="true" interval="5000" duration="1000"
											display-multiple-items="1">
											<swiper-item v-for="(item, index) in swiperList" :key="index">
												<image class="icon_5" referrerpolicy="no-referrer"
													src="/static/lanhu_shouye/ps4lxmxswmym348u236aywai6tkiitmmjo2be9cfc4-22a7-485c-8dc6-0301488c7b60.png" />
											</swiper-item>
										</swiper>
									</view>

									<view v-else @click="gopreview(item.id)" style="padding-bottom: 30rpx">
										<view style="height: 310rpx" class="box-sizing">
											<image @click="jumpTechnicianDetails" class="icon_5"
												referrerpolicy="no-referrer"
												src="/static/lanhu_shouye/psq752p4oxrur1kwz38o9hz2uugu327v8c905774083-1ff9-40d7-8687-01c969b1461d.png" />
										</view>
										<view class="ss-flex ss-flex-nowrap box-sizing"
											style="height: 40rpx; margin-top: 15rpx">
											<view style="font-size: 24rpx"> 王琳sf谁 </view>
											<view class="ss-flex-1"></view>
											<view class="ss-flex" style="width: 60rpx; height: 40rpx; margin-top: 2rpx">
												<view style="width: 20rpx; height: 20rpx" class="ss-flex">
													<image class="icon_5" referrerpolicy="no-referrer"
														src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
												</view>
												<view style="font-size: 20rpx; height: 25rpx; margin-left: 5rpx">4.8
												</view>
											</view>
											<view class="ss-flex" style="
                          height: 40rpx;
                          margin-left: 10rpx;
                          box-sizing: border-box;
                          padding-left: 5rpx;
                        ">
												<view style="width: 15rpx; height: 22rpx" class="ss-flex">
													<image class="icon_5" referrerpolicy="no-referrer"
														src="/static/lanhu_shouye/psmhtq7f5mtj9p90k3kaa1orxxscw7f3llac959982c-94bc-4f6a-9cee-a59dd97c25f2.png" />
												</view>
												<view style="
                            font-size: 20rpx;
                            height: 25rpx;
                            margin-left: 5rpx;
                            margin-top: -3rpx;
                          ">
													已接<text
														style="color: #2cadeb; margin-left: 3rpx; margin-right: 3rpx">6</text>单
												</view>
											</view>
										</view>
										<view class="ss-flex ss-flex-nowrap ss-self-start" style="margin-top: 10rpx">
											<view class="ss-flex ss-flex-nowrap ss-margin-left4">
												<view style="width: 16rpx; height: 16rpx" class="ss-flex">
													<image class="icon_5" referrerpolicy="no-referrer"
														src="/static/lanhu_shouye/pspk8pze9bwdqv9oslvx1xc0tcqeb932n722dbb1d-f5f9-40ea-be4a-eca416c5300e.png" />
												</view>
												<view style="font-size: 6rpx !important">
													<text style="color: #43aee9; padding-left: 5rpx">80%</text>认为形象优秀
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 技师风采 实现左右滑动并切换图 -->
			<view class="elegantDemeanour-box" v-if="isShowInfo">
				<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
					<view class="ss-flex-2 ss-col-center">
						<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
						<view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">技师风采</view>
					</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-kefu icon-navigation"></text>
					<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
				</view>
				<!-- 图片 -->
				<view style="width:90%;margin-left:5%;box-sizing: border-box;">
					<componentSwiper :swiper-list="postList"></componentSwiper>
					<view class="ss-flex-2 ss-col-center ss-row-around" style="width: 100%;box-sizing: border-box;">
						<view class="ss-flex-2 ss-col-center left-service-box">
							<view style="width: 110rpx;height: 70rpx;">
								<image class="wh" referrerpolicy="no-referrer" src="/static/images/001.png" />
							</view>
							<view style="font-size: 26rpx;letter-spacing: 4rpx;margin-left: 10rpx;">手法专业</view>
							<text class="textIcon icon-xiangyousanjiaoxing"
								style="font-size: 55rpx;color: rgba(255, 255, 255, .4);"></text>
						</view>
						<view class="ss-flex-2 ss-col-center left-service-box"
							style="background: linear-gradient(to right,#05C18E,#17DFBA);">
							<view style="width: 110rpx;height: 70rpx;">
								<image class="wh" referrerpolicy="no-referrer" src="/static/images/001.png" />
							</view>
							<view style="font-size: 26rpx;letter-spacing: 4rpx;margin-left: 10rpx;">立即下单</view>
							<text class="textIcon icon-xiangyousanjiaoxing"
								style="font-size: 55rpx;color: rgba(255, 255, 255, .4);"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();
	
	// 跳转到签到
	const jumpSign=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/myFeat/signPage/signPage'
		})
	}
	const goShop = async () => {
		uni.showToast({
			title: '暂未开发',
			icon: 'none',
			duration: 3000
		});
	}

	const postList = ref([{
			url: '/static/images/001.png',
			name: ''
		},
		{
			url: '/static/images/002.png',
			name: ''
		},
		{
			url: '/static/images/003.png',
			name: ''
		},
		{
			url: '/static/images/004.png',
			name: ''
		},
		{
			url: '/static/images/005.png',
			name: ''
		}
	])

	const isShowInfo = ref(false)
	// 出现美女弹窗
	const popup = async () => {
		isShowInfo.value = true
	}
	// 关闭美女弹窗
	const backPage = async () => {
		isShowInfo.value = false
	}
	const startX = ref(0) //触摸开始的X坐标
	const hearts = ref([]) // 存储心意图片的数组
	const heartImages = ref([ // 这里填入图片路径
		{
			src: '/static/images/001.png',
		},
		{
			src: '/static/images/002.png',
		},
		{
			src: '/static/images/003.png',
		},
		{
			src: '/static/images/004.png',
		},
		{
			src: '/static/images/005.png',
		}
	])
	const flipBook = async (index) => {
		const book = books.value[index];
		book.rotateY = book.rotateY ? 0 : 180;
		// this.$forceUpdate(); // 强制更新视图
	}
	const touchStart = async (e) => {
		console.log(e, '111111111')
		startX.value = e.touches[0].clientX;
	}
	const touchMove = async (e) => {
		console.log(e, '2222222')
		const currentX = e.touches[0].clientX;
		const deltaX = currentX - startX.value;

		hearts.value.forEach((heart, index) => {
			hearts.value[index].left += deltaX;
		});

		startX.value = currentX;
	}
	const touchEnd = async (e) => {
		console.log(e, '33333333333')
	}

	function spawnHeart() {
		const heart = {
			src: heartImages.value[Math.floor(Math.random() * heartImages.value.length)],
			left: 0, // 假设屏幕宽度为375px Math.random() * (375 - 350) + 25
			right: 0,
			top: 50, // 起始位置
			bottom: 0,
			width: 350,
			height: 550,
		};
		hearts.value.push(heart);
	}
	// spawnHeart()






	/**技师推荐*/
	const nactiveIndex = ref(1);
	// num 1 手法专业  2 明星技师  3 新人入驻
	function nactiveInfo(num) {
		nactiveIndex.value = num;
	}
	// 技师轮播
	const currentIndex = ref(0);
	const swiperListOne = ref([{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 1,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 2,
			name: '王琳',
			flag: false,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 3,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 4,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 5,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 6,
			name: '王琳',
			flag: true,
		},
		{
			imageUrl: '/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png',
			id: 7,
			name: '王琳',
			flag: true,
		},
	]);
	const swiperListTwo = ref([{
			imageUrl: '/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png',
			id: 1,
			projectName: 'spa',
			maney: '432.99',
		},
		{
			imageUrl: '/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png',
			id: 2,
			projectName: '洗脚',
			maney: '399.99',
		},
		{
			imageUrl: '/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png',
			id: 3,
			projectName: '推拿',
			maney: '122.99',
		},
		{
			imageUrl: '/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png',
			id: 4,
			projectName: '精油按摩',
			maney: '344.99',
		},
		{
			imageUrl: '/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png',
			id: 5,
			projectName: '护理',
			maney: '433.99',
		},
	]);
	const swiperList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']);

	function handleSwiperChange(event) {
		const current = event.detail.current;
		currentIndex.value = current;
		console.log('当前轮播到第', current, '个索引');
	}

	function prev() {
		currentIndex.value =
			(currentIndex.value - 1 + swiperList.value.length) % swiperList.value.length;
	}

	function next() {
		currentIndex.value = (currentIndex.value + 1) % swiperList.value.length;
	}
	const swiperIndex = ref(0);
	// 广告开启与关闭
	function changeSwiper(e) {
		console.log(e, 'rrrrrrrrrrr');
		swiperIndex.value = e.detail.current;
	}

	/**技师推荐列表*/
	const waterIndex = ref(1);

	function waterClickTitle(num) {
		waterIndex.value = num;
	}

	// 服务项目 更多跳转到 项目列表
	const jumpItemList = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/itemList/itemList',
		});
	};

	const jumpTechnician = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/technicianList/technicianList',
		});
	}
	const jumpProject = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/technician/itemList/itemList',
		});
	}
	const jumpTechnicianDetails = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/technicianDetails/technicianDetails',
		});
	}
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);

	onLoad((options) => {
		// #ifdef MP
		// 小程序识别二维码
		if (options.scene) {
			const sceneParams = decodeURIComponent(options.scene).split('=');
			console.log('sceneParams=>', sceneParams);
			options[sceneParams[0]] = sceneParams[1];
		}
		// #endif

		// 预览模板
		if (options.templateId) {
			sheep.$store('app').init(options.templateId);
		}

		// 解析分享信息
		if (options.spm) {
			$share.decryptSpm(options.spm);
		}

		// 进入指定页面(完整页面路径)
		if (options.page) {
			sheep.$router.go(decodeURIComponent(options.page));
		}
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		// sheep.$store('app').init();
		// setTimeout(function() {
		// 	uni.stopPullDownRefresh();
		// }, 800);
		console.log('下拉刷新');
		uni.stopPullDownRefresh();
	});
	onReachBottom(() => {
		console.log('上拉加载');
	});
	onPageScroll(() => {});
</script>
<style scoped>
	/deep/ .uni-noticebar__content-text {
		font-size: 26rpx !important;
	}
</style>
<style scoped lang="scss">
	.left-service-box {
		background: linear-gradient(to right, #4E7CEB, #00E3DA);
		border-radius: 10rpx;
		color: #fff;
		box-sizing: border-box;
		padding: 10rpx;
	}

	// ========
	.image-box {
		width: 100%;
		border-radius: 10rpx;
		min-height: 500rpx;
	}

	.image-data-box {
		position: relative;
		width: 80%;
		box-sizing: border-box;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}
	.icon-navigation2 {
		font-size: 60rpx;
		color: #fff;
		font-weight: 500;
	}

	.elegantDemeanour-box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 50px;
		right: 0;
		box-sizing: border-box;
		z-index: 99;
		background: linear-gradient(to bottom, #02A0E9, #54BED4);
	}

	// ======test
	.list-wrap-two {
		flex-grow: 1;
		position: relative;
	}

	.list-two {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.list-test {
		break-inside: avoid;
		width: 100%;
		margin-left: 3%;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.con-test {
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
	}

	.title-test {
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
	}

	/* 内容区 */
	.content-test {
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		column-count: 2;
	}

	image {
		width: 100%;
		border-radius: 6rpx;
	}

	.list-title {
		width: 110rpx;
		font-size: 30rpx;
		color: #9c9c9c;
		padding-top: 15rpx;
		box-sizing: border-box;
	}

	.list-active-title {
		width: 110rpx;
		font-size: 34rpx;
		color: #222c3a;
		font-weight: 650;
	}

	// 新样式
	.water-title-more {
		width: 25rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

	.waterfall-box {
		width: 95%;
		margin-left: 2.5%;
		background-color: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.project-box {
		width: 95%;
		margin-left: 2.5%;
		background-color: #fff;
		padding: 10rpx;
		margin-top: 20rpx;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		box-sizing: border-box;
	}

	.f-button {
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		margin-top: 2rpx;
		text-align: center;
		font-size: 18rpx;
		border-radius: 10rpx;
		background-color: #34afca;
		color: #fff;
		margin-right: 5rpx;
		box-sizing: border-box;
	}

	// 服务模块
	.broadcast {
		flex-grow: 1;
		margin-left: 10rpx;
		height: 135rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.service-text {
		width: 120rpx;
		height: 120rpx;
		font-size: 32rpx;
		font-weight: 650;
		text-align: center;
		border-right: 1rpx dashed #969899;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.isShow-info-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 130rpx;
		bottom: 0;
		z-index: 999;
	}

	.service-module {
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		background-color: #fff;
		padding: 10rpx;
		margin-top: 20rpx;
		border-radius: 5rpx;
		box-sizing: border-box;
	}

	// 滑动模块
	.right-jian {
		position: absolute;
		top: 40%;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
		z-index: 99;
	}

	.left-jian {
		position: absolute;
		top: 40%;
		left: 20rpx;
		width: 70rpx;
		height: 70rpx;
		z-index: 99;
	}

	.title-box {
		width: 24%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 26rpx;
		color: #b5b5b6;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.title-box-two {
		width: 24%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 26rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		color: #58b5ec;
		background-color: #fff;
	}

	.icon_5 {
		width: 100%;
		height: 100%;
	}

	.ss-icon {
		width: 52rpx;
		height: 52rpx;
	}

	.ss-text {
		font-size: 26rpx;
		color: #fff;
		font-weight: 700;
	}

	.red-box {
		position: absolute;
		top: -25rpx;
		right: -25rpx;
		height: 20rpx;
		line-height: 20rpx;
		border-radius: 10rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		padding-top: 5rpx;
		color: #fff;
		background-color: red;
		font-size: 12rpx;
	}

	.ss-image {
		width: 65rpx;
		height: 65rpx;
	}

	.function-box {
		width: 95%;
		margin-left: 2.5%;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: calc(100vh - 50px);
		background-color: #eeeeef;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		position: relative;
	}

	.list {
		width: 95%;
		margin-left: 2.5%;
		white-space: nowrap;
		overflow-x: auto;
		background-color: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>
<style lang="scss" scoped>
	.homepage-wrap {

		// 头部
		.ss-bg {
			background: url('@/static/top-bg.png') no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			.ss-image-icon {
				width: 30rpx;
				height: 30rpx;
			}

			.ss-image-icon1 {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>