公司要做个仿抖音上拉下滑的视频页,因为图片存到了自己的服务器,无法使用视频封面功能,想来想去只能用swiper里面放几个video标签,来回替换,可是在vivo手机 iqoou1型号上video标签层级太高无法覆盖,没办法使用cover-view标签,可是cover-view不随着手机上下滑动,就像迟滞了一样,标签自带的超出隐藏属性也无法覆盖掉,并且无法使用动画,标签里加转发按钮也不起作用 偶然发现可以把和video标签同级别的标签放到scroll-view里面就能显示出来了,层级可以使用z-index控制了,不知道什么原理,瞎碰上的,在外部列表页面在vivo手机 iqoou1型号上scroll-view里不能放video标签,会出现下图的情况
video标签会随着滚动而滚动一截距离,video标签原本占位的会变成一个黑框
视频列表页代码
:style="{height:pinggao+'px','width':'100%'}" :vertical="true" :circular="circular"> @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend" v-for="i,k in video_listcopy" :key="k" > class="guan flex justify-center align-center" @click="isGs(i)"> @touchend.stop.prevent="''" class="wenan" style="will-change: transform;z-index: 1;opacity: 0;"> {{i.CONTENTS}} {{i.CONTENTS}} {{i.CONTENTS}} {{i.CONTENTS}}
v-show="zhezhao" @click="pingzhe" @touchmove.stop.prevent="''"> :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"> :style="{'margin-top':dingHe > 0 ? -dingHe + 'px' : '0px'}">
{{item.WXNICKNAME}}
{{item.CONTENTS}}
{{formData(item.AUDITTIME)}}
:placeholder="placeholder"
:disabled="true"
:cursor-spacing="50"
v-model="rateContent" :adjust-position="true"/>
:style="{bottom:jian ? '0px' : '-1000px'}" @touchmove.stop.prevent="''"> class="shuru shuru1 flex align-center"> confirm-type="send" :placeholder="placeholder" @confirm="submit" @blur="guanjian" :adjust-position="false" :focus="jian" :cursor-spacing="10" v-model="rateContent"/>
color="#FFF" sliderBgColor="#FFF" selectedColor="#FFF" :bold="true" @change="change1">
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+"¤tTab="+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;
},
}
}
.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;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
相关链接
发表评论