siyu_app/pages/index/components/homeIndex.vue

<template>
	
	<view class="home-content">
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" top="0" bottom="20" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
				<!-- 搜索 -->
				<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>
								
				<!-- ai舌诊 -->				
				<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>
				
				  <!-- 横向banner 1分钱起 -->
				<!-- <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>
				<!-- 芳华百事通 -->
				<!-- <template v-if='ailist&&ailist.length>0'>
					<view class="box-nav">
						<view class="title">芳华百事通</view>
						<view class="box-nav-right" @click="loginNavTo('/pages/ai/list')">
							<text>更多</text>
							<image class="right-arrow" src="@/static/image/home1/my_right_arrow.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="ai-banner">
						<swiper class="ai-banner-swiper" :current="current" :style="{height: swHeight + 'rpx'}" :autoplay="true" circular interval="3000" duration="1000" @animationfinish="animationfinish">
							<swiper-item class="ai-banner-swiper-item" v-for="(group, index) in ailist" :key="index">
								<image class="ai-banner-img" v-for="(item,idx) in group" :key="idx" :src="item.recommendImgUrl" mode="aspectFill" @click="loginNavTo('/pages/ai/chat?roleId='+item.roleId+'&roleName='+item.roleName+'&sessionId='+item.sessionId || '')"></image>
							</swiper-item>
						</swiper>
					</view>
				</template> -->
				 <!-- 健康自测 -->
				<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>
				 <swiper class="swiper-doctor" circular :autoplay="true" interval="3000" duration="1000" display-multiple-items='2' next-margin="20px">
				    <swiper-item v-for="(item,index) in doctors" :key="i">	  
				        <docterItem class="gapitem"  :item="item" @click="navTo('/pages/doctor/doctorDetails?doctorId='+item.doctorId)"></docterItem>
				    </swiper-item>
				 </swiper> -->
				 
				 <!-- 养生干货 -->
				<!-- <template v-if="articles.length>0">
					 <view class="box-nav">
						 <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 style="padding: 0 24rpx;">
						<view class="article-box">
							<view class="item" @click="navTo('/pages/article/articleDetails?articleId='+item.articleId)" v-for="(item,index) in articles" :key="index">
								<view class="left">
									<view class="title textTwo">
										{{item.title}}
									</view>
									<view class="views">
										浏览量 {{item.views}}
									</view>
								</view>
								<view class="right">
									<image :src="item.imageUrl" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</template> -->
				 <!-- 健康疗法 -->
				 <!-- <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> -->
				 <view class="box-nav" id="indexguide4">
					 <view class="title">养生讲堂</view>
					 <view class="box-nav-right" @click="navTo('/pages/course/famousHall?type=1')">
						<text>更多讲堂</text>
						<image class="right-arrow" src="/static/image/home1/my_right_arrow.png" mode="aspectFill"></image>
					</view>
				 </view>
				 <view class="hothall-box">
					 <view class="hall-box-item" v-for="(item, index) in recommendList" :key="index"  
					 @click="navTo('/pages/course/info?courseId='+item.courseId)">
					 	<view class="video-imgbox">
					 		<image class="video-img" :src="item.imgUrl" mode="scaleToFill" :lazy-load="true"></image>
					 		<image class="video-img-icon" src="@/static/image/hall/video_icon.png" mode="aspectFill"></image>  
					 	</view>
					 	
					 	<view class="hall-box-info">
					 		<view class="hall-box-name">{{item.courseName}}</view>
					 		<view class="hall-box-desc">{{item.description}}</view>
					 		<view class="hall-box-footer">
					 			<view class="hall-box-footerl footer-flex">
					 				<image class="hall-box-img" :src="item.avatar"></image>
					 				<text>{{item.talentName}}</text>
					 			</view>
					 			<view class="hall-box-footerr footer-flex">
					 				<image class="hall-box-img" src="@/static/image/hall/zan_icon.png"></image>
					 				<text>{{ item.likes  }}</text>
					 			</view>
					 		</view>
					 	</view>
					     <view v-if="item.isIntegral!=1" class="vip">VIP</view>
					 
					 </view>
				 </view>
				 <!-- 签到弹窗 -->
				 <signPop ref="signPop" :userSign="userSign" />
				 
				<!-- <healthButlerPop :show="showMask"  @close="closeAct" /> -->
				 
				 
				
		 </mescroll-body>
		 
	</view>
</template>

