<template>
	<view class="page">
		<view class="fixhead" :style="{ marginTop: geStatusBarHeight() + 'px'}">
			<selShop :showName="false" :showQR="true" :shop="shop" @changeArea="changeArea"></selShop>
		</view>
		<scroll-view class="scrolllist" scroll-x="true" scroll-with-animation  :scroll-left="scrollLeft">
			<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
				<view class="ptext">{{item.name}}</view>
				<view class="pline"></view>
			</view>
		</scroll-view>
		<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(tabItem,index) in list" :key="tabItem.id">
				<scroll-view v-if="index==1" scroll-y style="height: 100%;width: 100%;">
					<scroll-view class="scrolltab" scroll-x="true" scroll-with-animation>
						<view class="tab" :class="0==tabIndex?'cur':''" @tap="tabSelectC" :data-id="0">
							企业介绍
						</view>
						<view class="tab" :class="1==tabIndex?'cur':''" @tap="tabSelectC" :data-id="1">
							创始人
						</view>
						<view class="tab" :class="2==tabIndex?'cur':''" @tap="tabSelectC" :data-id="2">
							店面位置
						</view>
					</scroll-view>
					<view v-if="0==tabIndex" class="bcontent">
						<!-- <image style="width: 100%;height: 200rpx; margin: 20rpx auto;" src="/static/image/three.jpg" mode="aspectFit"></image> -->
						<mp-html :content="html1" :markdown="true" :lazy-load="true"/>
					</view>
					<view v-if="1==tabIndex" class="bcontent">
						<mp-html :content="html2" :markdown="true" :lazy-load="true"/>
					</view>
					<view v-if="2==tabIndex" class="adrcontent">
						<view class="adrcon" v-for="(item, i) in shoplist" :key="i">
							<view class="adrow">
								<uni-icons type="shop-filled" color="#89965f" size="25"></uni-icons>
								<view class="txt">{{item.storeName}}</view>
								<image class="qrimg" src="/static/image/qr.png" mode="aspectFit"></image>
								<uni-icons type="phone" color="#89965f" size="25" @click="gotoPhone(item.phone)" ></uni-icons>
							</view>
							<view class="adrow">
								<uni-icons type="map-pin-ellipse" color="#89965f" size="24"></uni-icons>
								<view class="atxt">{{item.address}}</view>
								<uni-icons type="paperplane" color="#868c99" size="25" @click="gotoAddress(item.address)"></uni-icons>
							</view>
						</view>
						<!-- <view class="adrcon">
							<view class="adrow">
								<uni-icons type="shop-filled" color="#89965f" size="25"></uni-icons>
								<view class="txt">淮海中路店</view>
								<image class="qrimg" src="/static/image/qr.png" mode="aspectFit"></image>
								<uni-icons type="phone" color="#89965f" size="25"></uni-icons>
							</view>
							<view class="adrow">
								<uni-icons type="map-pin-ellipse" color="#89965f" size="24"></uni-icons>
								<view class="atxt">上海市黄浦区淮海中路918号</view>
								<uni-icons type="paperplane" color="#868c99" size="25"></uni-icons>
							</view>
						</view> -->
					</view>
				</scroll-view>
				<scroll-view v-else-if="index==2" scroll-y style="height: 100%;width: 100%;">
					<view class="tcard" v-for="(item, i) in tabItem.slist" :key="i" @tap="gotoTeacher(item)">
						<view class="limg imgload">
							<image  v-if="item.avatar"  :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="tabItem.loadStatus" />
				</scroll-view>
				<scroll-view v-else-if="index==7" scroll-y style="height: 100%;width: 100%;">
					<view class="scontent">
						<uni-forms ref="valiForm" :modelValue="valiFormData">
							<uni-forms-item label="性别" labelWidth="180rpx" required name="contact">
								<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" />
							</uni-forms-item>
							<uni-forms-item label="年龄" labelWidth="180rpx" required name="phone">
								<uni-easyinput type="number" v-model="valiFormData.age"  maxlength="12" placeholder="请输入年龄" />
							</uni-forms-item>
							<uni-forms-item label="身高（cm）" labelWidth="180rpx" required name="phone">
								<uni-easyinput type="number" v-model="valiFormData.height"  maxlength="12" placeholder="请输入身高" />
							</uni-forms-item>
							<uni-forms-item label="体重（kg）" labelWidth="180rpx" required name="phone">
								<uni-easyinput type="number" v-model="valiFormData.weight"  maxlength="12" placeholder="请输入体重" />
							</uni-forms-item>
						</uni-forms>
						<button type="primary" class="btn" @click="submit('valiForm')">计算</button>
					</view>
				</scroll-view>
				<scroll-view v-else scroll-y style="height: 100%;width: 100%;">
					<view class="card" v-for="(item, i) in tabItem.slist" :key="i" @tap="gotoDetail(item,tabItem.name,index)">
						<view class="limg imgload">
							<image v-if="item.image" :src="getimgRemoteFile(item.image)" mode="aspectFill"></image>
						</view>
						<view class="tlcon">
							<view class="tlname">
								{{item.title}}
							</view>
							<view class="tlinfo">
								{{item.content}}
							</view>
							<view class="tother">
								<uni-icons type="eye" color="#868c99" size="18"></uni-icons>
								<view class="txt1">{{item.readNum?item.readNum:0}}</view>
								<uni-icons type="calendar" color="#868c99" size="17"></uni-icons>
								<view class="txt">{{item.modifyTime?item.modifyTime:(item.startTime?item.startTime:'')}}</view>
							</view>
						</view>
					</view>
					<uni-load-more iconType="circle" :status="tabItem.loadStatus" />
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
	</view>
