<template>
	<view class="content" v-if="isShow">
		<view class="topImg">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="bannerind">
							<swiper-item v-if="xlimgList.length != 0" v-for="(el, ind) in xlimgList">
								<view class="swiper-item"><image class="img" :src="geturl(el)" mode="aspectFill"></image></view>
							</swiper-item>
							<swiper-item v-if="xlimgList.length == 0">
								<view class="swiper-item"><image class="img" :src="geturl('/r/cms/www/m/changshu/noimg.png')" mode="aspectFill"></image></view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="ban jddtzsd"><view v-for="(el, ind) in xlimgList" :class="[nowbanner == ind ? 'isclick' : 'noclick']"></view></view>
			<!-- <view class="collection" @click="shoucan">
				<image v-if="!scinfo.isCollection" :src="getImg('icon-wsc.png')" mode="aspectFill" lazy-load="true"></image>
				<image v-if="scinfo.isCollection" :src="getImg('icon-ysc.png')" mode="aspectFill" lazy-load="true"></image>
			</view> -->
		</view>
		<view class="lx">
			<view class="xqtile animated fadeInLeft" style="animation-duration: 2s;animation-delay: 0.5s;">
				<image class="icon" v-if="xllist.typeid == 1" :src="getImg('ra-zhiyou-icon-jingqu.png')" mode="aspectFill"></image>
				<image class="icon" v-if="xllist.typeid == 2" :src="getImg('ra-zhiyou-icon-fandian.png')" mode="aspectFill"></image>
				<image class="icon" v-if="xllist.typeid == 199" :src="getImg('ra-zhiyou-icon-minsu.png')" mode="aspectFill"></image>
				<image class="icon" v-if="xllist.typeid == 55" :src="getImg('ra-zhiyou-icon-gouwu.png')" mode="aspectFill"></image>
				<view class="name" v-text="xllist.name"></view>
			</view>
			<view class="yuyin" v-if="details.mediaPath != '' && details.mediaPath != null&&details.mediaPath !=undefined&&details.mediaPath !='undefined'">
				<luchaudio
					:src="geturl(details.mediaPath)"
					:play.sync="details.ddisplay"
					:poster="geturl(details.logo)"
					:name="details.audioname"
					:obeyMuteSwitch="obeyMuteSwitch"
					@click.native.stop="change"
					ref="sonMethod"
					class="audioclass"
				></luchaudio>
			</view>
			<view class="xqnrbox" v-if="xllist.description != ''&&xllist.description != null&&xllist.description !=undefined&&xllist.description !='undefined'">
				<rich-text class="xqnr zxqnr2222" :style="{ display: xqnrdisplay }" :nodes="xllist.description"></rich-text>
				<view class="xqnrname" @click="showdes()">
					<view class="text2">{{ showdesname }}</view>
				</view>
			</view>

			<view class="namebox">
				<view class="namelist" v-if="xllist.openTime != ''&&xllist.openTime != null&&xllist.openTime !=undefined&&xllist.openTime !='undefined'">
					<image class="icon" :src="getImg('ra-zhiyou-icon1-youlan.png')" mode="aspectFill"></image>
					<view class="name">开放时间</view>
					<view class="namedes" v-text="xllist.openTime"></view>
				</view>
				<view class="namelist" v-if="xllist.phone != ''&&xllist.phone != null&&xllist.phone !=undefined&&xllist.phone !='undefined'">
					<image class="icon" :src="getImg('ra-zhiyou-icon1-dianhua.png')" mode="aspectFill"></image>
					<view class="name">咨询电话</view>
					<view class="namedes" v-text="xllist.phone"></view>
				</view>
				<view class="namelist" v-if="xllist.playPrompt != ''&&xllist.playPrompt != null&&xllist.playPrompt !=undefined&&xllist.playPrompt !='undefined'">
					<image class="icon" :src="getImg('ra-zhiyou-icon1-shijian.png')" mode="aspectFill"></image>
					<view class="name">游览时间</view>
					<view class="namedes" >{{xllist.playPrompt}}</view>
				</view>
				<view class="namelist" v-if="xllist.price != ''&&xllist.price != null&&xllist.price !=undefined&&xllist.price !='undefined'">
					<image class="icon" :src="getImg('ra-zhiyou-icon1-menpiao.png')" mode="aspectFill"></image>
					<view class="name">门票价格</view>
					<view class="namedes" v-text="xllist.price"></view>
				</view>
				<view class="namelist" v-if="xllist.address != ''&&xllist.address != null&&xllist.address !=undefined&&xllist.address !='undefined'">
					<image class="icon" :src="getImg('ra-zhiyou-icon1-jingqu.png')" mode="aspectFill"></image>
					<view class="name">地址</view>
					<view class="namedes namedesadd" v-text="xllist.address"></view>
					<image class="dizhiicon" @click="goAddress(xllist.lagoff, xllist.lngoff)" :src="getImg('ra-zhiyou-icon2-ditu.png')" mode="aspectFill"></image>
				</view>
				<view class="namelist2" v-if="xllist.selfDrInf != ''&&xllist.selfDrInf != null&&xllist.selfDrInf !=undefined&&xllist.selfDrInf !='undefined'">
					<view class="namelistline" @click="showxianlu()">
						<image class="icon" :src="getImg('ra-zhiyou-icon1-luxian.png')" mode="aspectFill"></image>
						<view class="name">自驾线路</view>
						<image v-if="desseldisplay == '-webkit-box'" class="jiantouicon" :src="getImg('ra-lyfw-icon-you.png')" mode="aspectFill"></image>
						<image v-if="desseldisplay == 'block'" class="jiantouicon active" :src="getImg('ra-lyfw-icon-you.png')" mode="aspectFill"></image>
					</view>
					<view class="namedes namedessel" :style="{ display: desseldisplay }" v-html="xllist.selfDrInf"></view>
				</view>
				<view class="namelist2" v-if="xllist.preferentialPolicy != '' &&xllist.preferentialPolicy != null&&xllist.preferentialPolicy !=undefined&&xllist.preferentialPolicy !='undefined'">
					<view class="namelistline">
						<image class="icon" :src="getImg('ra-zhiyou-icon1-youhui.png')" mode="aspectFill"></image>
						<view class="name">优惠政策</view>
					</view>
					<view class="namedes" v-html="xllist.preferentialPolicy"></view>
				</view>
			</view>
			<view class="line" v-show="xllist.imgList.length != 0"></view>
			<view class="imgListbox" v-show="xllist.imgList.length != 0">
				<view class="titlename">
					<image class="icon" :src="getImg('ra-zhiyou-icon2-jingqu-zi.png')" mode="aspectFill"></image>
					<view class="name">图片集</view>
				</view>
				<ul class="listdata">
					<li class="lidata" v-for="(el, ind) in xlimgList" @click="getImgs(xlimgList)"><image class="lidataimg" :src="geturl(el)" mode="aspectFill"></image></li>
				</ul>
			</view>
			<view class="line"></view>
			<view class="ctgListbox">
				<view class="titlename">
					<image class="icon" :src="getImg('ra-zhiyou-icon2-jingqu-zi.png')" mode="aspectFill"></image>
					<view class="name">周边推荐</view>
				</view>
				<ul class="listdata">
                    <!-- &&xllist.selfDrInf != null&&xllist.selfDrInf !=undefined&&xllist.selfDrInf !='undefined' -->
					<li class="lidata zlidatatjtitleboxfq" v-for="(el, ind) in xllist.ctgList" @click="navto(el.id)">
						<view v-if="el.mediaPath">
							<view class="yuyiniconimg" v-if="el.mediaPath != '' && el.mediaPath != null"><image class="img" :src="getImg('yuyinicon.png')" mode=""></image></view>
						</view>
                        <view class="lidatatjtitlebox">
                            {{ztitlewz}}
                        </view>
						<image class="lidataimg" :src="geturl(el.thumbImg == null || el.thumbImg == '' ? '/r/cms/www/m/changshu/noimg.png' : el.thumbImg)" mode="aspectFill"></image>
                        <view class="ztxtbox">
                            <view class="ztxt" >{{el.name}}   
                                <view class="ztxtxjgoudu"  ></view>
                                <view class="ztxtxj" v-if="el.recDegree==1" >A</view>
                                <view class="ztxtxj" v-else-if="el.recDegree==2" >AA</view>
                                <view class="ztxtxj" v-else-if="el.recDegree==3" >AAA</view>
                                <view class="ztxtxj" v-else-if="el.recDegree==4" >AAAA</view>
                                <view class="ztxtxj" v-else-if="el.recDegree==5" >AAAAA</view>
                                <view class="ztxtxjms" v-else ></view>
                            <view class="ztxtxj" v-else ></view>
                            </view>
                            <!-- {{el.name}} -->
                            
                        </view>
                        
                        <!-- :el.distanceStr -->
						<!-- <view class="address">{{el.address}}</view> -->
                        <view class="address">距:{{el.distanceStr}}</view>
					</li>
				</ul>
			</view>
			<view class="line"></view>
			<view class="ctgListbox" >
				<view class="titlename">
					<image class="icon" :src="getImg('ra-zhiyou-icon2-jingqu-zi.png')" mode="aspectFill"></image>
					<view class="name">评价列表</view>
				</view>
				<view class="vboxs" v-if="pjinfolists.list==0">
				    <view class="nottitle">暂无评价</view>
				</view>
				<view class="vboxs" v-if="pjinfolists.list != 0">
					<view class="vbbody">
						<view class="user" v-for="(el, index) in pjinfolists.list" v-if="index < 2">
							<view class="utitle">
								<view class="utleft">
									<view class="uavatar"><image class="uimg" :src="el.userImg" mode=""></image></view>
									<view class="uname">
										<view class="name">{{ el.userName }}</view>
										<view class="upfnum">
											<view class="xingbg"><view class="xing" :style="{ width: el.avg * 20 + '%' }"></view></view>
											<view class="xingname" v-if="el.avg >= 5">超赞</view>
											<view class="xingname" v-else-if="el.avg >= 4">不错</view>
											<view class="xingname" v-else-if="el.avg >= 3">好</view>
											<view class="xingname" v-else-if="el.avg >= 2">一般</view>
											<view class="xingname" v-else>差</view>
										</view>
									</view>
								</view>
								<view class="utime">{{ el.createTime }}</view>
							</view>
							<view class="udes">{{ el.content }}</view>
						</view>
					</view>
					<!-- <view class="vbbut" @click="golists()">查看全部{{ pjinfolists.nums }}条点评</view> -->
				</view>
				<view class="pingjiaboxs" @click="navtopj(xllist.id)">
					<!-- <image class="pjicon" :src="getImg('icon-dp-icon.png')" mode="aspectFill" lazy-load="true"></image> -->
					<view class="pjtitle">
						留下您的评价
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bottominfo">
			<view class="collection" @click="shoucan">
				<image v-if="!scinfo.isCollection" :src="getImg('icon-wsc.png')" mode="aspectFill" lazy-load="true"></image>
				<view v-if="!scinfo.isCollection" class="sctext">未收藏</view>
				<image v-if="scinfo.isCollection" :src="getImg('icon-ysc.png')" mode="aspectFill" lazy-load="true"></image>
				<view v-if="scinfo.isCollection" class="sctext">已收藏</view>
			</view>
			<view class="comments" @click="navtopj(xllist.id)">评论</view>
		</view> -->
		<!-- <image @click="toOther()" class="yudingimg"  :src="$getimg('lijiyuding.png')" mode="aspectFill"></image> -->
		<image @click="toOther()" class="yudingimg" v-if="xllist.wxMiNiAppId!=''&&xllist.wxMiNiPath!=''" :src="getImg('lijiyuding.png')" mode="aspectFill"></image>
	</view>
