sadjv3_user/pages/videoCircle/gDvideo.vue

<!-- 滑动切换选项卡+吸顶演示（待完善） -->
<template>
	<view class="content">
		<scroll-view v-if="getVideoData.length>0" scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
		<view class="top-view">
			<image class="info-cover" style="width: 100%;" src="../../static/suggest-banner4.png"></image>
			<!-- 用户头像关注 -->
			<view class="u-flex-wrap"
				style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
				<view class="info-avatar">
					<u-avatar :src="order.artificerImg" size="135" style="border: 3rpx solid #ffffff;">
					</u-avatar>
					<!--<view class="pingfen keyuyue">
						<view class="flex">
							<view class="timea-fu">
								评分
							</view>
							<view class="timea-time">{{ordersScore}}</view>
						</view>
					</view>-->
					<image class="dideo-kuang" 
							:src="order.technicianType=='3'?'../../static/vip/grade1-1.gif':order.technicianType=='4'?'../../static/vip/grade2-1.gif':'../../static/vip/grade3-1.gif'"
								mode=""></image>
							<!--<span>{{order.technicianTypeName}}</span>-->
							<view class="dvideo-name" v-if="order.length!=0">
								<text class="dvideo-name-word">{{order.artificerName}}</text>
							</view>
					</image>
				</view>
				<view class="flex pingfenlist">
					<view class="timea-fu">
						评分
					</view>
					<view class="timea-time">{{ordersScore}}</view>
				</view>
				<view class="oder-mian-guan" style="margin-right: 20px;">
					<view :class="[isFollow?'activeG':'activeQ']" @click="guanzhu(order)">
						<span class="oder-mian-text">收藏</span>
					</view>
				</view>
				<!-- <view style="margin-right: 50rpx;">
					<u-tag v-if='showedit' text="关注" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
					<view v-if='!showedit' style="height: 45rpx;"></view>
				</view> -->
			</view>
			<!-- 用户名 -->
			<view class="header-bottom-foot" style="margin-top: 30rpx;">
				<view><image class="header-bottom-foot-title" src="../../static/dituzhaoren1.png" ></image></view>
				<view class="header-bottom-foot-view">
					<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
					<span>实名认证</span>
				</view>
				<view class="header-bottom-foot-view" style="margin: 0px 7px;">
					<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
					<span>资质认证</span>
				</view>
				<view class="header-bottom-foot-view">
					<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
					<span>平台担保</span>
				</view>
			</view>
			<!-- 简介-->
			<view class="header-bottom-foot">
				<text class="dvideo-concent">{{order.content==''?'暂无简介':order.content}}</text>
			</view>
			
		</view>
			<template class="template-view">
				<view class="scroll-list" v-for="(item,index) in getVideoData" :key="index">
					<view class="scroll-left">
						<span class="scroll-left-day">{{item.day}}</span>
						<span class="scroll-left-mon">{{item.month}}月</span>
					</view>
					<view class="scroll-right">
						<view class="scroll-right-title">
							{{item.content}}
						</view>
						<view class="data-list">
							<view class="videoHovers" @click="towxh5Video(item,index)">
								<image src="@/static/bofang.png"></image>
							</view>
							<view class="playState">
								<img :src="item.picPath"  style="border-radius: 10px;width: 100%; height: 100%;"></img>
							</view>
						</view>
						<view class="scroll-bottom">
							<view class="pinglun" @click="toComment(index)">
								<image src="../../static/pinglun.png" mode=""></image>
								<span>{{item.pls}}</span>
							</view>
							<view class="pinglun" style="margin-left: 20px;" @click="cLike(item,index);">
								<image v-if="item.sfdz==0" src="../../static/guanzhu.png" mode=""></image>
								<image v-if="item.sfdz==1" src="@/static/img/index/xin.png" mode=""></image>
								<span>{{item.dzs}}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="t-loading-box" v-if="loadingType!=3" @click="loadMore">
					<view class="t-line"></view>
					<view class="t-loading-text">
						<view class="loading" v-if="loadingType==2"></view>
						<text>{{loadingText[loadingType]}}</text>
					</view>
					<view class="t-line"></view>
				</view>
			</template>
		</scroll-view>
		<empty v-if="getVideoData.length==0"></empty>
		<uni-popup style="width: 100%;height: 100vh;" type="center" ref="bofang" @touchmove.stop.prevent="moveHandle">
			<view style="width: 100%;height: 100%;position: relative;">
				<video
					id="myVideo"
					style="width: 100%;height: 100%;"
					:loop="true"
					:muted="false"
					:show-fullscreen-btn='false'
					:enable-play-gesture='true'
					:autoplay="false"
					:show-play-btn='false'
					:show-center-play-btn='false'
					:http-cache="true"
					 @click="jieshu"
					:src="filePath"></video>
				<view class="videoConten">{{contentVideo}}</view>
				<view class="videoHover" v-if="playShow==true" @click="kaishi">
					<image src="@/static/bofang.png"></image>
				</view>
				<view class="guanbi" @click="guanbi">
					<image src="@/static/closeimg.png"></image>
				</view>	
				<view class="userInfo">
					<!-- 1.头像 -->
					<image @click="tozuozhe(artificerItem)" class="userAvatar" :src="artificerItem.artificerImg" mode="aspectFill"></image>
					<!-- 2.点赞 -->
					<view class="list-view" @click="cLike(artificerItem,k);" style="opacity: 0.9; margin-top: 17px;">
						<image v-if="artificerItem.sfdz==1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
						<image v-if="artificerItem.sfdz==0" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
						<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':artificerItem.sfdz}">{{artificerItem.dzs}}</text>
					</view>
					<!-- 3.评论 -->
					<view class="comment list-view" @click="toComment(k)" style="opacity: 0.9; margin-top: 17px;">
						<image src="@/static/img/index/liaotian-2.png" style="width:38px; height:36px; position: absolute; right: 7px;"></image>
						<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{artificerItem.pls}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
			<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
				    <CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue';
	import CComment from "@/components/XJ-comment/index";
	export default {
		components:{CComment,empty},
		data() {
			return {
				isFollow: false,
				Information:'',
				loadingType: 0,
				membertype: '',
				showedit: true, //信息编辑按钮
				artificerId: '',
				latitude: '',
				longitude: '',
				order: [],
				myId: '',
				page:1,
				limit:10,
				playShow:false,
				filePath:'',
				contentVideo:'',
				artificerImg:'',
				artificerItem:{},
				videoId:'',
				getVideoData:[],
				//上拉状态文字
				loadingText : ["上拉或点击加载更多","已加载全部数据",'加载中',''],
				ordersScore:'',
				showPopup:false,
				ccRef: null,
				userInfo: {
					id: 120,
					user_name: "🍁",
					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
				},
				tableTotal: 4,
				tableData: [],
				deleteMode: "all",
				windowWidth: 0,
				windowHeight: 0,
				heightNum: 1.18,
				deleteHeight: 0,
				boxStyle:{//视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				k: 0,
			}
		},

		onLoad(e) {
			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.artificerId = e.artificerId;
			this.latitude = uni.getStorageSync('latitude');
			this.longitude = uni.getStorageSync('longitude');
			this.myId = uni.getStorageSync('userId');
			this.getData();
			this.getVideo();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getVideo();
		},
		methods: {
			guanzhu(item) {// 关注
				let oldIsFollow = this.isFollow;
				let that = this;
				
				let data = {
					artificerId: that.artificerId,
					userId: that.myId,
					classify: item.myCollectCount==1?'0':'1'
				}
				that.$Request.postJson("/app/artificer/insertCollect", data).then(res => {
					if (res.code == 0) {
						if (oldIsFollow) {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
						}
			
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					setTimeout(function() {
						that.getData()
					}, 500)
				});
			},
			// 加载更多
			loadMore: async function() {
				//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
				if (this.loadingType == 0) {
					this.loadingType = 2
					//模拟数据请求
					setTimeout(() => {
						this.page++;
						this.loadingType = 0;
						this.getVideo()
					}, 1000)
				}
			},
			getVideo(){
				var that=this;
				// 1.这里引入后端请求数据
				var data={
					createBy:this.artificerId,
					userId:this.myId,
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/getArticlelist", data).then(res => {
					if (res.code == 0) {
							// that.getVideoData = res.data.list||{}
							if (res.data) {
								if (this.page == 1) this.getVideoData = []; //如果是第一页需手动制空列表
								this.getVideoData = [...this.getVideoData, ...res.data.list]; //追加新数据
								this.getVideoData = this.getVideoData.map(item => {
								let parts = item.createTime.split('-');
								let month = parseInt(parts[1], 10);
								let day = parseInt(parts[2], 10);
								  return {
								    ...item,
								  day:day>=10?day:'0'+day,
								  month:month>=10?month:'0'+month
								  };
								});
								console.log("getVideoData",this.getVideoData)
								uni.stopPullDownRefresh()
							}else{
								this.loadingType=1
							}
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			// 详情
			getData() {
				this.$Request.get("/app/artificer/selectArtificerById", {
					artificerId: this.artificerId,
					latitude: this.latitude,
					longitude: this.longitude,
					userId: this.myId
				}).then(res => {
					if (res.code == 0) {
						this.order = res.data || {}
						var num=Number.isInteger(this.order.ordersScore)
						if(num==true){
							this.ordersScore=this.order.ordersScore+'.0'
						}else{
							this.ordersScore=this.order.ordersScore
						}
						if (res.data.myCollectCount == 1) {
							this.isFollow = true
						} else {
							this.isFollow = false
						}
					}
					uni.hideLoading();
				});

			},
			guanbi(){
				this.playShow=false;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
				this.$refs.bofang.close("center");
			},
			jieshu(){
				this.playShow=true;
				const videoContext = uni.createVideoContext('myVideo', this);
				videoContext.pause(); // 播放视频
			},
			kaishi(){
			  this.playShow=false;
			  const videoContext = uni.createVideoContext('myVideo', this);
			  videoContext.src = this.filePath; // 设置视频源
			  videoContext.play(); // 播放视频
			},
			towxh5Video(item,index){
				this.playShow=true;
				this.filePath=item.filePath;
				this.contentVideo=item.content;
				this.artificerItem=item;
				this.videoId=item.id;
				this.k=index;
				this.$refs.bofang.open("center");
			},
			tozuozhe(item){
				// console.log("itemitemitemitemitem",item)
				uni.reLaunch({
					url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
				})
				this.currents = 1//点击头像以后就会切换
			},
			cLike(item,index){
				var data={
					createBy:uni.getStorageSync('userId'),
					shipinquanId:item.id,
				}
				if(item.sfdz=='0'){
					this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
						if (res.code == 0) {
							this.getVideoData[index].dzs += 1;
							this.getVideoData[index].sfdz = '1';
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
			
				}else{//取消点赞
					this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
						if (res.code == 0) {
							this.getVideoData[index].dzs -= 1;
							this.getVideoData[index].sfdz = '0';
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});	
				}
			},
			likeFun(params, callback) {//评论点赞返回
				// console.log("likeFun", params);
				// Implement your logic for likeFun
			},
			toComment(index){
				// 注意点击评论之后会执行这里
				/*
				（1）先加载缓冲
				（2）获取当前视频 ID 信息
				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
					- 一定要记得看 index.vue 里面
					 uni.setStorageSync("user",this.peopleList[i]);
					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
					 记得写一下。
			
				（4）打开评论
				*/
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				this.k = index;
				uni.setStorageSync("videoID",this.getVideoData[index].id);
				this.videoID = this.getVideoData[index].id;
				this.$refs.pinglun.open('bottom');
				this.getPingL(this.videoID);
			},
			getPingL(shipinquanId){//获取评论列表
				var data={
					page: this.page,
					limit:310,
					shipinquanId:shipinquanId
				}
				this.$Request.get("/app/shipinquan/contentlist", data).then(res => {
					if (res.code == 0) {
							var msg = res.data.records||{}
							this.tableTotal=res.data.total;
							var list=[];
							// for (let i = 0; i < msg.length; i++) {
							// 	list.push(msg[i])
							// }
			
							this.tableData = msg.map(item => {
							  return {
							    ...item,
							   parent_id: null,
							   reply_id: null,
							   reply_name: null,
							   user_name: item.userName,
							   user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
							   user_content: item.content,
							   is_like: true,
							   like_count: 8,
							   create_time: item.createTime
							  };
							});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			replyFun(params, callback) {
				// console.log("replyFun", params);
				if(params.params.user_content==''){
					uni.hideLoading();
					uni.showToast({
						icon:'error',
						title:'请填写发布评论'
					})
				}else{
					var data={
						createBy:uni.getStorageSync('userId'),
						content:params.params.user_content,
						shipinquanId:this.videoID,
					}
					this.$Request.post("/app/shipinquan/addContent",data).then(res => {
						if (res.code == 0) {
							setTimeout(() => this.getPingL(this.videoID), 500);
							this.showPopup==true;
							uni.hideLoading();
							this.getVideoData[this.k].pls++
							 // callback(this.videoID);
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
				}
			},
			deleteFun({ params, mode }, callback) {
			
			  console.log("deleteFun", { params, mode });
			  // 当请求成功, 调用callback执行评论删除;
			  switch (this.deleteMode) {
				case "bind":
				  // 逻辑: 调用接口进行评论内容修改 update
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
				case "only":
				  // 逻辑: 调用接口删除一个评论 delete
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
				default:
				  // all
				  // 逻辑: 调用接口删除多个评论 [delete]
				  // Demo如下:
				  // axios.post("http://xxx/delete", { ids: params }).then((res) => {
				  //   if (res.code === 0) {
				  //     callback(res);
				  //   }
				  // });
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
			  }
			},
			closeScrollview(){
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close('bottom');
			},
			//编辑信息
			UserEdit() {
				uni.navigateTo({
					url: ""
				})
			},
		}
	}
</script>

<style scoped>
	.uni-popup{
		width: 100%;
		height: 500px;
		overflow: auto;
	}
	.popup-content{
		width: 100%;
		height: 100%;
		background-color: #242424;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.dvideo-concent{
		font-size: 26rpx;
		color: #666;
		padding:26rpx 0;
	}
	.header-bottom-foot-view-img1{
		width: 30rpx;
		height: 30rpx;
	}
	.header-bottom-foot-view-img2{
		width: 28rpx;
		height: 28rpx;
	}
	.header-bottom-foot-view-img3{
		width: 30rpx;
		height: 30rpx;
	}
	.header-bottom-foot-view image{
		margin-right: 3px;
	}
	.header-bottom-foot-title{
		width: 65px;
		height: 17px;
		margin-right: 8rpx;
		margin-top: 4rpx;
	}
	.header-bottom-foot-view-img2{
		width: 28rpx;
		height: 28rpx;
	}
	.header-bottom-foot-view-img3{
		width: 30rpx;
		height: 30rpx;
	}
	.header-bottom-foot-view image{
		margin-right: 3px;
	}
	.header-bottom-foot-view{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 22px;
		line-height: 22px;
		background-color: rgba(8, 162, 138, 0.1);
		border-radius: 8px;
		font-weight: 400;
		font-size: 11px;
		color: #029D88;
	}
	.header-bottom-foot{
		width: 86%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center; 
	}
	.dvideo-name{
		width: 88%;
		display: flex;
		align-items: center;
		margin:10rpx auto;
	}
	.dvideo-name-word{
		width:150rpx;
		height:20rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.pingfenlist{
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #129d88;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 30rpx;
		border: 1px solid #d0f4ed;
		margin-right:10rpx;
	}
	.timea-fu{
	   	font-size: 26rpx;
	}
	.timea-time{
		font-size: 26rpx;
	}
	.oder-mian-text{
		padding-left:50rpx;
		font-size: 26rpx;
	}
	.oder-mian-guan{
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #1bb097;
		display: flex;
		/* align-items: center; */
		background-color: #fff;
		border-radius: 30rpx;
		border: 1px solid #d0f4ed;
	}
	.u-flex-wrap{
	  background: linear-gradient(0deg, #ffffff,#efffff);
	}
	.activeQ{
		background: url('../../static/follow.png')16rpx 10rpx;
		background-repeat: no-repeat;
		background-size:30rpx 30rpx;
		}
	.activeG{
		background: url('../../static/follow2.png') 16rpx 10rpx;
		background-repeat: no-repeat;
		background-size:30rpx 30rpx;
	}
	
	.t-loading-box{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		line-height:80upx;
		font-size: 26upx;
		width: 100%;
		padding-bottom:20upx;
		color: #888888;
		.t-loading-text{
			padding: 0 10upx;
			display: flex;
			align-items: center;
			flex-direction: row;
		}
		.loading {
			width:25upx;
			height:25upx;
			border:2.5upx solid #888888;
			border-bottom:#ffffff 2.5upx solid;
			border-radius:50%;
			margin-right: 15upx;
			animation:grace-rotate360 1200ms infinite linear;
		}
		.t-line{
			margin: 0px;
			border-bottom: 1px solid rgb(212, 212, 212);
			width: 20px;
			transform: scaleY(0.5);
			border-top-color: rgb(212, 212, 212);
			border-right-color: rgb(212, 212, 212);
			border-left-color: rgb(212, 212, 212);
		}
	}
	@keyframes grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
	.content{
		width: 100%;
		/* height: 100vh; */
		/* overflow: scroll; */
	}
	.top-view {
		width:100%;
		background-color: #fff;
		border-bottom: 6px solid #f7f7f7;
	}
	.playState{
		width: 100%;
		height: 100%;
	}
	.pinglun span{
		color: #333;
		font-size: 14px;
		margin-left: 5px;
	}
	.pinglun image{
		width: 40rpx;
		height: 40rpx;
	}
	.pinglun{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.scroll-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.scroll-right-title{
		font-size:28rpx;
		color: #000;
		word-break: break-all;
	}
	.data-list{
		width: 100%;
		/* height: 200px; */
		position: relative;
		margin: 10px 0px;
	}
	.scroll-right{
		width: 77%;
		display: flex!important; 
		flex-direction: column !important; 
	}
	.scroll-left-mon{
		color: #999;
		font-size: 12px;
		margin-top: 5px;
		margin-left: 5px;
	}
	.scroll-left-day{
		color: #000000;
		font-size: 24px;
		font-weight: bold;
	}
	.scroll-left{
		width: 20%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
	}
	.scroll-list{
		width: 98%;
		padding: 0px 10px;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
	}
	.swiper-item-view{
		width: 70%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; /* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: center;
	}
	.videoConten{
		width: 70%;
		position: absolute;
		bottom: 0px;
		margin-bottom: 60px;
		/* height: 30px; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 定义文本的行数 */
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		margin-left: 15px;
		color: #fff;
	}
/* 	/deep/.uni-scroll-view-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		} */
	.guanbi{
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 15px;
		margin-right: 9px;
	}
	.guanbi image{
		width: 100%;
		height: 100%;
	}
	/deep/.uni-popup__wrapper-box{
		width: 100%;
		height: 100%;
	}
	.videoHovers{
		width: 60px;
		height: 60px;
		position: absolute;
/* 		top: 0px;
		margin-top: 20%;
		margin-left: 40%; */
		top: 45%;
		margin-left: 45%;
		z-index: 99;
	}
	.videoHover{
		width: 76px;
		height: 76px;
		position: absolute;
		top: 0px;
		margin-top: 70%;
		margin-left: 40%;
	}
	.videoHover image,.videoHovers image{
		width: 100%;
		height: 100%;
	}
	.template-view {
		width: 100%;
		height:100%;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.pingfen {
		margin-left: 15px;
		margin-top: 31px;
		display: flex;
		flex-direction: row;
	}

	.headset-text2 {
		background: linear-gradient(90deg, #f8f8f8, #dfdfdf);
		font-size: 22rpx;
		color: #333;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 5rpx 30rpx 30rpx 30rpx;
		width: 72rpx;
		padding: 5rpx 15rpx;
		text-align: right;
	}

	.headset-img {
		width: 120rpx;
		height: 40rpx;
		position: absolute;
		top: 1rpx;
		left: -1rpx;

	}

	.headset-line {

		display: flex;
		position: relative;
	}

	.banner-view {
		background-color: #007AFF;
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.paging-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.swiper {
		flex: 1;
	}

	.info-cover {
		width: 100%;
		/*height: 460rpx;*/
	}

	.info-avatar {
		padding: 16rpx;
		position: absolute;
		left: 0;
		top: -56rpx;
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.dideo-kuang{
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		left:2rpx;
		top:2rpx;
		display: flex;
		flex-direction: row;
	}
	.userInfo{
		position: absolute;
		bottom:110px;
		right: 10px;
		display: flex;
		flex-direction: column;
		z-index: 18;
	}
	.userAvatar{
		border-radius: 500%;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
		width : 100rpx;
		height: 100rpx;
	}
	.list-view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>