小程序swiper里放video产生的问题

lixu102593
已于 2022-07-08 20:03:48 修改
阅读量1.9k
点赞数
文章标签：前端 javascript css
于 2022-07-08 14:06:55 首次发布
本文链接：https://blog.csdn.net/lixu102593/article/details/125676849
版权
公司要做个仿抖音上拉下滑的视频页，因为图片存到了自己的服务器，无法使用视频封面功能，想来想去只能用swiper里面放几个video标签，来回替换，可是在vivo手机 iqoou1型号上video标签层级太高无法覆盖，没办法使用cover-view标签，可是cover-view不随着手机上下滑动，就像迟滞了一样，标签自带的超出隐藏属性也无法覆盖掉，并且无法使用动画，标签里加转发按钮也不起作用
在这里插入图片描述
偶然发现可以把和video标签同级别的标签放到scroll-view里面就能显示出来了，层级可以使用z-index控制了，不知道什么原理，瞎碰上的，在外部列表页面在vivo手机 iqoou1型号上scroll-view里不能放video标签，会出现下图的情况
在这里插入图片描述
video标签会随着滚动而滚动一截距离，video标签原本占位的会变成一个黑框
视频列表页代码
<template>
	<view class="con" :style="{height:pinggao+'px','background':'#000'}">
		<swiper class="swiper" :current="current" @change="cheng" 
		:style="{height:pinggao+'px','width':'100%'}"
		:vertical="true"  :circular="circular">
			<swiper-item 
			
			@touchmove="handletouchmove"
			@touchstart="handletouchstart"
			@touchend="handletouchend"
			
			v-for="i,k in video_listcopy" :key="k" >
				<view class="video_box"  @click="zanting(1,i)" :style="{height:pinggao+'px',width:'100%'}">
					<!-- 暂停按钮 -->
					<tui-icon style="will-change: transform;" v-if="i.zan" class="iconfont icon-zanting" name="play" color="#FFF" :size="100" unit="rpx"></tui-icon>
					
					<!-- 右边的关注点赞转发和头像 -->
					<scroll-view v-if="i.autoplay" class="anniu" @click.stop="dayuin" style="will-change: transform;width: 90rpx;">
						
						<view class="anniu1 top">
							<image @click.stop="phonshow" :src="i.WXAVATARURL"></image>
							<view :style="{transform:i.ISGZ == 1 ? 'scale(0) translateX(-50%)' : 'scale(1) translateX(-50%)'}" 
							class="guan flex justify-center align-center" @click="isGs(i)">
								<tui-icon name="plus" color="#FFF" :size="34" unit="rpx"></tui-icon>
								
								<view :style="{transform:i.ISGZ == 1 ? 'scale(1.2)' : 'scale(0)'}" class="guan1 flex justify-center align-center">
									<tui-icon name="check" color="#FA385E" :size="34" unit="rpx"></tui-icon>
								</view>
							</view>
							
						</view>
						
						<view @click.stop="zanjie(i)" class="anniu1">
							<image v-if="i.LOGUSERISZAN <= 0 " src="../static/videos/aixin.png"></image>
							<image v-if="i.LOGUSERISZAN > 0 " src="../static/videos/aixin_ac.png"></image>
							<view>{{i.ZNUM}}</view>
						</view>
						<view @click="commentData(i)" class="anniu1">
							<image src="../static/videos/pinglun-tianchong.png"></image>
							<view>{{i.PLNUM}}</view>
						</view>
						<view @click.stop="forward(i,k)" class="anniu1">
							<button v-if="i.AUDITING == 2" open-type="share" 
							style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;z-index: 5;"></button>
							<image src="../static/videos/zhaunfa.png"></image>
							<view>{{i.FORWARDNUM}}</view>
						</view>
					</scroll-view>
					
					<!-- 文案 -->
					
					
					<scroll-view  @touchmove.stop.prevent="''"  @touchstart.stop.prevent="''"  
					@touchend.stop.prevent="''"  class="wenan" style="will-change: transform;z-index: 1;opacity: 0;">
						<view class="tit margin-bottom-sm flex align-center">
							<text style="max-width: calc(100% - 290rpx);" class="dan-hide">{{i.WXNICKNAME}}</text>
							<text style="width: 270rpx;">{{formData(i.CREATETIME)}}</text>
						</view>
						
						<scroll-view scroll-y="true" :scroll-top="sctop" style="max-height: 430rpx;" >
							<view class="flex">
								<view class="duohang" :class="zhanshou ? '' : 'duo-hide1'">
									<view class="zhanan" v-if="i.zhankai && !zhanshou"  @click.stop="zhankai">展开</view>
									<text v-if="i.zhankai && !zhanshou" style="float: right;margin-right: 4rpx;">...</text>
									{{i.CONTENTS}}
									<view  v-if="i.zhankai && zhanshou" @click.stop="zhankai"s class="zhanan">收起</view>
								</view>
							</view>
						</scroll-view>
						
						<view class="weilei">
							{{i.CONTENTS}}
						</view>
					</scroll-view>
					
					<scroll-view class="wenan" style="will-change: transform;">
						<view class="tit margin-bottom-sm flex align-center">
							<text style="max-width: calc(100% - 290rpx);" class="dan-hide">{{i.WXNICKNAME}}</text>
							<text style="width: 270rpx;">{{formData(i.CREATETIME)}}</text>
						</view>
						
						<scroll-view scroll-y="true" :scroll-top="sctop" style="max-height: 430rpx;" >
							<view class="flex">
								<view class="duohang" :class="zhanshou ? '' : 'duo-hide1'">
									<view class="zhanan" v-if="i.zhankai && !zhanshou"  @click.stop="zhankai">展开</view>
									<text v-if="i.zhankai && !zhanshou" style="float: right;margin-right: 4rpx;">...</text>
									{{i.CONTENTS}}
									<view  v-if="i.zhankai && zhanshou" @click.stop="zhankai" class="zhanan">收起</view>
								</view>
							</view>
						</scroll-view>
						
						<view class="weilei">
							{{i.CONTENTS}}
						</view>
					</scroll-view>
					
					
					<video :id="'vide'+k"
					:autoplay="i.autoplay"
					:loop="true"
					:controls="false"
					:show-fullscreen-btn="false"
					:show-play-btn="false"
					:show-center-play-btn="false"
					:enable-progress-gesture="false"
					play-btn-position="center"
					
					@play="play"
					@pause="pause"
					@ended="ended"
					@error="error"
					@loadedmetadata="loadedmetadata"
					
					:style="{height:pinggao+'px','width':'100%'}"
					style="will-change: transform;"
					:src="i.VIDEOURL.indexOf('http') == 0 ? i.VIDEOURL : tui.interfaceUrl() + i.VIDEOURL">
					
						<!-- <cover-view class="anniu">
							<cover-view class="anniu1">点赞{{k}}</cover-view>
							<cover-view class="anniu1">评论{{i.jishu}}</cover-view>
							<cover-view class="anniu1">转发</cover-view>
						</cover-view> -->
						
						
						
						<!-- 右边的关注点赞转发和头像 -->
						<!-- <cover-view v-if="i.autoplay" class="anniu" @click.stop="dayuin">
							
							<cover-view class="anniu1 top cover">
								<cover-view class="touxiang">
									<cover-image @click.stop="phonshow" :src="i.WXAVATARURL"></cover-image>
								</cover-view>
								<cover-view :style="{transform:i.ISGZ == 1 ? 'scale(0) translateX(-50%)' : 'scale(1) translateX(-50%)'}" 
								class="guan flex justify-center align-center" @click="isGs(i)">
									<tui-icon name="plus" color="#FFF" :size="34" unit="rpx"></tui-icon>
									
									<cover-view :style="{transform:i.ISGZ == 1 ? 'scale(1.2)' : 'scale(0)'}" class="guan1 flex justify-center align-center">
										<tui-icon name="reduce" color="#FA385E" :size="34" unit="rpx"></tui-icon>
									</cover-view>
								</cover-view>
								
							</cover-view>
							
							<cover-view @click.stop="zanjie(i)" class="anniu1">
								<cover-image v-if="i.LOGUSERISZAN <= 0 " src="../static/videos/aixin.png"></cover-image>
								<cover-image v-if="i.LOGUSERISZAN > 0 " src="../static/videos/aixin_ac.png"></cover-image>
								<cover-view>{{i.ZNUM}}</cover-view>
							</cover-view>
							<cover-view @click="commentData(i)" class="anniu1">
								<cover-image src="../static/videos/pinglun-tianchong.png"></cover-image>
								<cover-view>{{i.PLNUM}}</cover-view>
							</cover-view>
							<cover-view @click.stop="forward(i,k)" class="anniu1">
								<button v-if="i.AUDITING == 2" open-type="share" 
								style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;z-index: 5;"></button>
								<cover-image src="../static/videos/zhaunfa.png"></cover-image>
								<cover-view>{{i.FORWARDNUM}}</cover-view>
							</cover-view>
						</cover-view> -->
						
						<!-- 文案 -->
						<!-- <cover-view class="wenan">
							<cover-view class="tit margin-bottom-sm flex align-center">
								<cover-view style="max-width: calc(100% - 290rpx);" class="dan-hide">{{i.WXNICKNAME}}</cover-view>
								<cover-view style="width: 270rpx;">{{formData(i.CREATETIME)}}</cover-view>
							</cover-view>
							
							<cover-view class="flex">
								<cover-view class="duohang" :class="zhanshou ? '' : 'duo-hide1'">
									<cover-view class="zhanan" v-if="i.zhankai"  @click.stop="zhankai">{{zhanshou ? '收起' : '展开'}}</cover-view>
									<cover-view v-if="i.zhankai && !zhanshou" style="float: right;margin-right: 4rpx;">...</cover-view>
									{{i.CONTENTS}}
								</cover-view>
							</cover-view>
							
							<cover-view class="weilei">
								{{i.CONTENTS}}
							</cover-view>
						</cover-view> -->
						
						
						
					
					</video>
					
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 禁止触摸 -->
		<!-- <view v-if="chudi" class="fix"  @touchmove.stop.prevent="''"></view> -->
		
		
		<!-- 评论 -->
		<view  class="zhezhao"
		v-show="zhezhao"
		@click="pingzhe"
		@touchmove.stop.prevent="''">
		
		
			<view class="zhe_box" :style="{'padding-bottom':!tui.isAndroid() && liuhai ? '20px' : '0px'}"  @click.stop="''">
				<scroll-view :scroll-y="true" 
				:scroll-with-animation="true"
				@scrolltolower="chudis"
				:scroll-top="scroTop"
				@scroll="scHua"
				:style="{height:!tui.isAndroid() && liuhai ? (pinggao * 0.6 + 20)+ 'px' : (pinggao * 0.6) + 'px'}" 
				class="huadong">
					<view id="scros" style="padding-bottom: 30rpx;"
					:style="{'margin-top':dingHe > 0 ? -dingHe + 'px' : '0px'}">
						<view class="p_top_zhan">
							<view class="flex_between p_top flex justify-between align-center">
								<view style="opacity: 0;">
									<tui-icon class="iconfont icon-guanbi" name="shut" :size="48" unit="rpx"></tui-icon>
								</view>
								<view style="font-size: 34rpx;">全部评论</view>
								<view class="flex p_t_le">
									<tui-icon @click="pingzhe" class="iconfont icon-guanbi" name="shut" :size="48" unit="rpx"></tui-icon>
									<!-- <text>评论4.1万</text> -->
								</view>
								<!-- <view class="zan">
									10万 赞 | 48 转发
								</view> -->
							</view>
						</view>
						
						<view class="ping_list">
							<view v-for="(item,index) in rateList" :key="index" class="ping_box padding-bottom-sm">
								<view class="flex_between" style="margin-bottom: 20rpx;">
									<view class="ping_le flex" style="align-items: flex-start;">
										<image :src="item.WXAVATARURL" style="width: 60rpx;height: 60rpx;border-radius: 50%;margin-right: 4rpx;"></image>
										<view class="toubu">
											<view>
												{{item.WXNICKNAME}}
											</view>
										</view>
									</view>
								</view>
								
								<view class="contents">
									<view class="con">
										<view class="neir">
											{{item.CONTENTS}}
										</view>
										<view class="flex" style="font-size: 22rpx; color: #999;margin-top: 10rpx;">
											{{formData(item.AUDITTIME)}}
											<!-- huifu111(item.id + '',item.user.merchantname + '') -->
											<!-- <view @tap.stop="huifu111" :data-id="item.id" :data-name="item.user.merchantname"
											style="margin-left: 20rpx; padding: 0 30rpx;">回复{{index}}</view> -->
										</view>
									</view>
									<!-- 树形数据的评论 -->
									<!-- <view class="shu_box" :class="!item.shou ? '' : 'shu_box_a1'">
										<view class="con" v-for="itema,indexa in item.replys" :key='indexa' style="margin-top: 20rpx;">
											<view class="flex_between" >
												<view class="ping_le flex" style="align-items: flex-start;">
													<image :src="itema.user.url" style="width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 4rpx;"></image>
													<view class="toubu toubushu">
															{{itema.user.merchantname}}
													</view>
													<view style="font-size: 18rpx;color: #AAA4A4;line-height: 40rpx;height: 60rpx;">
														
														<tui-icon class="iconfont turningright" name="turningright" :size="32" unit="rpx"></tui-icon>
														
														{{itema.replyUser.merchantname}}
													</view>
												</view>
											</view>
											<view style="margin-left: 44rpx;">
												<view class="neir">
													{{itema.content}}
												</view>
												<view class="flex"  style="font-size: 22rpx; color: #999;margin-top: 10rpx;">
													{{itema.createtime}}
													<view  @click.stop="huifu111(itema.id + '',itema.user.merchantname + '')" style="margin-left: 20rpx; padding: 0 30rpx;">回复</view>
												</view>
											</view>
										</view>
									</view>
									
									<view style="font-size: 26rpx;color: #AAA4A4;margin-left: 50rpx;margin-top: 10rpx;"
										@click="readMore(item.id + '',index)" v-if="(item.replys_num > 0 && !item.notData) || item.shou">
										查看回复</view>
										
									<view style="font-size: 26rpx;color: #AAA4A4;margin-left: 50rpx;margin-top: 10rpx;"
										@click="shouqi(index)" v-if="(item.replys_num > 0 && item.notData && !item.shou)">
										没有更多了</view> -->
									
								</view>
							</view>
						</view>
					</view>
					
					<!-- 暂无数据 -->
					<tui-nomore :text="loadMsg" backgroundColor="#FFF"></tui-nomore>
					<!-- 顶起距离 -->
					<view :style="{height:dingHe+'px'}"></view>
					
				</scroll-view>
				
				<view @click="showJian"  class="shuru flex align-center">
					<view class="flex align-center">
						<image  src="http://49.234.212.93/media/write.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
						<input type="text" confirm-type="send"
						:placeholder="placeholder"
						:disabled="true"
						:cursor-spacing="50"
						v-model="rateContent" :adjust-position="true"/>
					</view>
				</view>
				
			</view>
		</view>
		
		
		<!-- 输入键盘 -->
		<view class="jianpan" @click.stop="guanjian"
		 :style="{bottom:jian ? '0px' : '-1000px'}" @touchmove.stop.prevent="''">
			<view :style="{bottom:jian ? jianpanHe+'px' : '0px'}"
			class="shuru shuru1 flex align-center">
				<view class="flex align-center">
					<image  src="http://49.234.212.93/media/write.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					<input type="text" 
					confirm-type="send" 
					:placeholder="placeholder"
					@confirm="submit"
					@blur="guanjian"
					:adjust-position="false"
					:focus="jian"
					:cursor-spacing="10"
					v-model="rateContent"/>
				</view>
			</view>
		</view>
		
		<!-- 导航栏 -->
		<scroll-view class="nav11">
			<view :style="{height:statusBarHeight+'px'}"></view>
			
			<view class="flex align-center nav_bott" :style="{width: 'calc(100% - '+ jiaonang +'px)'}">
				
				<view v-if="ggg" class="navback flex justify-center align-center" @click="tui.navBack()">
					<tui-icon name="arrowleft" color="#FFF" :size="60" unit="rpx"></tui-icon>
				</view>
				
				<view style="flex:1;min-width: 0;">
					<tui-tab scroll :size="34"  :tabs="navbar1" backgroundColor="rgba(0,0,0,0)" :height="88" :currentTab="currentTab1"
						 color="#FFF" sliderBgColor="#FFF" selectedColor="#FFF" :bold="true"
						 @change="change1"></tui-tab>
				</view>
				
				
			</view>
		</scroll-view>
		
		
		<!-- <cover-view class="nav11">
			<cover-view :style="{height:statusBarHeight+'px'}"></cover-view>
			
			<cover-view class="flex align-center nav_bott" :style="{width: 'calc(100% - '+ jiaonang +'px)'}">
				
				<cover-view v-if="ggg" class="navback flex justify-center align-center" @click="tui.navBack()">
					<tui-icon name="arrowleft" color="#FFF" :size="60" unit="rpx"></tui-icon>
				</cover-view>
				
				<cover-view style="flex:1;min-width: 0;">
					<tui-tab scroll :size="34"  :tabs="navbar1" backgroundColor="rgba(0,0,0,0)" :height="88" :currentTab="currentTab1"
						 color="#FFF" sliderBgColor="#FFF" selectedColor="#FFF" :bold="true"
						 @change="change1"></tui-tab>
				</cover-view>
				
				
			</cover-view>
		</cover-view> -->
		
		
		<tui-modal :show="lianxi" :button="button"  title="提示" content="是否联系此用户？" @click="phones" @cancel="hideModel"></tui-modal>
		
	</view>