</template>

<script>
var web = require('@/components/utils/request.js');
import luchaudio from '@/components/luch-audio/luch-audio.vue';
export default {
	components: {
		luchaudio
	},
	data() {
		return {
			isShow:false,
			id: 0,
			xllist: {playPrompt:''},
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			audioAction: {
				method: 'pause'
			},
			showdesname: '阅读全文',
			xqnrdisplay: '-webkit-box',
			desseldisplay: '-webkit-box',
			details: {
				logo: '',
				mediaPath: '',
				ddisplay: false,
				audioname: '在线收听语音解说'
			},
			xlimgList: [],
			nowbanner: 0,
			obeyMuteSwitch: true, //是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音
			scinfo: {},
			pjinfolists: {
				nums: 0,
				list: []
			} ,//评价信息
            ztitlewz:''
		};
	},
	onLoad(option) {
		this.id = option.uid;
		this.getDetail();
		this.getDatas_pj();
	},
	methods: {
		toOther(){
			uni.navigateToMiniProgram({
				appId:this.xllist.wxMiNiAppId,
				path:this.xllist.wxMiNiPath,
				envVersion:'release',
				extraData: {
				},
				success(res) {
					console.log("chenggong");
				},
				fail(e){
					console.log(e);
				}
			})
		},
		change(e) {
			this.details.ddisplay = !this.details.ddisplay;
			this.$forceUpdate();
		},
		getImg(url) {
			// return 'https://ys.tour-ma.com/r/cms/www/m/yushan/' + url;
			return 'https://cs.tour-ma.com/r/cms/www/m/yushan/' + url;
		},
		geturl(url) {
			return 'https://cs.tour-ma.com/' + url;
		},
		shoucan() {
			//收藏
			var url = 'center/collect_save.jspx';
			var isCollection = !this.scinfo.isCollection;
			var para = {
				uuid: this.scinfo.uuid,
				orderType: 1,
				isCollection: isCollection
			};
			var that = this;
			web.httpPost(that, url, para, function(res) {
				if (res.data.status == 200) {
					if (isCollection) {
						uni.showToast({
							title: '收藏成功'
						});
					} else {
						uni.showToast({
							title: '取消成功'
						});
					}
					setTimeout(function() {
						that.getdatas();
					}, 2000);
				}
			});
		},
		getImgs(paths) {
			let view = paths.toString();
			let addr = view.split(',');
			for (var i = 0; i < addr.length; i++) {
				addr[i] = 'https://changshu.tour-ma.com/' + addr[i];
			}
			uni.previewImage({
				urls: addr
			});
		},
		goAddress(latitude, longitude) {
			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude)
			});
		},
		navto(uid) {
			uni.navigateTo({
				url: '/pages/jqDet?uid=' + uid
			});
		},
		navtopj(id) {
			uni.navigateTo({
				url: '/other/pingjia/pingjia?waresId=' + id
			});
		},
		showdes() {
			if (this.xqnrdisplay == '-webkit-box') {
				this.showdesname = '收起';
				this.xqnrdisplay = 'block';
			} else if (this.xqnrdisplay == 'block') {
				this.showdesname = '阅读全文';
				this.xqnrdisplay = '-webkit-box';
			}
		},
		showxianlu() {
			if (this.desseldisplay == '-webkit-box') {
				this.desseldisplay = 'block';
			} else if (this.desseldisplay == 'block') {
				this.desseldisplay = '-webkit-box';
			}
		},
		async getDetail(){
			uni.showToast({
				title: '加载中...',
				icon:'loading',
				duration:20000
			});
			let type=await this.getdatas();
			uni.hideToast();
			this.isShow=type
		},
		getdatas() {
			return new Promise((resolve)=>{
				//获取数据
				var url = '/waresdetail.jspx';
				var para = {
					id: this.id
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						var tmp = res.data.data;
						that.xllist = tmp;
						that.xlimgList = [];
						for (var i = 0; i < that.xllist.imgList.length; i++) {
							that.xlimgList.push(that.xllist.imgList[i].bigImg);
						}
				        that.xllist.description=that.xllist.description.replace(/src="/g,'class="zzsdadfsad" src="https://ys.tour-ma.com')
				        if(that.xllist.typeid==1){
				            that.ztitlewz='酒店';
				        }else{
				            that.ztitlewz='景区';
				        }
						that.scinfo = tmp;
						that.details.mediaPath = tmp.mediaPath;
						that.details.logo = tmp.mediaPath;
						resolve(true)
					}
				});
			})
		},
		bannerind(e) {
			this.nowbanner = e.detail.current;
		},
		getDatas_pj(){
			var url = 'comment/appraise_list.jspx';
			var para = {
		        "pageNo":1,
		        "pageSize":1000,
		        "contentId":this.id,
		        "flag":0
		    };
			var that = this;
			web.httpPost(that, url, para, function(res) {
		        that.pjinfolists.list=res.data.data;
		        that.pjinfolists.nums=res.data.totalNumber;
			});
		},
		golists(){
			uni.navigateTo({
				url: '/pagesys/my/mypllist?plid='+this.id
			});
		},
	}
};
</script>

