siyu_app/pages/index/indexOld.vue

<template>
	<!-- <page-meta :page-font-size="`${this.$store.getters.scaleFontSize}px`"  :root-font-size="`${this.$store.getters.scaleFontSize}px`"></page-meta> -->
	<view class="content" >
		<mescroll-body ref="mescrollRef"  style="background-color: #FAFAFA;" @init="mescrollInit" top="0" bottom="20" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<!-- <image class="bg-img" src="/static/image/home/home_top_bg.png"></image> -->
				<view class="bgConent"></view>
				<view class="nav-bar">
						<view class="grace-page-header" :style="{ background:headerBG }">
							<!-- 沉浸式状态栏 -->
							<view class="grace-page-status-bar" :style="{background:statusBarBG}"></view>
							<view class="content-header"  id="gracePageHeader" :style="{minHeight:headerHeight+'px', height:headerHeight+'px', overflow:'hidden'}">
								<view class="content-header-l">
									<!-- <image class="address" src="@/static/image/home1/address_icon.png" mode="aspectFill"></image> -->
									<text>{{locCity}}</text>
									<!-- <image class="arrow_down" src="@/static/image/home1/arrow_down_icon.png" mode="aspectFill"></image> -->
								</view>
								<view class="content-header-r">
								<!-- 	<view @click="showQidai()">
										<image src="@/static/image/home1/weixin_icon.png" mode="aspectFill"></image>
										<text>分享</text>
									</view> -->
									<view @click="goToMsg()">
										<image src="@/static/image/home1/new_icon.png" mode="aspectFill"></image>
										<text>消息</text>
									</view>
								</view>
							</view>
						</view>
						<view class="nav_box">
							<view class="status_bar"></view>
							<view class="nav_bar"></view>
						</view>
				</view>
		
				<!-- 搜索 -->
				<view class="search-box" v-if="false">
						<view class="left">
							<image src="@/static/image/home1/search_icon.png" mode=""></image>
							<input class="input-text" disabled="true" type="text" placeholder-class="place-hold" value="输入疾病 | 科室 | 医生 | 知识" placeholder=""/>
						</view>
						<view class="right">
							<button  class="button" @click="showQidai()">搜索</button>
						</view>
				</view>
			
                <!-- banner -->
                <view class="swiper-box">
					<swiper class="swiper" style="height: 233rpx;" circular :indicator-dots="true" :autoplay="false" :interval="3000"
						:duration="1000">
						<swiper-item  v-for="(url,index) in advImgs" :key="index"  class="swiper-item" @click="handleAdvClick(index)"> 
							<image style="width: 100%;height: 100%;" :src="url" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
                </view>
								
				 <view class="nav" id="indexguide1">
				 	<view class="grid-item" v-for="(item ,index) in navList" :key="index">
						<view class="grid-item-box"  @tap="topNavTo(item.pageUrl,index)">
							<image class="image" :src="item.img" mode="aspectFill" />
							<text class="text">{{item.name}}</text>
						</view>
				 	</view>
				 </view>
				
				  <!-- 中医瘦身 -->
				 <scroll-view scroll-x="true" class="scroll-X">
				 	<view class="scroll-item zyss_bg" v-for="(item,index) in midAdvs" :key="index"  @tap="midAvTap(item,index)">
				 		<image class="bg_img" :src="item.imageUrl" mode="widthFix"></image>
				 	</view>
				 </scroll-view>
				
				 <!-- 快速问诊 -->
				 <view class="banner-nav" id="indexguide2">
						<view class="banner-nav-item kswz-bg" @tap="loginNavTo('/pages/doctor/doctorList')">
							<view class="title">快速问诊</view>
							<view>专业医师快速</view>
						</view>
						<view class="banner-nav-item jkhz-bg" @tap="loginNavTo('/pages/store/inquirySelectType?isShare=1')">
							<view class="title">健康会诊</view>
							<view>权威专家为您</view>
							<view class="jkhz">答疑解惑</view>
						</view>
						<view class="banner-nav-item yyzx-bg" @click="loginNavTo('/pages/store/inquirySelect?inquiryType=3&isShare=1')">
							<view class="title">用药咨询</view>
							<view>执业药师提供</view>
							<view class="yyzx">用药指导</view>
						</view>
						<view class="banner-nav-item zjyz-bg" @tap="loginNavTo('/pages/doctor/doctorList')">
							<view class="title">专家约诊</view>
							<view>在线预约专家</view>
							<view class="zjyz">诊疗服务</view>
						</view>
				 </view>
				 
				 <!-- 健康自测 -->
				 <view id="indexguide3">
				 <view class="box-nav">
						<view class="title">健康自测</view>
						<view class="box-nav-right" @click="navTo('/pages/article/testList')">
							<text>更多自测</text>
							<image class="right-arrow" src="@/static/image/home1/my_right_arrow.png" mode="aspectFill"></image>
						</view>
				 </view>
				 
				 <view class="selfrated-health">
						<view class="selfrated-health-item" @click="navTo('/pages/article/testDetails?tempId=5')">
							<image src="@/static/image/home1/icon/zytz_icon.png" mode="aspectFill"></image>
							<view>中医体质</view>
						</view>
						<view class="selfrated-health-item" @click="navTo('/pages/article/testDetails?tempId=8')">
							<image src="@/static/image/home1/icon/xnxg_icon.png" mode="aspectFill"></image>
							<view>心脑血管</view>
						</view>
						<view class="selfrated-health-item" @click="navTo('/pages/article/testDetails?tempId=14')">
							<image src="@/static/image/home1/icon/nxjk_icon.png" mode="aspectFill"></image>
							<view>男性健康</view>
						</view>
						<view class="selfrated-health-item" @click="navTo('/pages/article/testDetails?tempId=18')">
							<image src="@/static/image/home1/icon/nvxjk_icon.png" mode="aspectFill"></image>
							<view>女性健康</view>
						</view>
				 </view>
				 </view>
				 <!-- 推荐医生 -->
				 <view class="box-nav">
						<view class="title">推荐医生</view>
						<view class="box-nav-right"  @tap="navTo('/pages/doctor/doctorList')">
							<text>更多医生</text>
							<image class="right-arrow" src="@/static/image/home1/my_right_arrow.png" mode="aspectFill"></image>
						</view>
				 </view>
				 
				
				<scroll-view class="scroll-container " scroll-x="true" scroll-with-animation="true" overflow-anchor="none">
					<view class="box-doctor" v-for="(item,index) in doctors"  :key="index">
						  <docterItem class="gapitem"  :item="item" @click="navTo('/pages/doctor/doctorDetails?doctorId='+item.doctorId)"></docterItem>
					</view>
				</scroll-view>
				 
				 <!-- 健康疗法 -->
				 <view class="box-nav" id="indexguide4">
						 <view class="title">健康疗法</view>
						 <view class="box-nav-right" @click="navTo('/pages/store/packageList')">
							<text>更多疗法</text>
							<image class="right-arrow" src="@/static/image/home1/my_right_arrow.png" mode="aspectFill"></image>
						</view>
				 </view>
				 <view class="box-goods">
					 <goodsItem v-if="packages.length>0" class="gapitem indexguide4-child" v-for="(item,index) in packages" :key="index"  :item=item  @click="navTo('/pages/store/packageDetails?packageId='+item.packageId)" ></goodsItem>		
					 <view v-else class="es  x-c es-h-200 indexguide4-child" style="width: 100%;">
							 <view class="y-bc flex">
								 <image src="../../static/image/nodata.png" class="es-w-148 es-h-96 es-mt-20"></image>
								 <view class="es-c-33 es-fs-26 x-c es-mt-20 es-mb-40">暂无疗法</view>
							 </view>			 
					 </view>
				 </view>
				 
				 <!-- 签到弹窗 -->
				 <signPop ref="signPop" :userSign="userSign" />
				 
				 <!-- 新手指引 -->
				 <myGuide ref="myGuide" :step="step"></myGuide>
				
		 </mescroll-body>
		 
	</view>