</template>

<script>
	import { myCache,getcartNum,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import selShop from "../components/selShop.vue";
	export default {
		components: {
			openlogin,
			selShop
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				tabCurrentIndex: 0,
				scrollLeft: 0,
				shopid:myCache('myshopid')?myCache('myshopid'):'',
				shop:myCache('myshop')?myCache('myshop'):'',
				tabIndex: 0,
				sexs: [{
					text: '男',
						value: 0
					}, {
						text: '女',
						value: 1
					}, {
						text: '保密',
						value: 2
				}],
				valiFormData: {// 校验表单数据
				    id: null,
					sex: '',
					age: '',
					height: '',
					weight: '',
				},
				//tabs
				list:[
					{
						name:"瑜伽传承",
						id:1,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:1,
							// 	name: "瑜伽传承讲解",
							// 	info: `瑜伽的终极价值，或许在于它提供了一种超越时空的文明对话可能。当现代人在瑜伽垫上模仿祖先的山式站立时，完成的不仅是对身体的重塑，更是对"天人合一"古老智慧的当代诠释.`,
							// 	img: '../../static/image/theme/i2.jpg',
							// 	num:101,
							// 	date:'2025-06-20'
							// },
						]
					},
					{
						name:"了解场馆",
						id:2,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"教练风采",
						id:3,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:11,
							// 	name: "Madeline 老师 (女)",
							// 	info: "资深课程导师，国内知名大学专业毕业系统的学习与研究，顺利通过了所授课程的等级证书考核",
							// 	img: '../../static/image/theme/t2.png'
							// },
						]
					},
					{
						name:"练习瞬间",
						id:4,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:1,
							// 	name: "伸展瑜伽",
							// 	info: `在蓝天白云下，与自然为朋友，享受瑜伽的魅力！与阳光亲密接触，感受能量的流动，瑜伽晨练真的让人焕发活力！`,
							// 	img: '../../static/image/theme/t2.png',
							// 	num:151,
							// 	date:'2025-06-24'
							// },
						]
					},
					{
						name:"瑜伽欣赏",
						id:5,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:1,
							// 	name: "伸展瑜伽",
							// 	info: `瑜伽，让身体与灵魂紧密相连，感受呼吸的韵律，如丝般柔滑的曲线之美。`,
							// 	img: '../../static/image/theme/i3.jpg',
							// 	num:56,
							// 	date:'2025-06-24'
							// },
						]
					},
					{
						name:"瑜伽常识",
						id:6,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:1,
							// 	name: "瑜伽常识了解",
							// 	info: `任何人都可以使用瑜伽,在不平静的世界里寻求内心安宁。 灵 一致 身 心 瑜伽练习 通过瑜伽的练习能帮助人们从 纷繁复杂的困扰和痛苦中回归 到纯粹永恒的源头。 `,
							// 	img: '../../static/image/theme/i4.jpg',
							// 	num:516,
							// 	date:'2025-06-22'
							// },
						]
					},
					{
						name:"健康饮食",
						id:7,
						loadStatus:'more',//'more', // 'noMore',
						slist:[
							// {
							// 	id:1,
							// 	name: "健康饮食了解",
							// 	info: `任何人都可以使用瑜伽,在不平静的世界里寻求内心安宁。 灵 一致 身 心 瑜伽练习 通过瑜伽的练习能帮助人们从 纷繁复杂的困扰和痛苦中回归 到纯粹永恒的源头。 `,
							// 	img: '../../static/image/theme/i4.jpg',
							// 	num:516,
							// 	date:'2025-06-22'
							// }, 
						]
					},
					{
						name:"健康指数",
						id:8,
						loadStatus:'noMore',//'more', // 'noMore',
						slist:[]
					}
				],
				html1:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办，并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队，立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化，结合中医的经络学和中医理疗方法，针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程，经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力！
                  <br>三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！<br>
				`,
				html2:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办，并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队，立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化，结合中医的经络学和中医理疗方法，针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程，经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力！
				  <br>三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！<br>
				`,
				shoplist:[],
				shopdetail:{
					storeName:"",
					address:"",
					id:"",
					phone:"",
				},
				// 校验规则
				rules: {
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '请输入年龄'
						}]
					},
					height: {
						rules: [{
							required: true,
							errorMessage: '请输入身高'
						}]
					},
					weight: {
						rules: [{
							required: true,
							errorMessage: '请输入体重'
						}]
					},
				},
			};
		},
		onLoad(option) {
			if(option.id||option.id==0){
				if(parseInt(option.id)==0){
					this.tabCurrentIndex=0;
				}
				else{
					this.tabCurrentIndex=parseInt(option.id);
				}
				this.scrollLeft = (this.tabCurrentIndex - 1) * 90;
			}
			// 加载数据
			this.loadData();
		},
		onShow(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			
			var cartnum=getcartNum();
			if(cartnum>0){
				// 底部菜单消息角标
				uni.setTabBarBadge({
					//显示未读消息条数
				    index: 4,
				    text: cartnum+''
				});
			}
			else{
				uni.removeTabBarBadge({
					index: 4
				})
			}
		},
		mounted() {
			if(this.userid==""||this.userid=="0"){
				this.$refs.loginId.open();
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},100);
		},
		methods: {
			gotoPhone(phone){
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
				   phoneNumber: phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(phone, true);
				//#endif
			},
			gotoAddress(address){
				console.log(address);
			},
			getimgRemoteFile(img){
				if(img){
					// console.log(getRemoteFile(img))
					// return getRemoteFile(img)
					return img;
				}
				else{
					return require("@/static/image/nopic.png");
				}
			},
			// 切换门店
			changeArea(item){
				console.log(item)
				this.shop=item.storeName;
				this.shopid=item.id;
				// 内容切换
				this.list=[
					{
						name:"瑜伽传承",
						id:1,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"了解场馆",
						id:2,
						loadStatus:'noMore',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"教练风采",
						id:3,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"练习瞬间",
						id:4,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"瑜伽欣赏",
						id:5,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"瑜伽常识",
						id:6,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"健康饮食",
						id:7,
						loadStatus:'more',//'more', // 'noMore',
						slist:[]
					},
					{
						name:"健康指数",
						id:8,
						loadStatus:'noMore',//'more', // 'noMore',
						slist:[]
					}
				];
				this.html1=``;
				this.html2=``;
				this.$forceUpdate();
				this.loadData();
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			async getList() {
				if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
				{
					uni.showLoading({
						title: '数据加载中...'
					});
					var para={
						visitStore:this.shopid
					}
					 
					var url="/api/inherit/getList";
					if(this.tabCurrentIndex==0){
						// 瑜伽传承
						url="/api/inherit/getList";
					}
					else if(this.tabCurrentIndex==1){
						// 了解场馆
						url="/api/store/getList";
					}
					else if(this.tabCurrentIndex==2){
						// 教练风采
						url="/api/context/getList";
					}
					else if(this.tabCurrentIndex==3){
						// 练习瞬间
						url="/api/moments/getList";
					}
					else if(this.tabCurrentIndex==4){
						// 瑜伽欣赏
						url="/api/appreciate/getList";
					}
					else if(this.tabCurrentIndex==5){
						// 瑜伽常识
						url="/api/sense/getList";
					}
					else if(this.tabCurrentIndex==6){
						// 健康饮食
						url="/api/healthy/getList";
					}
					
					const {data: res} = await uni.$http.post(url, para);
					
					if(res.data){
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						if(this.tabCurrentIndex==1){
							console.log(res.data)
							// 了解场馆
							var companyIntroduction=res.data&&res.data.companyIntroduction?res.data.companyIntroduction:'';
							if(companyIntroduction){
								this.html1=companyIntroduction.profile; //企业简介
								this.html2=companyIntroduction.founder; //创始人
							}
							this.shoplist=res.data&&res.data.storeList?res.data.storeList:[];
							this.$forceUpdate();
						}
						else{
							this.list[this.tabCurrentIndex].slist=res.data;
						}
						this.$forceUpdate();
					}
					else{
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.$forceUpdate();
					}
				}
			},
			loadData(){
				// 加载
				if(this.list[this.tabCurrentIndex].loadStatus=="more") {
					this.list[this.tabCurrentIndex].loadStatus="loading";
					setTimeout(() => {
						this.getList();
					}, 300);
				}
			},
			tabSelect(e) {
				console.log(e);
				var that=this;
				this.tabCurrentIndex = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 90;
				if(this.tabCurrentIndex==7){
					setTimeout(() => {
						console.log(that.$refs.valiForm)
						if(that.$refs.valiForm){
							that.$refs.valiForm[0].setRules(that.rules);
						}
					}, 1000);
				}
				// 重新加载 暂不需要加载
				// this.list[this.tabCurrentIndex].loadStatus="more";
				// this.list[this.tabCurrentIndex].slist=[];
				this.loadData();
			},
			tabSelectC(e) {
				console.log(e)
				this.tabIndex = e.currentTarget.dataset.id;
			},
			animationfinish({ detail: { current } }) {
				this.tabCurrentIndex = current;
				this.loadData();
			},
			gotoDetail(item,name,type){
				// 详情
				item["name"]=name;
				var data=encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/category/detail?data=${data}&type=${type}`
				});
			},
			gotoTeacher(item){
				// 详情
				uni.navigateTo({
					url: `/pages/teacher/detail?id=${item.userId}&name=${item.userName}`
				});
			},
			async submit(ref) {
				var that = this;
				this.$refs[ref][0].validate().then(res => {
					console.log('success', res);
					that.savedo();
				}).catch(err => {
					console.log('err', err);
				})
			},
			async savedo(){
				try{
					const {data: res} = await uni.$http.post('/yoga/count', this.valiFormData);
					if(res){
						uni.showToast({
							title: '计算成功！',
							icon: 'success',
							duration: 2000
						})
					}
					else{
						uni.showToast({
							title: '计算失败！请重试',
							icon: 'error',
							duration: 2000
						}) 
					}
				}
				catch{
					uni.showToast({
						title: res.msg? res.msg:'计算失败！',
						icon: 'error',
						duration: 2000
					});
				}
				
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
	}
	.fixhead{
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.search{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 300rpx;
		height: 60rpx;
		border-radius: 60rpx;
		border:1rpx solid #ddd;
		padding-left: 30rpx;
		margin-left: 20rpx;
		.txt{
			margin-left: 20rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #666;
		}
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 280rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	
	.scrolltab{
		height: 60rpx;
		white-space: nowrap;
		width: 80%;
		margin: 20rpx 10%;
		text-align: center;
		.tab{
			width: 180rpx;
			height: 60rpx;
			line-height: 55rpx;
			position: relative;
			display: inline-block;
			overflow: hidden;
			margin-left: 20rpx;
			border-radius: 30rpx;
			border: 2rpx solid #ddd;
			color: #333333;
			font-size: 30rpx;
			text-align: center;
		}
		.tab.cur{
			color: #000;
			background-color: #f3f4ee;
			border: 2rpx solid #89965f;
		}
	}
	.btn{
		margin: 20rpx auto;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		width: 314rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.scontent{
		background-color:  rgba(255, 255,255, 0.5);
		border-radius: 20rpx;
		margin: 30rpx;
		padding:50rpx 40rpx;
		font-size: 28rpx;
		text-align: center;
	}
	.bcontent{
		background-color:  rgba(255, 255,255, 0.5);
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 30rpx 30rpx;
		font-size: 28rpx;
	}
	.adrcontent{
		margin: 30rpx;
	}
	.adrcon{
		display: flex;
		flex-direction: column;
		background-color:  rgba(255, 255,255, 0.5);
		border-radius: 20rpx;
		border: 1rpx solid #eeefe8;
		padding: 30rpx;
		margin-bottom: 30rpx;
		.adrow{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin: 5rpx 0;
			.qrimg{
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			.txt{
				font-size: 28rpx;
				color: #333;
				display: flex;
				flex: 1;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
			.atxt{
				font-size: 28rpx;
				color: #959694;
				display: flex;
				flex: 1;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.scrolllist{
		height: 110rpx; 
		background: #FFF;
		white-space: nowrap;
		width: 100%;
	}
	.tabicl{
		width: 180rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-left: 20rpx;
	}
	.ptext{
		font-size: 33rpx;
		text-align: center;
		color: #333333;
		height: 90rpx;
	}
	.cur .ptext{
		color: #000;
		font-size: 38rpx;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #89965f;
		border-radius: 6rpx;
		opacity: 1;
		margin-left: 30%;
	}
	.nodata{
		width: 100%;
		height:  calc(100vh - 400rpx) !important;
		line-height: calc(100vh) !important;
		background-image: url('/static/image/no.png');
		background-size: 52% auto;
		background-repeat: no-repeat;
		background-position: center; 
		font-size: 28rpx;
		text-align: center;
		color: #89965f;
		overflow: hidden;
	}
	.tcard {
		display: flex;
		flex-direction: row;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0;
		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 */
				               
	
			}
		}
	}
	.card {
		display: flex;
		flex-direction: row;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 24rpx;
		.limg{
			width: 196rpx;
			height: 166rpx;
			margin-right: 20rpx;
			>image {
				width: 196rpx;
				height: 166rpx;
				border-radius: 10rpx;
			}
		}
		.tlcon {
			display: flex;
			flex-direction: column;
			.tlname {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
				color: #323334;
			}
			.tother{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				color: #868c99;
				.txt1{
					font-size: 26rpx;
					margin-right: 20rpx;
					width: 50rpx;
				}
				.txt{
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
			.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 */
			}
		}
	}
	
	
</style>
