hongsengtangMall_user_app/pages/home/index.vue

<template>
	<view class="content">
		<!-- 背景图片 -->
		<image class="bg" src="../../static/images/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">
						<view class="name">中康未来智慧药房</view>
						<!-- <view class="dot">•</view><view class="sub-name">七彩互联网医院</view> -->
					</view>
					<!-- 搜索框、购物车、客服 -->
					<view class="func-cont" >
						<view class="search-cont">
							<image class="icon-search" src="../../static/images/search.png" mode=""></image>
							<input type="text" disabled value="" placeholder="搜索服务内容" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" @click="toSearch" />
						</view>
						<!-- 购物车 -->
						<uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
							<view class="img-item" @click="goAuthUrl('../shopping/cart')">
								<image src="../../static/images/cart_wihte.png" mode=""></image>
							</view>
						</uni-badge>
						<view class="img-item" style="position: relative;">
							<image src="../../static/images/customer.png" mode=""></image>
							<button class="contact-btn" open-type="contact"></button>
						</view>
					</view>
					<!-- <view class="tips">
						
						<view class="left"></view>
						<view class="right"  @click="navTo('./cert')">资质证明</view>
					</view> -->
				</view>
			</view>
			<!-- 头部间距 -->
			<view style="padding-bottom:220rpx" >
				<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=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			
			<!-- 菜单 -->
			<view class="menu-content" >
				<view class="menu-box">
					 <Menu :list="menus" @menuClick="menuClick" v-if="menus.length>0" style="width:100%;"></Menu>
				</view>
			</view>
			
		</view>
		 
		<!-- 在线问诊、处方查询 -->
		<!-- <view class="online-inquiry">
			<view class="item" @click="navTo('/pages_doctor/doctorQr')">
				<image class="bg-img" src="../../static/images/online_treat.png" mode=""></image>
				<view class="inner">
					<text class="title">医师咨询</text>
					<text class="sub-title">权威医生 快速回复</text>
					<image src="../../static/images/doctor.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="goAuthUrl('/pages_user/user/prescribeOrder')">
				<image class="bg-img" src="../../static/images/chu_query.png" mode=""></image>
				<view class="inner">
					<text class="title">处方查询</text>
					<text class="sub-title">快速查询处方单</text>
					<image src="../../static/images/cu_search.png" mode=""></image>
				</view>
			</view>
		</view> -->
		
		<view class="modules">
			<view class="module">
				<!--养生有道-->
				<view class="depts">
						<view class="title">养生有道</view>
						<view class="dept-box">
							<view  @click="yangshengClick(item)"  class="dept" :key="index" v-for="(item,index) in yangshengs"  >
								<image class="icon" :src="item.icon"></image>
								<view class="title" >{{item.title}} </view>
							</view>
						</view>
				</view>
				
				<view class="doctor-articles"  >
					<view class="title-box">
						<view class="title">养生讲堂</view>
						<view class="more"  @click="navTo('/pages_index/index/doctorArticleList')" >
							<view class="text">更多</view>
							<image src="/static/images/arrow_gray.png"></image>
						</view>
					</view>
					<scroll-view :scroll-x="true" style="white-space: nowrap;">
					<view class="article-box"  >
						<view class="article" @click="navTo('/pages_index/index/doctorArticleDetails?articleId='+item.articleId)"  v-for="(item,index) in doctocArticles" :key="index">
							<view class="image-box">
								<image mode="aspectFill" :src="item.imageUrl"></image>
								<view class="views">
									{{item.views}}人观看
								</view>
								<view class="doctor">
									<image mode="aspectFill" :src="item.avatar"></image>
									<!-- <view class="right">
										<view class="doc-name ellipsis">{{item.doctorName}}</view>
										<view class="doc-position ellipsis">{{item.position}}</view>
									</view> -->
								</view>
							</view>
							<view class="article-title-box">
								<view class="article-title ellipsis">{{item.title}}</view>
							</view>
						</view>
					</view>
					</scroll-view>
				</view>
				
			    <!--养生干货-->
			    <view class="articles">
			    	<view class="title-box">
			    		<view class="title">养生干货</view>
			    		<view class="more" @click="navTo('/pages_index/index/articleList')">
			    			<view class="text">更多</view>
			    			<image src="../../static/images/arrow_gray.png"></image>
			    		</view>
			    	</view>
			    	<view class="article-box" v-if="articles.length>0">
			    		<view class="item" :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>		
		
		<view class="index-cont">
	
			<!-- 热门榜单 -->
			<NewProduct :detail="newProductList" />
			<HotProduct :detail="hotProductList" />
			<!-- 健康百科 -->
			<view class="pub-item" style="margin-top: 20rpx;">
				<view class="pub-title-box">
					<text class="left">健康百科</text>
					<view class="right" @click="switchTo('../healthy/index')">
						<text class="text">更多</text>
						<image src="../../static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
				<view class="inner">
					<view class="pub-tab-box">
						<view class="tab-inner">
							<view 
								v-for="(item,index) in articleCateList" 
								:key="index"
								:class="item.cateId == cateId?'item active':'item'"
								@click="articleCateChange(item)">
								<view class="text">
									{{ item.cateName }}
									<image v-show="item.cateId == cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
								</view>
							</view>
						</view>
						<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
					</view>
					 
					<view class="know-list">
						<view class="item" v-for="(item,index) in articleList" :key="index" @click="showArticle(item)">
							<view class="left">
								<view class="title ellipsis2">{{ item.title }}</view>
								<view class="info-box">
									<view class="readers">
										<view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
											<view class="head" v-for="(subitem,j) in item.viewsList" :key="j" v-if="subitem!=null" >
												<image :src="subitem.avatar==null?'/static/images/detault_head.jpg':subitem.avatar" mode=""></image>
											</view>
										</view>
										<view class="readings">
											<image class="eye" src="../../static/images/eye.png" mode=""></image>
											<text class="num">{{item.views}}</text>
										</view>
									</view>
									<view class="time">{{item.publishTime}}</view>
								</view>
							</view>
							<view class="right">
								<image :src="item.imageUrl"  mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 精选药品 -->
			<!-- <TuiProduct ref="tuiProduct" /> -->
		
		</view>
		
		
		<!-- 限时消息 -->
		<!-- <view class="message-box" >
			<view class="left">
				<image src="../../static/images/close24.png" mode="" @click="closeMsg"></image>
				<view class="text ellipsis">关注公众号了解更新</view>
			</view>
			<view class="btn">查看</view>
			
		</view> -->
		 <!-- #ifdef MP-WEIXIN -->
		<view class="official-account" >
		    <official-account @load="bindload" @error="binderror"></official-account>
		</view>
		<!-- #endif -->
		<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>
	</view>