</template>

<script>
	var setout;
	import utils from "@/components/common/tui-utils/tui-utils.js"
	export default {
		data() {
			return {
				// 导航栏
				currentTab1:0,
				ggg:false,
				zhanshou:false,//展开收起变量
				navbar1: [
				"全部","农资","招工","幼苗","植保","买卖","收购","其它"
				],
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
				jiaonang:0,
				
				
				liuhai:'',
				pinggao:uni.getSystemInfoSync().windowHeight,//屏幕和video高度
				circular:false,//是否采用衔接滑动
				current:0,
				video_list:[
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/bfe460c62b78665d332d9d4818aac9b8.mp4',zan:false,jishu:0,autoplay:false,zhankai:false,color:'#000'},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/f5ae28e24f46bba8a4a33aa10fde1bb7.mp4',zan:false,jishu:1,autoplay:false,zhankai:false,color:'#FFB6C1'},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/e97747c3ef601f9839da3fc8f76430c3.mp4',zan:false,jishu:2,autoplay:false,zhankai:false,},
					// // {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/c89d8ec506b497f1c6c93e2604a68e7b.mp4',zan:false,jishu:3,autoplay:false,an:false,},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/bfe460c62b78665d332d9d4818aac9b8.mp4',zan:false,jishu:4,autoplay:false,zhankai:false,},
					
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/5807809136f67f8787c8b6a1550ef002.mp4',zan:false,jishu:5,autoplay:false,zhankai:false,color:'#000'},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/087643dc5a7d3efab5f28af4aef34514.mp4',zan:false,jishu:6,autoplay:false,zhankai:false,color:'#FFB6C1'},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/8faffb12fe45fac3547f45706444f91c.mp4',zan:false,jishu:7,autoplay:false,zhankai:false,},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/6eed67a076da0d20aa74046f0cd503a0.mp4',zan:false,jishu:8,autoplay:false,zhankai:false,},
					// {video_src:'https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/nongmeiti/f5ae28e24f46bba8a4a33aa10fde1bb7.mp4',zan:false,jishu:9,autoplay:false,zhankai:false,},
				],
				video_list1:[],
				video_listcopy:[],
				vid0:'',
				vid1:'',
				vid2:'',
			
				
				 touchNum:0,//点击屏幕的时间，判断是不是双击
				 zantingtype:0,//判断是不是点击的暂停按钮
				 pagesY:0,//记录滑动距离
				 hua:0,// 1 向上滑  2 向下滑
				 chudi:false,
				 
				 
				 suoyin:0,
				 chudichufa:false,
				 settime:null,
				 
				 zuzhishang:false,
				 zuzhixia:false,
				 
				 
				 // 评论
				 zhezhao:false,//控制评论的显示隐藏
				 scroTop:0,//控制scroll-view 的滑动距离 
				 scroTopCopy:0,//记录scroll-view 的滑动距离 
				 scroTop11:0,
				 rateList:[],
				 placeholder:'说点好听的~',//默认input框显示的提示文字
				 bili:0,//rpx 和px的转化比例
				 dingHe:0,//控制scroll-view 下的盛放评论数据的大盒子的margin-top，和点击最底部的评论把盒子给个高度使margin-top能其作用
				 
				// 键盘高度
				jianpanHe:0,//键盘高度
				rateContent:'',//input value值
				jian:false,//控制input框的显示隐藏
				 
				 //guandd:false,//关注动画变量
				 
				 // 业务逻辑代码变量
				 currentTab:'',
				 pageIndex:1,
				 pageSize:30,
				 noData:false,
				 ajaxchongfu:false,
				 
				 // 评论分页
				 pageIndex1:1,
				 pageSize1:20,
				 noData1:false,
				 loadMsg:'加载中...' ,
				 
				 objData:{},//从详情或分享进来的第一个视频
				 
				 // 拨打电话弹框
				 lianxi:false,
				 
				 button:[{
				   text: "取消",
				   type: "primary",
				   plain: true
				 },
				 {
				   text: "确定",
				   type: "primary",
				   plain: false
				 }],
				 sctop:0,
				 
			}
		},
		watch:{
			current(news,lat){
				// console.log('bianjie',this.video_list1)
				// 向上滑
				if(this.hua == 1){
					if(this.suoyin == this.video_list1.length - 1){
						this.circular = false;
					}else{
						this.circular = true;
					}
					if(lat == 2){
						this.suoyin++;
						if(this.suoyin >= this.video_list1.length - 1){
							this.suoyin = this.video_list1.length - 1;
							this.circular = false;
						}
						this.video_listcopy =  JSON.parse(JSON.stringify(this.video_list1[this.suoyin]));
					}
					
					
				}
				// 向下划  (swiper向上走)
				if(this.hua == 2){
					// console.log(this.video_listcopy,'变化11',this.chudichufa)
					if(lat == 0 && !this.chudichufa){
						this.suoyin--;
						if(this.suoyin <= 0){
							this.suoyin = 0;
							this.circular = false;
						}
						this.video_listcopy = JSON.parse(JSON.stringify(this.video_list1[this.suoyin]));
					}
					if(this.chudichufa && lat == 0){
						this.chudichufa = false;
					}
					
				}
				this.bofang();
				
				this.zuzhishang = false;
				this.zuzhixia = false;
				
				if(!this.noData && this.suoyin >= this.video_list1.length - 2 && !this.ajaxchongfu){
					this.getlist(1);
				}
				
			},
		},
		onLoad(option) {
			uni.hideShareMenu();
			this.currentTab = option.currentTab;
			if(option.data){
				let data = JSON.parse(decodeURIComponent(option.data));
				data.zan = false;
				data.autoplay = false;
				data.zhankai = false;
				this.objData = data;
				this.video_list.push(data);
			}
			
			let jiao = uni.getMenuButtonBoundingClientRect();
			this.jiaonang = jiao.width + 10;
			
			this.getlist();
			
			
			this.liuhai = uni.getSystemInfoSync().statusBarHeight > 20 ? true : false;
			
			
			
		},
		onReady() {
			this.bili = uni.getSystemInfoSync().windowWidth / 750;
			this.vid0 = uni.createVideoContext('vide0');
			this.vid1 = uni.createVideoContext('vide1');
			this.vid2 = uni.createVideoContext('vide2');
			setTimeout(()=>{
				this.ggg = true
			},500)
		},
		onShareAppMessage: function( options ){
		　　 var that = this;
			let data = encodeURIComponent(JSON.stringify(this.video_listcopy[this.current]));
		　　 return {
			  title: "",
			  imageUrl: "",//转发携带的图片,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG
			  path:"/pagesA/crice_details/videos1?data="+data+"&currentTab="+this.currentTab,//当前页面 path ，必须是以 / 开头的完整路径
			}
		},
		methods: {
			// 业务逻辑
			// 获取列表
			getlist(type = 0){
				if(type == 1){
					this.ajaxchongfu = true;
				}
				let obj = {
					ISGZ:this.currentTab == 3 ? 1 : 0,//是否关注  1 是 0否
					TAGS:this.currentTab1 > 0 ? this.navbar1[this.currentTab1] : '',//标签
					USERID: this.currentTab == 2 ? uni.getStorageSync("USERID") : '',//发布人id（我的）
					LOGUSERID: uni.getStorageSync("USERID"),//（是关注    为登录人id）
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					AC_REGION:this.tui.RegionID,
				}
				this.tui.request("Api/WebAPI/GetCircleVideoList", "get", obj, true, true, true).then((res) => {
					if(res.result > 0){
						let data = res.data || [];
						if(data.length <= 0 ){
							this.noData = true;
							if(this.video_list.length > 0){
								this.cuIconListData(this.video_list,this.video_list1,3);
								this.video_listcopy = JSON.parse(JSON.stringify(this.video_list1[this.suoyin]));
							}
							return
						}
						let inde = -1;
						data.forEach((val,k)=>{
							val.zan = false;
							val.autoplay = false;
							val.zhankai = false;
							if(this.objData.ID == val.ID){
								inde = k
							}
						})
						if(this.pageIndex == 1){
							this.current = 0;
							this.suoyin = 0;
						}
						
						this.pageIndex++;
						if(data.length < this.pageSize){
							this.noData = true;
						}
						if(inde > -1){
							data.splice(inde,1)
						}
						
						
						
						this.video_list = [...this.video_list,...data];
						let arr = JSON.parse(JSON.stringify(this.video_list));
						this.cuIconListData(arr,this.video_list1,3);
						this.video_listcopy = JSON.parse(JSON.stringify(this.video_list1[this.suoyin]));
						if(type == 1){
							this.ajaxchongfu = false;
						}
					}else{
						this.tui.msg(res.msg)
					}
				})
			},
			formData(data){
				return utils.formatDate('y-m-d h:i:s',data,1);
			},
			
			// 是否关注
			isGs(data){
				if(!uni.getStorageSync("USERID")){
					this.tui.msg('您还未登录!')
					return
				}
				if(data.AUDITING != 2){
					this.tui.msg('文章没通过审核的无法关注!')
					return
				}
				let obj = {
					 USERAID:uni.getStorageSync("USERID"),// 登录人id,
					 USERBID:data.USERID,//被关注人id,
					 Flag:data.ISGZ == 1 ? 0 : 1// 1关注0取消关注
				}
				this.tui.request("Api/WebAPI/CIRCLEGZ", "get", obj, true, true, true).then((res) => {
					if(res.result > 0){
						data.ISGZ = data.ISGZ == 1 ? 0 : 1;
						let tit = data.ISGZ == 1 ? '关注成功！' :'取消关注成功!';
						this.tui.msg(tit);
						
						this.tongyicopy('ISGZ',data)
						
					}else{
						this.tui.msg(res.msg)
					}
				})
			},
			
			// 数据统一
			tongyicopy(key,data,key1){
				for(let i in this.video_list1){
					for(let k in this.video_list1[i]){
						if(this.video_list1[i][k].USERID == data.USERID){
							this.video_list1[i][k][key] = data[key];
							if(key1){
								this.video_list1[i][k][key1] = data[key1];
							}
						}
					}
				}
				this.video_list.forEach((val)=>{
					if(val.USERID == data.USERID){
						val[key] = data[key];
						if(key1){
							val[key1] = data[key1];
						}
					}
				})
			},
			
			// 点赞
			agree(data,type = 0){
				if(!uni.getStorageSync("USERID")){
					this.tui.msg('您还未登录!')
					return
				}
				if(data.AUDITING != 2){
					this.tui.msg('文章没通过审核的无法点赞!')
					return
				}
				if(type == 1 && data.LOGUSERISZAN == 1){
					return
				}
				let obj = {
					 USERID:uni.getStorageSync("USERID"),// 登录人id,
					 CIRCLEID:data.ID,//文章id,
					 Flag: data.LOGUSERISZAN > 0 ? 0 : 1// 1点赞0取消点赞
				}
				this.tui.request("Api/WebAPI/CIRCLEZANLOGIS", "get", obj, true, true, true).then((res) => {
					if(res.result > 0){
						if(data.LOGUSERISZAN > 0){
							data.ZNUM--;
							if(data.ZNUM <= 0){
								data.ZNUM = 0;
							}
							data.LOGUSERISZAN = 0;
						}else{
							data.ZNUM++;
							data.LOGUSERISZAN = 1;
						}
						this.tongyicopy('ZNUM',data,'LOGUSERISZAN')
						
					}else{
						this.tui.msg(res.msg)
					}
				})
				
			},
			// 转发
			forward(data){
				if(!uni.getStorageSync("USERID")){
					this.tui.msg('您还未登录!')
					return
				}
				if(data.AUDITING != 2){
					this.tui.msg('文章没通过审核的无法转发!')
					return
				}
				let obj = {
					ID: data.ID,
				}
				this.tui.request("Api/WebAPI/AddFORWARDNUM", "get", obj, true, true, true).then((res) => {
					if(res.result > 0){
						data.FORWARDNUM++;
						this.tongyicopy('FORWARDNUM',data)
					}else{
						this.tui.msg(res.msg)
					}
				})
			},
			// 点赞节流
			zanjie(data){
				utils.throttle(()=>{
					this.agree(data)
				})
				
			},
			// 提交列表
			commentData(item){
				this.zhezhao = true;
				let obj = {
					CIRCLEID:item.ID,//动态id,
					pageIndex:this.pageIndex1,
					pageSize:this.pageSize1,
					USERID:item.USERID
				}
				this.tui.request("Api/WebAPI/GetCIRCLEZANHFList", "get", obj, true, true, true).then((res) => {
					if(res.result > 0){
						let data = res.data;
						if(this.pageIndex1 == 1){
							if(data.length <= 0){
								this.noData1 = true;
								this.loadMsg = '暂无数据';
								return
							}
							this.rateList = data;
						}else{
							this.rateList = [...this.rateList,...data]
						}
						
						
						if(this.pageSize1 > data.length){
							this.noData1 = true;
							this.loadMsg = '到底了'
						}else{
							this.pageIndex1++;
						}
					}else{
						this.tui.msg(res.msg)
					}
				})
			},
			// 提交评论
			submit(){
				if(!uni.getStorageSync("USERID")){
					this.tui.msg('您还未登录!')
					return
				}
				let data = this.video_listcopy[this.current];
				if(data.AUDITING != 2){
					this.rateContent = '';
					this.tui.msg('文章没通过审核的无法评论!')
					return
				}
				if(!this.rateContent){
					this.tui.msg('请输入内容!')
					return
				}
				let obj = {
					ID:'',
					CIRCLEID:data.ID,//动态id,
					USERID:uni.getStorageSync("USERID"),
					CONTENTS:this.rateContent,
				}
				this.tui.request("Api/WebAPI/AddCIRCLEZANHF", "post", obj, true, true, false).then((res) => {
					this.guanjian();
					if(res.result > 0){
						this.tui.msg('评论成功，请等待审核!')
						// this.commentData();
						this.rateContent = '';
						// this.video_listcopy[this.current].PLNUM++;
					}else{
						this.tui.msg(res.msg)
					}
				})
			},
			
			// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			change1(e) {
				if(this.currentTab1 == e.index){
					return
				}
				this.currentTab1 = e.index;
				// 视频列表清空
				this.video_list = [];
				this.video_list1 = [];
				this.video_listcopy = [];
				this.pageIndex = 1;
				this.ajaxchongfu = false;
				
				this.objData = {};
				
				this.getlist();
			},
			// 播放
			bofang(){
				for(let i = 0;i < this.video_listcopy.length;i++){
					if(i != this.current){
						this[('vid') +i].stop();
					}
					this.video_listcopy[i].autoplay = false;
				}
				this.video_listcopy[this.current].autoplay = true;
				
				this[('vid') +this.current].play();
			},
			// 手指触屏
			handletouchstart(e){
				// console.log('kaishi')
				this.pagesY = e.touches[0].pageY;
			},
			handletouchmove(e){
				if(e.touches.length > 1){
					return
				}
				
				let pageY = e.touches[e.touches.length - 1].clientY  - this.pagesY;
				//向下滑
				if(pageY > 0){
					// console.log('555',this.suoyin)
					if(this.suoyin > 0){
						this.circular = true;
					}else{
						this.circular = false;
					}
					
					
					//交界处
					// console.log(this.chudichufa,'交接111',this.video_listcopy)
					if((this.current == 0) && this.suoyin > 0){
						if(this.zuzhishang){
							return
						}
						let len = this.video_list1.length;
						this.video_listcopy[2] = this.video_list1[this.suoyin - 1][2];
						if(this.suoyin == len - 1 && this.suoyin > 0 && this.video_list1[len - 1].length < 3){
							this.circular = true;
							this.video_listcopy[1] = this.video_list1[this.suoyin - 1][1];
						}
						this.bofang();
						this.zuzhishang = true;
							// console.log(this.video_listcopy,'是豆腐干大师傅sf1111')
					}
				}else{
					let len = this.video_list1.length;
					// console.log('向下划 sfbdf')
					if(this.suoyin < len - 1){
						this.circular = true;
					}
					
						if(this.zuzhixia){
							return
						}
						if(this.current == 2 && len > 1 && this.suoyin < len - 1){
							this.video_listcopy[0] = this.video_list1[this.suoyin + 1][0];
						}
						// console.log('654654',this.video_listcopy)
						this.bofang();
						this.zuzhixia = true;
				}
			},
			// 手指离开屏幕
			handletouchend(e){
				let pageY =  e.changedTouches[0].pageY - this.pagesY;
				//向下滑
				if(pageY > 0){
					// console.log('向下滑')
					this.hua = 2;
					// 触底了
					if(this.suoyin == this.video_list1.length - 1 && this.suoyin > 0){
						this.circular = true;
						if(this.current == 0){
							this.suoyin--;
							this.video_listcopy =  JSON.parse(JSON.stringify(this.video_list1[this.suoyin]));
							this.current = 2;
							this.chudichufa = true;
							this.bofang();
							// console.log(this.video_listcopy,'更多士大夫感到是11',this.video_list1[this.suoyin],this.video_list1,this.suoyin)
						}
					}
					
					
					
					
					// if(this.chudi){
					// 	this.chudi = false;
					// 	this.circular = true;
					// 	this.current = Math.abs(this.current--);
					// 	switch(this.current){
					// 		case 0:
					// 			this.current = 2
					// 		break;
					// 		case 1:
					// 			this.current = 0
					// 		break;
					// 		case 2:
					// 			this.current = 1
					// 		break;
					// 	}
					// }
				}else{
					console.log('向上滑')
					this.hua = 1;
					// if(this.current == 2 && this.video_list1.length > 1 && this.suoyin < this.video_list1.length - 1){
					// 	this.video_listcopy[0] = this.video_list1[this.suoyin + 1][0];
					// }
				}
			},
			// 处理数据
			cuIconListData(data,datacopy,nums){
				let arr = [];
				let num = data.length < nums ? data.length : nums;
				for(let i = 0; i < data.length; i++){
					arr.push(data[i]);
					if(arr.length == num){
						data.splice(0,num)
						datacopy.push(arr);
						this.cuIconListData(data,datacopy,nums);
					}
				}
			},
			// current 改变
			cheng(e){
				if(e.detail.source == 'touch'){
					this.current = e.detail.current;
					this.zhanshou = false;
					this.pageIndex1 = 1;
					this.rateList = [];
					this.sctop = 1;
					setTimeout(()=>{
						this.sctop = 0;
					},10)
					if(!this.video_listcopy[this.current].zhankai){
						this.texeheight();
					}
				}
			},
			zanting(type = 0,data){
				this.touchNum ++;
				setTimeout(()=>{
					if(this.touchNum == 1){
						if(this.video_listcopy[this.current].zan){
							this[('vid') +this.current].play();
						}else{
							this.zantingtype = type;
							this[('vid') +this.current].pause();
						}
					}
					if(this.touchNum >= 2){
						this.agree(data,1)
						// this.tui.msg('双击点赞')
					}
					this.touchNum = 0
				},250)
			},
			// 播放
			play(e){
				this.video_listcopy[this.current].zan = false;
			},
			// 暂停
			pause(){
				if(this.zantingtype == 1){
					this.video_listcopy[this.current].zan = true;
					this.zantingtype = 0;
				}
			},
			ended(){
				this.video_listcopy[this.current].zan = false;
			},
			// 播放出错
			error(){
				// this.video_listcopy.splice(this.cunnent,1)
				this.tui.msg('播放失败')
			},
			// video 加载完成时触发
			loadedmetadata(){
				
				this.video_listcopy[this.current].autoplay = true;
				if(!this.video_listcopy[this.current].zhankai){
					this.texeheight();
				}
				
				this[('vid') +this.current].play();
			},
			dayuin(){
				// console.log('是否感到十分会过的更好111')
			},
			
			
			
			// 评论js
			// 评论的遮罩层
			pingzhe(){
				this.zhezhao = false;
			},
			
			
			// scroll-view 触底加载事件
			chudis(){
				if(!this.notData1){
					let item = this.video_listcopy[this.current];
					this.commentData(item)
				}
			},
			scHua(e){
				this.scroTopCopy = e.detail.scrollTop;
				
				// console.log(this.scroTopCopy,'东方化工户籍你',this.dingHe)
			},
			// 监听软键盘弹起事件
			jiantingJian(){
				return new Promise((reslove, reject) => {
					let that = this;
					uni.onKeyboardHeightChange(res => {
						if(res.height > 0){
							that.jianpanHe = res.height;
							reslove(that.jianpanHe);
						}
						
					})
				})
			},
			// 点击评论底部弹起软键盘
			async showJian(){
				this.jian = true;
				this.jianpanHe = this.jianpanHe > 0 ? this.jianpanHe : await this.jiantingJian();//手机软键盘的高度
			},
			// 点击评论的回复按钮
			async huifu111(e){
				this.jian = true;
				let id = e.currentTarget.dataset.id;//这条评论的id
				let name = e.currentTarget.dataset.name;//这条评论的name
				let juY = Math.floor(this.pinggao - e.detail.y - 24*this.bili);//这条评论距屏幕底部的距离
				this.jianpanHe = this.jianpanHe > 0 ? this.jianpanHe : await this.jiantingJian();//手机软键盘的高度
				let jianpan = this.jianpanHe + this.bili * 110;//手机软键盘的高度 + input框的高度
				
				this.scroTop11 = this.scroTopCopy;
				// console.log(this.scroTop11,'阿萨的官方撒旦发个')
				if(juY < jianpan){
					let huagao = jianpan - juY;
					this.dingHe =  huagao;
					
				}
				
			},
			// 关闭评论遮罩
			guanjian(){
				
				this.jian = false;
				this.dingHe = 0;
				this.scroTop = this.scroTop11 - 1 > 0 ?  this.scroTop11 - 1 : 0;
				setTimeout(()=>{
					this.scroTop = this.scroTop11;
					// console.log(this.scroTopCopy,'随风倒敢死队风格给11')
				},500)
			},
			
			guanzhus(){
				this.guandd = true
			},
			
			// 获取文案文字高度
			texeheight(){
				let that = this;
				clearTimeout(setout);
				setout = setTimeout(()=>{
					uni.createSelectorQuery().selectAll(".weilei").boundingClientRect(res => {
						 let list = that.video_list1[that.suoyin];
						 if(res[0].height > that.bili * 72){
							 that.video_listcopy[that.current].zhankai = true;
							 list[that.current].zhankai = true;
						 }else{
							 list[that.current].zhankai = false;
							 that.video_listcopy[that.current].zhankai = false;
						 }
					}).exec()
				},100)
			},
			zhankai(){
				this.zhanshou = !this.zhanshou;
			},
			
			
			
			// 手机号弹框
			phones(e){
				if(e.index == 0){
					this.hideModel();
				}else{
					let phone = this.video_listcopy[this.current].CELLPHONE;
					this.tui.toPhone(phone);
					setTimeout(()=>{
						this.hideModel();
					},0)
				}
			},
			phonshow(){
				this.lianxi = true;
			},
			hideModel(){
				this.lianxi = false;
			},
			
		}
	}
