taiyitanghuyi_uniapp/pages/index/index.vue

<template>
	<view class="content">
		<view class="cont">
			<view class="bg">
				<image src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/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 src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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')">
						<!-- <view class="position-box">
											<image class="position-img" src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/images/positon.png" mode=""></image>
											<view class="position-text">
												{{positiontext}}
											</view>
										</view> -->
						<image class="img" src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/images/icon_search.png" mode=""></image>
						<!-- <input disabled type="text" placeholder="请输入疾病 | 科室 | 医生 | 知识" placeholder-class="input-place"> -->
						<view class="input-box">
							<view class="input-text" v-for="(item,index) in inputtext" :key="index">
								{{item}}
							</view>
						</view>
					</view>
					<view class="msg">
						<image class="msg" src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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
							height="233rpx"
							@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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/expert_consultation_icon56.png">
						</image>
						<image class="mask" src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/quick_consultation_icon56.png">
						</image>
						<image class="mask" src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/images/mask.png"></image>
					</view>
				</view>
				<view class="modules">
					<view class="module" v-for="(it,index) in layouts" :key="index">
						<view class="menus" v-if="it.id==1&&it.isShow">
							<view class="title">{{it.name}}</view>
							<view class="menu-box">
								<view class="menu" v-for="(item,index) in menuarr" :key="index" @click="golist(index)">
									<view class="image" :style="{'backgroundImage':'url(' + item.img + ')'}">
										<view class="text-box">
											<view class="image-title1" v-if="index==0">
												{{item.title}}
											</view>
											<view class="image-title2" v-if="index==1">
												{{item.title}}
											</view>
											<view class="image-title3" v-if="index==2">
												{{item.title}}
											</view>
											<view class="image-title4" v-if="index==3">
												{{item.title}}
											</view>
											<view class="image-content1" v-if="index==0">
												{{item.content}}
											</view>
											<view class="image-content2" v-if="index==1">
												{{item.content}}
											</view>
											<view class="image-content3" v-if="index==2">
												{{item.content}}
											</view>
											<view class="image-content4" v-if="index==3">
												{{item.content}}
											</view>
											<view class="image-button1" v-if="index==0">
												{{item.button}}
											</view>
											<view class="image-button2" v-if="index==1">
												{{item.button}}
											</view>
											<view class="image-button3" v-if="index==2">
												{{item.button}}
											</view>
											<view class="image-button4" v-if="index==3">
												{{item.button}}
											</view>
										</view>


									</view>
								</view>
							</view>
						</view>
						<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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/gengduokeshi_icon28.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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/images/arrow_gray.png"></image>
								</view>
							</view>

							<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" v-if="item.views.toString().split('').length<5">
											{{item.views}}人观看
										</view>
										<view class="views" v-else>
											{{item.views.toString().split('').slice(0,-4).join('')}}万人观看
										</view>
										<view class="doctor">
											<image mode="aspectFill" :src="item.avatar"></image>
											<view class="right">
												<view class="doc-name ellipsis" v-if="item.doctorName">
													{{item.doctorName}}
												</view>
												<view class="doc-position ellipsis" v-if="item.position">
													{{item.position}}
												</view>
											</view>
										</view>
									</view>
									<view class="article-title-box">
										<view class="article-title ellipsis">{{item.title}}</view>
									</view>
								</view>
							</view>

						</view>
						<view class="doctors" 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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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" :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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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" v-if="item.position">{{item.position}}</view>
												<view class="doc-dept" v-if="item.deptName">{{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="pricebutton">
													<span>立即咨询</span>
													<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" v-if="it.id==6&&it.isShow">
							<view class="title-box">
								<view class="title">{{it.name}}</view>
								<view class="more" @click="navTo('/pages_index/articleList')">
									<view class="text">更多</view>
									<image src="https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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" :key="index">
									<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="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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/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" :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">￥
												<span
													class="price-one">{{item.price.toFixed(2).toString().split('.')[0]}}
												</span>
												<span>.</span>
												<span>{{item.price.toFixed(2).toString().split('.')[1]}}</span>
												<span>元/日</span>
											</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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/tongue_diagnosis_icon28.png"
					// },
					{
						id: "1",
						title: "药膳食疗",
						page: "/pages_index/medicatedFoodList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/medicinal_cuisine_icon2.png"
					},
					{
						id: "2",
						title: "经络穴位",
						page: "/pages_index/vesselList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/meridian_acupoints_icon28.png"
					},
					{
						id: "3",
						title: "问答专区",
						page: "/pages_index/questionsList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/ques_section_icon28.png"
					},
					{
						id: "4",
						title: "疾病",
						page: "/pages_index/diseaseList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/disease_icon28.png"
					},
					{
						id: "5",
						title: "中药图解",
						page: "/pages_index/chineseMedicineList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/traditional_illustration_icon28.png"
					},
					{
						id: "6",
						title: "名方今用",
						page: "/pages_index/famousPrescribeList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/mingfangjinyong_icon28.png"
					},
					{
						id: "7",
						title: "康复医案",
						page: "/pages_doctor/doctorArticleList",
						icon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/rehabilitation_consilia_icon28.png"
					}
				],
				isTop: false,
				titleColor: "#fff",
				descColor: "#fff",
				top: 0,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				advImgs: [],
				doctors: [],
				advs: [],
				articles: [],
				depts: [],
				doctocArticles: [],
				hosLevelOptions: [],
				packages: [],
				inputtext: ['请输入疾病', '科室', '医生', '知识'],
				menuarr: [{
						img: 'https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/mini_source_myhk_jiankangzice_img1.png',
						title: '健康自测',
						content: '一测便知身体好不好',
						button: '测一测'
					},
					{
						img: 'https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/mini_source_myhk_jiankangzice_img2.png',
						title: '积分商城',
						content: '健康好药 免费兑换',
						button: '领一领'
					},
					{
						img: 'https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/anfanggouyao_img.png',
						title: '按方购药',
						content: '简单、便捷、便宜',
						button: '试一试'
					},
					{
						img: 'https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/jiankangshangcheng_img.png',
						title: '健康产品',
						content: '千万用户的健康选择',
						button: '逛一逛'
					},
				],
			}
		},
		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://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/logo.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}

		},
		//分享到朋友圈
		onShareTimeline(res) {
			if (this.utils.isLogin()) {
				return {
					title: "泰安泰医堂中医医院",
					imageUrl: 'https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/logo.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持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 = "#fff"
					this.descColor = "#fff"
				}
				return 'rgba(7, 140, 157, ' + 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 == "7") {
								}
							});
						}
					},
					rej => {}
				);
			},
			yangshengClick(item) {
				if (item.id == 0) {
					// this.$isLogin().then(
					// 	res => {
					// 		if(res){
					uni.navigateTo({
						url: item.page
					})
				} 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: '跳转不成功',
							icon: 'none',
						})
					}
				})
			},
			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)
				})
			},
			golist(index) {
				if (index == 3) {
					uni.navigateTo({
						url: '/pages_shopping/index'
					})
				} else if (index == 0) {
					uni.navigateTo({
						url: '/pages_index/testList'
					})
					
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages_user/integralGoodsList'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages_order/inquirySelect?inquiryType=3'
					})
				}
			}
		}
	}
