<template>
	<view class="page">
		
		<!-- <view class="back"></view> -->
		
		<view class="box">
			
			<view class="fixhead" :style="{ paddingTop: geStatusBarHeight() + 'px'}">
				<selShop :showName="true" :showQR="false" :shopid="shopid" :shop="shop" @changeArea="changeArea"></selShop>
			</view>
			
			<!-- 轮播图区域 -->
			<view class="hometop"> 
				<swiper class="swiperb" @change="change" :current="swiperCurrent"
				  :indicator-dots="false"
				  :autoplay="true"
				  :interval="3000"
				  :duration="1000"
				  :circular="true">
					<swiper-item v-for="(item, i) in swiperList" :key="i">
						<view class="swiper-item" @click="goto(item)">
							<image :src="item" mode="aspectFill"></image>
						</view> 
					</swiper-item>
				</swiper>
				<view class="dots">
					<block v-for="(item,index) in swiperList" :key="index">
						<view class="dot" :class="index==swiperCurrent ? ' active' : ''"  @click="dotclick(index)">
						</view>
					</block>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="theme">
				<view  class="thcon" v-for="(item, index) in themeList" :key="index" :style="{ backgroundColor:item.color?item.color:colors[index]}" 
				@click="gotoCategory(item.id)">
					<view class="thinfo">
						<view class="thname">{{item.name}}</view>
						<!-- <view class="thtext">{{item.text}}</view> -->
					</view>
					<view class="thimg">
						<image class="theimg" :src="item.img?item.img:timgs[index]" mode="aspectFill" lazy-load></image>
					</view>
				</view>
			</view>
			
			<!-- 老师展示 -->
			<view class="teacher-list">
				<view class="teach-title">
					<view class="tname">老师展示</view>
					<view class="tredr" @tap="gotoTeacherMore()">更多<uni-icons type="right" size="13" color="#848a97"></uni-icons></view>
				</view>
				<view class="card" v-for="(item, i) in teacherList" :key="i" @tap="gotoTeacher(item)">
					<view class="limg imgload">
						<image :src="getimgRemoteFile(item.avatar)" mode="aspectFill"></image>
					</view>
					<view class="tlcon">
						<view class="tlname">
							{{item.userName}}
						</view>
						<view class="tlinfo">
							{{item.intro}}
						</view>
					</view>
				</view>
				<uni-load-more iconType="circle" :status="loadStatus" />
			</view>
			 
		</view>
		 
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import checkupdate from "@/uni_modules/uni-upgrade-center-app/utils/check-update.js"
	import { myCache,getcartNum,getRemoteFile,ifnonet } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	import selShop from "../components/selShop.vue";
	
	export default {
		components: {
		  openlogin,
		  top,
		  service,
		  selShop
		},
		data() {
			return {
				swiperCurrent:0,
				openId:"",
				phone:"",
				userid:"",
				shopid: myCache('myshopid')?myCache('myshopid'):null,
				shop: myCache('myshop'),
				// banner
				swiperList:[
					"../../static/image/b1.jpg",
					"../../static/image/b2.png"
				],// myCache('swiperCache'),
				colors:[
					"#f9d1c8","#c7d7bd","#c4dfe4","#efdddd","#c4ccdf","#fceaac","#d5e7c1",
					"#f9d1c8","#c7d7bd","#c4dfe4","#efdddd","#c4ccdf","#fceaac","#d5e7c1",
					"#f9d1c8","#c7d7bd","#c4dfe4","#efdddd","#c4ccdf","#fceaac","#d5e7c1",
					"#f9d1c8","#c7d7bd","#c4dfe4","#efdddd","#c4ccdf","#fceaac","#d5e7c1",
				],
				timgs:[
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg',
					'../../static/image/theme/y1.jpg','../../static/image/theme/y2.jpg','../../static/image/theme/y3.jpg','../../static/image/theme/y4.jpg'
				],
				themeList: myCache('sortCache'),
				// [
				// 	{
				// 		name: "瑜伽传承",
				// 		text: "传承瑜伽",
				// 		img: '../../static/image/theme/y1.jpg',
				// 		color:'#c4dfe4'
				// 	}, 
				// 	{
				// 		name: "了解场馆",
				// 		text: "场馆介绍",
				// 		img: '../../static/image/theme/y2.jpg',
				// 		color:'#c7d7bd'
				// 	}, 
				// 	{
				// 		name: "瑜伽用品",
				// 		text: "瑜伽好物",
				// 		img: '../../static/image/theme/y3.jpg',
				// 		color:'#f9d1c8'
				// 	}, 
				// 	{
				// 		name: "线上大咖课",
				// 		text: "大咖教师",
				// 		img: '../../static/image/theme/y4.jpg',
				// 		color:'#fff9e6'
				// 	}, 
				// 	{
				// 		name: "课程预约",
				// 		text: "超值课程",
				// 		img: '../../static/image/theme/y1.jpg',
				// 		color:'#c4ccdf'
				// 	}, 
				// 	{
				// 		name: "教练风采",
				// 		text: "风采展示",
				// 		img: '../../static/image/theme/y2.jpg',
				// 		color:'#fceaac'
				// 	}, 
				// 	{
				// 		name: "练习瞬间",
				// 		text: "记录美好",
				// 		img: '../../static/image/theme/y3.jpg',
				// 		color:'#d5e7c1'
				// 	}, 
				// 	{
				// 		name: "教练培训",
				// 		text: "专业课程",
				// 		img: '../../static/image/theme/y4.jpg',
				// 		color:'#c4ccdf'
				// 	}, 
				// 	{
				// 		name: "瑜伽欣赏",
				// 		text: "瑜伽科普",
				// 		img: '../../static/image/theme/y3.jpg',
				// 		color:'#efdddd'
				// 	}, 
				// 	{
				// 		name: "瑜伽常识",
				// 		text: "瑜伽科普",
				// 		img: '../../static/image/theme/y4.jpg',
				// 		color:'#dcd1bd'
				// 	}, 
				// ], // 主题分类
				teacherList: [], //教师列表
				loadStatus:'more',
				page: {
					pageNum: 1,
					pageSize: 10,
					visitStore: myCache('myshopid')?myCache('myshopid'):null,
				},
			};
		},
		onLoad() {
			var shop=myCache('shop');
			var banner=shop&&shop.banner?shop.banner:"";
			banner=banner.split(',');
			if(banner.length>0){
				this.swiperList=banner;
				this.$forceUpdate();
			}
			
			// 获取分类信息
			this.getSort();
			
			// 客服电话获取缓存
			this.getservice();
			
			// 获取老师信息
			// this.loadData();
			
			// setTimeout(() => {
			// 	console.log("getCurrentActivity")
			// 	this.getCurrentActivity();
			// },2000);
		},
		onShow() {
			
			this.shopid = myCache('myshopid')?myCache('myshopid'):null;
			this.shop = myCache('myshop')?myCache('myshop'):'';
			this.$forceUpdate();
			
			// 获取老师信息
			this.teacherList=[];
			this.loadStatus="more";
			this.page={
				pageNum: 1,
				pageSize: 10,
				visitStore:this.shopid
			}
			this.loadData();
			
			// if(myCache("loginindex")=="1"){
			// 	uni.setStorageSync("loginindex", "");
			// 	// 获取老师信息
			// 	this.loadData();
			// }
			
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(!this.shopid){
				uni.showModal({
					title: '提示',
					content: '请选择门店信息！',
					showCancel: false,
					confirmText: '确定'
				});
			}
			
			// 检查网络
			if (ifnonet()) {
				uni.navigateTo({
					url: '/pages/error/nonet'
				});
				return false;
			}
			
			var cartnum=getcartNum();
			if(cartnum>0){
				// 底部菜单消息角标
				uni.setTabBarBadge({
					//显示未读消息条数
				    index: 4,
				    text: cartnum+''
				});
			}
			else{
				uni.removeTabBarBadge({
					index: 4
				})
			}
			
			// banner
			// this.getBanner();
			
			// 版本更新
			checkupdate();

		},
		mounted() {
			if(this.userid==""||this.userid=="0"){
				this.$refs.loginId.open();
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			getCurrentActivity() {
			    // 获取当前Activity（仅App端有效）
			    const mainActivity = plus.android.runtimeMainActivity();
			    if (mainActivity) {
			        console.log('获取到Activity对象:', mainActivity);
			        // 可进一步调用Activity方法（需通过plus.android.importClass）
			        plus.android.importClass(mainActivity);
					//console.log('Activity类名:', mainActivity.getClass().getSimpleName());
					//console.log('Activity类名:', mainActivity.getClass());
			        console.log('Activity类名:', mainActivity.getClassName());
			        return mainActivity;
			    } else {
			        console.error('无法获取Activity对象');
			        return null;
			    }
			},
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					// return getRemoteFile(img)
					 return img
				}
				else{
					return require("@/static/image/theme/t2.png");
				}
			},
			// 切换门店
			changeArea(item){
				console.log(item)
				this.shop=item.storeName;
				this.shopid=item.id;
				// 老师切换
				this.teacherList=[];
				this.loadStatus="more";
				this.page={
					pageNum: 1,
					pageSize: 10,
					visitStore:this.shopid
				}
				this.$forceUpdate();
				this.loadData();
			},
			dotclick(index){
				this.swiperCurrent = index;
				this.$forceUpdate();
			},
			change(e) {
				this.swiperCurrent = e.detail.current;
				this.$forceUpdate();
			},
			goservice(val){
				console.log(val);
			}, 
			async getservice(){
				// 获取客服信息 
				// const {data: res} = await uni.$http.post('/platform/getHotline');
				// if (res) {
				// 	myCache('linemobile',res);
				// }
			},
			checknetwork(){
				console.log('checknetwork')
				// 判断当前网络
				uni.onNetworkStatusChange(function(res) { 
					console.log('onNetworkStatusChange',res);
					if (res.isConnected) {
						// 网络可以连接
						uni.showModal({
							title: '系统提示',
					        content: '当前设备网络已恢复',
					        showCancel: false,
					        confirmText: '知道了'
					    });
						
					} else {
					    uni.showModal({
					        title: '系统提示',
					        content: '当前设备无网络或网络较差',
					        cancelText: '取消',
					        confirmText: '确定',
					        success: (res) => {
					            if (res.confirm) {
					                uni.reLaunch({
					                    url:'/pages/index/index'
					                });
					            } else {
					                // #ifdef H5
					                uni.navigateTo({
					                    url:'/pages/login/login'
					                })
					                // #endif
					                // #ifdef APP-PLUS
					                plus.runtime.quit();
					                // #endif
					            }
					        }
					    })
					}
				});
			},
			// 获取老师
			async getTeacherList() {
				const {data: res} = await uni.$http.post('/api/context/getList', this.page);
				if(res.data&&res.data.length>0){
					this.loadStatus="noMore";
					this.teacherList=res.data;
					this.$forceUpdate();
					// res.forEach((cell,idx)=>{
					// 	this.teacherList.push(cell);
					// });
				}
				else{
					this.loadStatus="noMore";
				}
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getTeacherList();
						this.getBanner();
					}, 300);
				}
			},
			async getBanner() {
				// banner
				const {data: res} = await uni.$http.get('/api/getInfo');
				if(res&&res.visitStore){
					var shop=res.visitStore;
					var banner=shop&&shop.banner?shop.banner:"";
					banner=banner.split(',');
					if(banner.length>0){
						this.swiperList=banner;
						this.$forceUpdate();
					}
					myCache('shop',shop);
					myCache('myshop',shop.storeName);
					myCache('myshopid',shop.id);
					 
				}
			},
			async getSort() {
				// 分类
				const {data: res} = await uni.$http.get('/api/index/getIndex');
				if (res&&res.data) {
					this.themeList=res.data?res.data:[];
					this.$forceUpdate();
					myCache('sortCache',this.themeList);
				}
			},
			gotoCategory(id){
				if(id==1){
					// 瑜伽是一种生活(瑜伽传承)
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==2){
					// 健康指数
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==3){
					// 了解场馆
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==4){
					// 必须登录
					// 课程预约
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						// 课程预约
						uni.navigateTo({
							url: `/pages/user/courselist`
						});
					}
				}
				else if(id==5){
					// 教练风采
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==6){
					// 精彩瞬间(练习瞬间)
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==7){
					// 大咖分享(线上大咖课)
					uni.reLaunch({
						url: `/pages/product/list?id=2`
					});
				}
				else if(id==8){
					// 教练培训
					uni.reLaunch({
						url: `/pages/product/list`
					});
				}
				else if(id==9){
					// 吃瘦练美(健康饮食)
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==10){
					// 体质测评
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==11){
					// 瑜伽欣赏
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==12){
					// 瑜伽常识
					uni.reLaunch({
						url: `/pages/category/category?id=${id}`
					});
				}
				else if(id==13){
					// 瑜伽用品
					uni.reLaunch({
						url: `/pages/product/list?id=0`
					});
				}
			},
			gotoCategory0(index){
				if(index==0||index==1){
					// 瑜伽传承 了解场馆
					uni.reLaunch({
						url: `/pages/category/category?id=${index}`
					});
				}
				else if(index==2){
					// 瑜伽用品
					uni.reLaunch({
						url: `/pages/product/list?id=0`
					});
				}
				else if(index==3){
					// 线上大咖课
					uni.reLaunch({
						url: `/pages/product/list?id=2`
					});
				}
				else if(index==4){
					// 必须登录
					// 课程预约
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						// 课程预约
						uni.navigateTo({
							url: `/pages/user/courselist`
						});
					}
				}
				else if(index==5){
					// 教练风采
					uni.reLaunch({
						url: `/pages/category/category?id=2`
					});
				}
				else if(index==6){
					// 练习瞬间
					uni.reLaunch({
						url: `/pages/category/category?id=3`
					});
				}
				else if(index==7){
					// 教练培训
					uni.reLaunch({
						url: `/pages/product/list`
					});
				}
				else if(index==8){
					// 瑜伽欣赏
					uni.reLaunch({
						url: `/pages/category/category?id=4`
					});
				}
				else if(index==9){
					// 瑜伽常识
					uni.reLaunch({
						url: `/pages/category/category?id=5`
					});
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			gotoTeacherMore(){
				// 教练风采
				uni.reLaunch({
					url: `/pages/category/category?id=5`
				});
			},
			gotoTeacher(info){
				uni.navigateTo({
					url: `/pages/teacher/detail?id=${info.userId}&name=${info.userName}`
				});
			},
			navToList(id){
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			goto(url){
				console.log('url',url);
				// 首页  1 ；我的 2 ，我的订单 3 
				// 分类  /pages/category/category?id=分类id
				// 商品  /pages/product/detail?id=商品id
				if(url){
					if(url=='1'){
						// 首页
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
					else if(url=='2'){
						// 我的
						uni.switchTab({
							url: '/pages/user/user'
						});
					}
					else if(url=='3'){
						// 我的订单
						uni.navigateTo({
							url: `/pages/order/orderlist?id=0`
						});
					}
					else{
						if (url.includes('/pages/category/category')) {
							uni.reLaunch({
								url: url
							});
						}
						else{
							uni.navigateTo({
								url: url
							});
						}
					}
				}
			},
			focus(){
				uni.navigateTo({
					url: `/pages/index/list`
				});
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
	}
	
	/* 首页固定标题 */
	.fixhead{
		display: flex;
		flex-direction: row;
		align-items: self-end;
		width: 100%;
		margin: 16rpx 0;
	} 
	.hometop{
		width: 100%;
		height: 360rpx;
		position: relative;
		display: flex;
	}
	
	/* banner */
	.swiper-bg {
		background: linear-gradient(180deg, #619af7 0%, #F2F2F2 100%);
		width: 100%;
		height: 420rpx;
		padding-top: 0;
	}
	.swiperb {
		width: 100%;
		height: 360rpx;
		margin: 10rpx 0 0 0;
		.swiper-item, image {
			margin: auto;
			height: 100%;
			width: 100%;
		}
	}
	.dots {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		// 这里一定要注意兼容不然很可能踩坑          
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 98;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.dot {
			width: 16rpx;
			height: 16rpx;
			transition: all .6s;
			background: rgba(255, 255, 255, .3);
			margin-right: 16rpx;
			border-radius: 16rpx;
		}
		.active {
			width: 16rpx;
			height: 16rpx;
			background: #fff;
		}
	}
	
	/* 主题 */
	.theme{
		display: flex;
		flex-wrap: wrap; /* 允许换行 */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0 0 20rpx;
		box-sizing: border-box;
		.thcon{
			flex: 1 1 46%; /* 每个项目占用容器宽度的50%，即一行显示两个 */
			box-sizing: border-box; /* 确保padding和border不会影响宽度计算 */
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 20rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 10rpx 16rpx 2rpx rgba(0, 0, 0, 0.1);
		}
		.thinfo{
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			.thname{
				font-size: 30rpx;
				color:#000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 假设你的行高是20px，并且你想要两行显示 */
				line-height: 40rpx;         /* 每行的行高 */
				max-height: 80rpx; 
			}
			.thtext{
				margin-top: 10rpx;
				font-size: 28rpx;
				color:#787b7c;
			}
		}
		.thimg{
			width: 88rpx;
			height: 88rpx;
			margin-left: 10rpx;
			.theimg{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	 
	/* 老师列表  */
	.teacher-list {
		display: flex;
		flex-direction: column;
		margin:20rpx;
		.teach-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.tname {
				font-size: 36rpx;
				font-weight: 600;
				color: #323334;
				margin-top: 12rpx;
			}
			.tredr {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #848a97;
				margin-top: 12rpx;
				margin-right: 10rpx;
			}
		}
		.card {
			display: flex;
			flex-direction: row;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx 20rpx 22rpx;
			.limg{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				>image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			.tlcon {
				display: flex;
				flex-direction: column;
				.tlname {
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 16rpx;
					color: #323334;
				}
				.tlinfo {
					font-size: 28rpx;
					color: #868c99;
					display: flex;
					align-items: center;
					height: 80rpx;
					line-height: 40rpx;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
					-webkit-line-clamp: 2;
					/*要显示的行数*/
					/* autoprefixer: off */
					-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
					/* autoprefixer: on */
					               

				}
			}
		}
	}
	
	/* 活动 */ 
	.active{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		padding: 6rpx 20rpx;
		.aconl{
			width: 49%;
			height: 180rpx;
			margin-right: 1%;
			.aimg{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.aconr{
			width: 49%;
			height: 180rpx;
			margin-left: 1%;
			.aimg{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	.s-list{
		margin: 36rpx 20rpx 36rpx 20rpx;
		padding: 30rpx 24rpx;
		background: #FFF;
		border-radius: 60rpx;
		box-shadow:0 1px 3px 2px rgba(0, 0, 0, 0.03),inset 0 30px 15px #f5f5f5;
		.scroll-view_H{
			white-space: nowrap;
			width: 100%;
			margin-bottom: 20rpx;
			.product-item{
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 300rpx;
				padding-bottom: 30rpx;
				margin-right: 20rpx;
				background-color: #f7f7f7;
				border-radius: 0 0 80rpx 0;
			}
			.image-wrapper{
				width: 100%;
				height: 300rpx;
				border-radius: 6rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 88%;
					height: 88%;
					opacity: 1;
					border-radius: 10rpx;
				}
			}
			.title{
				color: #000;
				font-size: 26rpx;
				word-break: break-word;
				white-space: break-spaces;
				margin: 10rpx 10rpx 0 15rpx;
				line-height: 32rpx;
				overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
			}
			.price{
				margin: 20rpx 0 0 10rpx;
				line-height: 1;
				align-items:center;
				color: #00A99A;
				.txt{
					font-size: 22rpx;
				}
				.tint{
					font-size: 28rpx;
					font-weight: 600;
				}
				.txtt{
					font-size: 20rpx;
					margin-left: 7rpx;
				}
			}
		}
	}
	.s-header{
		display:flex;
		flex-direction: row;
		align-items:center;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 0 16rpx 0;
		margin-top: 24rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #eeeeee;
		image{
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tit{
			font-size: 30rpx;
			color: #000;
			font-weight: 600;
			margin-left: 6rpx;
		}
		.tit2{
			background-color: #9c9c9c;
			font-size: 22rpx;
			color: #fff;
			width: 120rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border-radius: 44rpx;
		}
	}
	
</style>