<style lang="scss">
	.yudingimg{
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		top: 570rpx;
		right: 50rpx;
		z-index: 999;
	}
    .zlidatatjtitleboxfq{
        
    }
    .lidatatjtitlebox{
        position: absolute;
        top: 0;
        left: 0;
        background:url('http://ys.tour-ma.com/r/cms/www/default/img/h5/wfqy-icon-mdzbg@2x.png') no-repeat ;
        background-size: 100%;
        width: 136rpx;
        height: 52rpx;
        text-align: center;
        line-height: 52rpx;
        color: #fff;
        font-size: 28upx;
    }
/* @import '../../components/css/animate.min.css'; */
.zzsdadfsad{
    width: 100%;
}
.fadeInLeft {
	animation-name: fadeInLeft;
}
.zxqnr2222 {
    img{
        width: 100%!important;
    }
}
@keyframes fadeInLeft {
	from {
		margin-left: -10upx;
		opacity: 0;
	}
	to {
		margin-left: 0upx;
		opacity: 1;
	}
}
.fadeInRight {
	animation-name: fadeInRight;
}
@keyframes fadeInRight {
	from {
		margin-left: -10upx;
		opacity: 0;
	}
	to {
		margin-left: 0upx;
		opacity: 1;
	}
}
.line {
	width: 100%;
	height: 20upx;
	background-color: #f2f4f7;
}
.content {
	overflow: scroll;
	width: 100%;
	width: 100%;
	position: relative;
	top: 0;
	left: 0;
	padding: 0;
}
// .bottominfo {
// 	position: fixed;
// 	bottom: 0;
// 	left: 0;
// 	width: calc(100% - 40upx);
// 	height: 100upx;
// 	z-index: 10;
// 	border-top: 1upx #eeeeee solid;
// 	background-color: #fff;
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// 	padding: 15upx 20upx;
// }
// .bottominfo .collection {
// 	display: flex;
// 	flex-direction: column;
// 	align-items: center;
// 	justify-content: space-between;
// }
// .bottominfo .collection image {
// 	width: 36upx;
// 	height: 36upx;
// }
// .bottominfo .collection .sctext {
// 	font-size: 27upx;
// 	color: #666666;
// }
// .bottominfo .comments {
// 	background: -webkit-gradient(linear, left top, right top, from(#ff540b), to(#ffa200));
// 	background: -webkit-linear-gradient(left, #ff540b 0%, #ffa200 100%);
// 	background: linear-gradient(90deg, #ff540b 0%, #ffa200 100%);
// 	-webkit-border-radius: 38upx;
// 	border-radius: 38upx;
// 	font-size: 34upx;
// 	color: #fff;
// 	padding: 10upx 50upx;
// }

