<template>
	<view class="container">
		<block>
			<swiper style="width: 750rpx;height:750rpx; " :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in detail.pics" :key="index">
					<view class="swiper-item" style="width: 750rpx;height:750rpx;">
						<image @click="preImg(detail.pics,index)" :src="item" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="pages-bd">
				<view class="info_box flex j-between al-item-center">
					<view class="left" @click.stop="goto" :data-url="'/diary/info/info?id='+detail.mid">
						<image :src="detail.headimg" mode=""></image>
						<text class="txt">{{detail.nickname||''}}</text>
					</view>
					<button type="default" v-if="info.isMy" class="right-d flex flex-colum al-item-center j-around" @tap="edSle(detail.id)" :style="{'background-color':'transparent'}">
						<text class="d1 border-rius-r"></text>
						<text class="d1 border-rius-r"></text>
						<text class="d1 border-rius-r"></text>
					</button>
					<view v-else class="right" :class="{'isfollow': info.isfollow}" @tap="Follow(info)">
						{{info.isfollow?'已关注':'关注'}}
					</view>
				</view>
				<view class="note-info">
					<view class="note-info__title">
						{{detail.title}}
					</view>
					<view class="note-info__txt" v-html="detail.content"></view>
				</view>
				<view class="topic-list flex">
					<view class="topic-list__item flex al-item-center" @tap="goto" :data-url="'/diary/topic/topic?id='+item.id"
						v-for="(item,index) in info.topicList" :key='index'>
						<view class="icon-box flex j-center al-item-center">
							<view class="icon">#</view>
						</view>
						<view class="item-name">{{item.topic_name}}</view>
					</view>
				</view>
				<view class="issue-time">{{detail.is_edit == 0 ? detail.showtime : '编辑于 ' + detail.showtime }}</view>
				<scroll-view class="shop-scroll" v-if="info.proList && info.proList.length > 0" scroll-x="true">
					<view class="shop-list flex">
						<view class="shop-list__item flex al-item-center"
							:class="info.proList && info.proList.length>1 ? (info.proList.length>2 ? 'amount-b': 'amount-a'): ''"
							@tap="toShopDetail(item)" v-for="(item,index) in info.proList" :key="index" >
							<image class="item-hd" :src="item.pic" mode=""></image>
							<view class="item-bd flex1 flex flex-colum j-between overflow-hd">
								<text class="item-bd__name text-overflow-tx">{{item.name}}</text>
								<text class="item-bd__price"><text class="symbol">￥</text>{{ item.sell_price}}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<!--评论-->
				<view class="comment-list">
					<view class="comment-list__hd"><text class="t1">精选评论</text><text style="color: #999;">(共{{plcount}}条)</text>
					</view>
					<view class="comment-list__bd" v-if="datalist.length" id="datalist">
						<block v-for="(item, idx) in datalist" :key="idx">
							<view class="comment-item flex">
								<view class="comment-item__hd">
									<image class="comment-item__hd-img" :src="item.headimg"></image>
								</view>
								<view class="comment-item__bd">
									<view class="comment-item__name">{{item.nickname}}</view>
									<view class="comment-item__txt" >
										<rich-text :nodes="item.content"></rich-text>
									</view>
									 <view class="comment-item__time">{{item.createtime}}</view>
									<block v-if="item.replylist && item.replylist.length > 0">
										<view class="comment-item__reply">
											<block v-for="(hfitem, index) in item.replylist" :key="index">
												<block v-if="index < 1 || item.plShow">
													<view class="reply-item flex">
														<image class="reply-item__hd" :src="hfitem.headimg" mode=""></image>
														<view class="reply-item__bd">
															<view class="reply-item__name">{{hfitem.nickname}}</view>
															<view class="reply-item__txt">
																<rich-text :nodes="hfitem.content"></rich-text>
															</view>
															<view class="reply-item__time">{{hfitem.createtime}}</view>
															<!-- <view class="reply-item__del" v-if="hfitem.mid==mid"
																@tap="delplreply" :data-id="hfitem.id">删除</view> -->
														</view>
													</view>
												</block>
											</block>
											
											<view @click="plShowFn(item)" class="plShow-txt" v-if="item.replylist.length >= 2 && !item.plShow">
												展开{{item.replylist.length-1}}条回复
											</view>
											<view @click="plShowFn(item)" class="plShow-txt" v-if="item.replylist.length >= 2 && item.plShow">
												收回
											</view>
										</view>
									</block>
									<view class="comment-item__more flex al-item-center j-between">
										<view class="more-reply flex">
											<text class="more-txt" style="cursor:pointer" @tap="goto"
												:data-url="'pinglun?type=1&id=' + detail.id + '&hfid=' + item.id">回复</text>
											<!-- <text  class="more-del" v-if="item.mid==mid" @tap="delpinglun" :data-id="item.id">删除</text> -->
										</view>
										<view class="more-praise flex al-item-center" @tap="pzan" :data-id="item.id" :data-index="idx">
											<image class="more-praise__img" :src="'https://dev.lansoft.shop/static/img/static/img/lt_like' + (item.iszan==1?'2':'') + '.png'"></image>
											{{item.zan}}
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					<view v-else style="text-align: center; color:#999;">
						快一起来评论吧!
					</view>
				</view>
				<view class="comment-add flex al-item-cent j-between">
					<view class="comment-add__inp" @tap="goto" :data-url="'pinglun?type=0&id=' + detail.id">
						<text class="iconfont icon-qianbi"></text>
						说点什么...
					</view>
					<view class="comment-add__info flex al-item-center">
						<view class="info-item flex al-item-center" open-type="share" @click="shareClick">
							<text class="iconfont icon-fenxiang"></text>
							<text class="info-txt">{{detail.share_num >= 10000 ? (detail.share_num / 10000).toFixed(1)+'万': detail.share_num}}</text>
						</view>
						
						
						<view class="info-item flex al-item-center" @tap="zan" :data-id="detail.id">
							<text class="iconfont" :style="{'color':iszan?'red':''}"
								:class="{'icon-aixin_shixin':iszan,'icon-aixin':!iszan}"></text>
							<text class="info-txt">{{detail.zan >= 10000 ? (detail.zan / 10000).toFixed(1)+'万': detail.zan}}</text>
						</view>
						<view class="info-item flex al-item-center" @click="favFn">
							<text :style="{'color':info.isfavorite?'#EC2828':''}"
								:class="{'icon-Collection':info.isfavorite,'icon-shoucang':!info.isfavorite}"
								class="iconfont"></text>
						
							<text class="info-txt">{{info.favoriteCount >= 10000 ? (info.favoriteCount / 10000).toFixed(1)+'万': info.favoriteCount}}</text>
						</view>
						<view class="info-item flex al-item-center" @tap="goto" :data-url="'pinglun?type=0&id=' + detail.id">
							<text class="iconfont icon-xiaoxi"></text>
							<text class="info-txt">{{plcount >= 10000 ? (plcount / 10000).toFixed(1)+'万': (plcount || 0)}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 分享 -->
		<view v-if="sharetypevisible" class="popup__container">
			<view class="popup__overlay" @tap.stop="handleClickMask"></view>
			<view class="popup__modal" style="height:320rpx;min-height:320rpx">
				<!-- <view class="popup__title">
					<text class="popup__title-text">请选择分享方式</text>
					<image :src="event_rul +'/static/img/static/img/close.png'" class="popup__close" style="width:36rpx;height:36rpx" @tap.stop="hidePstimeDialog"/>
				</view> -->
				<view class="popup__content">
					<image :src="event_rul +'/static/img/static/img/close.png'" class="popupshare__close2" @tap.stop="handleClickMask" />
					<view class="sharetypecontent">
						<view class="f1" @tap="shareapp" v-if="getplatform() == 'app'">
							<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
							<text class="t1">分享给好友</text>
						</view>
						<view class="f1" @tap="sharemp" v-else-if="getplatform() == 'mp'">
							<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
							<text class="t1">分享给好友</text>
						</view>
						<view class="f1" @tap="sharemp" v-else-if="getplatform() == 'h5'">
							<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
							<text class="t1">分享给好友</text>
						</view>
						<button class="f1" open-type="share" v-else  @tap="sharMust">
							<image class="img" :src="event_rul +'/static/img/static/img/weixin.png'" />
							<text class="t1">分享给好友</text>
						</button>
						<view class="f2" @tap="showPoster">
							<image class="img" :src="event_rul +'/static/img/static/img/sharepic.png'" />
							<text class="t1">生成分享图片</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="posterDialog" v-if="showposter" @touchmove.stop.prevent="moveHandle">
			<view class="main">
				<view class="close" @tap="posterDialogClose">
					<image class="img" :src="event_rul +'/static/img/static/img/close.png'" />
				</view>
				<view class="content">
					<image class="img" :src="posterpic" mode="widthFix" @tap="previewImage"
						:data-url="posterpic"></image>
				</view>
			</view>
		</view>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
		
		<view class="hitn-n position-f" v-show="hintShow">
			<view class="hint-bx position-a">
				<image class="hint-img" :src="event_rul + '/static/images/hint-n.png'" mode="widthFix"></image>
				<view class="content position-a  flex flex-colum al-item-center">
					<text class="title font-w">温馨提示</text>
					<text class="text">该笔记已删除！</text>
				</view>
			</view>
		</view>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				plcount: 0,
				info: {},
				opt: {},
				loading: false,
				pre_url: app.globalData.pre_url,
				isload: false,
				menuindex: -1,

				detail: {},
				datalist: [],
				pagenum: 1,
				id: 0,
				nomore: false,
				iszan: "",
				title: "",
				sharepic: "",
				
				sharetypevisible: false,
				showposter: false,
				posterpic: "",
				product: [],
				event_rul: app.globalData.event_url,
				timeouts: null,
				
				hintShow:false,
				hintTime: null,
			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.id = this.opt.id || 0;
			this.getdata();
		},
		onShareAppMessage: function() {
			return this._sharewx({
				title: this.detail.title,
				pic: this.detail.pics[0]
			});
		},
		onShareTimeline: function() {
			var sharewxdata = this._sharewx({
				title: this.detail.title,
				pic: this.detail.pics[0]
			});
			var query = (sharewxdata.path).split('?')[1];
			console.log(sharewxdata)
			console.log(query)
			return {
				title: sharewxdata.title,
				imageUrl: sharewxdata.imageUrl,
				query: query
			}
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		onUnload() {
			clearTimeout(this.timeouts)
			clearTimeout(this.hintTime)
		},
		methods: {
			// 跳转商品详情
			toShopDetail(data) {
				if(data.sign == 0) {
					app.goto('/pages/shop/product?id='+data.id)
				}else {
					uni.navigateToMiniProgram({
					  appId: data.appid,
					  path: data.path + '?id=' + data.id,
					  success: res => {
					    // 打开成功
					  }
					})
				}
				
			},
			// 编辑、删除
			edSle(id) {
				uni.showActionSheet({
					itemList: ['编辑笔记', '删除笔记'],
					success: res => {
						if(res.tapIndex == 0) {
							this.editData(id)
						}else {
							this.delDrafts(id)
						}
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮', id);
					},
					fail: function (res) {
						// console.log(res.errMsg);
					}
				});
			},
			// 编辑笔记
			editData(id) {
				let url = 'ApiLuntan/detail'
				let dataurl = '/diary/issue/issue?type=note'
		
				app.post(url, {
					id: id,
					// isdraft: 1
				}, res => {
					if(res.status == 1) {
						uni.navigateTo({
							url:dataurl+'&editId='+ id + '&detail='+JSON.stringify(res.detail) + '&recordlist=' + JSON.stringify(res.proList)
						})
					}else {
						app.error(res.msg)
					}
			
				})
			},
			// 删除笔记
			delDrafts(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除该笔记吗?',
					confirmColor: this.t('color1'),
					success:  (res) => {
						if (res.confirm) {
							app.get('ApiLuntan/deltie',{id:id},(res)=>{
								if(res.status == 1) {
									app.error(res.msg)
									this.timeouts = setTimeout(() => {
										uni.navigateBack()
									}, 1200)
									
								}else {
									app.error(res.msg)
								}
							})
						} else if (res.cancel) {
							
						}
					}
				});
			
			
			},
			//  阻止滑动
			moveHandle(){
					return true
			},
			sharemp: function() {
				app.error('点击右上角发送给好友或分享到朋友圈');
				this.sharetypevisible = false
			},
			shareapp: function() {
				var that = this;
				that.sharetypevisible = false;
				uni.showActionSheet({
					itemList: ['发送给微信好友', '分享到微信朋友圈'],
					success: function(res) {
						if (res.tapIndex >= 0) {
							var scene = 'WXSceneSession';
							if (res.tapIndex == 1) {
								scene = 'WXSenceTimeline';
							}
							var sharedata = {};
							sharedata.provider = 'weixin';
							sharedata.type = 0;
							sharedata.scene = scene;
							sharedata.title = that.detail.title;
							// sharedata.summary = that.detail.sharedesc || that.detail.sellpoint;
							sharedata.href = app.globalData.pre_url + '/h5/' + app.globalData.aid +
								'.html#/pages/shop/product?scene=id_' + that.detail.id + '-pid_' + app
								.globalData.mid;
							sharedata.imageUrl = that.detail.pic[0];
							var sharelist = app.globalData.initdata.sharelist;
							if (sharelist) {
								for (var i = 0; i < sharelist.length; i++) {
									if (sharelist[i]['indexurl'] == '/pages/shop/product') {
										sharedata.title = sharelist[i].title;
										sharedata.summary = sharelist[i].desc;
										sharedata.imageUrl = sharelist[i].pic;
										if (sharelist[i].url) {
											var sharelink = sharelist[i].url;
											if (sharelink.indexOf('/') === 0) {
												sharelink = app.globalData.pre_url + '/h5/' + app
													.globalData.aid + '.html#' + sharelink;
											}
											if (app.globalData.mid > 0) {
												sharelink += (sharelink.indexOf('?') === -1 ? '?' : '&') +
													'pid=' + app.globalData.mid;
											}
											sharedata.href = sharelink;
										}
									}
								}
							}
							uni.share(sharedata);
						}
					}
				});
			},
			// 关闭分享
			handleClickMask() {
				this.sharetypevisible = false
			},
			shareClick: function() {
				this.sharetypevisible = true;
			},
			posterDialogClose: function() {
				this.showposter = false;
			},
			// 分享必调的接口
			sharMust() {
				app.post('ApiShortvideo/shareNum', {
					type: this.opt.type,
					id: this.detail.id
				}, res => {
				})
			},
			showPoster: function() {
				var that = this;
				that.showposter = true;
				that.sharetypevisible = false;
				app.showLoading('生成海报中');
				app.post('ApiShortvideo/getposter', {
					proid: that.detail.id
				}, function(data) {
					app.showLoading(false);
					if (data.status == 0) {
						app.alert(data.msg);
					} else {
						that.posterpic = data.poster;
					}
				});
			},
			preImg(arr,index){
				uni.previewImage({urls:arr,current:index})
			},
			plShowFn(item){
				item.plShow = !item.plShow
			},
			favFn() {
				app.post('ApiShop/addfavorite', {
					proid: this.info.detail.id,
					type: 'note'
				}, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.msg == '已收藏') {
						this.info.isfavorite = 1
						this.info.favoriteCount++

					} else {
						this.info.isfavorite = 0
						this.info.favoriteCount--
					}
				})
			},
			Follow(item) {
				app.post('ApiMy/addFollow', {
					follow_id: item.detail.mid,
					type: 'user'
				}, (res) => {
					// this.info = res.data
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.msg == '已关注') {
						item.isfollow = 1

					} else {
						item.isfollow = 0
					}
				})
			},
			getdata: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				app.post('ApiLuntan/detail', {
					pagenum: pagenum,
					id: that.id
				}, function(res) {
					that.loading = false;
					if(res.datalist) {
						res.datalist.forEach((item,index)=>{
							item.plShow = false;
						})
					}

					var data = res.datalist;
					that.info = res;
					if (pagenum == 1) {
						if(that.info.status == 1 && that.info.detail.is_del == 1) {
							that.hintShow = true
							that.hintTime = setTimeout(() => {
								that.hintShow = false
								uni.navigateBack()
							}, 2000)
							return
						}
						that.mid = res.mid;
						that.datalist = res.datalist;
						that.plcount = res.plcount;
						that.iszan = res.iszan;
						that.detail = res.detail;
						that.myscore = res.myscore;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded({
							title: res.detail.content,
							pic: res.detail.pics[0]
						});
							console.log("ccccccc",that.datalist)
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},
			zan: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.post("ApiLuntan/zan", {
					id: id
				}, function(res) {
					if (res.type == 0) {
						//取消点赞
						var iszan = 0;
					} else {
						var iszan = 1;
					}
					that.iszan = iszan;
					that.detail.zan = res.zancount;
				});
			},
			pzan: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				var datalist = that.datalist;
				app.post("ApiLuntan/pzan", {
					id: id
				}, function(res) {
					if (res.type == 0) {
						//取消点赞
						var iszan = 0;
					} else {
						var iszan = 1;
					}
					datalist[index].iszan = iszan;
					datalist[index].zan = res.zancount;
					that.datalist = datalist;
				});
			},
			showpinglun: function() {},
			deltie: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/deltie", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					});
				});
			},
			delpinglun: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/delpinglun", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							that.onLoad();
						}, 1000);
					});
				});
			},
			delplreply: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/delplreply", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							that.onLoad();
						}, 1000);
					});
				});
			}
		}
	};
