his_user_miniapp/pages/index/index.vue

<template>
	<view class="content">
		<view class="cont">
			<view class="bg">
				<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/4e7d59d18291491a81c67ed2cfd95a4c.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="../../static/images/dui.png"></image>
						<image v-if="isTop" src="../../static/images/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="/static/images/icon_search.png" mode=""></image>
						<input disabled type="text" placeholder="搜索医生/疾病/知识" placeholder-class="input-place">
					</view>
					<view class="msg">
						<image v-if="!isTop" class="msg" src="/static/images/msg.png"></image>
						<image v-if="isTop"  class="msg" src="/static/images/msg1.png"></image>
						<button class='contact-btn' open-type="contact">
						</button>
					</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
							@click="handleAdvClick"
					></u-swiper>
				</view>
				<view class="btns">
					<view class="btn1"  @click="navTo('/pages_doctor/doctorList')">
						<view class="title-box">
							<view class="title">专家问诊</view>
							<view class="desc">名医问诊处方</view>
						</view>
						<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/4c28bef97d714e569e672e006ee471e2.png"></image>
						<image class="mask" src="../../static/images/mask.png"></image>
					</view>
					<view class="btn2" @click="navTo('/pages_order/inquirySelectType')">
						<view class="title-box">
							<view class="title">健康咨询</view>
							<view class="desc">快速健康咨询</view>
						</view>
						<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/86e6f39efbc54d2dadf058dde269e573.png"></image>
						<image class="mask" src="../../static/images/mask.png"></image>
					</view>
				</view>
				<view class="modules">
					<view class="module" v-for="(item,index) in layouts">
						<view class="menus" v-if="item.id==1&&item.isShow">
							<view class="title">{{item.name}}</view>
							<view class="menu-box">
								<view class="menu"  @click="navTo('/pages_index/testList')">
									<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/6104b270481040dd8340859c9d901c09.png"></image>
								</view>
								<view class="menu" @click="loginNavTo('/pages_user/integralGoodsList')">
									<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/f9f2f6c6b4d24f1ba9a637dfed74f8c3.png"></image>
								</view>
								<view class="menu" @click="navTo('/pages_order/inquirySelect?inquiryType=3')">
									<image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/76f15105ebe442398da1fe57e080bcd4.png"></image>
								</view>
								<view class="menu" @click="switchTab('/pages/store/index')">
									<image src="https://cos.his.cdwjyyh.com/fs/20240509/908255a8d8134a5482f0314bfbb42c02.png"></image>
								</view>
							</view>
						</view>
						<view class="depts" v-if="item.id==2&&item.isShow">
							<view class="title">
								{{item.name}}
							</view>
							<view class="dept-box">
								<view @click="navTo('/pages_doctor/doctorList?deptId='+item.deptId)"  class="dept" v-for="(item,index) in depts">
									<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="item.id==3&&item.isShow">
							<view class="title">
								{{item.name}}
							</view>
							<view class="dept-box">
								<view  @click="yangshengClick(item)"  class="dept" v-for="(item,index) in yangshengs"  >
									<image class="icon" :src="item.icon"></image>
									<view class="title" >{{item.title}}{{item.isShow}} </view>
								</view>
							</view>
						</view>
						<view class="doctor-articles" v-if="item.id==4&&item.isShow" >
							<view class="title-box">
								<view class="title">{{item.name}}</view>
								<view class="more"  @click="navTo('/pages_doctor/doctorArticleList')" >
									<view class="text">更多</view>
									<image src="/static/images/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">
									<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" v-if="item.id==5&&item.isShow">
							<view class="title-box">
								<view class="title">{{item.name}}</view>
								<view class="more" @click="navTo('/pages_doctor/doctorList')">
									<view class="text">更多</view>
									<image src="../../static/images/arrow_gray.png"></image>
								</view>
							</view>
							<view class="doctor-box" v-if="doctors.length>0">
								<view class="doctor" @click="navTo('/pages_doctor/doctorDetails?doctorId='+item.doctorId)" v-for="(item,index) in doctors">
									<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="../../static/images/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">
														{{price.price.toFixed(2)}} <text v-if="index==0">/</text>
													</text>
												</view>
											</view>
										</view>
										
									</view>
									
								</view>
							</view>
						</view>
						<view class="articles" v-if="item.id==6&&item.isShow">
							<view class="title-box">
								<view class="title">{{item.name}}</view>
								<view class="more" @click="navTo('/pages_index/articleList')">
									<view class="text">更多</view>
									<image src="../../static/images/arrow_gray.png"></image>
								</view>
							</view>
							<view class="article-box" v-if="articles.length>0">
								<view class="item" @click="navTo('/pages_index/articleDetails?articleId='+item.articleId)" v-for="(item,index) in articles">
									
									<view class="left">
										<view class="title">
											{{item.title}}
										</view>
										<view class="views">
											浏览量 {{item.views}}
										</view>
									</view>
									<view class="right">
										<image :src="item.imageUrl"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="packages" v-if="item.id==7&&item.isShow">
							<view class="title-box">
								<view class="title">{{item.name}}</view>
								<view class="more" @click="navTo('/pages_index/packageList')">
									<view class="text">更多</view>
									<image src="../../static/images/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">
									<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>
			
		</view>
	</view>
