tjqPhone/pages/short_video/nvueSwiper/index.nvue

<template>
	<view class="shortVideo">
		<!--  
		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
		 
		1. new_index.nvue、index.nvue这两个是App页面
		 
		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
		 
		3. 请各位大神多多留手，我已经把请求内存开到最大了
		 
		4. 视频 id 切记是字符串类型  
		 -->
		<!-- 头部导航 -->
		<view class="header">
		 	<view class="items" @click.stop="navTap(2)">
				<text class="tName">推荐</text>
				<view class="tLine" v-if="currentNav==2"></view>
			</view>
		 	<view class="items" @click.stop="navTap(1)">
				<text class="tName">最新</text>
				<view class="tLine" v-if="currentNav==1"></view>
			</view>
		</view> 
		<image v-if="isShowAixin" src="../static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image>
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="k" :indicator-dots="false">
			<swiper-item v-for="(list,index) in dataList">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video
						:id="list.id+''+index"
						:loop="true"
						:muted="list.isplay"
						:controls="false"
						:http-cache="true"
						:page-gesture="false"
						:show-fullscreen-btn="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						:src="list.video_url"
						@ended="ended"
						@click="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
						:poster="list.video_url+'?x-oss-process=video/snapshot,t_100,f_jpg'"
						></video>
						<!-- 
						1.这里是封面（方案二）：这里的封面可以自定义。
						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
						-->
						<image
						v-if="!list.playIng"
						:src="list.video_url+'?x-oss-process=video/snapshot,t_100,f_jpg'"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'"
						mode="aspectFit"
						></image>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover" @click="tapVideoHover(list.state,$event)" @touchstart="touchstartHover" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
						<image v-if="list.state=='pause'" class="playState" src="../static/img/index/play.png"></image>
					</view>
					<view class="userInfo">
						<!-- 1.头像 -->
						<view class="pictrue">
							<image @click="tozuozhe" class="userAvatar" :style="list.is_live?'border-width:0':''" :src="list.type_image" mode="aspectFill"></image>
							<!-- #ifdef MP -->
							<view class="live" v-if="list.is_live" @click="goLive"></view>
							<!-- #endif -->
						</view>
						<!-- 2.点赞 -->
						<view @click="cLike(list);" style="opacity: 0.9;margin-top: 5px;">
							<image v-if="list.is_like" src="../static/img/index/xin.png" style="width: 29px; height: 29px; position: absolute; right: 8px;"></image>
							<image v-if="!list.is_like" src="../static/img/index/xin-2.png" style="width: 29px; height: 29px; position: absolute; right: 8px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 12px; text-align: center; margin-top: 32px; font-weight: 400;" :class="{'likeNumActive':list.is_like}">{{list.like_num}}</text>
						</view>
						<!-- 3.评论 -->
						<view class="comment" @click="toComment(list)" style="opacity: 0.9; margin-top: 18px;">
							<image src="../static/img/index/evaluate.png" style="width: 54rpx; height: 50rpx; position: absolute; right: 10px;"></image>
							<text style="color: #FFFFFF; font-size: 12px; font-weight: 400; text-align: center; margin-top: 29px;">{{list.comment_num}}</text>
						</view>
						<!-- 收藏 -->
						<view @click="cCollect(list)" style="opacity: 0.9; margin-top: 18px;">
							<image v-if="list.is_collect" src="../static/img/index/collection02.png" style="width: 29px; height: 29px; position: absolute; right: 8px;"></image>
							<image v-if="!list.is_collect" src="../static/img/index/collection01.png" style="width: 29px; height: 29px; position: absolute; right: 8px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 12px; text-align: center; margin-top: 36px; font-weight: 400;" :class="{'likeNumActive':list.is_collect}">{{list.collect_num}}</text>
						</view>
						<!-- 4.分享 -->
						<!-- #ifdef H5 -->
						<view @click="share" style="opacity: 0.9; margin-top: 17px;" v-if="$wechat.isWeixin()">
							<image src="../static/img/index/we-chat.png" style="width: 62rpx; height: 48rpx; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 12px; text-align: center; margin-top: 30px;">分享</text>
						</view>
						<view class="copy-data" :data-clipboard-text="imgHost+'/pages/short_video/nvueSwiper/index'" style="opacity: 0.9; margin-top: 17px;" v-else>
							<image src="../static/img/index/we-chat.png" style="width: 62rpx; height: 48rpx; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 12px; text-align: center; margin-top: 30px;">分享</text>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<button open-type="share" hover-class="none" style="margin-top: 17px;background-color: transparent;position: relative;height: 85rpx;">
							<image src="../static/img/index/we-chat.png" style="width: 62rpx; height: 48rpx; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; font-size: 12px; text-align: center;position: absolute;top:52rpx;right: 24rpx;">分享</text>
						</button>
						<!-- <button class="item" open-type="share" hover-class="none">
							<view class="pictrue">
								<image src="../../static/images/weixin.png"></image>
							</view>
							<view class="">分享给好友</view>
						</button> -->
						<!-- #endif -->
					</view>
					<!-- 最底下的文字部分 -->
					<view class="content">
						<view class="cart" @click="goCart(list)" v-if="list.product_num>0">
							<image class="cartPic" src="../static/img/index/shopping-car.png"></image>
							<text class="cartName">购物</text>
							<text class="line"></text>
							<text class="cartName">视频款请点击这里购买</text>
						</view>
						<view class="timeCon" :style="'width: '+ (windowWidth - 90) +'px;'">
							<text class="userName">{{list.type_name}}</text>
							<text class="time">.{{list.date}}</text>
						</view>
						<view class="words" :style="'width: '+ (windowWidth - 120) +'px;'">
							<view v-if="list.isMore || list.desc.length<=29">
								 <text class="info">{{list.desc}}</text>
								 <view class="close">
									 <text v-if="list.isMore" class="more" @click="moreTap(list)">收起</text>
									 <image v-if="list.isMore" class="imgClose" src="../static/img/index/drop-down.png"></image>
								 </view>
							</view>
							<view class="wordsCon" v-else>
								<text class="info">{{list.desc.slice(0,29)}}...</text>
								<text class="more" @click="moreTap(list)">更多</text>
								<image class="img" src="../static/img/index/drop-down.png"></image>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
			<view :style="'width: '+ windowWidth +'px;background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
				<!-- 
				 注意：
				 deleteIOSHeight
				 deleteAndroidHeight
				 这两个参数用于控制评论等的高度
				 -->
				<douyin-scrollview
				ref="comments"
				:Width="windowWidth"
				:Height="(boxStyle.height/1.23)"
				:deleteIOSHeight="36"
				:deleteAndroidHeight="15"
				:pinlunNum="pinlunNum"
				:videoID="videoID"
				@closeScrollview="closeScrollview"
				@pinlunFun="pinlunFun"
				></douyin-scrollview>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="pinglunGoods" @touchmove.stop.prevent="moveHandle">
			<view :style="'width: '+ windowWidth +'px; background-color: #F5F5F5; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
				<goodsList
				ref="goodsLists"
				:Width="windowWidth"
				:Height="(boxStyle.height/1.18)"
				></goodsList>
			</view>
		</uni-popup>
		<image v-if="H5ShareBox" class="shareImg" :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
	</view>