</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;

						.position-box {
							display: flex;
							justify-content: center;
							align-items: center;
							position: relative;

							&::after {
								content: "";
								position: absolute;
								width: 10rpx;
								height: 26upx;
								border-right: 1rpx solid rgba(0, 0, 0, 0.15);
								right: 0rpx;
								top: 17rpx;
							}

							.position-img {
								width: 30upx;
								height: 30upx;
								margin-right: 10rpx;
								margin-left: 2rpx;

							}

							.position-text {
								font-size: 24upx;
								width: 120upx;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; //溢出不换行
								margin-right: 10rpx;
								font-family: PingFang SC;
								font-weight: 600;
							}
						}

						.img {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
							margin-left: 10rpx;
						}

						.input-box {
							display: flex;
							font-size: 24upx;
							color: #878787;

							.input-text {
								position: relative;
								margin-right: 20rpx;

								&:not(:last-child)::after {
									content: "";
									position: absolute;
									width: 10rpx;
									height: 22upx;
									border-right: 1rpx solid rgba(0, 0, 0, 0.3);
									right: -11rpx;
									top: 21rpx;
								}

							}

						}

						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: calc(100% - 40upx);
					margin: auto;
					border-radius: 20rpx;
					overflow: hidden;

					.swiper-item {
						width: 100%;
						height: 100%;
					}

					.swiper-item image {
						width: 100%;
						height: 100%;
					}
				}

				.btns {

					padding: 0 20upx;
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.btn1 {
						position: relative;
						background: linear-gradient( 180deg, #51BFEF 0%, #22AAD5 100%);
						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( 180deg, #40D4B6 0%, #05B6AC 100%);
						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;
										background-size: 100% 100%;
										border-radius: 16rpx;

										.text-box {
											margin-left: 20rpx;
											margin-top: 20rpx;

											[class^='image-title'] {
												font-weight: bold;
												font-size: 28rpx;
											}

											[class^='image-content'] {
												font-size: 20rpx;
												margin-top: 15rpx;
											}

											[class^='image-button'] {
												font-size: 20rpx;
												color: white;
												border-radius: 20rpx;
												width: 100rpx;
												padding: 6rpx 20rpx;
												margin-top: 15rpx;
											}
											.image-title1 {
												color: #140300;
											}
											.image-title2 {
												color: #140300;
											}
											.image-title3 {
												color: #140300;
											}
											.image-title4 {
												color: #140300;
											}

											.image-content1 {
												color: #626468;

											}
											.image-content2 {

												color: #626468;
											}
											.image-content3 {

												color: #626468;
											}
											.image-content4 {

												color: #626468;
											}
											.image-button1 {
												background-color: #E9662C;
											}

											.image-button2 {
												background-color: #32C8BE;
											}

											.image-button3 {
												background-color: #208BED;
											}

											.image-button4 {
												background-color: #ED8A24;
											}
										}

									}
								}
							}
						}
						.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: 20%;
									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;
								overflow-y: auto;
								box-sizing: border-box;
								display: flex;
								.article {
									width: 300rpx;
									margin-right: 20rpx;
									background: #f9f8fe;
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									justify-content: flex-start;
									background-color: white;

									&: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;
										background-color: white;

										.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: white;
							border-radius: 15rpx;

							.doctor-box {
								background-color: white;

								.doctor {
									background-color: white;

									.right {
										.tag {
											display: flex;

											.tag-item {
												background-color: #E4EFFF;
												color: #3D74F7;
												font-size: 22rpx;
												padding: 6rpx 12rpx;
												margin-right: 10rpx;
												border-radius: 4rpx;
												margin-top: 20rpx;

											}
										}
									}
								}
							}

							.title-box {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: space-between;

								.doc-price {}

								.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;
												border-radius: 30rpx;
												font-size: 20upx;
												font-family: PingFang SC;
												color: #FB4F43;
												font-weight: 600;

												.price-one {
													font-size: 32upx;
												}
											}

											.count {
												font-size: 26upx;
												font-family: PingFang SC;
												color: #757575;
											}

										}
									}
								}
							}


						}
					}

				}

			}

		}
	}

	.pricebutton {
		background-color: #F9F4F0;
		color: #96663D;
		display: inline-block;
		padding: 10rpx 26rpx;
		border-radius: 40rpx;

		text {
			color: #EA2C2C;
			font-weight: bold;
		}

		span {
			margin-right: 15rpx;
			font-weight: bold;
		}
	}
</style>