<template>
	<view class="content">
		<!-- 背景图片 -->
		<!-- <image class="bg" src="https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/hp_top_bg.png" mode=""></image> -->
		<view>
			<view class="top-inner">
				<view class="fixed-top-box" :style="{ background: bgColor }">
					<!-- 这里是状态栏 -->
					<view class="status_bar" :style="{height: statusBarHeight}"></view>
					<view class="top-title">
						<image class="user-avatar" src="../../static/avatar.png" mode="aspectFill"></image>
						<view class="name">云联融智</view>
					</view>
				</view>
			</view>
			<!-- 头部间距 -->
			<view style="padding-bottom:100rpx">
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
			</view>
			<!-- 轮播图 -->
			<view class="banner-box">
				<view class="inner">
					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
						<swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
							@click="handleAdvClick(item)">
							<image :src="item.imageUrl" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 菜单 -->
			<view class="menu-content">
				<view class="menu-box">
					<view @click="yangshengClick(item)" class="menu-item" :key="index" v-for="(item,index) in yangshengs">
						<image class="icon" :src="item.icon"></image>
						<view class="title">{{item.title}} </view>
					</view>
				</view>
				<view class="scroll-bar-box">
					<view class="scroll-bar">
						<view class="scroll-dot active"></view>
						<view class="scroll-dot"></view>
					</view>
				</view>
			</view>

			<!-- 推荐课程 -->
			<view class="recommend-box">
				<view class="title-box">
					<text class="title">推荐课程</text>
				</view>
				<view class="course-list">
					<view class="course-item" v-for="(item, index) in classList" :key="index" @click="goClass(item.courseId, 1)">
						<image class="course-img" :src="item.imgUrl || '../../static/course_img.png'" mode="aspectFill"></image>
						<view class="course-info">
							<view class="course-title ellipsis2">{{item.courseName}}</view>
							<view class="course-countdown">
								<text class="label">倒计时</text>
								<view class="time-box">
									<text class="time">04</text>
									<text class="split">:</text>
									<text class="time">32</text>
									<text class="split">:</text>
									<text class="time">18</text>
								</view>
								<text class="limit">限量100份</text>
							</view>
							<view class="course-price-box">
								<view class="price-left">
									<text class="symbol">¥</text>
									<text class="price">50</text>
									<text class="old-price">¥ 499</text>
								</view>
								<view class="order-btn">预约听课</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 名医精讲 -->
			<view class="famous-doctor-box">
				<view class="title-box">
					<text class="title">名医精讲</text>
					<view class="more" @click="navTo('/pages_index/index/doctorArticleList')">
						<text>更多</text>
						<image src="/static/right_arrow_right.png"></image>
					</view>
				</view>
				<scroll-view class="doctor-scroll" scroll-x="true">
					<view class="doctor-list">
						<view class="doctor-item" v-for="(item, index) in doctocArticles" :key="index" @click="navTo('/pages_index/index/doctorArticleDetails?articleId='+item.articleId)">
							<view class="doctor-img-box">
								<image class="doctor-img" :src="item.imageUrl || '/static/famous_doctor_img.png'" mode="aspectFill"></image>
								<view class="view-count">
									<image src="/static/eye_open.png"></image>
									<text>{{item.views}}</text>
								</view>
								<view class="play-btn">
									<view class="play-icon-inner"></view>
								</view>
							</view>
							<view class="doctor-title ellipsis">{{item.title}}</view>
							<view class="doctor-info">
								<view class="doctor-user">
									<image class="avatar" :src="item.avatar || '/static/avatar.png'"></image>
									<text class="name">{{item.doctorName}}</text>
								</view>
								<view class="like-box" @click.stop="likeClick(item)">
									<image v-if="isLike" src="/static/f_like_red.png"></image>
									<image v-else src="/static/zan_icon.png"></image>
									<text>2.0万</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

				<!--养生干货-->
				<!-- <view class="articles" >
			    	<view class="title-box">
			    		<view class="title">养生干货</view>
			    		<view class="more" @click="navTo('/pages_index/index/articleList')">
			    			<view class="text">更多</view>
			    			<image src="https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/arrow_gray.png"></image>
			    		</view>
			    	</view>
			    	<view class="article-box" v-if="articles.length>0">
			    		<view class="item" :key="index" @click="navTo('/pages_index/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>

		<view class="popup-box" v-if="activityShow">
			<view class="info-mask" @tap="closeActivity()"></view>
			<view class="info-form">
				<image :src="activity.logoUrl" @tap="showActivity()" />
			</view>
		</view>
		<z-modal :show="tuiModalControl" placeholderText="请输入邀请码" :btnGroup="btnGroup" :contentType="2"
			titleText="填写邀请码" @cancle="cancleTui" @sure="submitTui"></z-modal>
		<!-- <tabbar :actindex="0"></tabbar> -->
	</view>
</template>

