yogaApp/pages/category/category.vue

<template>
	<view class="page">
		
		<view class="fixhead" :style="{ marginTop: geStatusBarHeight() + 'px'}">
			<selShop :showName="false" :showQR="true" :shopid="shopid" :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" @change="handleChange">
			<swiper-item class="swiper-item" v-for="(tabItem,index) in list" :key="tabItem.id">
				<!-- 了解场馆 -->
				<scroll-view v-if="list[index].id==3" 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="#00a89b" 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="#00a89b" size="25" @click="gotoPhone(item.phone)" ></uni-icons>
							</view>
							<view class="adrow">
								<uni-icons type="map-pin-ellipse" color="#00a89b" 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="#00a89b" size="25"></uni-icons>
								<view class="txt">淮海中路店</view>
								<image class="qrimg" src="/static/image/qr.png" mode="aspectFit"></image>
								<uni-icons type="phone" color="#00a89b" size="25"></uni-icons>
							</view>
							<view class="adrow">
								<uni-icons type="map-pin-ellipse" color="#00a89b" 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="list[index].id==5" 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="list[index].id==2||list[index].id==10" 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.gender" :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,
				id:1,
				sexs: [{
					text: '男性',
						value: "male"
					}, 
					{
						text: '女性',
						value: "female"
					}],
				valiFormData: {// 校验表单数据
				    id: null,
					gender: '',
					age: '',
					height: '',
					weight: '',
				},
				//tabs
				list: myCache('sortCache'),
				// [
				// 	{
				// 		name:"瑜伽传承",
				// 		id:1,
				// 		loadStatus:'more',//'more', // 'noMore',
				// 		slist:[]
				// 	},
				// 	{
				// 		name:"了解场馆",
				// 		id:2,
				// 		loadStatus:'more',//'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:[]
				// 	}
				// ],
				html1:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办，并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队，立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化，结合中医的经络学和中医理疗方法，针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程，经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力！
                  <br>三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！<br>
				`,
				html2:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办，并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队，立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化，结合中医的经络学和中医理疗方法，针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程，经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力！
				  <br>三朵蘭以【预防未病，助人健康】为己任，一直为瑜伽而传播、为更多人保持和恢复健康助力！让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活！<br>
				`,
				shoplist:[],
				// 校验规则
				rules: {
					gender: {
						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){
				this.id=option.id;
			}
			// 获取分类信息
			this.getSort(); 
		},
		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: {
			async getSort() {
				// 分类
				const {data: res} = await uni.$http.get('/api/index/getIndex');
				if (res&&res.data) {
					myCache('sortCache',res.data);
					this.list=[];
					res.data.forEach((cell,ii)=>{
						if(cell.id==this.id){
							this.tabCurrentIndex=ii;
							this.$forceUpdate();
						}
						this.list.push({
							name:cell.name,
							id:cell.id,
							loadStatus:'more',//'more', // 'noMore',
							slist:[]
						});
						this.$forceUpdate();
					});
					// 加载数据
					this.loadData();
				}
			},
			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=[];
				this.html1=``;
				this.html2=``;
				this.$forceUpdate();
				this.getSort();
			},
			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")
				{
					 
					var para={
						visitStore:this.shopid
					}
					var url="/api/inherit/getList";
					if(this.list[this.tabCurrentIndex].id==1){
						// 瑜伽是一种生活(瑜伽传承)
						url="/api/inherit/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==3){
						// 了解场馆
						url="/api/store/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==5){
						// 教练风采
						url="/api/context/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==6){
						// 精彩瞬间(练习瞬间)
						url="/api/moments/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==11){
						// 瑜伽欣赏
						url="/api/appreciate/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==12){
						// 瑜伽常识
						url="/api/sense/getList";
					}
					else if(this.list[this.tabCurrentIndex].id==9){
						// 吃瘦练美(健康饮食)
						url="/api/healthy/getList";
					}
					else{
						return false;
					}
					uni.showLoading({
						title: '数据加载中...'
					});
					// 获取数据
					const {data: res} = await uni.$http.post(url, para);
					if(res.data){
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						if(this.list[this.tabCurrentIndex].id==3){
							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();
						}
						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("tabSelect");
				if(this.list[e.currentTarget.dataset.id].id==4){
					// 课程预约
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						// 课程预约
						uni.navigateTo({
							url: `/pages/user/courselist`
						});
					}
				}
				else if(this.list[e.currentTarget.dataset.id].id==7){
					// 大咖分享(线上大咖课)
					uni.reLaunch({
						url: `/pages/product/list?id=2`
					});
				}
				else if(this.list[e.currentTarget.dataset.id].id==8){ 
					// 教练培训
					uni.reLaunch({
						url: `/pages/product/list`
					});
				}
				else{
					this.tabCurrentIndex = e.currentTarget.dataset.id;
					this.$forceUpdate();
				}
				
			},
			animationfinish({ detail: { current } }) {
				console.log("animationfinish")
				// this.tabCurrentIndex = current;
			},
			handleChange(e) {
				//原在animationfinish中的操作转移到这里
				console.log("handleChange");
				if(this.list[e.detail.current].id==4){
					// 课程预约
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						// 课程预约
						uni.navigateTo({
							url: `/pages/user/courselist`
						});
					}
				}
				else if(this.list[e.detail.current].id==7){
					// 大咖分享(线上大咖课)
					uni.reLaunch({
						url: `/pages/product/list?id=2`
					});
				}
				else if(this.list[e.detail.current].id==8){ 
					// 教练培训
					uni.reLaunch({
						url: `/pages/product/list`
					});
				}
				else{
					this.tabCurrentIndex = e.detail.current;
					this.$forceUpdate();
					this.tabChangeDo();
				}
			},
			tabChangeDo(){
				this.scrollLeft = (this.tabCurrentIndex - 1) * 90;
				if(this.list[this.tabCurrentIndex].id==2||this.list[this.tabCurrentIndex].id==10){
					var that=this;
					// 健康指数 体质测评
					setTimeout(() => {
						console.log(that.$refs.valiForm)
						if(that.$refs.valiForm){
							that.$refs.valiForm[0].setRules(that.rules);
						}
					}, 1000);
				}
				else{
					// 重新加载 暂不需要加载
					// this.list[this.tabCurrentIndex].loadStatus="more";
					// this.list[this.tabCurrentIndex].slist=[];
					this.loadData();
				}
			},
			tabSelectC(e) {
				console.log("tabSelectC")
				this.tabIndex = e.currentTarget.dataset.id;
			},
			gotoDetail(item,name,index){
				// 详情
				item["name"]=name;
				var data=encodeURIComponent(JSON.stringify(item));
				var type=this.list[index].id;
				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('/api/healthy/calculateBim', this.valiFormData);
					if(res&&res.success){
						var bim=res.data?parseFloat(res.data):0;
						if(bim){
							var msg="";
							if(bim<=18.5){
								msg="您的体重过轻请联系馆主或教练领取A方案!";
							}
							else if(bim>18.5&&bim<=24){
								msg="太棒了，您的体重非常健康请联系馆主或教练领取B方案保持!";
							}
							else if(bim>24&&bim<28){
								msg="您的体重超重请联系馆主或教练领取C方案保持!";
							}
							else if(bim>=28){
								msg="您的体重肥胖请联系馆主或教练领取D方案保持!";
							}
							uni.showModal({
								title: '提示',
								content: msg,
								cancelText: '取消',
								confirmText: '确定',
								success: ress => {
									if (ress.confirm) {
									}
								}
							}); 
						}
						else{
							uni.showModal({
								title: '提示',
								content: '计算异常！请重试！',
								cancelText: '取消',
								confirmText: '确定'
							}); 
						}
					}
					else{ 
						uni.showModal({
							title: '提示',
							content: res.message? res.message:'计算异常！请重试！',
							cancelText: '取消',
							confirmText: '确定'
						}); 
					}
				}
				catch{
					uni.showModal({
						title: '提示',
						content: '计算异常！请重试！',
						cancelText: '取消',
						confirmText: '确定'
					}); 
				}
				
			},
			// 获取状态栏高度
			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: #e4f9f7;
			border: 2rpx solid #00a89b;
		}
	}
	.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: #00a89b;
		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{
		min-width: 160rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-left: 12rpx;
	}
	.ptext{
		font-size: 30rpx;
		text-align: center;
		color: #000;
		height: 90rpx;
	}
	.cur .ptext{
		color: #000;
		font-size: 34rpx;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #00a89b;
		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: #00a89b;
		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;
					margin-left: 4rpx;
					width: 50rpx;
				}
				.txt{
					font-size: 26rpx;
					margin-right: 20rpx;
					margin-left: 4rpx;
				}
			}
			.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>