</template>

<script>
	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} from '@/api/index'
	import {getDoctorArticleList} from '@/api/doctorArticle.js'
	import {getArticleList} from '@/api/article.js'
	import {getStoreConfig} from '@/api/common'
	import tabBg from "@/static/images/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},
		data() {
			return { 
				btnGroup: [{
						text: '取消',
						color: '#FFFFFF',
						bgColor: '#999999',
						width: '150rpx',
						height: '80rpx',
						shape: 'fillet',
						eventName: 'cancle'
                    },{
						text: '确定',
						color: '#FFFFFF',
						bgColor: '#2BC7B9',
						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: tabBg, // tab切换背景
				// 问诊案例类型
				orderTypes: [{name:'全部',id:0,},{name:'图文',id:1,},{name:'语音',id:2,}],
				// 限时消息是否显示
				messageShow: true,
				yangshengs:[
					{id:"1",title:"药膳食疗",page:"/pages_index/index/medicatedFoodList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/3cfbd47911cf4753aa9497eac500728d.png"},
					{id:"2",title:"经络穴位",page:"/pages_index/index/vesselList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e93536a9dc1a4f8ca09545097b12fdea.png"},
					{id:"3",title:"问答专区",page:"/pages_index/index/questionsList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e896972bd56f4e358188af36f2c5af42.png"},
					{id:"4",title:"疾病",page:"/pages_index/index/diseaseList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/d6f1851cccae414b8baf2ba07782f91b.png"},
					{id:"5",title:"中药图解",page:"/pages_index/index/chineseMedicineList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/ff43572d0d004285b5a3b0ef2663c471.png"},
					{id:"6",title:"名方今用",page:"/pages_index/index/famousPrescribeList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/45db770e58c34963b0d2ba24a958b617.png"},
					{id:"7",title:"康复医案",page:"/pages_index/index/doctorArticleList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e793942797b24035b51f94d894bdfa0b.png"},
					{id:"8",title:"更多",page:"",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/3ee6160289914ee4a8126573fe4dc0ae.png"}
				],
			}
			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.getDepartmentList();
		},
		onShareAppMessage(res) {
			return {
				title: '中康未来智慧药房-您的专属健康解决方案',
				path: `/pages/common/launch`,
				imageUrl: 'https://zkzh-2024.oss-cn-beijing.aliyuncs.com/fs/20241127/5b9750f911804728b153ebe5c0051a6f.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		onReachBottom() {
			console.log("onReachBottom")
			//this.$refs.tuiProduct.getTuiProducts();
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '中康未来智慧药房-您的专属健康解决方案',
				query:'',//页面参数
				imageUrl: 'https://zkzh-2024.oss-cn-beijing.aliyuncs.com/fs/20241127/5b9750f911804728b153ebe5c0051a6f.jpg' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top=this.top/30;
				return 'rgba(43,199,185, ' + top + ')';
			},
		},
		onShow() {
			this.getMenu();
			this.getIndexData()
			//this.getTuiDoctorOrder();
			// console.log(uni.getStorageSync('isLocation'))
			// if(uni.getStorageSync('isLocation')==""){
			// 	this.getLocation();
			// }
			if(this.utils.checkLoginState()){
				this.getCartCount();
			}
			this.getStoreConfig();
			//this.getTuiDoctor()
			this.getCanvas();
			this.getDoctorArticleList();
			this.getArticleList();
		},
		methods: {
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								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);
							// }
						 // }
						 const menuNames = ['健康百科', '健康自测', '健康档案', '药品商城', '领券中心', '会员'];
						 this.menus = res.data.filter(item => menuNames.some(menuName => item.menuName.includes(menuName)) );
					}else{
						 
					}
				});
			},
			getCanvas(){
				getCanvas().then(res => {
					if(res.code==200){
						 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){
						this.doctocArticles=res.data.list;
					}
				});
			},
			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: #2BC7B9;
		&.show-back{
			// background: linear-gradient(135deg, #66b2ef 0%, #2BC7B9 100%);
		}
		.status_bar {
			
			width: 100%;
		}
	}
	.content{
		width: 100%;
		position: relative;
		.bg{
			width: 100%;
			height: 380rpx;
			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;
				.name{
					font-size: 42upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					padding-left: 41upx;
				}
				.dot{
					margin: 0upx 10upx;
					font-size: 28upx;
					color: #FFFFFF;
					opacity: 0.5;
				}
				.sub-name{
					font-size: 30upx;
					font-family: Source Han Sans CN;
					color: #FFFFFF;
				}
				
				 
			}
			.func-cont{
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 30upx 20upx 30upx 20upx;
				.search-cont{
					box-sizing: border-box;
					display: flex;
					align-items: center;
					width: 552upx;
					height: 72upx;
					background: #FFFFFF;
					border-radius: 36upx;
					padding: 0 30upx;
					.icon-search{
						width: 28upx;
						height: 28upx;
						margin-right: 20upx;
					}
					input{
						height: 60upx;
						line-height: 60upx;
						flex: 1;
					}
				}
				/deep/.uni-badge{
					border: none;
					background-color: #FF3636;
					font-family: Roboto;
				}
				.img-item{
					width: 44upx;
					height: 44upx;
					margin-left: 30upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.tips{
				margin: 0upx 20rpx 30rpx ;
				height: 40upx;
				line-height: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					font-size: 30upx;
					color: #FFFFFF;
				}
				.right{
					padding: 5upx 20rpx;
					font-size: 24upx;
					color: #FFFFFF;
					background-color: #2BC7B9;
					border-radius: 50rpx;
				}
			}
		}
		.banner-box{
			padding: 0 20upx;
			.inner{
				width: 100%;
				height: 236upx;
				border-radius: 10upx;
				overflow: hidden;
				.swiper,
				.swiper-item,
				.swiper-item image{
					width: 100%;
					height: 100%;
				}
				
			}
		}
		.menu-content{
			// width: 100%;
			background-color: #fff;
			overflow: hidden;
			padding: 20upx 20upx 0;
		}
		.menu-box{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
		}
		.online-inquiry{
			box-sizing: border-box;
			width: 100%;
			height: 170upx;
			padding: 20upx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 62%, rgba(255, 255, 255, 0) 100%);
			display: flex;
			justify-content: space-between;
			.item{
				// width: 46.13%;
				width: 346upx;
				height: 150upx;
				position: relative;
				.bg-img,
				.inner{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.inner{
					box-sizing: border-box;
					z-index: 2;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 32upx;
					.title{
						font-size: 30upx;
						line-height: 1;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						margin-bottom: 20upx;
					}
					.sub-title{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
					image{
						width: 80upx;
						height: 90upx;
						position: absolute;
						right: 7upx;
						bottom: 7upx;
					}
				}
			}
		}
		.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: #2BC7B9;
							}
						}
						
					}
					
					
				}
				.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: #2BC7B9;
									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: #2BC7B9;
										margin-right: 5upx;
									}
									.num{
										font-size: 28upx;
										font-weight: bold;
										color: #2BC7B9;
									}
								}
							}
						}
					}
					.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: #2BC7B9;
						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%;
							// height: 117upx;
							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;
				// margin-bottom: 20upx;
				.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;
							}
						}
					}
				}
			}
		}
		
		.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: #2BC7B9;
										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: #2BC7B9;
			}
		}
		.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, #66b2ef 0%, #2BC7B9 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>