</script>
<style lang="scss">
.container {
	background: #FFFFFF;
	padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}
.pages-bd {
	padding: 0 32rpx;
}
	.topic-list {
		flex-wrap: wrap;
		margin-bottom: 10rpx;
		&__item {
			background: #F6F6F6;
			border-radius: 4rpx;
			font-size: 32rpx;
			padding: 8rpx;
			margin: 0 20rpx 10rpx 0;
			.icon-box {
				flex-shrink: 0;
				background: radial-gradient(#dcf5eb,#e9fdf6);
				border-radius: 50%;
				width: 34rpx;
				height: 34rpx;
				margin-right: 8rpx;
			}
			.icon{
				font-size: 26rpx;
				color: #0A5D3B;
			}
			.item-name {
				font-size: 24rpx;
				font-weight: bold;
				color: #666666;
				line-height: 34rpx;
			}
		}
	}
	.issue-time {
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
	}
	.shop-scroll {
		padding-top: 86rpx;
		position: relative;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: 48rpx;
			border-top: 1rpx solid #EBEBEB;
		}
	}
	.shop-list {
		white-space: nowrap;
		& ::-webkit-scrollbar {
			display: none;
		}
		&__item {
			width: 100%;
			flex-shrink: 0;
			box-sizing: border-box;
			background: rgba($color: #000000, $alpha: 0.02);
			border-radius: 4rpx;
			overflow: hidden;
			padding-right: 8rpx;
			&.amount-a {
				flex: 1;
			}
			&.amount-b {
				width: 296rpx;
			}
			&:not(:last-child) {
				margin-right: 20rpx;
			}
			.item-hd {
				width: 88rpx;
				height: 88rpx;
				flex-shrink: 0;
				margin-right: 16rpx;
			}
			.item-bd {
				flex: 1;
				padding-top: 8rpx;
				&__name {
					font-size: 24rpx;
					color: #333333;
					line-height: 34rpx;
				}
				&__price {
					margin-top: 4rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #ED5925;
					line-height: 40rpx;
					.symbol {
						font-size: 22rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.note-info {
		padding-bottom: 20rpx;
		color: #333333;
		&__title {
			font-weight: bold;
			line-height: 44rpx;
			font-size: 32rpx;
			margin-bottom: 26rpx;
		}
		&__txt {
			font-size: 32rpx;
			line-height: 50rpx;
		}
	}

	.info_box {
		padding: 28rpx 0;

		.left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bpld;
			color: #333333;
			line-height: 40rpx;
			image {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50rpx;
				margin-right: 16rpx;

			}
		}
		.right-d {
			width: 36rpx;
			height: 30rpx;
			// padding: 10rpx;
			margin: 0;
			// border-radius: 80rpx;
			.d1 {
				width: 100%;
				height: 2rpx;
				background-color: #999999;
			}
		}

		.right {
			width: 120rpx;
			height: 52rpx;
			background: linear-gradient(to right,#00AE68 0%,#096742 100%);
			border-radius: 26rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
			&.isfollow {
				background: none;
				color: #0A5D3B;
					position: relative;
					&::before {
						content: "";
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						border: 1px solid #0A5D3B;
						border-radius: 26rpx;
					}
			}
		}
	}
	
	.comment-list {
		margin-top: 56rpx;
		&__hd {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			margin-bottom: 24rpx;
		}
	}
	.comment-item {
		&:not(:first-child) {
			padding-top: 60rpx;
			position: relative;
			&::before {
				content: "";
				position: absolute;
				border-top: 1rpx solid #EBEBEB;
				top: 32rpx;
				right: -32rpx;
				left: 90rpx;
				transform: scaleY(0.5);
			}
		}
		&__hd {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
			margin-right: 22rpx;
			&-img {
				width: 100%;
				height: 100%;
			}
		}
		&__bd {
			flex: 1;
		}
		&__name {
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
		}
		&__txt {
			margin-top: 4rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
		&__time {
			font-size: 22rpx;
			color: #999999;
			line-height: 32rpx;
		}
		.reply-item {
			margin-bottom: 20rpx;
			&__hd {
				flex-shrink: 0;
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			&__bd {
				flex: 1;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			&__name {
				color: #999999;
				margin-bottom: 4rpx;
			}
			&__txt {
				color: #333333;
				word-break: break-word;
			}
			&__time {
				font-size: 22rpx;
				color: #999999;
				line-height: 32rpx;
			}
			&__del {
				font-size: 20rpx;
				color: #0A5D3B;
				cursor: pointer;
			}
		}
		&__more {
			margin-top: 12rpx;
			.more-reply {
				color: #0A5D3B;
				font-size: 24rpx
			}
			.more-txt,.more-del {
				cursor: pointer;
			}
			.more-del {
				margin-left: 20rpx;
			}
			.more-praise {
				color: #333333;
				&__img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 16rpx
				}
			}
		}
		.plShow-txt {
			font-size: 28rpx;
			font-weight: bold;
			color: #0A5D3B;
			line-height: 40rpx;
			margin-top: -4rpx;
		}
	}
	.comment-add {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 24rpx;		
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		&__inp {
			background: #F6F6F6;
			flex: 1;
			min-width: 240rpx;
			height: 68rpx;
			border-radius: 34rpx;
			padding: 14rpx 24rpx;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
			flex-shrink: 0;
			.icon-qianbi {
				font-size: 30rpx;
				flex-shrink: 0;
				margin-right: 12rpx;
			}
		}
		&__info {
			flex: 1;
			justify-content: flex-end;
			.info-item {
				margin-left: 16rpx;
				.iconfont {
					font-size: 40rpx;
					&.icon-fenxiang {
						font-size: 34rpx;
					}
				}
			}
			.info-txt {
				margin-left: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
				line-height: 34rpx;
			}
		}
	}

	// 分享弹框
	.sharetypecontent {
		border-radius: 20rpx;
		height: 250rpx;
		width: 710rpx;
		margin: 20rpx;
		display: flex;
		padding: 50rpx;
		align-items: flex-end
	}
	
	.sharetypecontent .f1 {
		color: #51c332;
		width: 50%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		font-size: 28rpx;
		border: 0
	}
	
	.sharetypecontent button::after {
		border: 0
	}
	
	.sharetypecontent .f1 .img {
		width: 90rpx;
		height: 90rpx
	}
	
	.sharetypecontent .f2 {
		color: #51c332;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center
	}
	
	.sharetypecontent .f2 .img {
		width: 90rpx;
		height: 90rpx
	}
	
	.sharetypecontent .t1 {
		height: 60rpx;
		line-height: 60rpx;
		color: #666
	}
	.popup__container {
		border-radius: 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		z-index: 1000;
		background: #fff
	}
	.popupshare__close2 {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 1000;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
	}
	.popup__overlay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 11;
		opacity: 0.3;
		background: #000
	}
	
	.popup__modal {
		width: 100%;
		position: absolute;
		bottom: 0;
		color: #3d4145;
		overflow-x: hidden;
		overflow-y: hidden;
		opacity: 1;
		padding-bottom: 20rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 12;
		min-height: 600rpx;
		max-height: 1000rpx;
	}
	
	.popup__title {
		text-align: center;
		padding: 30rpx;
		position: relative;
		position: relative
	}
	
	.popup__title-text {
		font-size: 32rpx
	}
	
	.popup__close {
		position: absolute;
		top: 34rpx;
		right: 34rpx
	}
	
	.popup__content {
		width: 100%;
		max-height: 880rpx;
		overflow-y: scroll;
		padding: 20rpx 0;
	}
	
	.posterDialog {
		// border-radius: 20rpx;
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		top: var(--window-top);
		left: 0
	}

	.posterDialog .main {
		width: 80%;
		margin: 60rpx 10% 30rpx 10%;
		background: #fff;
		position: relative;
		border-radius: 20rpx
	}

	.posterDialog .close {
		position: absolute;
		padding: 20rpx;
		top: 0;
		right: 0
	}

	.posterDialog .close .img {
		width: 40rpx;
		height: 40rpx;
	}

	.posterDialog .content {
		width: 100%;
		padding: 70rpx 20rpx 30rpx 20rpx;
		color: #333;
		font-size: 30rpx;
		text-align: center
	}

	.posterDialog .content .img {
		width: 540rpx;
		height: 960rpx
	}
	
	// 提示弹框
	.hitn-n {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: #7F7F7F;
		z-index: 996;
		.hint-bx {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 6;
			.hint-img {
				width: 600rpx;
			}
			
			.content {
				width: 100%;
				top: 180rpx;
				left: 0;
				.title {
					font-size: 36rpx;
				}
				
				.text {
					margin-top: 40rpx;
					color: #666;
				}
			}
		}
	}
</style>