<script>
	import {getArticleList} from "@/api/article.js"
	import {getDoctorList} from '@/api/doctor.js'
	import {getPackageList} from '@/api/package.js'
	import { getCourseList } from '@/api/course'
	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'
	import { getRecommendRoleList } from "@/api/ai.js"
	// #ifdef APP-PLUS
	const idCode = uni.requireNativePlugin('Ba-IdCode')
	// #endif
	// const idCode = uni.requireNativePlugin('Ba-IdCode')
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { 
		    mescrollBody,
			docterItem,
			goodsItem,
	     },
		data() {
			return {
				keyword:"",
				advImgs:[],
				advs:[],
				midAdvs:[],
				doctors:[],
				packages:[],
				company:null,
				newCustomerCounts:0,
				fullCustomerCounts:0,
				myCustomerCounts:0,
				dayOrderCounts:0,
				doBuyOrderCounts:0,
				mescroll: null,
				downOption: {   //下拉刷新
				 	use:true,
				 	auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 暂无疗法 ~' // 提示
				 		// btnText: '去看看'
				 	},
					use:false
				},
				tdlist: [],
				show:false,
				user:{
				 	avatar:"",
				 	userName:this.$qconfig.appName,
				 	mobile:""
				},
				recommendList:[],
				 userScrollTop: 0,
				 fixedTop: false, // 是否固定头部
				 connectStatus: '未链接',
				 deviceToken: '',
				 udid: '',
				 registrationID: '',
				 appkey: '',
				 imageList:["../../../static/image/home/banner.png"],
				 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/jkzc_icon.png",
							name: "健康自测",
							pageUrl:"/pages/article/testList"
						},
						{
							img: "/static/image/home1/icon/jb_icon.png",
							name: "疾病",
							pageUrl:"/pages/article/diseaseList"
						}, {
							img: "/static/image/home1/icon/zytj_icon1.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,	
				 showMask:true,
				 ailist: [],
				 current: 0,
				 swHeight: 0,
				 articles:[],
			}
		},
		// 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");
		// 	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();
		// 			}
		// 		});
		// 	}
		// },
		created() {
			this.guideIndex=uni.getStorageSync("indexguide");
			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();
					}
				});
			}
			uni.$on('getIndexScanCode',(data)=>{
				this.$handleBindCompanyFsUser(data)
			})
			this.getRecommendList()
		},
		beforeDestroy() {
			uni.$off("getIndexScanCode")
		},
		methods: {
			closeAct(){
				this.showMask=false;
			},
			initReady() {
				
			},
			initShow() {
				this.getAdvList();
				this.getAppAdvList();
				this.getDoctorList();
				this.getArticleList();
				this.getPackageList(1);
				this.getAiTui()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.getAiTui()
				setTimeout(()=>{
					this.mescroll.endSuccess();
				}, 500)
			},
			getRecommendList(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			getAiTui() {
				getRecommendRoleList().then((res=>{
					if(res.code == 200) {
						const result = [];
						while (res.list&&res.list.length) {
						    result.push(res.list.splice(0, 4)); // 提取前 groupSize 个元素并存储
						}
						this.ailist = result
						this.updateSwiperHeight()
					}
				}))
			},
			animationfinish(event) {
				this.current = event.detail.current
				this.updateSwiperHeight()
			},
			updateSwiperHeight() {
				if(this.ailist[this.current].length >2 ) {
					this.swHeight=340;
				} else {
					this.swHeight=160;
				}
			},
			groupArray(arr, groupSize) {
			    const result = [];
				for (let i = 0; i < arr.length; i += groupSize) {
					const group = arr.slice(i, i + groupSize);
					const groupName = `arry${Math.floor(i / groupSize) + 1}`; // 生成动态键名
					const groupObject = {};
					groupObject[groupName] = group;
					result.push(groupObject);
				}
				return result;
			},
			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: "请求失败",
						});
					}
				});
			},
			getArticleList() {
				let param = {
					isTui:1,
					pageNum:1,
					pageSize:10,
				};
				getArticleList(param).then(res => {
					if(res.code==200){
						this.articles=res.data.list;
					}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();
								}
						    });
						}
					},
					rej => {}
				);
			},
			midAvTap(item,index){
				if(index==0){
					this.navToMinProgram();
					return;
				}
				// #ifndef MP-WEIXIN
				if(!this.$isEmpty(item.appAdvUrl)){
					this.navTo(item.appAdvUrl);
				}
				// #endif
				// #ifdef MP-WEIXIN
				if(!this.$isEmpty(item.advUrl)){
					this.navTo(item.advUrl);
				}
				// #endif
			},
			// 页面跳转
			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
					})
				}
			},
			search() {
			
			},
			topNavTo(url,index){
				if(index==0){
					//this.navTo(url);
					this.loginNavTo(url);
				}else{
					this.navTo(url);
				}
			},
			navToMinProgram(){
				// #ifdef APP-PLUS
				 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("分享失败"); // 获取分享服务列表失败
				   });
				// #endif
			}
		}
	}
</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;
	}

	.home-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) + 44px);
		// 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;
		
	}
	.swiper-doctor {
		min-height: 410rpx;
		padding-left: 24rpx;
	}
	.ai-banner {
		// box-sizing: border-box;
		// padding: 12rpx 17rpx;
		&-swiper-item {
			@include u-flex(row, flex-start, flex-start);
			flex-wrap: wrap;
			margin: 0 22rpx;
			margin-right: -20rpx;
			margin-bottom: -20rpx;
		}
		.ai-banner-img {
			width: 343rpx;
			height: 160rpx;
			overflow: hidden;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.article-box{
		background-color: #fff;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		.item{
			width: 100%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.left{
				flex:1;
				height:160rpx;
				margin-right: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				.title{
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.views{
					font-size: 24upx;
					font-family: PingFang SC;
					color: #9a9a9c;
				}
			}
			.right{
				image{
					border-radius: 10rpx;
					width:220rpx;
					height:160rpx;
					border: 1px solid #eeeeee;
				}
			}
		}
	}
	.hothall-box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20rpx;
	}
	.hall-box {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		&-item {
			width: 342rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
	        position: relative;
			.video-imgbox {
				width: 342rpx;
				height: 191rpx;
				background: #ECECEC;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				position: relative;
				overflow: hidden;
			}
			.video-img-icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
			}
			.video-img {
				width: 342rpx;
				height: 191rpx;
			}
		}
	
		&-info {
			padding: 22rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	
		&-name {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		&-desc {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 10rpx 0 18rpx;
		}
	
		&-footer {
			@include u-flex(row, center, space-between);
			width: 100%;
		}
	
		&-footerl {
			flex: 1;
			text {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		&-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
			flex-shrink: 0;
		}
	}
</style>