.ban {
	position: absolute;
	top: 510upx;
	left: calc(50% - 50upx);
	width: 100upx;
	text-align: center;
	justify-content: center;
}
.collection{
	position: absolute;
	top: 20upx;
	right: 20upx;
	width: 66upx;
	height: 66upx;
	background-color: #f5f5f5;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	image{
		width: 36upx;
		height: 36upx;
	}
}
.jddtzsd {
	margin-top: 25upx;
	display: flex;
	flex: row;
	align-items: center;
}
.jddtzsd .isclick {
	width: 34upx;
	height: 4upx;
	background: #b3b3b3;
	border-radius: 2upx;
	margin: 0 5upx;
}
.jddtzsd .noclick {
	margin: 0 5upx;
	width: 16upx;
	height: 4upx;
	background: #d3d3d3;
	border-radius: 2upx;
}
.uni-padding-wrap,
.page-section,
.page-section-spacing,
.swiper {
	width: 100%;
	height: 100%;
}
.topImg {
	width: 100%;
	height: 600upx;
}
.topImg .img {
	width: 100%;
	height: 600upx;
}

.lx {
	width: 100%;
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 20upx 20upx 0upx 0upx;
	overflow: hidden;
	padding: 30upx 0upx 150upx 0upx;
	margin-top: -40rpx;
}