<script>
	import {
		courseList,
		courseListB
	} from '@/api/class.js'
	import zModal from '@/components/z-modal/z-modal.vue'
	import {
		getStoreActivity
	} from '@/api/activity.js'
	import {
		getDepartmentList
	} from '@/api/doctorOrder.js'
	import {
		getMenu,
			getCanvas,
			getIndexData,
			getTuiDoctor,
			getTuiArticle,
			getTuiDoctorOrder,
			getCartCount,
			getConfigByKey
	} from '@/api/index'
	import {
		getDoctorArticleList
	} from '@/api/doctorArticle.js'
	import {
		getArticleList
	} from '@/api/article.js'
	import {
		getStoreConfig
	} from '@/api/common'
	// import tabBg from "https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/tab_bg.png"
	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
	import Menu from '@/components/Menu.vue'
	import HotProduct from './components/HotProduct.vue'
	import NewProduct from './components/NewProduct.vue'
	import TuiProduct from '@/components/tuiProduct.vue'
	import {
		getUserInfo,
		bindPromoter
	} from '@/api/user'
	export default {
		components: {
			zModal,
			freeAudio,
			Menu,
			HotProduct,
			NewProduct,
			TuiProduct
		},
		data() {
			return {
				isLike: false,
				classList: [],
				btnGroup: [{
					text: '取消',
					color: '#FFFFFF',
					bgColor: '#999999',
					width: '150rpx',
					height: '80rpx',
					shape: 'fillet',
					eventName: 'cancle'
				}, {
					text: '确定',
					color: '#FFFFFF',
					bgColor: '#FC581C ',
					width: '150rpx',
					height: '80rpx',
					shape: 'fillet',
					eventName: 'sure'
				}],
				tuiModalControl: false,
				activity: null,
				activityShow: false,
				newProductList: [],
				hotProductList: [],
				tuiProductList: [],
				menus: [],
				canvas: [],
				allDoctorTitle: "全部医生",
				topLen: 0,
				deptId: 0,
				depts: [],
				docTab: 1,
				top: 0,
				cartCount: 0,
				doctorOrderList: [],
				orderType: 0,
				cateId: null,
				articleList: [],
				advList: [],
				doctorList: [],
				articleCateList: [],
				doctocArticles: [], //养生讲堂
				articles: [], //养生干货
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				tabBg: "https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/tab_bg.png", // tab切换背景
				// 问诊案例类型
				orderTypes: [{
					name: '全部',
					id: 0,
				}, {
					name: '图文',
					id: 1,
				}, {
					name: '语音',
					id: 2,
				}],
				// 限时消息是否显示
				messageShow: true,
				yangshengs: [{
						id: "1",
						title: "疾病",
						page: "/pages_index/index/diseaseList",
						icon: "../../static/disease.png"
					},
					{
						id: "2",
						title: "名医",
						page: "/pages_doctor/doctorList",
						icon: "../../static/famous_doctor.png"
					},
					{
						id: "3",
						title: "养生",
						page: "/pages_index/index/articleList",
						icon: "../../static/health_preservation.png"
					},
					{
						id: "4",
						title: "用药",
						page: "/pages/shopping/index",
						icon: "../../static/medication.png"
					},
					{
						id: "5",
						title: "用药",
						page: "/pages/shopping/index",
						icon: "../../static/medication.png"
					}
				],
				userinfoa: [],
				isuser: false,
				menvKey: [],
				classListb:{}
			}
			// this.getStoreActivity();
		},
		onLoad(option) {
			if (option.userCode != null) {
				uni.setStorageSync('userCode', option.userCode);
				if (this.utils.checkLoginState()) {
					this.getUserInfo();
				}
			}
			if (option.hasOwnProperty('q') && option.q) {
				// 通过下面这步解码，可以拿到url的值
				const url = decodeURIComponent(option.q)
				this.url = url;
				// // 对url中携带的参数提取处理
				const obj = this.utils.urlToObj(url)
				uni.setStorageSync('userCode', obj.userCode);
				if (this.utils.checkLoginState()) {
					this.getUserInfo();
				}
			}
			// this.getStoreActivity()
		},
		// 暂停所有音频（一般用于页面切换时停止正在播放的音频）
		onUnload() { //普通页面在 onUnload 生命周期中执行
			uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
			uni.$emit('stop')
		},
		onPageScroll(e) {
			//console.log(e)
			this.top = e.scrollTop;
		},
		mounted() {
			this.getCourseList()
			//this.getDepartmentList();
		},
		onShareAppMessage(res) {
			return {
				title: '盛世生活工具A-您的专属健康解决方案',
				path: `/pages/common/launch`,
				imageUrl: this.$store.state.imgpath+'/app/image/logo.png'//分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		onReachBottom() {
			// console.log("onReachBottom")
			this.$refs.tuiProduct.getTuiProducts();
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '盛世生活工具A-您的专属健康解决方案',
				query: '', //页面参数
				imageUrl: this.$store.state.imgpath+'/app/image/logo.png'//分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(255,255,255, ' + top + ')';
			},
			imgPath() {
			  return this.$store.state.imgpath
			},
			isDrug() {
				return this.$store.state.isDrug
			},
		},
		onShow() {
			this.getMenu();
			this.getIndexData()
			//this.getTuiDoctorOrder();
			// console.log(uni.getStorageSync('isLocation'))
			// if(uni.getStorageSync('isLocation')==""){
			// 	this.getLocation();
			// }
			if (uni.getStorageSync('AppToken')) {
				this.getUserInfo()
			} else {
				this.isuser = true
			}
			if (this.utils.checkLoginState()) {
				this.getCartCount();
			}
			this.getStoreConfig();
			//this.getTuiDoctor()
			this.getCanvas();
			this.getDoctorArticleList();
			this.getArticleList();
			this.getshowmanv()
		},
		methods: {
			likeClick(item){
				this.isLike = !this.isLike
			},
			getCourseList() {
				courseList().then(res => {
					if (res.code == 200 && res.data && res.data.length > 0) {
						console.log('公域',res.data)
						this.classList = res.data.slice(0, 3)
					} else {
						// 模拟数据
						this.classList = [
							{
								courseId: 1,
								courseName: '第一期超nice的健康博主大盘点，带你领略健康生活',
								imgUrl: '../../static/course_img.png'
							},
							{
								courseId: 2,
								courseName: '家庭医生健康顾问服务，全家人的健康保障',
								imgUrl: '../../static/course_img.png'
							}
						]
					}
				}).catch(() => {
					// 接口报错也显示模拟数据
					this.classList = [
						{
							courseId: 1,
							courseName: '第一期超nice的健康博主大盘点，带你领略健康生活',
							imgUrl: '../../static/course_img.png'
						}
					]
				})
			},
			goClass(id,type) {
				// console.log(id)
				uni.navigateTo({
					url:'/pages_course/learn?courseId='+id+'&type='+type
				})
			},
			goClassList(type) {
				uni.navigateTo({
					url: '/pages_course/teacherClassroom?type='+type
				})
			},
			getshowmanv() {
				const data = {
					key: "store.appShow"
				}
				getConfigByKey(data).then(res => {
					if (res.code == 200) {
						this.menvKey = JSON.parse(res.data)
						// console.log('排序', this.menvKey[0])
					}
				})
			},
			getUserInfo() {
				getUserInfo().then(
					res => {
						if (res.code == 200) {
							if (res.user != null) {
								this.userinfoa = res.user
								// if(res.user.isPromoter==null||res.user.isPromoter==0){
								// 	this.tuiModalControl=true
								// }
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			cancleTui(e) {
				this.tuiModalControl = false
			},
			submitTui(e) {
				// console.log(e)
				if (e.inputText == null || e.inputText == "") {
					uni.showToast({
						icon: 'none',
						title: "请输入邀请码",
					});
					return;
				}
				var data = {
					userCode: e.inputText
				};
				bindPromoter(data).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
							this.tuiModalControl = false
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);

			},
			bindload: function(detail) {},
			binderror: function(detail) {},
			closeActivity() {
				this.activityShow = false;
				// uni.setStorageSync(this.activity.activityId,null);
			},
			getStoreActivity() {
				let data = {}
				getStoreActivity(data).then(res => {
					this.activity = res.activity;
					if (this.activity != null) {
						// if(uni.getStorageSync(this.activity.activityId)!=null)
						// {
						// 	uni.setStorageSync(this.activity.activityId,1);
						// 	this.activityShow=true;
						// }
						// else{
						// 	this.activityShow=false;
						// }
						this.activityShow = true;
					} else {
						this.activityShow = false;
					}
				})
			},
			showActivity() {
				this.activityShow = false;
				uni.navigateTo({
					url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId
				})
			},
			menuClick(item) {
				if (item.linkType == 1) {
					if (item.linkUrl == "/pages/shopping/index") {
						uni.switchTab({
							url: item.linkUrl
						})
					} else if (item.linkUrl == "/pages/healthy/index") {
						uni.switchTab({
							url: item.linkUrl
						})
					} else {

						uni.navigateTo({
							url: item.linkUrl
						})
					}

				} else if (item.linkType == 0) {
					uni.showToast({
						icon: 'none',
						title: "开发中...",
					});
				}
			},
			goDev() {
				uni.showToast({
					icon: 'none',
					title: "开发中...",
				});
			},
			handleAdvClick(item) {
				console.log(item);
				if (item.showType == 1) {
					uni.setStorageSync('url', item.advUrl);
					uni.navigateTo({
						url: "h5"
					})
				} else if (item.showType == 2) {
					uni.navigateTo({
						url: item.advUrl
					})
				} else if (item.showType == 3) {
					uni.setStorageSync('content', item.content);
					uni.navigateTo({
						url: "content"
					})
				}
			},
			deptChange(item) {
				this.deptId = item.departmentId;
				this.getTuiDoctor();
			},
			getMenu() {
				this.menus = [];
				getMenu().then(res => {
					if (res.code == 200) {
						// for (var i = 0; i < res.data.length; i++) {
						// 	const item=res.data[i];
						// if(item.menuName.indexOf('健康百科')>=0 || item.menuName.indexOf('健康自测')>=0 
						// || item.menuName.indexOf('健康档案')>=0 ||item.menuName.indexOf('用药咨询')>=0){
						// 	this.menus.push(item);
						// }
						// }
						// console.log('图标', res.data)
						// const menuNames = ['健康百科', '健康自测', '健康档案', '药品商城', '领券中心', '会员'];
						this.menus = res.data
						// this.menus = res.data.filter(item => menuNames.some(menuName => item.menuName.includes(menuName)) );
					} else {

					}
				});
			},
			getCanvas() {
				getCanvas().then(res => {
					if (res.code == 200 && res.data && res.data.json) {
						// console.log(res.data)
						this.canvas = JSON.parse(res.data.json)
					}
				});
			},
			getDepartmentList() {
				this.depts = [];
				getDepartmentList().then(res => {
					if (res.code == 200) {
						var allDept = {
							departmentId: 0,
							departmentName: "全部"
						}
						this.depts.push(allDept);
						this.depts = this.depts.concat(res.data);
					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
					}
				});
			},
			getTuiDoctor() {
				let data = {
					departmentId: this.deptId,
					doctorType: this.docTab
				};
				getTuiDoctor(data).then(
					res => {
						if (res.code == 200) {
							this.doctorList = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			docTabChange(val) {
				if (val == 1) {
					this.allDoctorTitle = "全部医师"
				}
				if (val == 2) {
					this.allDoctorTitle = "全部药师"
				}
				if (val == 3) {
					this.allDoctorTitle = "全部营养师"
				}
				this.docTab = val;
				this.getTuiDoctor();
			},
			showImg(urls) {
				var imgArr = urls.split(',');
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			getStoreConfig() {
				getStoreConfig().then(
					res => {
						if (res.code == 200) {
							uni.setStorageSync('config', JSON.stringify(res.data));
						}
					},
					rej => {}
				);

			},
			goAuthUrl(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 跳转页面
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getLocation() {
				var that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.getLocation({
							type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
							success: function(res) {
								uni.setStorageSync('isLocation', 1);
								uni.setStorageSync('lng', res.longitude);
								uni.setStorageSync('lat', res.latitude);
							},
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			getIndexData() {
				let data = {
				};
				getIndexData(data).then(
					res => {
						if (res.code == 200) {
							this.advList = res.data.advList;
							this.articleCateList = res.data.articleCateList;
							if (this.articleCateList != null && this.articleCateList.length > 0) {
								this.cateId = this.articleCateList[0].cateId;
								this.getTuiArticle()
							}
							this.tuiProductList = res.data.tuiProductList
							this.newProductList = res.data.newProductList
							this.hotProductList = res.data.hotProductList
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getCartCount() {
				this.utils.isLogin().then(res => {
					if (res) {
						getCartCount().then(
							cartRes => {
								if (cartRes.code == 200) {
									this.cartCount = cartRes.data;
								}
							},
							rej => {}
						);
					}
				})
			},
			getTuiArticle() {
				let data = {
					cateId: this.cateId
				};
				getTuiArticle(data).then(
					res => {
						if (res.code == 200) {
							this.articleList = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getTuiDoctorOrder() {
				let data = {
					orderType: this.orderType
				};
				getTuiDoctorOrder(data).then(
					res => {
						if (res.code == 200) {
							this.doctorOrderList = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			showArticle(item) {
				uni.navigateTo({
					url: '../healthy/detail?articleId=' + item.articleId
				})
			},
			showProduct(item) {
				uni.navigateTo({
					url: '../shopping/productDetails?productId=' + item.productId
				})
			},
			// 顶部搜索
			toSearch() {
				uni.navigateTo({
					url: './productSearch'
				})
			},
			// 健康知识选中
			articleCateChange(item) {
				this.cateId = item.cateId;
				this.getTuiArticle();
			},
			// 问诊案例选中
			orderTypeChange(item) {
				this.orderType = item.id;
				console.log(this.orderType)
				this.getTuiDoctorOrder();
			},
			// 关闭限时消息
			closeMsg() {
				this.messageShow = false
			},
			// 查看全部
			viewAll(url) {
				uni.navigateTo({
					url: '/pages/home/' + url,
				});
			},
			shopDoctor(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages_doctor/doctorDetail?doctorId=" + item.doctorId
				})
			},
			switchTo(url) {
				uni.switchTab({
					url: url
				})
				return
			},
			yangshengClick(item) {
				if (item.page == "") {
					uni.showToast({
						icon: "none",
						title: '暂无更多'
					})
					return;
				}
				uni.navigateTo({
					url: item.page
				})
			},
			// 在线问诊
			openIm() {
				uni.navigateTo({
					url: '/pages_doctor/doctorOrderIM?orderId=10'
				})
			},
			getDoctorArticleList() {
				//联网加载数据
				var that = this;
				var data = {
					pageNum: 1,
					pageSize: 10
				};
				getDoctorArticleList(data).then(res => {
					if (res.code == 200 && res.data && res.data.list && res.data.list.length > 0) {
						this.doctocArticles = res.data.list;
					} else {
						// 模拟数据
						this.doctocArticles = [
							{
								articleId: 1,
								title: '中医降脂养肝课',
								imageUrl: '../../static/famous_doctor_img.png',
								views: 3724,
								doctorName: '崔医生',
								avatar: '../../static/avatar.png'
							},
							{
								articleId: 2,
								title: '春季养生与防病',
								imageUrl: '../../static/famous_doctor_img2.png',
								views: 2850,
								doctorName: '崔医生',
								avatar: '../../static/avatar.png'
							}
						]
					}
				}).catch(() => {
					// 接口报错也显示模拟数据
					this.doctocArticles = [
						{
							articleId: 1,
							title: '中医降脂养肝课',
							imageUrl: '../../static/famous_doctor_img.png',
							views: 3724,
							doctorName: '崔医生',
							avatar: '../../static/avatar.png'
						}
					]
				});
			},
			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: "请求失败",
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixed-top-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: all 0.5s;
		background-color: transparent;

		.status_bar {
			width: 100%;
		}
	}

	.content {
		width: 100%;
		position: relative;
		background-color: #F8F9FB;
		min-height: 100vh;

		.bg {
			width: 100%;
			height: 450rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.top-inner {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;

			.top-title {
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 30upx;

				.user-avatar {
					width: 64upx;
					height: 64upx;
					border-radius: 50%;
					border: 2rpx solid #fff;
				}

				.name {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
					margin-left: 16upx;
				}
			}
		}

		.banner-box {
			padding: 0 30upx;
			margin-top: 20rpx;

			.inner {
				width: 100%;
				height: 320upx;
				border-radius: 24upx;
				overflow: hidden;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

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

		.menu-content {
			background-color: transparent;
			padding: 40upx 30upx 20upx;
		}

		.menu-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;

				.icon {
					width: 100upx;
					height: 100upx;
					margin-bottom: 12upx;
				}

				.title {
					font-size: 26upx;
					color: #666;
					font-family: PingFang SC;
				}
			}
		}

		.scroll-bar-box {
			display: flex;
			justify-content: center;
			margin-top: 24upx;

			.scroll-bar {
				display: flex;
				width: 48upx;
				height: 8upx;
				background: #E5E9F2;
				border-radius: 4upx;
				overflow: hidden;

				.scroll-dot {
					flex: 1;
					height: 100%;

					&.active {
						background: #2B85FF;
					}
				}
			}
		}

		.recommend-box {
			margin: 20rpx 30rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;

			.title-box {
				margin-bottom: 24rpx;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #F5F5F5;

				.title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #1A1A1A;
				}
			}

			.course-list {
				.course-item {
					display: flex;
					padding: 20rpx 0;

					&:last-child {
						padding-bottom: 0;
					}

					.course-img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
						margin-right: 24rpx;
					}

					.course-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.course-title {
							font-size: 32rpx;
							font-weight: bold;
							color: #1A1A1A;
						 display: -webkit-box;
  -webkit-line-clamp: 1; /* 显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
						}

						.course-countdown {
							display: flex;
							align-items: center;
							margin: 8rpx 0;

							.label {
								font-size: 22rpx;
								color: #999;
								margin-right: 12rpx;
							}

							.time-box {
								display: flex;
								align-items: center;

								.time {
									width: 36rpx;
									height: 36rpx;
									background: #F5F5F5;
									border-radius: 4rpx;
									font-size: 22rpx;
									color: #333;
									text-align: center;
									line-height: 36rpx;
									font-family: Roboto;
								}

								.split {
									margin: 0 4rpx;
									color: #999;
									font-size: 20rpx;
								}
							}

							.limit {
								font-size: 22rpx;
								color: #CCC;
								margin-left: 20rpx;
							}
						}

						.course-price-box {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price-left {
								display: flex;
								align-items: baseline;

								.symbol {
									font-size: 24rpx;
									color: #FF6B00;
									font-weight: bold;
								}

								.price {
									font-size: 38rpx;
									color: #FF6B00;
									font-weight: bold;
									margin: 0 12rpx 0 4rpx;
								}

								.old-price {
									font-size: 24rpx;
									color: #CCC;
									text-decoration: line-through;
								}
							}

							.order-btn {
								width: 160rpx;
								height: 56rpx;
								background: #4CC67F;
								border-radius: 28rpx;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 56rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}

		.famous-doctor-box {
			margin: 20rpx 30rpx 40rpx;

			.title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #1A1A1A;
				}

				.more {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						color: #999;
						margin-right: 8rpx;
					}

					image {
						width:48rpx;
						height: 48rpx;
					}
				}
			}

			.doctor-scroll {
				width: 100%;
				white-space: nowrap;
			}

			.doctor-list {
				display: flex;

				.doctor-item {
					display: inline-block;
					width: 334rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin-right: 20rpx;
					padding-bottom: 20rpx;
					overflow: hidden;

					&:last-child {
						margin-right: 0;
					}

					.doctor-img-box {
						position: relative;
						width: 100%;
						height: 334rpx;

						.doctor-img {
							width: 100%;
							height: 100%;
						}

						.doctor-tag {
							position: absolute;
							top: 0;
							left: 0;
							padding: 8rpx 20rpx;
							font-size: 22rpx;
							color: #FFFFFF;
							border-radius: 0 0 24rpx 0;
							z-index: 1;

							&::after {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background: inherit;
								transform: skewX(-15deg);
								transform-origin: left bottom;
								z-index: -1;
								border-radius: 0 0 12rpx 0;
							}

							&.blue-tag {
								background: linear-gradient(135deg, #4da9ff 0%, #2b85ff 100%);
							}

							&.orange-tag {
								background: linear-gradient(135deg, #ff9d4d 0%, #ff6b00 100%);
							}
						}

						.view-count {
							position: absolute;
							bottom: 20rpx;
							left: 20rpx;
							display: flex;
							align-items: center;
							padding: 4rpx 16rpx;
							background: rgba(0, 0, 0, 0.3);
							border-radius: 20rpx;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 8rpx;
							}

							text {
								font-size: 20rpx;
								color: #FFFFFF;
							}
						}

						.play-btn {
							position: absolute;
							bottom: 20rpx;
							right: 20rpx;
							width: 48rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							.play-icon-inner {
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 10rpx 0 10rpx 16rpx;
								border-color: transparent transparent transparent #2B85FF;
								margin-left: 4rpx;
							}
						}
					}

					.doctor-title {
						padding: 20rpx;
						font-size: 28rpx;
						font-weight: 800;
						color: #1A1A1A;
					}

					.doctor-info {
						padding: 0 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.doctor-user {
							display: flex;
							align-items: center;

							.avatar {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								margin-right: 12rpx;
							}

							.name {
								font-size: 24rpx;
								color: #999;
							}
						}

						.like-box {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
								margin-right: 8rpx;
							}

							text {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}

		.index-cont {
			box-sizing: border-box;
			padding: 0 20upx 120rpx;

			.pub-item {
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;

				.tabs {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 110rpx;
					background-color: #F0F3F4;

					.tab {
						height: 110rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						flex: 1;

						.img {
							z-index: 1;
							position: absolute;
							top: 0rpx;
							left: 0rpx;
							width: 100%;
							height: 100%;
						}

						.inner {
							z-index: 2;

							.title {
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #666666;
							}

							.active {
								color: #FC581C ;
							}
						}

					}


				}

				.pub-title-box {
					box-sizing: border-box;
					padding: 36upx 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 32upx;
						line-height: 1;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: center;

						.text {
							font-size: 24rpx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-right: 10upx;
						}

						image {
							width: 14upx;
							height: 24upx;
						}
					}

				}

				.doc-tab-box {
					padding: 14rpx 30rpx 0rpx 30rpx;
					position: relative;

					.tab-inner {
						padding: 14upx 0 30upx;
						display: flex;
						overflow-x: auto;
					}

					.item {
						font-size: 28upx;
						white-space: nowrap;
						line-height: 1;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-right: 40upx;
						position: relative;

						&:last-child {
							margin-right: 0;
						}

						&.active {
							font-weight: bold;
							color: #333333;
						}

						&.cases {
							margin-right: 60upx;
						}

						.text {
							position: relative;
							z-index: 1;
						}

						.tab-bg {
							width: 72upx;
							height: 28upx;
							position: absolute;
							top: 17upx;
							left: 50%;
							transform: translateX(-36upx);
							z-index: -1;
						}
					}

					.right-mask {
						width: 56upx;
						height: 34upx;
						position: absolute;
						top: 25upx;
						right: 0upx;
						z-index: 1;
					}
				}

				.doc-list {
					padding: 20upx;

					.item {
						box-sizing: border-box;
						background: #FFFFFF;
						// border-radius: 16upx;
						display: flex;
						border-bottom: 1px solid #F0F0F0;
						margin-bottom: 30rpx;

						.head-box {
							width: 120upx;
							height: 120upx;
							background: #EDF1F4;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 30upx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info {
							width: calc(100% - 150upx);

							.top {
								display: flex;
								align-items: center;
								font-family: PingFang SC;
								line-height: 1;

								.name {
									font-size: 34upx;
									font-weight: bold;
									color: #111111;
								}

								.line {
									width: 1px;
									height: 26upx;
									background: #DDDDDD;
									margin: 0 20upx;
								}

								.other {
									font-size: 28upx;
									font-weight: 500;
									color: #333333;
								}
							}

							.unit-box {
								display: flex;
								margin-top: 24upx;

								.level {
									padding: 0 10upx;
									height: 30upx;
									line-height: 30upx;
									font-size: 22upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									background: #FC581C ;
									border-radius: 10upx 4upx 10upx 4upx;
									margin-right: 12upx;
								}

								.name {
									font-size: 28upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									line-height: 30upx;
								}
							}

							.expertise {
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #666666;
								line-height: 42upx;
								margin: 22upx 0 26upx;
							}

							.rate-box {
								display: flex;
								align-items: center;

								.star {
									display: flex;
									align-items: center;

									image {
										width: 22upx;
										height: 22upx;
										margin-right: 10upx;
									}

									text {
										font-size: 26upx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #CEA764;
										line-height: 1;
									}
								}

								.line {
									width: 1px;
									height: 20upx;
									background: #DDDDDD;
									margin: 0 20upx;
								}

								.num-box {
									display: flex;
									align-items: center;
									font-family: PingFang SC;

									.label {
										font-size: 24upx;
										font-weight: 500;
										color: #999999;
										line-height: 1;
										margin-right: 7px;
									}

									.num {
										font-size: 26upx;
										font-weight: bold;
										color: #CEA764;
										line-height: 1;
									}
								}
							}

							.price-box {
								display: flex;
								align-items: center;
								margin-top: 38upx;

								.btn-item {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 164upx;
									height: 56upx;
									line-height: 56upx;
									border: 1px solid rgba(43, 199, 185, 0.5);
									border-radius: 28upx;
									font-family: PingFang SC;
									margin-right: 30upx;

									&:last-child {
										margin-right: 0;
									}

									.label {
										font-size: 26upx;
										font-weight: 500;
										color: #FC581C ;
										margin-right: 5upx;
									}

									.num {
										font-size: 28upx;
										font-weight: bold;
										color: #FC581C ;
									}
								}
							}
						}
					}

					.item:last-child {
						border-bottom: none;
						margin-bottom: 0rpx;
					}

					.bottom-title {
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FC581C ;

						image {
							margin-left: 8rpx;
							width: 14rpx;
							height: 24rpx;
						}
					}
				}

				// 医师团队
				.doc-cont {
					box-sizing: border-box;
					padding: 0 30upx;

					.inner {
						padding: 4upx 0 40upx;
						display: flex;
						overflow-x: auto;
					}

					.item {
						display: flex;
						align-items: center;
						flex-direction: column;
						margin-right: 40upx;

						&:last-child {
							margin-right: 0;
						}

						.head-box {
							width: 120upx;
							height: 120upx;
							background: #F2F5F9;
							border-radius: 50%;
							margin-bottom: 20upx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name {
							max-width: 120upx;
							font-size: 28upx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							margin-bottom: 16upx;
							text-align: center;
						}

						.position {
							max-width: 120upx;
							font-size: 24upx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							text-align: center;
						}
					}
				}

				.inner {
					padding: 0 30upx;
				}

				// 健康知识
				.pub-tab-box {
					position: relative;

					.tab-inner {
						padding: 14upx 0 30upx;
						display: flex;
						overflow-x: auto;
					}

					.item {
						font-size: 28upx;
						white-space: nowrap;
						line-height: 1;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-right: 40upx;
						position: relative;

						&:last-child {
							margin-right: 0;
						}

						&.active {
							font-weight: bold;
							color: #333333;
						}

						&.cases {
							margin-right: 60upx;
						}

						.text {
							position: relative;
							z-index: 1;
						}

						.tab-bg {
							width: 72upx;
							height: 28upx;
							position: absolute;
							top: 17upx;
							left: 50%;
							transform: translateX(-36upx);
							z-index: -1;
						}
					}

					.right-mask {
						width: 56upx;
						height: 34upx;
						position: absolute;
						top: 14upx;
						right: -30upx;
						z-index: 1;
					}
				}

				.know-list {
					padding-right: 10upx;

					.item {
						padding: 30upx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #F0F0F0;

						&:last-child {
							border-bottom: none;
						}

						.left {
							flex: 1;
							padding-right: 40upx;
							height: 190upx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.title {
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 48upx;
							}

							.info-box {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.readers {
									display: flex;
									align-items: center;

									.head-box {
										margin-right: 27upx;
										display: flex;
										align-items: center;

										.head {
											width: 48upx;
											height: 48upx;
											border-radius: 50%;
											overflow: hidden;
											box-shadow: 0 0 0 1px #fff;
											margin-right: -10upx;

											image {
												width: 100%;
												height: 100%;
											}
										}
									}

									.readings {
										display: flex;
										align-items: center;

										.eye {
											width: 26upx;
											height: 20upx;
											margin-right: 9upx;
										}

										.num {
											font-size: 24upx;
											font-family: PingFang SC;
											font-weight: 500;
											color: #999999;
											line-height: 1;
										}
									}
								}

								.time {
									font-size: 24upx;
									line-height: 1;
									font-family: PingFang SC;
									font-weight: 500;
									color: #999999;
								}
							}
						}

						.right {
							width: 250upx;
							height: 190upx;
							border-radius: 8upx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				// 问诊案例
				.cases-list {
					padding-bottom: 10upx;

					.item {
						padding: 30upx 0;
						border-bottom: 1px solid #F0F0F0;

						&:last-child {
							border-bottom: none;
						}

						.dec-text {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 48upx;
						}

						.images-box {
							margin-top: 10upx;
							display: flex;
							flex-wrap: wrap;

							.img-item {
								width: 155upx;
								height: 155upx;
								background: #F5F5F5;
								border-radius: 8upx;
								margin: 0 10upx 10upx 0;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}

								&:nth-child(4n) {
									margin-right: 0;
								}
							}
						}

						.doc-info {
							display: flex;
							align-items: center;
							margin: 30upx 0 20upx;

							.head {
								width: 60upx;
								height: 60upx;
								background: #F2F5F9;
								border-radius: 50%;
								margin-right: 20upx;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.name {
								font-size: 28upx;
								line-height: 1;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
							}

							.line {
								width: 1px;
								height: 22upx;
								background: #DDDDDD;
								margin: 0 16upx;
							}

							.posit,
							.address {
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
							}
						}

						.answer-box {
							width: 100%;
							background: #F5F7F7;
							border-radius: 10upx;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.text-inner {
								// height: 84upx;
								font-size: 28upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #666666;
								line-height: 42upx;
								padding: 15upx;
							}
						}

						.read-box {
							margin-top: 30upx;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							image {
								width: 24upx;
								height: 19upx;
								margin-right: 10upx;
							}

							.text {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
							}
						}
					}
				}
			}

			// 精选药品
			.feat-title {
				margin-top: 30upx;
				padding: 10upx 0 33upx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 37upx;
					height: 37upx;
					margin: 0upx 20upx;
				}

				text {
					font-size: 36upx;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
			}

			.drug-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					width: 345rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
					border-radius: 20rpx;
					overflow: hidden;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.img-box {
						width: 100%;
						height: 334upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info-box {
						box-sizing: border-box;
						height: 182upx;
						padding: 20upx;

						.title {
							height: 80upx;
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							line-height: 40upx;
						}

						.price-box {
							display: flex;
							align-items: center;
							margin-top: 20upx;

							.now {
								color: #FF6633;
								display: flex;
								align-items: flex-end;
								margin-right: 20upx;
								font-family: PingFang SC;

								.unit {
									font-size: 24upx;
									line-height: 1.4;
									margin-right: 4upx;
								}

								.num {
									font-size: 36upx;
									font-weight: bold;
									line-height: 1;
								}
							}

							.old {
								font-size: 26upx;
								font-family: PingFang SC;
								text-decoration: line-through;
								color: #BBBBBB;
								line-height: 1;
							}
						}
					}
				}
			}
		}

		// 健康生活大讲堂
		.open-class {
			padding: 20rpx;
			margin: 20rpx 15rpx 0rpx;
			// background-color: #f0f4f7;

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

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.more {
					font-size: 24rpx;
					padding-left: 30rpx;
					color: #999999;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}


			.class-item {
				font-size: 24rpx;
				margin-top: 24rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 0 16rpx;
				margin-right: 14rpx;
				width: 250rpx;
				height: 280rpx;
				font-size: 26rpx;
				font-weight: 500;

				.img-box {
					height: 220rpx;
					border-radius: 16rpx;
					overflow: hidden;
					margin-bottom: 12rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}


				&:last-child {
					margin-right: 0rpx;
				}
			}
		}

		.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;
							padding: 14rpx 0;

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

									.count {
										font-size: 24upx;
										font-family: PingFang SC;
										color: #333333;
									}

								}
							}
						}
					}


				}
			}

		}
	}

	.official-account {
		box-sizing: border-box;
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 30upx;
		z-index: 99;
		padding: 0 20upx 180rpx 20upx;
	}

	// 消息
	.message-box {
		box-sizing: border-box;
		width: 100%;
		height: 84upx;
		background: #F3FFFD;
		border: 1px solid #C7E9E5;
		box-shadow: 0px 4upx 12upx 0px rgba(90, 203, 138, 0.16);
		border-radius: 16upx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30upx;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20upx 0 30upx;

		.left {
			flex: 1;
			display: flex;
			align-items: center;

			image {
				width: 24upx;
				height: 24upx;
				margin-right: 18upx;
			}

			.text {
				width: 90%;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FC581C ;
			}
		}

		.btn {
			width: 100upx;
			height: 48upx;
			line-height: 48upx;
			text-align: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border: 1px solid #D2E6FF;
			background: linear-gradient(135deg, #efa566 0%, #FC581C  100%);
			border-radius: 24upx;
			margin-left: 30upx;
		}

	}

	.contact-btn {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.popup-box {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;

		.info-mask {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 999;
		}

		.info-form {
			z-index: 1000;
			width: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 100%;
			}
		}
	}
</style>