</template>

<script>
	const app = getApp();
	// import userList from '../new_index/data.js'//这个是假数据
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	/*
	引入评论组件
	*/ 
	import douyinScrollview from '../components/douyin-scrollview/douyin-scrollview.vue'
	import goodsList from '../components/goodsList/index.vue'
	import { HTTP_REQUEST_URL } from '@/config/app';
	import {
		videoList,
		markeVideo
	} from '@/api/short-video.js';
	import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	export default {
		components:{
			douyinScrollview,
			goodsList
		},
		computed: mapGetters(['isLogin','uid']),
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				videoID:0,
				pinlunNum:0,
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle:{//视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				// 引入评论 - 参数
				heightNum: 1.3,
				// 双击点赞参数
				touchNum: 0,
				aixinLeft: 0,
				aixinTop: 0,
				isShowAixin: false,
				Rotate: 0,
				currentNav:1,
				limit: 3,
				page: 1,
				oldCurrent: 1,
				H5ShareBox: false
			}
		},
		watch:{
			currentNav(news,old){
				this.oldCurrent = old;
			},
			k(k,old_k){
					if(this.oldCurrent != this.currentNav){
						this.oldCurrent = this.currentNav
						return false
					}
					this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
					this.dataList[old_k].isplay = true
					this.dataList[old_k].state = 'pause'
					console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].id+''+old_k)
					// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
					uni.createVideoContext(this.dataList[old_k].id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
					console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
					this.dataList[k].state = 'play'
					setTimeout(()=>{
						uni.createVideoContext(this.dataList[k].id+''+k,this).play()
						setTimeout(()=>{
							this.dataList[k].isplay = false
							this.dataList[k].playIng = true
						},50)
					},250)
					var p = k+1;
					// console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].id+''+p)
			}
		},
		onLoad(options) {
			this.getOptions(options);
			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
				this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
			this.get() //刚进入页面加载数据
			// #ifdef H5
			this.setOpenShare();
			// #endif
		},
		onShow(){
			if(this.dataList.length !== 0){
				this.dataList[this.k].state = 'play';
				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
			}
		},
		onHide(){
			this.dataList[this.k].state = 'pause';//界面隐藏也要停止播放视频
			uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
			console.log('到后台');
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS(".copy-data");
				clipboard.on("success", () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
		},
		// #ifdef MP
		onShareAppMessage: function() {
		  let uid = this.uid?this.uid:0;
			let data = this.dataList[0];
			return {
				title: data.type_name || '',
				imageUrl: data.image || '',
				path: '/pages/short_video/nvueSwiper/index?pid='+uid
			};
		},
		// #endif
		methods: {
			pinlunFun(e){
				this.pinlunNum = e;
				this.dataList.forEach(item=>{
					if(item.id == this.videoID){
						item.comment_num = e;
					}
				})
			},
			goLive(){
				uni.navigateTo({
					url: `/pages/columnGoods/live_list/index`
				});
			},
			getOptions(options){
				let that = this;
				// #ifdef MP
				if (options.scene) {
					let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
					//记录推广人uid
					if (value.pid) app.globalData.spid = value.pid;
				}
				// #endif
				if (options.pid) app.globalData.spid = options.pid;
			},
			// #ifdef H5
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				let uid = this.uid?this.uid:0;
				if (that.$wechat.isWeixin()) {
					let data = this.dataList[0];
					let configAppMessage = {
						desc: data.desc,
						title: data.type_name,
						link: location.href+'?pid='+uid,
						imgUrl: data.image
					};
					that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData',
							'onMenuShareAppMessage', 'onMenuShareTimeline'
						],
						configAppMessage);
				}
			},
			// #endif
			goCart(item){
				if (this.isLogin === false) {
					return toLogin();
				} 
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				// #ifdef H5
				uni.setStorageSync("videoID",parseInt(item.id));
				// #endif
				// #ifdef MP
				this.$refs.goodsLists.productList(item.id,1);
				// #endif
				this.$refs.pinglunGoods.open('bottom')
			},
			navTap(n){
				this.currentNav = n;
				this.timeout = "";
				this.k = 0;
				this.page = 1;
				this.dataList = [];
				this.get();
			},
			moreTap(item){
				item.isMore = !item.isMore;
			},
			moveHandle(){},
			closeScrollview(){
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close();
			},
			toComment(item){
				// 注意点击评论之后会执行这里
				/*
				（1）先加载缓冲
				（2）获取当前视频 ID 信息
				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
					- 一定要记得看 index.vue 里面
					 uni.setStorageSync("user",this.peopleList[i]);
					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
					 记得写一下。
					 
				（4）打开评论
				*/ 
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				this.pinlunNum = item.comment_num;
				// #ifdef H5
				this.videoID = parseInt(item.id);
				// #endif
				// #ifdef MP
				this.$refs.comments.getnewpinlun(item.id,1);
				// #endif
				this.$refs.pinglun.open('bottom')
			},
			ended(){
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			// 双击点赞效果
			touchstartHover(event){
				if(this.touchNum >= 1){
					// console.log('双击 -- X坐标：'+ event.touches[0].screenX);
					// console.log('双击 -- Y坐标：'+ event.touches[0].screenY);
					this.aixinLeft = event.touches[0].screenX - 50;
					this.aixinTop =  event.touches[0].screenY - 50;
					this.isShowAixin = true;
					let max = 40; let min = -40;
					this.Rotate = Math.floor(Math.random() * (max - min + 1)) + min;
					setTimeout(()=>{
						this.isShowAixin = false;
					},700)
				}
			},
			//点击播放&&暂停
			tapVideoHover(state,event){
				this.dataList[this.k].isShowimage = false
				this.dataList[this.k].isShowProgressBarTime = false
				this.ProgressBarOpacity = 0.5
				this.dotWidth = 0
				console.log('state--',state);
				// 1.启用双击点赞 --- start
				this.touchNum++;
				setTimeout(()=>{
					if(this.touchNum == 1){
						if(state=='play'||state=='continue'){
							this.dataList[this.k].state = 'pause';
						}else{
							this.dataList[this.k].state = 'continue';
						}
						if(this.dataList[this.k].state == 'continue'){
							uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
						}
						if(this.dataList[this.k].state == 'pause'){
							uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
						}
					}
					if(this.touchNum >= 2){
						this.doubleLike();
					}
					this.touchNum = 0;
				},200)
				// --------------- ending
				// 2. 不启用双击点赞 start
				// if(state=='play'||state=='continue'){
				// 	this.dataList[this.k].state = 'pause';
				// }else{
				// 	this.dataList[this.k].state = 'continue';
				// }
				// if(this.dataList[this.k].state == 'continue'){
				// 	uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
				// }
				// if(this.dataList[this.k].state == 'pause'){
				// 	uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
				// }
				// --------------- ending
			},
			doubleLike(){
				if(this.dataList[this.k].is_like == false){
					this.dataList[this.k].like_num += 1;
					this.dataList[this.k].is_like = true;
				}
				/*
				点赞
				*/
			},
			change(event){
				console.log('eeeee',event.detail.current);
				this.k = event.detail.current
			},
			animationfinish(event){
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if(this.k == this.dataList.length - 1){
					this.GET()
				}
			},
			//每一组结束时新的请求
			GET(){
				videoList({
						page: this.page,
						limit: this.limit,
						order_type: this.currentNav
					}).then(res=>{
					this.page = this.page + 1;
					var msg = res.data
					// 2.这里把视频添加到视频列表
					for (let i = 0; i < msg.length; i++) {
						this.dataList.push(msg[i])
					}
				}).catch(err=>{
					return uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
				})
			},
			get(){
				// 1.这里引入后端请求数据
				videoList({
						page: this.page,
						limit: this.limit,
						order_type: this.currentNav
					}).then(res=>{
					this.page = this.page + 1;	
					var msg = res.data
					// 2.这里把视频添加到视频列表
					for (let i = 0; i < msg.length; i++) {
						this.dataList.push(msg[i])
					}
					// 3.播放当前视频
					setTimeout(()=>{
						this.dataList[this.k].isplay = false
						this.dataList[this.k].state = 'play'
						// uni.createVideoContext(this.dataList[0].id,this).seek(0)
						// uni.createVideoContext(this.dataList[0].id,this).play()
						uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
						uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
						this.dataList[this.k].playIng = true
					},200)
					// start - 预加载开始
					var p = this.k
					++p
					setTimeout(()=>{
						uni.createVideoContext(this.dataList[p].id+''+p,this).play()
					},20)
					clearTimeout(this.timeout)
					this.timeout = setTimeout(()=>{
						uni.createVideoContext(this.dataList[p].id+''+p,this).seek(0)
						uni.createVideoContext(this.dataList[p].id+''+p,this).pause()
						console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].id+''+p)
					},1500)
					// end - 预加载结束
				}).catch(err=>{
					return uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
				})
			},
			share(){
				this.H5ShareBox = true;
			},
			cLike(item){
				markeVideo('like',item.id).then(res=>{
					this.dataList[this.k].is_like = !this.dataList[this.k].is_like
					const video = this.dataList[this.k];
					item.is_like?video.like_num += 1:video.like_num -= 1;
				}).catch(err=>{
					return uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
				})
			},
			cCollect(item){
				markeVideo('collect',item.id).then(res=>{
					this.dataList[this.k].is_collect = !this.dataList[this.k].is_collect
					const video = this.dataList[this.k];
					item.is_collect?video.collect_num += 1:video.collect_num -= 1;
				}).catch(err=>{
					return uni.showToast({
							title: err,
							icon: 'none',
							duration: 2000
						});
				})
			},
		}
	}