</script>


<style>
	.video_box{
		position: relative;
	}
	.anniu{
		position: absolute;
		right: 14rpx;
		z-index: 5;
		bottom: 200rpx;
		
	}
	.anniu1{
		color: #FFFFFF;
		
		font-size: 28rpx;
		/* padding: 20rpx; */
		display: block;
		/* width: 200rpx;
		line-height: 80rpx;
		background-color: #FFFFFF; */
		text-align: center;
		margin-top: 36rpx;
		position: relative;
	}
	.anniu1.top{
		width: 88rpx;
		height: 88rpx;
		border:2rpx solid #FFFFFF;
		margin-top: 0rpx;
		margin-bottom: 60rpx;
		border-radius: 100px;
	}
	.anniu1.top image{
		width: 100%;
		height: 100%;
		border-radius: 100px;
	}
	
	
	
	.anniu1 image{
		width: 64rpx;
		height: 64rpx;
		text-align: center;
	}
	.guan{
		width: 48rpx;
		height: 48rpx;
		background-color: #FA385E;
		position: absolute;
		left: 50%;
		/* transform: translateX(-50%); */
		bottom: -30rpx;
		border-radius: 100px;
		transform-origin: 24rpx -24rpx;
		transition: all 0.3s cubic-bezier(.17,.67,1,1.58) 0.5s;
	}
	.guan1{
		transition: all 0.3s cubic-bezier(.17,.67,1,1.58);
		background-color: #FFF;
		position: absolute;
		left: 0;
		top: 0;
		transform:  translate(-50%,-50%),scale(0);
		/* transform-origin: 24px 24px; */
		width: 100%;
		height: 100%;
		border-radius: 100px;
		box-shadow: 0 0 20rpx rgba(0,0,0,0.1);
	}
	
	
	
	
	
	.vide_box{
		display: flex;
		align-items: center;
	}
	.icon-zanting{
		position: absolute;
		z-index: 5;
		color:rgba(255,255,255,0.8);
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.fix{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 1000%;
		z-index: 5;
	}
	
	
	/* 评论 */
	.zhezhao{
		position: fixed;
		z-index: 20;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.zhe_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.huadong{
		/* height: 800rpx; */
		/* width: calc(100% - 48rpx); */
		padding: 0 24rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	#scros{
		transition: margin-top .3s;
	}
	.p_top{
		height: 100rpx;
		width: 100%;
		/* position: fixed;
		z-index: 1; */
		background-color: #FFFFFF;
	}
	.p_top_zhan{
		margin-bottom: 30rpx;
		height: 100rpx;
		overflow: hidden;
		border-bottom: 2rpx solid #F5F6F7;
		position: sticky;
		top: 0;
		z-index: 5;
	}
	.p_t_le{
		font-size: 32rpx;
		font-weight: bold;
	}
	.icon-guanbi{
		margin-right: 20rpx;
		font-size: 36rpx;
	}
	.zan{
		font-size: 26rpx;
		color: #AEAEAE;
	}
	
	.ping_le{
		width: calc(100% - 100rpx);
	}
	.contents{
		width: calc(100% - 64rpx);
		margin-left: 64rpx;
	}
	.toubu{
		height: 60rpx;
		margin-left: 20rpx;
	}
	.toubu view{
		line-height: 60rpx;
		color: #AAA4A4;
		font-size: 22rpx;
	}
	.toubushu{
		line-height: 40rpx;
		color: #AAA4A4;
		font-size: 18rpx;
	}
	.con{
		/* margin-left: 64rpx; */
	}
	.neir{
		font-size: 28rpx;
		margin-right: 100rpx;
	}
	
	.shuru{
		width: 100%;
		left: 0;
		height: 110rpx;
		background-color: #FFFFFF;
		transition: all 0.3s;
		border-top: 2rpx solid #EEEEEE;
	}
	.shuru > view{
		width: 100%;
		margin: 0 24rpx;
		padding: 0 24rpx;
		height: 76rpx;
		border-radius: 100px;
		background-color: #F2F6F7;
	}
	.shuru > view input{
		flex: 1;
		/* width:calc(100% - 100rpx); */
		margin-left: 10rpx;
		
		line-height: 50rpx;
	}
	.icon-sanjiao{
		display: inline-block;
		transform:rotate(270deg);
		margin: 0 10rpx;
		font-size: 20rpx;
	}
	
	.shu_box{
		height: auto;
		transition: all 0.3s; 
		overflow: hidden;
	}
	.shu_box_a1{
		height: 0px;
	}
	
	
	
	
	/* `````````````````````````````````````````*/
	
	
	/* 
	 键盘
	 */
	.jianpan{
		position: fixed;
		z-index: 21;
		width: 100%;
		height: 100%;
		/* top: 0; */
		left: 0;
		background-color: rgba(0,0,0,0.2);
		transition: all 0.2s;
		overflow: hidden;
	}
	.shuru1{
		position: absolute;
		width: 100%;
		left: 0;
		width: 100%;
	}
	
	
	/* 导航栏 */
	.nav11{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 11;
		background-color: rgba(0,0,0,0.3);
	}
	.nav_bott{
		height: 44px;
	}
	.navback{
		width: 32px;
		height: 32px;
		border-radius: 100px;
		margin-left: 24rpx;
		margin-right: 6rpx;
		background-color: rgba(0,0,0,0.3);
	}
	
	
	/* 文案 */
	.wenan{
		position: absolute;
		left: 32rpx;
		bottom: 60rpx;
		color: #FFFFFF;
		z-index: 5;
		width: 550rpx;
	}
	.tit text:first-child{
		font-size: 32rpx;
	}
	.tit text:last-child{
		font-size: 28rpx;
		opacity: 0.59;
		margin-left: 20rpx;
	}
	
	
	.duohang{
		font-size: 26rpx;
		font-weight: 500;
		line-height: 36rpx;
		/* max-height: 430rpx;
		overflow-y: auto; */
	}
	.duo-hide1{
		height: 72rpx;
		overflow: hidden;      
	}
	.duohang::before { 
		content: '';
		float: right; 
		height:calc(100% - 36rpx);
		/* height: 36rpx; */
		width: 0; 
	}
	.zhanan{
		float: right;
		background-color: rgba(255,255,255,0.3);
		padding: 0 15rpx;
		line-height: 36rpx;
		border-radius: 6rpx;
		clear: both;
		position: relative;
	}
	
	
	.weilei{
		position: absolute;
		width: 100%;
		opacity: 0;
		left: 0;
		bottom: 0;
		pointer-events:none
	}
	
	
	/* video{
		pointer-events: none;
	} */
	
	
	
	/* 手机兼容 */
	.anniu1.top.cover{
		width: 90rpx;
		margin-top: 0rpx;
		margin-bottom: 30rpx;
		height: 120rpx;
		border: none;
	}
	.touxiang{
		width: 88rpx;
		height: 88rpx;
		border-radius: 100px;
		border: 2rpx solid #FFFFFF;
	}
	
	.anniu1 cover-image{
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}
	.anniu1.top.cover cover-image{
		width: 100%;
		height:88rpx;
		border-radius: 100px;
		margin: 0 auto;
	}
	.cover .guan{
		bottom: 0rpx;
	}
	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
	
</style>