</template>
<script>
	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'
	export default {
		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:"#2A2B2E",
				descColor:"#626468",
				top:0,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				advImgs:[],
				doctors:[],
				advs:[],
				articles:[],
				depts:[],
				doctocArticles:[],
				hosLevelOptions:[],
				packages:[]
			}
		},
		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");
			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://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if(this.utils.isLogin()){
				return {
					title: "御君方互联网医院",
					imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		computed: {
			bg: function() {
				var top=this.top/120;
				console.log(top)
				if(top>0){
					this.isTop=true;
					this.titleColor="#fff"
					this.descColor="#fff"
				}
				else{
					this.isTop=false;
					this.titleColor="#2A2B2E"
					this.descColor="#626468"
				}
				return 'rgba(195,154,88, ' + top + ')';
			},
		},
		methods: {
			dev(){
				uni.showToast({
					icon:"none",
					title: '敬请期待'
				})
			},
			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)
							console.log(this.layouts)
							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){
				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">
	.content{
		height: 100%;
		.cont{
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			.bg{
				width: 100%;
				height:450rpx;
				// background-color: #2BC7B9;
				// background: linear-gradient(#2BC7B9, #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: #2A2B2E;
					}
					.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;
						}
					}
				}
			}
			.cont-box{
				z-index: 1000;
				.banner{
					margin-top: 20rpx;
					width: 100%;
					padding: 0 20upx;
				}
				.btns{
					
					padding: 0 20upx;
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.btn1{
						position: relative;
						background: linear-gradient(to bottom, #EEC992, #CDA569);
						box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
						margin-right: 30rpx;
						border-radius: 15rpx;
						height:180rpx;
						padding: 15rpx 30rpx;
						width:50%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						&:last-child{
							margin-right: 0rpx;
						}
						image{
							width:104rpx;
							height:104rpx;
						}
						.mask{
							position: absolute;
							top:0rpx;
							right:0rpx;
							width: 100rpx;
							height:100rpx;
						}
						.title-box{
							display: flex;
							align-items: flex-start;
							justify-content: center;
							flex-direction: column;
							.title{
								font-size: 36upx;
								font-weight: bold;
								color: #ffffff;
							}
							.desc{
								margin-top: 6rpx;
								opacity: 0.8;
								font-size: 26upx;
								color: #ffffff;
							}
							
						}
					}
					.btn2{
						position: relative;
						background: linear-gradient(to bottom, #EE8C5F, #EA5733);
						box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
						margin-right: 30rpx;
						border-radius: 15rpx;
						height:180rpx;
						padding: 15rpx 30rpx;
						width:50%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						&:last-child{
							margin-right: 0rpx;
						}
						image{
							width:104rpx;
							height:104rpx;
						}
						.mask{
							position: absolute;
							top:0rpx;
							right:0rpx;
							width: 100rpx;
							height:100rpx;
						}
						.title-box{
							display: flex;
							align-items: flex-start;
							justify-content: center;
							flex-direction: column;
							.title{
								font-size: 36upx;
								font-weight: bold;
								color: #ffffff;
							}
							.desc{
								margin-top: 6rpx;
								opacity: 0.8;
								font-size: 26upx;
								font-weight: bold;
								color: #ffffff;
							}
							
						}
					}
				}
				.modules{
					.module{
						.menus{
							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;
							}
							.menu-box{
								display: flex;
								align-items: center;
								justify-content: flex-start;
								flex-wrap:wrap;
								.menu{
									padding: 15rpx;
									width:50%;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									flex-wrap: wrap;
									image{
										width:100%;
										height:180rpx;
									}
								}
							}
							
						}
						.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{
								padding: 20rpx 0rpx;
								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{
							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;
									}
									
								}
							}
							
						}
						.articles{
							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;
									}
									
								}
							}
							.article-box{
								margin-top: 15rpx;
								padding: 20rpx 0rpx 0rpx;
								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;
										}
									}
								}
							}
						}
						.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: #C39A58;
												border-radius: 30rpx;
												font-size: 20upx;
												font-family: PingFang SC;
												color: #ffffff;
											}
											.count{
												font-size: 24upx;
												font-family: PingFang SC;
												color: #333333;
											}
											
										}
									}
								}
							}
							
							
						}
					}
					
				}
				
			}
			
		}
	}
	 
</style>