</script>

<style lang="scss">
	.shareImg{
		z-index: 1000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.container {background-color: #000000;}
	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}
	.videoHover{
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0,0,0,0.1);
		justify-content: center;
		align-items: center;
		
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}
	.playState{
		width:  160rpx;
		height: 160rpx;
		opacity: 0.2;
	}
	.userInfo{
		position: absolute;
		bottom:25px;
		right: 10px;
		flex-direction: column;
		.pictrue{
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 15px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			.live{
				width: 92rpx;
				height: 92rpx;
				background: url('../static/img/index/live-avatar.png') no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top:2rpx;
				left:2rpx;
			}
		}
	}
	.userAvatar{
		border-radius: 500%;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
		width : 80rpx;
		height: 80rpx;
		display: block;
	}
	.likeIco,.shareIco,.commentIco{
		width : 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}
	.likeNum,.commentNum,.shareTex{
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}
	.likeNumActive{
		color: red;
	}
.header{
		position: fixed;
		z-index: 9;
		width: 750rpx;
		height: 86rpx;
		flex-direction:row;
		justify-content: center;
		top: 50rpx;
		.items{
			margin: 0 41rpx;
			.tName{
				color: #FFFFFF;
				font-size: 28rpx;
			}
			.tLine{
				width: 30rpx;
				height: 4rpx;
				background: #FFFFFF;
				border-radius: 2rpx;
				margin-left: 15rpx;
				margin-top: 10rpx;
			}
		}
	}
	.content{
	  width: 590rpx;
	  z-index: 99;
	  position: absolute;
	  bottom: 15px;
	  /* justify-content: center; */
	  padding: 15rpx 0;
	  flex-direction: column;
	  justify-content: flex-start;
	  color: #ffffff;
		left:50%;
		margin-left: -345rpx;
		.time{
			font-size: 24rpx;
			color: rgba(255,255,255,0.5);
			margin-left: 12rpx;
		}
		.cart{
			background: rgba(0,0,0,0.3);
			width: 376rpx;
			height: 48rpx;
			border-radius: 4rpx;
			margin-bottom: 22rpx;
			flex-direction:row;
			justify-content: center;
			align-items: center;
			.cartPic{
				width: 36rpx;
				height: 36rpx;
				margin-right: 14rpx;
			}
			.cartName{
				font-size: 24rpx;
				color: #fff;
			}
			.line{
				width: 2rpx;
				height: 22rpx;
				background-color: rgba(255,255,255,0.3);
				margin: 0 12rpx;
			}
		}
	}
	.timeCon{
		flex-direction:row;
		align-items: center;
		.userName {
		  font-size: 30rpx;
		  color: #ffffff;
		}
	}
	.words {
	  margin-top: 20rpx;
		.close{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-right: 20rpx;
			.imgClose{
				width: 18rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}
		.wordsCon{
			position: relative;
			.more{
				position: absolute;
				bottom: 0;
				right: 40rpx;
				font-size: 26rpx;
			}
			.img{
				width: 18rpx;
				height: 10rpx;
				margin-left: 4rpx;
				position: absolute;
				bottom: 7rpx;
				right: 15rpx;
			}
		}
		.info{
			color: #fff;
			font-size: 28rpx;
		}
		.more{
			font-size: 26rpx;
			color: #AAAAAA;
			font-weight: 400;
		}
	}
	.root{
		background-color: #000000;
	}
</style>