.top {
	width: 100%;
	height: 400upx;
	line-height: 400upx;
	text-align: center;
	color: rgba(255, 255, 255, 1);
}
.xqtile {
	color: #000;
	font-weight: 600;
	font-size: 38upx;
	line-height: 1.5;
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 30upx;
}
.xqtile .icon {
	width: 46upx;
	height: 46upx;
	margin-right: 20upx;
}

.xqnrbox {
	position: relative;
	padding: 0 30upx;
}
.xqnr,
.xqnr > p {
	color: #555450;
	font-size: 28upx;
	line-height: 2;
	margin: 40upx 0upx;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.xqnr > p  img{
	width: 100%;
}
.xqnrname {
	color: #555450;
	position: absolute;
	bottom: -40upx;
	right: 38upx;
	font-size: 28upx;
	background-color: #fff;
	font-weight: 600;
	width: 132rpx;
	text-align: right;
}
.xqnrname .text2 {
	color: #34a3f2;
}
.namebox {
	padding: 0 30upx 50upx 30upx;
}
.namebox .namelist {
	display: flex;
	align-items: center;
	font-size: 30upx;
	padding: 25upx 0;
	border-bottom: 1upx solid #f2f4f7;
}
.namebox .namelist:last-child {
	// border-top: 1upx solid #e3e3e3;
	// margin-top: 35upx;
}
.namelist .icon {
	width: 30upx;
	height: 30upx;
	margin-right: 20upx;
}
.namelist .dizhiicon {
	width: 70upx;
	height: 70upx;
	margin-left: 10%;
}
.namelist .name {
	color: #000000;
	width: 20%;
}
.namelist .namedes {
	color: #707070;
	width: 61%;
}
.namelist .namedesadd {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 50%;
}
.namelist2 .jiantouicon {
	width: 13upx;
	height: 22upx;
	margin-left: 67%;
	transform: rotate(90deg);
}
.namelist2 .jiantouicon.active {
	transform: rotate(-90deg);
}
.namelist2 .namelistline {
	display: flex;
	align-items: center;
	font-size: 30upx;
	padding: 25upx 0;
}
.namelist2 .icon {
	width: 30upx;
	height: 30upx;
	margin-right: 20upx;
}
.namelist2 .name {
	color: #000000;
	width: 20%;
}
.namelist2 .namedes {
	font-size: 30upx;
	color: #707070;
}
.namelist2 .namedessel {
	font-size: 30upx;
	color: #707070;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.titlename {
	display: flex;
	align-items: center;
	padding: 50upx 30upx 40upx 30upx;
}
.titlename .icon {
	width: 30upx;
	height: 36upx;
	margin-right: 20upx;
}
.titlename .name {
	font-size: 35upx;
	color: #000000;
}
.listdata {
	display: flex;
	overflow-x: auto;
	padding-bottom: 10upx;
	margin-bottom: 20upx;
}
.listdata .lidata {
	margin: 15upx 10upx 15upx 30upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	height: auto;
	position: relative;
	box-shadow: 0upx 0upx 15upx 6upx #ebeced;
	border-radius: 15upx;
}
.listdata .lidata .yuyiniconimg {
	position: absolute;
	top: 0upx;
	right: 0upx;
	width: 56upx;
	height: 52upx;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 0 15rpx;
}
.listdata .lidata .yuyiniconimg .img {
	width: 28upx;
	height: 26upx;
	margin: 13upx 0 0 14upx;
}
.listdata .lidata .lidataimg {
	width: 336upx;
	height: 213upx;
}
.ztxtxjgoudu{
        display: inline-block;
        /* margin-right: 10px; */
        width: 15px;
}
.ztxtxjms{
    width: 0px;
}
.ztxtbox{
    // display: flex;
    // flex-wrap: wrap;
    padding: 20upx 25upx;
    width: calc(100% - 50upx);
}
.ztxtxj{
    // float: left;
    // margin-left: 20upx;
    line-height: 19px;
     display: inline-block;
        font-size: 24upx;
        font-weight: 700;
        padding: 0px 6px;
        border-radius: 10px;
        color: #20af87;
        border: 1px solid #20af87;
    }
.listdata .lidata .txt {
	font-size: 30upx;
	padding: 20upx 25upx;
    max-width: 10upx;
	width: calc(100% - 50upx);
}
.listdata .lidata .ztxt {
    // float: left;
    line-height: 24px;
    display: inline-block;
	font-size: 30upx;
	// padding: 20upx 25upx;
	// width: calc(100% - 50upx);
}
.listdata .lidata .address {
	color: #808080;
	font-size: 28upx;
	padding: 0upx 25upx 30upx 25upx;
	width: calc(100% - 50upx);
}
.listdata .lidata .address::before {
	content: '';
	display: inline-block;
	width: 26upx;
	height: 26upx;
	background: url(https://ys.tour-ma.com/r/cms/www/m/yushan/ra-liebiao-icon-dizhi.png) no-repeat;
	background-size: 100% 100%;
	margin-right: 10upx;
}
.imgListbox .lidataimg {
	border-radius: 15upx;
}
.ctgListbox .lidataimg {
	border-radius: 15upx 15upx 0 0;
}
.vboxs{
	padding: 10upx 30upx;
	.nottitle{
	    font-size: 28upx;
	    color: #333333;
	}
	.vbbody{
		background: #F7F9FC;
		border-radius: 12upx;
		padding: 50upx 30upx;
		margin-bottom: 39upx;
		.user {
			margin-bottom: 50upx;
			&:last-child {
				margin-bottom: 0upx;
			}
			.nottitle {
				font-size: 28upx;
				color: #333333;
			}
			.utitle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 23upx;
				.utleft {
					display: flex;
					align-items: center;
					.uavatar {
						width: 64upx;
						height: 64upx;
						border-radius: 50%;
						background-color: rgba(154, 154, 154, 1);
						overflow: hidden;
						margin-right: 20upx;
						.uimg {
							width: 100%;
							height: 100%;
						}
					}
					.uname {
						.name {
							font-size: 28upx;
							color: #333333;
						}
						.upfnum {
							display: flex;
							align-items: center;
							.xingbg {
								background: url(https://ys.tour-ma.com/r/cms/www/m/yushan/ys-yhym-xingxing-hui.png) no-repeat;
								background-size: auto 100%;
								width: 120upx;
								height: 24upx;
								margin-right: 15upx;
								.xing {
									background: url(https://ys.tour-ma.com/r/cms/www/m/yushan/ys-yhym-xingxing-c.png) no-repeat;
									background-size: auto 100%;
									width: 120upx;
									height: 24upx;
								}
							}
							.xingname {
								font-size: 22upx;
								color: #ff7f00;
							}
						}
					}
				}
				.utime {
					font-size: 24upx;
					color: #999999;
				}
			}
			.udes {
				font-size: 26upx;
				color: #333333;
			}
		}
	}
	.vbbut{
		display: flex;
		align-items: center;
		font-size: 26upx;
		color: #343434;
		&::after{
			content: '';
			display: inline-block;
			border: solid rgba(102, 102, 102, 1);
			border-width: 0 1upx 1upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			margin-left: 20upx;
		}
	}
}
.pingjiaboxs{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 43upx;
	.pjicon{
		width: 34upx;
		height: 34upx;
		margin-right: 21upx;
	}
	.pjtitle{
		font-size: 26upx;
		color: #FA883D;
		&::after{
			content: '';
			display: inline-block;
			border: solid #FA883D;
			border-width: 0 1upx 1upx 0;
			padding: 6upx;
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			margin: 0 0 2upx 20upx;
		}
	}
}

</style>
