yijianbao_user_uniapp/pages/index/index.vue

<template>
	<view class="content">
		<view class="cont">
			<view class="bg">
				<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/image/index_img/home_top_bg.png"></image>
			</view>
			<view class="top-box" :style="{ background: bg }" >
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="top-title">
					<view class="name" :style="{ color: titleColor }">医健宝互联网医院</view>
					<view class="desc-box" >
						<image v-if="!isTop" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/dui1.png"></image>
						<image v-if="isTop" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/dui1.png"></image>
						
						<view class="desc" :style="{ color: descColor }">卫健部门权威认证机构，世界各地千万用户健康选择</view>
					</view>
				</view>
				<view class="search">
					<view class="search-box" @click="navTo('/pages_index/search')">
						<image class="img" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/icon_search.png" mode=""></image>
						<input disabled type="text" placeholder="搜索医生、疾病、知识" placeholder-class="input-place">
					</view>
				</view>
			</view>
			<view class="cont-box">
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view style="padding-bottom:178rpx" >
				</view>
				<view class="banner" v-if="advImgs.length>0">
					<u-swiper
						:list="advImgs"
						indicator
						indicatorMode="line"
						circular
						height="233rpx"
						@click="handleAdvClick">
					</u-swiper>
				</view>
				<view class="menu-box box">
					<view class="menu-item" @click="navTo('/pages_index/healthy/index')">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/medical_news_icon.png" mode="aspectFill"></image>
						<view>医药资讯</view>
					</view>
					<view class="menu-item" @click="loginNavTo('/pages_user/complaint')">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/consultation_complaints_icon.png" mode="aspectFill"></image>
						<view>咨询投诉</view>
					</view>
					<view class="menu-item" @click="navTo('/pages_order/inquirySelect?inquiryType=3')">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/consultant_pharmacist_icon.png" mode="aspectFill"></image>
						<view>咨询药师</view>
					</view>
					<view class="menu-item" @click="navTo('/pages_shopping/registerMerchant')">
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/merchants_settle_in_icon.png" mode="aspectFill"></image>
						<view>商家入驻</view>
					</view>
				</view>
				<!-- 推荐药品 -->
				<tuiProduct ref="tuiProduct"></tuiProduct>
				<!-- 特色药店 -->
				<view class="pharmacy-box box">
					<view class="title-box">
						<view class="title">特色药店</view>
						<view class="more"  @click="navTo('/pages_store/index')" >
							<view class="text">更多药店</view>
							<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
						</view>
					</view>
					<view class="pharmacy">
						<image :src="store.logoUrl" mode="aspectFill" v-for="(store,i) in storeIndexList" :key="i" 
						@click="navTo('/pages_store/storeIndex?storeId='+store.id)"></image>
					</view>
				</view>
				<view class="modules">
					<view class="module" v-for="(it,index) in layouts" :key="index">
						<!-- <view class="depts" v-if="it.id==2&&it.isShow">
							<view class="title">
								{{it.name}}
							</view>
							<view class="dept-box">
								<view @click="navTo('/pages_doctor/doctorList?deptId='+item.deptId)"  class="dept" v-for="(item,index) in depts" :key="index">
									<image class="icon" :src="item.iconUrl"></image>
									<view class="title">{{item.deptName}}</view>
								</view>
								<view @click="navTo('/pages_doctor/doctorList?deptId=0')" class="dept">
									<image class="icon" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/acbb520df8284c6aaff601cb06411c2a.png"></image>
									<view class="title">更多科室</view>
								</view>
							</view>
							
						</view>
						<view class="depts" v-if="it.id==3&&it.isShow">
							<view class="title">
								{{it.name}}
							</view>
							<view class="dept-box">
								<view  @click="yangshengClick(item)"  class="dept" v-for="(item,index) in yangshengs" :key="index">
									<image class="icon" :src="item.icon"></image>
									<view class="title" >{{item.title}}</view>
								</view>
							</view>
						</view>
						<view class="doctor-articles" v-if="it.id==4&&it.isShow" >
							<view class="title-box">
								<view class="title">{{it.name}}</view>
								<view class="more"  @click="navTo('/pages_doctor/doctorArticleList')" >
									<view class="text">更多</view>
									<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
								</view>
							</view>
							<scroll-view :scroll-x="true" style="white-space: nowrap;">
							<view class="article-box"  >
								<view class="article" @click="navTo('/pages_doctor/doctorArticleDetails?articleId='+item.articleId)"  v-for="(item,index) in doctocArticles" :key="index">
									<view class="image-box">
										<image mode="aspectFill" :src="item.imageUrl"></image>
										<view class="views">
											{{item.views}}人观看
										</view>
										<view class="doctor">
											<image mode="aspectFill" :src="item.avatar"></image>
											<view class="right">
												<view class="doc-name ellipsis">{{item.doctorName}}</view>
												<view class="doc-position ellipsis">{{item.position}}</view>
											</view>
										</view>
									</view>
									<view class="article-title-box">
										<view class="article-title ellipsis">{{item.title}}</view>
									</view>
								</view>
							</view>
							</scroll-view>
						</view> -->
						<view class="doctors box" v-if="it.id==5&&it.isShow">
							<view class="title-box">
								<view class="title">{{it.name}}</view>
								<view class="more" @click="navTo('/pages_doctor/doctorList')">
									<view class="text">更多</view>
									<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
								</view>
							</view>
							<view class="doctor-box" v-if="doctors.length>0" style="padding: 0;margin: 0;">
								<view class="doctor" @click="navTo('/pages_doctor/doctorDetails?doctorId='+item.doctorId)" v-for="(item,index) in doctors" :key="index">
									<view class="item">
										<view class="left">
											<view class="head-box"> 
												<image mode="aspectFill" class="doc-img" :src="item.avatar"></image>
												<view class="isline" v-if="item.workStatus==1">
													<view class="img">
														<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/isline.png"></image>
														<view class="name">在线</view>
													</view>
												</view>
											</view>
										</view>
										<view class="right"> 
											<view class="doc-box">
												<view class="doc-name">
													{{item.doctorName}}
												</view>
												<view class="doc-position">{{item.position}}</view>
												<view class="doc-dept">{{item.deptName}}</view>
											</view>
											<view class="hospital-box">
												<!-- <view class="tag" v-if="item.hospitalLevel!=null">
													<text>{{$getDictLabelName(hosLevelOptions,item.hospitalLevel)}}</text>
												</view> -->
												<view class="name">{{item.hospitalName||''}} </view>
											</view>
											<view class="doc-spec">
												<view class="spec ellipsis2">{{item.speciality}}</view>
											</view>
											<view class="doc-count">
												<view class="name">好评:</view>
												<view class="count">{{item.pingStar}}分</view>
												<view class="name">接诊量:</view>
												<view class="count">{{item.orderNumber}}</view>
												<view class="name">平均响应:</view>
												<view class="count"></view>
											</view>
											<view class="doc-price"  >
												<view class="btn">
													咨询医生￥
													<text v-for="(price,index) in item.prices" :key="index">
														{{price.price.toFixed(2)}} <text v-if="index==0">/</text>
													</text>
												</view>
											</view>
										</view>
										
									</view>
									
								</view>
							</view>
						</view>
						<view class="articles box" v-if="it.id==6&&it.isShow">
							<view class="title-box">
								<view class="title">{{it.name}}</view>
								<view class="more" @click="navTo('/pages_index/healthy/index')">
									<view class="text">更多</view>
									<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
								</view>
							</view>
							<view class="article-box" v-if="articles.length>0">
								<view class="item" @click="navTo('/pages_index/healthy/detail?articleId='+item.articleId)" v-for="(item,index) in articles" :key="index">
									<view class="left">
										<view class="title ellipsis2">
											{{item.title}}
										</view>
										<view class="views">
											浏览量 {{item.views}}
										</view>
									</view>
									<view class="right">
										<image :src="item.imageUrl" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						
						<!-- <view class="packages" v-if="it.id==7&&it.isShow">
							<view class="title-box">
								<view class="title">{{it.name}}</view>
								<view class="more" @click="navTo('/pages_index/packageList')">
									<view class="text">更多</view>
									<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png"></image>
								</view>
							</view>
							<view class="package-box"  >
								<view class="item" @click="navTo('/pages_index/packageDetails?packageId='+item.packageId)" v-for="(item,index) in packages" :key="index">
									<view class="top">
										<image :src="item.imgUrl"></image>
									</view>
									<view class="bottom">
										<view class="title ellipsis2">
											{{item.packageName}}
										</view>
										<view class="price-box">
											<view class="price">￥{{item.price.toFixed(2)}}元/日</view>
											<view class="count">{{item.sales}}人已购</view>
										</view>
									</view>
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<!-- 资质 -->
				<view class="qualifications-box">
					<view class="qualifications-con">
						<image class="qualifications-icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/certificate_icon68.svg" mode=""></image>
						<view class="qualifications-r">
							<view class="x-bc">
								<text>资质证书展示</text>
								<view class="desc x-f" @click="navTo('/pages_user/cert')">
									<text>查看详情</text>
									<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/index/white_right_arrow_right_icon.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="text" style="margin-top: 6rpx;">药品交易平台备案：XXXXX</view>
							<view class="text" style="margin-top: 6rpx;">医疗器械交易平台备案：XXXXX</view>
						</view>
					</view>
					<view>
						<text class="text" style="margin-right: 40rpx;">投诉举报邮箱：Yijabao@163.com</text>
						<text class="text">联系电话：13466304507</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	import tuiProduct from "@/components/tuiProduct.vue"
	import {getConfigByKey} from '@/api/common'
	import {getPackageList} from '@/api/package.js'
	import {getDoctorArticleList} from '@/api/doctorArticle.js'
	import {getDoctorList} from '@/api/doctor.js'
	import {getArticleList} from '@/api/article.js'
	import {getAdvList} from '@/api/adv.js'
	import {getDepartmentList} from '@/api/department.js'
	import {getDictByKey} from '@/api/common.js'
	import {validList}from '@/api/index.js'
	export default {
		components: {
			tuiProduct
		},
		data() {
			return {
				layouts:[],
				yangshengs:[
					{id:"0",title:"AI舌诊",page:"/pages_user/tongue/index",icon:"https://cos.his.cdwjyyh.com/fs/20240919/647fb42de0ab4e96a6c3097f3c3d9cf5.png"},
					{id:"1",title:"药膳食疗",page:"/pages_index/medicatedFoodList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/3cfbd47911cf4753aa9497eac500728d.png"},
					{id:"2",title:"经络穴位",page:"/pages_index/vesselList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e93536a9dc1a4f8ca09545097b12fdea.png"},
					{id:"3",title:"问答专区",page:"/pages_index/questionsList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e896972bd56f4e358188af36f2c5af42.png"},
					{id:"4",title:"疾病",page:"/pages_index/diseaseList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/d6f1851cccae414b8baf2ba07782f91b.png"},
					{id:"5",title:"中药图解",page:"/pages_index/chineseMedicineList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/ff43572d0d004285b5a3b0ef2663c471.png"},
					{id:"6",title:"名方今用",page:"/pages_index/famousPrescribeList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/45db770e58c34963b0d2ba24a958b617.png"},
					{id:"7",title:"康复医案",page:"/pages_doctor/doctorArticleList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e793942797b24035b51f94d894bdfa0b.png"}
					
				],
				isTop:false,
				titleColor:"#ffffff",
				descColor:"#ffffff",
				top:0,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				advImgs:[],
				doctors:[],
				advs:[],
				articles:[],
				depts:[],
				doctocArticles:[],
				hosLevelOptions:[],
				packages:[],
				storeIndexList: []
			}
		},
		onLoad() {
			this.getDictByKey("sys_hospital_level");
			uni.$on('refreshMsgCount', () => {
				try{
					let totalUnreadCount = uni.$TUIKit.getTotalUnreadMessageCount();
					if(totalUnreadCount>0){
						try{
							uni.setTabBarBadge({ //显示数字
								index: 1, //tabbar下标
								text: totalUnreadCount+"" //数字
							})
						}
						catch(e){
							
						}
						
					}
					else{
						try{
							uni.hideTabBarRedDot({ //隐藏红点
								index: 1 //tabbar下标
							})
						}
						catch(e){
							
						}
						
					}
				}catch(e){
				}
				
			});
		},
		onShow() {
			this.getDoctorList();
			this.getArticleList();
			this.getAdvList();
			// this.getDepartmentList();
			// this.getDoctorArticleList();
			// this.getPackageList();
			this.getConfigByKey("his.appShow");
			this.getStore()
			var that=this;
			uni.$emit('refreshMsgCount');
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		//发送给朋友
		onShareAppMessage(res) {
			if(this.$isLogin()){
				return {
					title: "医健宝互联网医院",
					path: '/pages/index/index',
					imageUrl: 'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/sharelogo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if(this.$isLogin()){
				return {
					title: "医健宝互联网医院",
					imageUrl: 'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/sharelogo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		computed: {
			bg: function() {
				var top=this.top/120;
				if(top>0){
					this.isTop=true;
					this.titleColor="#fff"
					this.descColor="#fff"
				}
				else{
					this.isTop=false;
					this.titleColor="#fff"
					this.descColor="#fff"
				}
				return 'rgba(37, 131, 235, ' + top + ')';
			},
		},
		methods: {
			dev(){
				uni.showToast({
					icon:"none",
					title: '敬请期待'
				})
			},
			getStore() {
				validList().then(res=>{
					if(res.code==200) {
						this.storeIndexList =res.rows
					}
				})
			},
			getConfigByKey(key){
				var that=this;
				var data={key:key}
				getConfigByKey(data).then(
					res => {
						if(res.code==200){
							this.layouts=JSON.parse(res.data);
							this.layouts.sort((a, b) => a.sort - b.sort)
							this.layouts.forEach(function(element) {
								if(element.id=="4"){
									if(!element.isShow){
										that.yangshengs.splice(6,1);	
									}
								}
								if(element.id=="7"){
									// if(!element.isShow){
									// 	uni.setTabBarItem({
									// 		index:2, //从左到右 0开始
									// 		visible:false //默认true false隐藏
									// 	})
									// }
									// else{
									// 	uni.setTabBarItem({
									// 		index:2, //从左到右 0开始
									// 		visible:true //默认true false隐藏
									// 	})
									// }
								}
							});
						}
					},
					rej => {}
				);
			},
			yangshengClick(item){
				// uni.navigateTo({
				//   url: '/pages/index/webview?url=' + encodeURIComponent('rtlive://course?courseId=1')
				// });
				// return;
				if(item.id==0){
					// this.$isLogin().then(
					// 	res => {
					// 		if(res){
								uni.navigateTo({
									url:item.page
								}); 
					// 		}
					// 		else{
					// 			uni.navigateTo({
					// 				url:'/pages/auth/login'
					// 			})
					// 		}
					// 	}
					// );
				}
				else{
					if(item.page==""){
						uni.showToast({
							icon:"none",
							title: '暂无更多'
						})
						return;
					}
					uni.navigateTo({
						url:item.page
					})
				}
				
			},
			switchTab(url){
				uni.switchTab({
					url:url
				})
			},
			navToMiniProgram(){
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId: 'wx45cf09091aead547',
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					path: '/pages/common/launch',
					extraData: {
						// 'type': 'out'
					},
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'develop',
					success(res) {
						// 打开成功
						// uni.showToast({
						// 	title: '跳转成功'
						// })
					},
					fail(err) {
						// 打开失败/取消
						// uni.showToast({
						// 	title: '跳转不成功'
						// })
					}
				})
			},
			getDictByKey(key){
				var data={key:key}
				getDictByKey(data).then(
					res => {
						if(res.code==200){
							if(key=="sys_hospital_level"){
								this.hosLevelOptions=res.data;
							}
						}
					},
					err => {
					}
				);
				
			},
			getDoctorArticleList(page) {
				//联网加载数据
				var that = this;
				var data = {
					pageNum:1,
					pageSize:10,
				};
				getDoctorArticleList(data).then(res => {
					if(res.code==200){
						this.doctocArticles=res.data.list;
					}else{
					}
				});
			},
			getDepartmentList(page) {
				//联网加载数据
				var that = this;
				var data = {
					isTui:1
				};
				getDepartmentList(data).then(res => {
					if(res.code==200){
						this.depts=res.data;
					} 
				});
			},
			handleAdvClick(index){
				var ad=this.advs[index];
				console.log(ad.advUrl);
				if(ad.showType==1){
					uni.setStorageSync('url',ad.advUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==2){
					uni.navigateTo({
						url:ad.advUrl
					})
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({
					 	url:"content"
					 })
				}
				
			},
			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: "请求失败",
						});
					}
				});
			},
			getArticleList() {
				//联网加载数据
				var that = this;
				var data = {
					isTui:1,
					pageNum:1,
					pageSize:10,
				};
				getArticleList(data).then(res => {
					if(res.code==200){
						this.articles=res.data.list;
					}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() {
				//联网加载数据
				var that = this;
				var data = {
					isShow:1,
					pageNum:1,
					pageSize:10,
				};
				getPackageList(data).then(res => {
					if(res.code==200){
						this.packages=res.data.list;
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			loginNavTo(url){
				this.$isLogin().then(
					res => {
						if(res){
							console.log(res)
							uni.navigateTo({
								url: url
							})
						}
						else{
							uni.navigateTo({
								url:'/pages/auth/login'
							})
						}
					}
				);
				 
			},
			navTo(url){
				if(url=="dev"){
					uni.showToast({
						icon:'none',
						title: "尽情期待...",
					});
					return;
				}
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			 navToTest() {
				 const course = {"companyId":100,"companyUserId":6806,"corpId":"ww5a88c4f879f204c5","courseId":63,"link":"1899022782092541952","linkType":3,"qwExternalId":9914983,"qwUserId":"18931","videoId":409}
				 uni.navigateTo({
				 	url: '/pages_course/video?course='+JSON.stringify(course)
				 })
			 }
		}
	}
</script>
<style scoped lang="scss">
	.qualifications {
		&-box {
			margin: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			overflow: hidden;
			background-image: url('https://cos.his.cdwjyyh.com/fs/20250826/54a29c58e06c431cbe3286335bb0da1b.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
		&-con {
			display: flex;
			align-items: flex-start;
		}
		&-icon {
			height: 136rpx;
			width: 136rpx
		}
		&-r {
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				image {
					height: 48rpx;
					width: 48rpx
				}
			}
		}
	}
	.content{
		height: 100%;
		.cont{
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			.bg{
				width: 100%;
				height:450rpx;
				// background-color: #2583EB;
				// background: linear-gradient(#2583EB, #88e2da);
				position: fixed;
				image{
					border-radius: 0rpx 0rpx 50rpx 50rpx;
					width: 100%;
					height:100%;
				}
			}
			.top-box{
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 1001;
				.top-title{
					height: 88upx;
					// line-height: 88upx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					margin-left: 15rpx;
					.name{
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #fff;
					}
					.desc-box{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-top: 10rpx;
						
						image{
							width:24rpx;
							height:24rpx;
						}
						.desc{
							margin-left: 5rpx;
							font-size: 20upx;
							font-family: Source Han Sans CN;
							color: #626468;
						}
						
					}
					 
					
					 
				}
				.search{
					box-sizing: border-box;
					z-index: 101;
					padding: 15rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.search-box{
						flex: 1;
						margin-right: 10rpx;
						height: 60upx;
						line-height: 60upx;
						border-radius: 30upx;
						background-color: #fff;
						padding: 0 30upx;
						display: flex;
						align-items: center;
						transition: all .5s;
						.img{
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
						}
						input{
							flex: 1;
							font-size: 24upx;
							color: #000;
						}
						.input-place{
							font-size: 24upx;
							color: #878787;
						}
					}
					.msg{
						position: relative;
						width:50rpx;
						height:50rpx;
						image{
							width: 100%;
							height:100%;
							
						}
						.contact-btn {
							top: 0;
							position: absolute;
							width:100%;
							height:100%;
							opacity: 0;
						}
					}
				}
			}
			.box {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 24rpx;
				box-sizing: border-box;
				.title-box{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 28rpx 0;
					box-sizing: border-box;
					.title{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.more{
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.text{
							font-size: 24rpx;
							font-family: PingFang SC;
							color: #9B9B9B;
						}
						image{
							margin-left: 10rpx;
							width:15rpx;
							height:20rpx;
						}
						
					}
				}
				.price-box {
					font-family: Roboto, Roboto;
					font-weight: bold;
					font-size: 36rpx;
					color: #FF5C03;
					margin-top: 22rpx;
					&-unit {
						font-weight: 600;
						font-size: 26rpx;
					}
					&-decimal {
						font-weight: 600;
						font-size: 26rpx;
					}
					&-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
					}
				}
			}
			.menu-box {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				padding: 26rpx 0 34rpx 0;
				.menu-item {
					width: 25%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					display: flex;
					flex-direction: column;
					align-items: center;
					align-items: center;
				}
				image {
					width: 104rpx;
					height: 104rpx;
					margin-bottom: 26rpx;
				}
			}
			
			.pharmacy-box {
				padding: 8rpx 24rpx 32rpx 24rpx;
				.pharmacy {
					background: #FFFFFF;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-right: -18rpx;
					image {
						flex-shrink: 0;
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 1rpx solid #F5F6F6;
						margin-right: 18rpx;
						margin-bottom: 18rpx;
						box-sizing: border-box;
					}
				}
			}
			.cont-box{
				z-index: 100;
				.banner{
					margin: 20rpx auto auto;
					width: 702rpx;
				}
				.modules{
					.module{
						.depts{
							z-index: 101;
							margin: 20rpx 15rpx 0rpx;
							padding: 20rpx;
							box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
							background-color: #fff;
							border-radius: 15rpx;
							.title{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #2A2B2E;
							}
							.dept-box{
								margin-top: 15rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								flex-wrap:wrap;
								.dept{
									padding: 15rpx 5rpx;
									width:25%;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									.icon{
										width:58rpx;
										height:58rpx;
									}
									.title{
										margin-top: 10rpx;
										font-size: 24upx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #111111;
									}
								}
							}
							
						}
						.doctor-articles{
							z-index: 101;
							margin: 20rpx 15rpx 0rpx;
							padding: 20rpx;
							box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
							background-color: #fff;
							border-radius: 15rpx;
							.title-box{
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;
								.title{
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #111111;
								}
								.more{
									display: flex;
									align-items: center;
									justify-content: flex-end;
									.text{
										font-size: 24rpx;
										font-family: PingFang SC;
										color: #9B9B9B;
									}
									image{
										margin-left: 10rpx;
										width:15rpx;
										height:20rpx;
									}
									
								}
							}
							.article-box{
								overflow-x: auto;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								.article{
									width: 300rpx;
									margin-right: 20rpx;
									background: #f9f8fe;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: flex-start;
									&:last-child{
										margin-right: 0rpx;
									}
									.image-box{
										width: 300rpx;
										height:400rpx;
										position: relative;
										border-radius: 20rpx;
										image{
											border-radius: 20rpx;
											width: 300rpx;
											height:400rpx;
										}
										.views{
											position: absolute;
											top:0rpx;
											left:0rpx;
											padding: 5rpx 10rpx;
											background: rgba(0,0,0,0.25);
											border-radius: 12rpx 0px 12rpx 0px;
											opacity: 1;
											font-size: 20rpx;
											font-family: PingFang SC-Bold, PingFang SC;
											font-weight: bold;
											color: #FFFFFF;
										}
										.doctor{
											margin: 10rpx;
											display: flex;
											align-items: center;
											justify-content: flex-start;
											position: absolute;
											bottom:0rpx;
											left:0rpx;
											image{
												border-radius: 50%;
												width: 64rpx;
												height:64rpx;
											}
											.right{
												width: 200rpx;
												margin-left: 10rpx;
												display: flex;
												flex-direction: column;
												align-items: flex-start;
												justify-content: space-between;
												.doc-name{
													width: 200rpx;
													font-size: 30rpx;
													font-weight: bold;
													font-family: PingFang SC;
													color: #fff;
												}
												.doc-position{
													width: 100%;
													font-size: 28rpx;
													font-family: PingFang SC;
													color: #fff;
													font-weight: bold;
													opacity: 0.8;
												}
											}
										}
									}
									.article-title-box{
										width: 100%;
										margin-top: 10rpx;
										display: flex;
										align-items: center;
										justify-content: flex-start;
										.article-title{
											font-size: 30rpx;
											font-weight: bold;
											font-family: PingFang SC;
											color: #2A2B2E;
										}
										
									}
									 
								}
								
							}
						}
						.doctors {
							padding: 0 24rpx 24rpx 24rpx;
						}
						.articles{
							padding: 0 24rpx 24rpx 24rpx;
							.article-box{
								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{
											width: 180rpx;
											height: 136rpx;
											background: #F5F6F6;
											border-radius: 10rpx 10rpx 10rpx 10rpx;
										}
									}
								}
							}
						}
						.packages{
							z-index: 101;
							margin: 20rpx 15rpx;
							padding: 20rpx;
							box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
							background-color: #fff;
							border-radius: 15rpx;
							.title-box{
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;
								.title{
									font-size: 32upx;
									font-family: PingFang SC;
									font-weight: bold;
									color: #111111;
								}
								.more{
									display: flex;
									align-items: center;
									justify-content: flex-end;
									.text{
										font-size: 24rpx;
										font-family: PingFang SC;
										color: #9B9B9B;
									}
									image{
										margin-left: 10rpx;
										width:15rpx;
										height:20rpx;
									}
									
								}
							}
							.package-box{
								padding: 20rpx 0rpx 0rpx;
								display: flex;
								align-items: flex-start;
								justify-content: flex-start;
								flex-wrap: wrap;
								.item{
									width: calc(50% - 20rpx);
									border-radius: 15rpx;
									margin: 10rpx;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: flex-start;
									&:last-child{
									}
									.top{
										width:100%;
										height:300rpx;
										image{
											border-radius: 15rpx 15rpx 0rpx 0rpx;
											width:100%;
											height:300rpx;
										}
										
									}
									.bottom{
										width: 100%;
										margin-top: 15rpx;
										.title{
											font-weight: bold;
											font-size: 28upx;
											font-family: PingFang SC;
											color: #111111;
										}
										.price-box{
											margin-top: 10rpx;
											display: flex;
											align-items: center;
											justify-content: space-between;
											width: 100%;
											.price{
												padding: 5rpx 10rpx;
												background-color: #2583EB;
												border-radius: 30rpx;
												font-size: 20upx;
												font-family: PingFang SC;
												color: #ffffff;
											}
											.count{
												font-size: 24upx;
												font-family: PingFang SC;
												color: #333333;
											}
											
										}
									}
								}
							}
							
							
						}
					}
					
				}
				
			}
			
		}
	}
	 
</style>