</template>

<script>
	import {getDoctorList} from '@/api/doctor.js'
	import {getPackageList} from '@/api/package.js'
	
	import docterItem from "./components/docterItem.vue";
	import goodsItem from "./components/goodsItem.vue"
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	// import permision from "@/js_sdk/wa-permission/permission.js" 
	import { getAdvList,getAppAdvList} from '@/api/adv.js'
	import { getNewcomerBenefits,getUserSign} from '@/api/integral';
	import { getLocation } from '@/api/index.js'
	// #ifdef APP-PLUS
	import permision1 from "@/utils/permission.js"
	// #endif
	const idCode = uni.requireNativePlugin('Ba-IdCode')
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { 
		    mescrollBody,
			docterItem,
			goodsItem
	     },
		data() {
			return {
				keyword:"",
				advImgs:[],
				advs:[],
				midAdvs:[],
				doctors:[],
				packages:[],
				headerHeight:44,
				//headerBG:"#FF5C03",
				statusBarBG:"none",
				company:null,
				newCustomerCounts:0,
				fullCustomerCounts:0,
				myCustomerCounts:0,
				dayOrderCounts:0,
				doBuyOrderCounts:0,
				downOption: {   //下拉刷新
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 暂无疗法 ~' // 提示
				 		// btnText: '去看看'
				 	},
					use:false
				},
				locCity:"芳华未来",
				tdlist: [],
				show:false,
				user:{
				 	avatar:"",
				 	userName:this.$qconfig.appName,
				 	mobile:""
				},
				 userScrollTop: 0,
				 fixedTop: false, // 是否固定头部
				 connectStatus: '未链接',
				 deviceToken: '',
				 udid: '',
				 registrationID: '',
				 appkey: '',
				 imageList:["../../static/image/home/banner.png"],
				 top:0,
				 userBenefits:{},
				 userSign:{},
				 navList: [
						 {
							img: "../../static/image/home1/icon/aiTongue.png",
							name: "AI舌诊",
							pageUrl:"/pages/user/tongue/index"
						 },
						 {
							img: "../../static/image/home1/icon/yssl_icon.png",
							name: "药膳食疗",
							pageUrl:"/pages/article/medicatedFoodList"
						},
						{
							img: "../../static/image/home1/icon/jlxw_icon.png",
							name: "经络穴位",
							pageUrl:"/pages/article/vesselList"
						}, {
							img: "../../static/image/home1/icon/wdzq_icon.png",
							name: "问答专区",
							pageUrl:"/pages/article/questionsList"
						}, {
							img: "../../static/image/home1/icon/jb_icon.png",
							name: "疾病",
							pageUrl:"/pages/article/diseaseList"
						}, {
							img: "../../static/image/home1/icon/zytj_icon.png",
							name: "中药图解",
							pageUrl:"/pages/article/chineseMedicineList"
						},
						{
							img: "../../static/image/home1/icon/mfjy_icon.png",
							name: "名方今用",
							pageUrl:"/pages/article/famousPrescribeList"
						}, {
							img: "../../static/image/home1/icon/yssp_icon.png",
							name: "养生讲堂",
							pageUrl:"/pages/doctor/doctorArticleList"
						}
						// , {
						// 	img:"../../static/image/home1/icon/ys_icon.png",
						// 	name: "医书",
						// 	pageUrl:"/pages/doctor/doctorArticleList"
						// }
				 ],
			     step: {
						name: 'indexguide',
						guideList: [{
							el: '',
							tips: '上下滑动，了解芳华未来',
							next: '',
						},{
							el: '#indexguide1',
							tips: '药膳、经络、疾病医学百科知识快速查询',
							next: '下一步',
						},{
							el: '#indexguide2',
							tips: '权威医生、药师实时在线咨询',
							next: '下一步',
						},{
							el: '#indexguide3',
							tips: '免费健康自测，了解自身健康情况',
							next: '下一步',
						},{
							el: '#indexguide4',
							childEl: ".indexguide4-child",
							tips: '购买健康疗法享健康',
							next: '完成',
						}]
			     },
			     guideIndex:null,	
			     myGuide:null,
			
			}
		},
		onShow() {
			this.getAdvList();
			this.getAppAdvList();
			this.getDoctorList();
			this.getPackageList(1);
		},
		onLoad() {
			 // #ifdef APP-PLUS
			   if(plus.runtime.isAgreePrivacy()) {
					// 用户同意隐私政策，可以调用限制API
					//this.doGetLocation();
					//uni.showToast({icon:'none',title: "已同意隐私政策"});
					this.registerIdCode();
					
			   }else{
			        //uni.showToast({icon:'none',title: "未同意隐私政策"});
			   }
			// #endif
			
			let that=this;
			uni.setNavigationBarTitle({
				title: that.$qconfig.appName
			});
			this.guideIndex=uni.getStorageSync("indexguide");
			this.myGuide=this.$refs["myGuide"];
			if(this.$isLogin()){
				this.getUserSign();
			}else{
				let signStr="[{\"signNum\":10,\"sort\":1,\"day\":\"第1天\"},{\"signNum\":20,\"sort\":2,\"day\":\"第2天\"},{\"signNum\":30,\"sort\":3,\"day\":\"第3天\"},{\"signNum\":40,\"sort\":4,\"day\":\"第4天\"},{\"signNum\":50,\"sort\":5,\"day\":\"第5天\"},{\"signNum\":50,\"sort\":6,\"day\":\"第6天\"},{\"signNum\":50,\"sort\":7,\"day\":\"第7天\"}]";
				this.$nextTick(()=>{
					this.userSign={"signNum":0,"isDaySign":0,"integral":0,"sign":JSON.parse(signStr)  };
					if(this.guideIndex){
						this.$refs.signPop.open();
					}
				});
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG:function() {
				var top=this.top/88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		methods: {
			getAdvList() {
				//联网加载数据
				var that = this;
				var data = {
					advType:1
				};
				getAdvList(data).then(res => {
					if(res.code==200){
						that.advImgs=[];
						that.advs=[];
						res.data.forEach(function(element) {
							if(element.imageUrl!=null&&element.imageUrl!=""){
								that.advs.push(element);
								that.advImgs.push(element.imageUrl);
							}
						});
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			getAppAdvList() {
				getAppAdvList().then(res => {
					if(res.code==200){
						this.midAdvs=res.data;
						
					}else{
						uni.showToast({icon:'none',title: "请求失败"});
					}
				});
			},
			getDoctorList() {
				//联网加载数据
				var that = this;
				var data = {
					isTui:1,
					pageNum:1,
					pageSize:10,
				};
				getDoctorList(data).then(res => {
					if(res.code==200){
						this.doctors=res.data.list;
						this.doctors.forEach(function(value,index,array){
							value.prices=JSON.parse(value.priceJson)
						});
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			getPackageList(pageNum){
				//联网加载数据
				var that = this;
				var data = {
					isShow:1,
					pageNum:pageNum,
					pageSize:10
				};
				getPackageList(data).then(res => {
					if(res.code==200){
						this.packages=res.data.list;
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败"
						});
					}
				});
			},
			getUserSign(){
				getUserSign().then(res => {
						if(res.code==200){
							this.userSign={"signNum":res.signNum,"isDaySign":res.isDaySign,"integral":res.integral,"sign":JSON.parse(res.sign)};
						    this.$nextTick(()=>{
								if(this.guideIndex && !res.isDaySign){
									this.$refs.signPop.open();
								}
						    });
						}else{
							
						}
					},
					rej => {}
				);
			},
			midAvTap(item,index){
				if(index==0){
					this.navToMinProgram();
					return;
				}
				if(!this.$isEmpty(item.advUrl)){
					this.navTo(item.advUrl);
				}
			},
			// 页面跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			loginNavTo(url){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			navVideo(){
				console.log("navVideo");
				uni.navigateTo({
					url: "/pages/course/video/living-app"
				});
			},
		    showQidai(){
				//uni.showToast({title: "功能完善中,敬请期待...",icon:"none"});
			},
			handleAdvClick(index){
				var ad=this.advs[index];
				console.log(ad.appAdvUrl);
				if(ad.showType==1){
					uni.setStorageSync('url',ad.appAdvUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({
					 	url:"content"
					 })
				}
				else{
					uni.navigateTo({
						url:ad.appAdvUrl
					})
				}
			},
			async getLocation() {
				   let status;
			    // #ifdef APP-PLUS
					status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
			    // #endif
			    // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
				    status = await this.getSetting();
					if (status === 2) {
						this.showConfirm();
						return;
					}
			    // #endif
			    this.doGetLocation();
			},
			search() {
			
			},
			doGetLocation() {
				getLocation().then(res => {
					this.locCity  =  res.city.replace(/市|区/g,  '');
				});		
			},
			getSetting: function() {
			    return new Promise((resolve, reject) => {
			        uni.getSetting({
			            success: (res) => {
			                if (res.authSetting['scope.userLocation'] === undefined) {
			                    resolve(0);
			                    return;
			                }
			                if (res.authSetting['scope.userLocation']) {
			                    resolve(1);
			                } else {
			                    resolve(2);
			                }
			            }
			        });
			    });
			},
			openSetting: function() {
			    this.hideConfirm();
			    uni.openSetting({
			        success: (res) => {
			            if (res.authSetting && res.authSetting['scope.userLocation']) {
			                this.doGetLocation();
			            }
			        },
			        fail: (err) => {}
			    })
			},
			async checkPermission() {
			    let status = permision1.isIOS ? await permision1.requestIOS('location') :
			        await permision1.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
			    if (status === null || status === 1) {
			        status = 1;
			    } else if (status === 2) {
			        uni.showModal({
			            content: "系统定位已关闭",
			            confirmText: "确定",
			            showCancel: false,
			            success: function(res) {
			            }
			        })
			    } else if (status.code) {
			        uni.showModal({
			            content: status.message
			        })
			    } else {
			        uni.showModal({
			            content: "需要定位权限",
			            confirmText: "设置",
			            success: function(res) {
			                if (res.confirm) {
			                    permision1.gotoAppSetting();
			                }
			            }
			        })
			    }
			    return status;
			},
			clear: function() {
			    //this.hasLocation = false
			},
			goToMsg(){
				 
				 // #ifdef APP-PLUS
				       this.getIdCodes();
				 	   this.getOAID();
					   let devinfo=uni.getDeviceInfo();
					   console.log("qxj devInfo:"+JSON.stringify(devinfo));
				  //#endif  
				 
				 return;
				  uni.switchTab({
					  url: '/pages/TUIKit/TUIPages/TUIConversation/index' 
				  });
			},
			topNavTo(url,index){
				if(index==0){
					//this.navTo(url);
					this.loginNavTo(url);
				}else{
					this.navTo(url);
				}
			},
			navToMinProgram(){
				 plus.share.getServices(res => {
				      let sweixin = null;
				      sweixin = res.find(i => i.id === 'weixin')
				      if (sweixin) {
				         // 分享跳转到微信小程序
						 sweixin.launchMiniProgram({
								 id: "gh_ed2db1ca5891",//零利润药房小程序原生id
								 path:"pages/common/launch", //    打开小程序的页面路径，不传默认跳转首页
								 type: 0 //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						  });
				      } 
					  else {
				          uni.showToast({title: '请安装微信',icon: 'none'})
				      }
				   }, err => {
				      console.log("分享失败"); // 获取分享服务列表失败
				   });

			},
			registerIdCode() { //注册，先注册再获取，注意APP合规性，若最终用户未同意隐私政策则不要调用
				idCode.register(res => {
					console.log(res);
						
				});
			},
			getIdCodes() { //获取设备的各种标识码
				idCode.getIdCodes(res => {
					if (res.data) {
						//this.msgList.unshift(JSON.stringify(res.data));
						let ua=plus.navigator.getUserAgent();
						console.log("qxj ua:"+ua);
						console.log("qxj getIdCodes:"+JSON.stringify(res.data));
					}
					
				});
			 },
			 getOAID() { //异步获取 OAID
				idCode.getOAID(res => {
					if (res.data) {
						//this.msgList.unshift(JSON.stringify(res.data));
						console.log("qxj getOAID:"+JSON.stringify(res.data));
					}
					
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	
	.bg-img{
	    position: fixed;
	    width: 100%;
		height: 524rpx;
	    top: 0;
	    left: 0;
	 	right: 0;
		bottom: 0;
		z-index: 0;
	}
	
	.bgConent{
		background-image: url("@/static/image/home/home_top_bg.png");
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #F4F7FA;
		position: absolute;
		width: 100%;
		height: 524rpx;
		top: 0;
		left: 0;
		right: 0;
	    bottom: 0;
		z-index: 0;
	}
	
	.grace-page-header {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 98;
		border-bottom: 0px solid #FFFFFF;
		.grace-page-status-bar {
			width: 100%;
			height: var(--status-bar-height);
		}
		.grace-page-header-nav {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
		}
	}
	
	.nav_box{
		width: 100%;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.nav_bar {
			height: 44px;
			width: 100%;
		}
	}
	
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		// overflow: hidden;
		// margin-top: var(--status-bar-height);
		// padding-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		// background-image: url("@/static/image/home/home_top_bg.png");
		background-repeat: no-repeat;
		background-size: 100%;
		
		// box-sizing: border-box;
		// padding-top: calc(var(--status-bar-height) + 24rpx);
		// padding-bottom: var(--window-bottom);
		// font-family: PingFang SC, PingFang SC;
		// font-weight: 400;
		// font-size: 24rpx;
		// color: #999999;
		position: relative;
		z-index: 2;
	}
	
	.content-header {
		height: 80rpx;
		padding: 0 24rpx;
		@include u-flex(row, center, space-between);
		&-l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 28rpx;
			@include u-flex(row, center, flex-start);
			.address {
				width: 38rpx;
				height: 38rpx;
				margin-right: 6rpx;
			}
			.arrow_down {
				width: 24rpx;
				height: 24rpx;
				margin-left: 8rpx;
			}
		}
		&-r {
			@include u-flex(row, center, flex-start);
			view {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				@include u-flex(column, center, space-between);
				width: 80rpx;
				height: 80rpx;
				padding-top:2rpx;
				padding-bottom: 6rpx;
				
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.search-box {
			width: calc(100% - 60rpx);
			height: 70rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 34rpx;
			border: 2rpx solid #FFFFFF;
			border-right: none;
			margin:30rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;	        
			padding-left: 30rpx;
			position: relative;
			z-index: 10;
			.left{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				flex: 1;
			}
			image{
				width: 28upx;
				height: 28upx;
				margin-right: 16upx;
			}
			.input-text{
				color: #fff;
				font-size: 24rpx;
				height: 70rpx;
				line-height:70rpx ;
				width: 100%;
			}
			.button{
				background: #FF5C03;
				border-radius: 29rpx;
				width: 108rpx;
				height: 54rpx;
				line-height: 54rpx;
				color: #fff;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
	}
	
	
	::v-deep .uni-searchbar__text-placeholder, .uni-input-placeholder{
		color: #fff;
		font-weight: 400;
		font-size: 24rpx;
	}
	
	.place-hold{
		color: #ffffff;
		font-weight: 400;
		font-size: 24rpx;
	}
	  

	.search-box1 {
		height: 68rpx;
		margin: 26rpx 24rpx 10rpx 24rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 34rpx;
		border: 2rpx solid #FFFFFF;
		border-right: none;
		background-color: blue;
		overflow: hidden;
		@include u-flex(row, center, space-between); 
		.search {
			flex: 1;
			padding: 0 0 0 12rpx;
			background-color: transparent;
			font-weight: 400;
			font-size: 24rpx;
		}
		image {
			width: 24rpx;
			height: 24rpx;
		}
		::v-deep .uni-searchbar__text-placeholder, .uni-input-placeholder{
			color: #fff;
			font-weight: 400;
			font-size: 24rpx;
		}
		.search-text {
			flex-shrink: 0;
			width: 144rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #FF5C03;
			line-height: 68rpx;
			text-align: center;
		}
	}
	

	.swiper-box {
		padding: 22rpx 0;
		padding-bottom: 0;
		.swiper {
			width: 702rpx;
			height: 228rpx;
			margin: 0 auto;
			background: #E75848;
			border-radius: 20rpx;
			.swiper-item {
				width: 702rpx;
				height: 228rpx;
				image{
					border-radius: 20rpx;
				}
			}
		}
		::v-deep {
			.uni-swiper-dot {
				width: 10rpx;
				height: 10rpx;
				background: rgba(255,255,255,0.5);
			}
			.uni-swiper-dot-active {
				width: 24rpx;
				height: 10rpx;
				background-color: #FFFFFF;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
			}
		}
	}

	.nav {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding-top: 24rpx;
		margin: 24rpx 24rpx 0 24rpx;
		position: relative;
		z-index: 2;
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		.grid-item {
			width: 25%;
		}
		.grid-item-box {
			@include u-flex(column, center, flex-start);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			line-height: 28rpx;
			margin-bottom: 24rpx;
			.image {
				height: 104rpx;
				width: 104rpx;
			}
			.image1 {
				height: 85rpx;
				width: 85rpx;
				margin-top: 6rpx;
				margin-bottom: 12rpx;
			}
		}
	}

	.scroll-X {
		white-space: nowrap;
		width: 100%;
		padding-left: 24rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
		line-height: 28rpx;
		.scroll-item {
			display: inline-block;
			width: 216rpx;
			height: 132rpx;
			padding: 20rpx 24rpx 20rpx 20rpx;
			box-sizing: border-box;
			margin-right: 16rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FFFFFF;
			position: relative;
			.bg_img{
				position: absolute;
				width: calc(100% - 2rpx);
				height: 132rpx;
				left:0;
				right: 0;
				top:0;
				bottom:0;
				z-index: 0;
			}			
			&-title {
				margin-bottom: 6rpx;
			}
			&-desc {
				width: 100%;
				@include u-flex(row, center, space-between)
			}
			.arrow_icon {
				height: 24rpx;
				width: 24rpx;
			}
		}

		.zyss_bg {
			background: url("@/static/image/home1/index_zyss_bg.png") no-repeat right top / 132rpx 132rpx,linear-gradient( 270deg, #FFF9F8 0%, #FFF3EF 100%);
		}
		.gjmz_bg {
			background: url("@/static/image/home1/index_gjmz_bg.png") no-repeat right top / 132rpx 132rpx,linear-gradient( 270deg, #FFFCF3 0%, #FFF9E8 100%);
		}
		.pfgl_bg {
			background: url("@/static/image/home1/index_pfgl_bg.png") no-repeat right top / 132rpx 132rpx,linear-gradient( 270deg, #F0F7FF 0%, #E0EEFF 100%);
		}
		.zytl_bg {
			background: url("@/static/image/home1/index_zytl_bg.png") no-repeat right top / 132rpx 132rpx,linear-gradient( 270deg, #EFFAF9 0%, #E7FFFD 100%);
		}
	}

	.banner-nav {
		padding: 20rpx 24rpx;
		display: flex;
		flex-wrap: wrap;
		margin-right: -16rpx;
		margin-bottom: -16rpx;
		&-item {
			width: 343rpx;
			height: 200rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 26rpx 0 0 24rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
			line-height: 32rpx;
			background-repeat: no-repeat;
			background-size: 208rpx 148rpx;
			background-position: right bottom;
			.kswz {
				color: #4FA59C;
			}
			.jkhz {
				color: #FF5C03;
			}
			.yyzx {
				color: #E69A22;
			}
			.zjyz {
				color: #3A76D0;
			}
		}

		.kswz-bg {
			background-image: url("@/static/image/home1/index_kswz_bg.png");
		}
		.jkhz-bg {
			background-image: url("@/static/image/home1/index_jkhz_bg.png");
		}
		.yyzx-bg {
			background-image: url("@/static/image/home1/index_yyzx_bg.png");
		}
		.zjyz-bg {
			background-image: url("@/static/image/home1/index_zjyz_bg.png");
		}
	}
	.box-nav {
		width: 100%;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		&-right {
			@include u-flex(row, center, flex-start);
		}

		.right-arrow {
			height: 48rpx;
			width: 48rpx;
		}
	}
	
	.selfrated-health {
		@include u-flex(row, center, space-around);
		padding: 34rpx 0;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 24rpx 20rpx 24rpx;
		&-item {
			width: 144rpx;
			height: 144rpx;
			@include u-flex(column, center, center); 
			flex-wrap: wrap;
			image {
				width: 72rpx;
				height: 72rpx;
				margin-bottom: 28rpx;
			}
		}
	}
	
	
	.scroll-container {
	   white-space: nowrap; /* 确保子元素不换行 */
	   display: flex; /* 使用flex布局 */
	   padding-left: 24rpx;
	}
	
	.box-goods {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin-right: -18rpx;
		margin-bottom: -18rpx;
		padding: 8rpx 24rpx 20rpx 24rpx;
	}

	.box-doctor {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin-right: -18rpx;
		margin-bottom: -18rpx;
		padding: 8rpx 24rpx 20rpx 0rpx;
		display: inline-flex; /* 确保子元素水平排列 */
	}
	

	
	.gapitem {
		margin: 0 18rpx 18rpx 0;
		
	}
</style>