一身正气,浪荡自由。
<!--pages/classification/classification.wxml-->
<!-- <text>pages/classification/classification.wxml</text> -->
<!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 -->
<wxs module="filter" src="../../utils/returnMTime.wxs"></wxs>
<view class='classification' style="z-index: 10000">
<search class="search"></search>
<view class='tab-wrapper'>
<view id="{{item.id}}" data-index="{{index}}" wx:for="{{tabListL}}" wx:key="item" wx:if="{{index <= 3}}" class='tab {{currentTab === index ? "tab-active":""}}' bindtap='switchTab'>
{{item.name}}
<text class="bobr"></text>
</view>
<image bindtap="downLoadMore" class="loadMore bar" src="/static/img/downBoxBtn@2x.png"></image>
</view>
</view>
<view style="padding-top: {{paddingTop}}px;" class="containerr">
<scroll-view class='nav-page'>
<view class="item-box freeVideoBox" wx:for="{{videoList}}" wx:key="item">
<!-- 视频图片层 -->
<view data-id="{{index}}" class="video-image-box freeVideoPanel " style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay">
<image class="topbgblack" src="/static/img/topbgblack@2x.png"></image>
<view class="videoTitle">{{ item.video.title }}</view>
<!-- <view class="videoTeacher">讲师:{{ filter.filter.saveData(item.video.lecturerInfo,1) }} · {{filter.filter.saveData(item.video.lecturerInfo,0) }}</view> -->
<view class="video-cover-box">
<image class="video-image" src="{{item.video.cover}}" mode="aspectFit"></image>
</view>
<!-- 视频按钮 -->
<image class="video-image-play" src="/static/img/paly.png" mode="scaleToFill"></image>
<view class="allBack"></view>
<!-- 蒙层 -->
<!-- <view class="palyNum">{{ item.video.ppv }}次播放</view> -->
<!-- <view class="timeLength">{{ filter.filter.returnMTime(item.course.duration) }}</view> -->
</view>
<!-- 视频播放层 -->
<video id="vid" bindpause="pauseClickFn" bindtap="vidClickFn" src="{{item.video.video}}" data-id="{{index}}" class='video' wx:if="{{_index == index}}" objectFit='contain' autoplay='true' controls></video>
<view class="sharePanel">
<view class="userInfoBox">
<view class="userInfoBoxHead">
<image class="userInfoBoxHeadSrc" src="{{item.merchant.head}}" alt />
<image class="authState" wx:if="{{item.merchant.authType == 1}}" src="/static/img/identity@2x.png" alt></image>
<image class="authState" wx:if="{{item.merchant.authType == 2}}" src="/static/img/Daren@2x.png" alt></image>
<image class="authState" wx:if="{{item.merchant.authType == 3}}" src="/static/img/business@2x.png" alt></image>
</view>
<view class="shopsName">{{item.merchant.nick}}</view>
<text wx:if="{{true}}" class="Unconcerned">关注</text>
<text wx:if="{{false}}" class="concerned">已关注</text>
</view>
<!-- bindtap="showModal" -->
<view class="shareButtonBox" data-course_id='{{item.video.courseId}}' data-title='{{item.video.title}}' data-lecturerInfo='{{item.video.lecturerInfo}}' data-cover='{{item.video.cover}}'>
<image wx:if="{{true}}" class="imgSize noBeenCollected" src="/static/img/noBeenCollected@2x.png" alt="未关注"></image>
<image wx:if="{{false}}" class="imgSize haveBeenCollected" src="/static/img/haveBeenCollected@2x.png" alt="已关注"></image>
<text class="followNum">{{filter.filter.million(11110400)}}</text>
<image wx:if="{{true}}" class="imgSize notToMention" src="/static/img/notToMention@2x.png" alt="未点赞"></image>
<image wx:if="{{false}}" class="imgSize alreadyPraised" src="/static/img/alreadyPraised@2x.png" alt="已点赞"></image>
<text class="thumbsUpNum">{{filter.filter.million(99999)}}</text>
<button class="shareBtn" open-type="share"><image class="shareButton" src="/static/img/shareButton.png"></image></button>
<text class="shareNum">{{filter.filter.million(99999)}}</text>
</view>
</view>
<view class="line"></view>
</view>
</scroll-view>
</view>
<!-- 模态框 -->
<view catchtouchmove="return" class="modals modals-bottom-dialog" hidden="{{hideModal}}">
<view class="modals-cancel" bindtap="hideModal"></view>
<view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">
<view class="borderCl">
<!-- <view class="btn sendFriends" open-type="share">发送给朋友</view> -->
<button class="btn sendFriends shareTips" open-type="share">发送给朋友</button>
<view class="btn" bind:tap="eventDraw">生成海报</view>
</view>
<view bindtap="hideModal" class="btn borderCl cancel">取消</view>
</view>
</view>
<!-- 海報彈框 hidden="{{hideCardModal}}" -->
<view catchtouchmove="return" class="container" bindtap="closeFn" hidden="{{hideCardModal}}">
<image src="{{shareImage}}" class="share-image"></image>
<canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage" />
<button class="savelacally" bind:tap="eventSave">保存图片</button>
</view>
<!-- 下拉框弹出 -->
<view catchtouchmove="return" bindtap="hideDownBox" class="downBox {{hideDownBox?'show':'hide'}}" style="padding-top: {{paddingTop}}px;">
<view class="downBoxListBox">
<view class="item " wx:for="{{tabListL}}" wx:key="item" data-id="{{item.id}}" wx:if="{{index > 3}}" bindtap="tipItemBtn">{{item.name}}</view>
</view>
</view>
js
// pages/classification/classification.js
const app = getApp();
const timeD = require("../../utils/util.js");
Page({
/**
* 页面的初始数据
*/
data: {
tabListL: [
{ name: '精选课程1', id: 1 },
{ name: '精选课课程2', id: 2 },
{ name: '精选课程3', id: 3 },
{ name: '精选课课程4', id: 4 },
{ name: '精选课程5', id: 5 },
{ name: '精选课程6', id: 6 },
{ name: '精选7', id: 7 },
{ name: '精选选课选课8', id: 8 },
{ name: '精选9', id: 9 },
{ name: '精选课选课程10', id: 10 },
{ name: '精选课程11', id: 11 },
{ name: '精选课程12', id: 12 },
{ name: '精选课程13', id: 13 },
],
currentTab: 0,
paddingTop: 0,
videoPlay: null,
dataList: [],
courseId: '197675',
title: '',
cover: '', // http://pic.rmb.bdstatic.com/mvideo/cde67c41211d7a46c1fb87138935b912
videoList: [],
videoSrcList: [],
len: 0,
videoSrcListResult: false,
hideModal: true, //模态框的状态 true-隐藏 false-显示
animationData: {}, // 动画集
painting: {}, // 海報
shareImage: '', // 生成海报图片
hideCardModal: true, // 海報彈框
name: '李大玄',
flag: false,
hasLogin: false,
wxQrcode: '', // 分享的二维码
hideDownBox: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options.scene) {
var scene = decodeURIComponent(options.scene);
var courseId = scene.split('&')[0].split('=')[1];
this.setData({
courseId: courseId
})
} else if (options.courseId) {
this.setData({
courseId: options.courseId
})
}
this.getData();
// this.eventDraw();
// this.getUserInfo();
wx.hideShareMenu();
this.getPaddingTopFn();
this.setData({
hideDownBox: false
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
this.setData({
hideDownBox: false
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
switchTab(e) {
console.log(e.currentTarget.dataset.index)
this.setData({
currentTab: e.currentTarget.dataset.index
})
},
// 点击cover播放,其它视频结束
videoPlay: function (e) {
console.log(e)
var _index = e.currentTarget.dataset.id
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(_index + "")
videoContextPrev.stop();
setTimeout(function () {
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index + "")
videoContext.play();
}, 500)
},
// 模拟数据加载
getData: function () {
this.setData({
videoList: [{
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
}, {
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
},
{
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
},
{
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
},
{
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
},
{
"course": {
"id": 263211,
"cover": "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/236.jpg?2",
"videoId": "54319f01af444951949611aafc9fa247",
"pv": 0,
"ppv": 27710,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"cfType": 1,
"lessonCon": 1,
"price": 0.0000,
"duration": 191
},
"merchant": {
"id": 304133,
"gender": 1,
"nick": "阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德",
"head": "http://media-test.xiujianshen.com/RC-Android/user/picture/40eeb9cf718f43c737ef009c7c72114e.jpg",
"area": "北京\t昌平",
"authType": 3
},
"video": {
"lessonId": 1257,
"cover": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/snapshots/1b512b7eb5e9449eb90bfc42379bbf97-00002.jpg",
"courseId": 263211,
"title": "体验一下人间疾苦!雷神健身房遭教练虐待",
"videoId": "54319f01af444951949611aafc9fa247",
"video": "https://video-test.xiujianshen.com/54319f01af444951949611aafc9fa247/4182d7ed107a43a7818dd35582efeb5c-5c4120e9f8e360956257e0a86b9b83f0-sd.mp4",
"merchantId": 304133,
"ppv": 27710,
"lecturerInfo": "高级讲师:李鹏"
}
}
]
});
},
// 小程序 发送给朋友
onShareAppMessage: function (res) {
// wx.showToast({ title: res, icon: 'success', duration: 2000 })
var that = this;
var courseId = that.data.courseId; //获取产品id
var title = that.data.title; //获取产品标题
var cover = that.data.cover; //产品图片
that.hideModal();
if (res.from === 'button') {
// 来自页面内转发按钮
return {
title: title,
path: 'pages/index/index?courseId=' + courseId,
imageUrl: cover, //不设置则默认为当前页面的截图
success: (res) => {
wx.showToast({ title: res, icon: 'success', duration: 2000 })
},
fail: (res) => {
wx.showToast({ title: res, icon: 'success', duration: 2000 })
}
}
}
},
asdasd: function () {
wx.navigateTo({
url: '../qwe/qwe',
})
},
// 显示遮罩层 分享按钮的点击事件
showModal: function (event) {
// console.log(app.isAuthorized())
// console.log(app.isAuthorized())
if (!app.getLoginStatus() || app.isAuthorized() != 3) { //表示app未登录
this.needLogin();
return;
}
// 获取参数
this.getWxQrcode(); // 调取接口 获取二维码
var parameter = event.currentTarget.dataset; // 参数转存
var that = this;
that.setData({
hideModal: false,
courseId: parameter.course_id,
cover: parameter.cover,
title: parameter.title,
lecturerInfo: parameter.lecturerinfo.split(':')[1] + ' ' + parameter.lecturerinfo.split(':')[0]
})
var animation = wx.createAnimation({
duration: 600, //动画的持续时间 默认600ms 数值越大,动画越慢 数值越小,动画越快
timingFunction: 'ease', //动画的效果 默认值是linear
})
this.animation = animation
setTimeout(function () {
that.fadeIn(); //调用显示动画
}, 200);
app.globalData.authorized;
},
// 隐藏遮罩层
hideModal: function () {
var that = this;
var animation = wx.createAnimation({
duration: 800, //动画的持续时间 默认800ms 数值越大,动画越慢 数值越小,动画越快
timingFunction: 'ease', //动画的效果 默认值是linear
})
this.animation = animation
that.fadeDown(); //调用隐藏动画
setTimeout(function () {
that.setData({
hideModal: true
})
}, 720) //先执行下滑动画,再隐藏模块
},
//动画集
fadeIn: function () {
this.animation.translateY(0).step()
this.setData({
animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性
})
},
fadeDown: function () {
this.animation.translateY(300).step()
this.setData({
animationData: this.animation.export(),
})
},
eventSave() {
wx.saveImageToPhotosAlbum({
filePath: this.data.shareImage,
success(res) {
wx.showToast({
title: '保存图片成功',
icon: 'success',
duration: 2000
})
},
fail: function (res) {
console.log(res)
}
})
},
closeFn() {
this.setData({
hideCardModal: true,
shareImage: '',
painting: {}
});
},
eventGetImage(event) {
wx.hideLoading()
const { tempFilePath, errMsg } = event.detail
if (errMsg === 'canvasdrawer:ok') {
this.setData({
shareImage: tempFilePath
})
}
},
// 每一个视频点击事件 展示原封面
vidClickFn(event) {
let query = wx.createSelectorQuery();
let queryNode = query.selectAll('#vid')
if (this.data.flag == false) {
this.setData({ flag: true })
} else {
this.setData({ flag: false })
}
if (queryNode.pause) {
this.setData({ flag: false })
} else {
this.setData({ flag: true })
}
},
needLogin() { //需要登录
this.setData({
hasLogin: true
});
this.selectComponent("#dialogss").getData();
},
requestErr() { //接口报402时
if (!app.getLoginStatus()) { //表示app未登录
this.needLogin();
} else {
}
},
visibleToggle(e) {
this.setData({
hasLogin: e.detail
});
},
// 点击分享按钮 获取小程序二维码
getWxQrcode() {
let that = this;
that.setData({ wxQrcode: '' });
let data = {
scene: 'courseId=' + that.data.courseId, // 课程id
page: 'pages/index/index',
type: 1,
isHyaline: true,
};
app.apiRequest('/auth/wx/applet/qrcode', data, 'post').then(res => {
if (res.data.code == 0) {
that.setData({
wxQrcode: res.data.data
});
console.log(res.data.data)
// wx.showLoading({ title: res.data, duration: 2000 })
} else {
wx.showLoading({ title: JSON.stringify(res.data.code + ':' + res.data.message), duration: 2000 })
}
}).catch(error => {
// handle error
})
},
// 获取元素高度
getPaddingTopFn() {
let that = this;
wx.createSelectorQuery().selectAll('.classification').boundingClientRect(function (rects) {
that.setData({
paddingTop: rects[0].height,
})
}).exec();
},
// 点击下拉按钮时
downLoadMore() {
if (this.data.hideDownBox) { // true
this.setData({
hideDownBox: false
});
} else { // false
this.setData({
hideDownBox: true
});
}
},
// 下拉tab栏点击事件
tipItemBtn(e) {
var item;
this.data.tabListL.forEach((ele,i) => {
if (ele.id == e.currentTarget.dataset.id) {
item = ele;
this.data.tabListL.splice(i, 1);
this.data.tabListL.unshift(item);
this.setData({
tabListL: this.data.tabListL
})
}
})
this.setData({
hideDownBox: false
});
},
})
/* pages/classification/classification.wxss */
.classification {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
flex-direction: column;
width: 100%;
/* height: 100%; */
box-sizing: border-box;
margin: 0;
padding: 0;
background: #fafafa;
}
.container {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
flex-direction: column;
width: 100%;
/* height: 100%; */
box-sizing: border-box;
margin: 0;
padding: 0;
background: #fafafa;
}
.tab-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 80rpx;
background: linear-gradient(270deg, rgba(254, 115, 88, 1) 0%, rgba(235, 70, 84, 1) 100%);
}
.tab {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 28rpx;
color: rgb(255, 255, 255);
text-align: center;
height: 100%;
}
.tab-active {
position: relative;
}
.tab-active .bobr {
display: inline-block;
position: absolute;
bottom: 2rpx;
left: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 24px;
background-color: #fff;
border-radius: 4px;
}
.loadMore {
width: 100rpx;
height: 64rpx;
margin-bottom: -10rpx;
/* background: pink; */
}
page {
width: 100%;
height: 100%;
}
.content-wrapper {
width: 100%;
height: 100%;
}
/* ------------------------------------------------------------------------------- */
.item-box .video-image-box {
height: 420rpx;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position-x: 30rpx;
position: relative;
}
.item-box .video-cover-box {
height: 100%;
width: 100%;
background: #000;
text-align: center;
}
.item-box .video-image-box .video-cover-box .video-image {
height: 100%;
width: 100%;
}
.item-box .video {
height: 400rpx;
width: 100%;
margin: 0 30rpx 0 0;
position: relative;
}
.item-box .video-image-box .video-image-play {
position: absolute;
width: 80rpx;
height: 80rpx;
top: calc(50% - 40rpx);
left: calc(50% - 40rpx);
z-index: 8;
}
/* -------------------------------- */
.freeVideoBox {
position: relative;
width: 100%;
}
.freeVideoPanel {
position: relative;
width: 100%;
height: 420rpx;
}
.freeVideoPanel .allBack {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.placeHolderImg {
width: 100%;
height: 420rpx;
object-fit: contain;
}
.sharePanel {
padding: 20rpx 30rpx;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
}
.userInfoBox {
display: flex;
align-items: center;
}
.userInfoBoxHead {
position: relative;
width: 74rpx;
height: 74rpx;
}
.userInfoBoxHead .userInfoBoxHeadSrc {
width: 74rpx;
height: 74rpx;
border-radius: 50%;
}
.userInfoBoxHead .authState {
position: absolute;
width: 30rpx;
height: 30rpx;
bottom: 0;
right: 0;
z-index: 6;
}
.shopsName {
width: 260rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
font-size: 28rpx;
margin-left: 20rpx;
}
/* 未关注 */
.concerned {
color: #dbdbdb;
font-size: 26rpx;
border-left: 2rpx solid #eee;
padding-left: 8rpx;
}
/* 已关注 */
.Unconcerned {
color: #eb4654;
font-size: 26rpx;
border-left: 2rpx solid #eee;
padding-left: 8rpx;
}
.shareButtonBox {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #333;
}
.shareButtonBox .imgSize {
width: 36rpx;
height: 34rpx;
margin-right: 56rpx;
}
.shareButtonBox text {
font-size: 18rpx;
color: #666;
}
/* 关注数 */
.shareButtonBox .followNum {
position: absolute;
right: 160rpx;
top: 5rpx;
}
/* 点赞数 */
.shareButtonBox .thumbsUpNum {
position: absolute;
right: 70rpx;
top: 5rpx;
}
/* 分享数 */
.shareButtonBox .shareNum {
position: absolute;
right: -10rpx;
top: 5rpx;
}
.shareButtonBox .shareBtn {
margin: 0;
padding: 0;
height: auto;
background: #fff;
margin-top: 5rpx;
line-height: auto;
}
.shareButtonBox .shareButton {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
background-size: contain;
}
.shareButtonBox .shareTips {
height: 38rpx;
padding: 0;
font-size: 26rpx;
background-color: transparent;
border: 1rpx solid transparent;
line-height: 35rpx;
}
button::after {
border: 0;
border-radius: 0;
}
.getPlayResult image {
position: absolute;
width: 80rpx;
height: 80rpx;
background-size: cover;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.freeVideoPanel .palyNum {
z-index: 10;
color: rgb(255, 255, 255);
left: 30rpx;
position: absolute;
bottom: 25rpx;
font-size: 26rpx;
text-shadow: 1rpx 2rpx #bbb;
}
.timeLength {
position: absolute;
bottom: 22rpx;
right: 30rpx;
padding: 7rpx 18rpx;
border-radius: 24rpx;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 24rpx;
z-index: 10;
}
.videoTitle {
position: absolute;
max-width: 700rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
top: 18rpx;
left: 30rpx;
color: #fff;
font-size: 38rpx;
z-index: 10;
font-weight: 700;
}
.item-box .topbgblack {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 160rpx;
}
.videoTeacher {
position: absolute;
max-width: 400rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
top: 68rpx;
left: 30rpx;
color: #fff;
font-size: 24rpx;
z-index: 10;
}
.BeforPreviewHand {
width: 8rpx;
height: 8rpx;
background-size: cover;
}
.line {
width: 100%;
height: 16rpx;
background-color: #f7f7f7;
}
/*模态框*/
.modals {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modals .modals-cancel {
position: absolute;
z-index: 12;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modals .bottom-dialog-body {
position: absolute;
z-index: 10001;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
height: 300rpx;
/* background-color: #fff; */
}
/*动画前初始位置*/
.modals .bottom-pos {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.modals .btn {
background: rgba(255, 255, 255, 0.98);
color: #333;
display: flex;
flex-direction: column;
align-items: center;
height: 105rpx;
justify-content: center;
font-size: 32rpx;
border-radius: 0;
}
.modals .sendFriends {
border-bottom: 0.1rpx solid #cacaca;
}
.modals .borderCl {
border-radius: 12rpx;
overflow: hidden;
}
.modals .cancel {
margin: 16rpx 0;
}
/* 海報 */
.container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100000;
/* background: pink; */
}
.container .share-image {
/* background: green; */
margin: 0 auto;
text-align: center;
margin-top: 230rpx;
width: 650rpx;
height: 720rpx;
/* background: pink; *//* padding: 1px; */
}
.container .savelacally {
position: absolute;
left: 50%;
bottom: 5%;
transform: translate(-50%, -50%);
width: 254rpx;
height: 90rpx;
line-height: 90rpx;
background: linear-gradient(360deg, rgba(254, 145, 95, 1) 0%, rgba(254, 182, 126, 1) 100%);
border-radius: 50rpx;
font-size: 32rpx;
color: #fff;
}
/* ---- 顶部下拉框 -------------------------------------------------- */
.downBox {
position: fixed;
top: 0;
/* top: 100%; */
left: 0;
width: 100%;
background: rgb(0, 0, 0, 0.5);
z-index: 20;
transition: all 1s ease;
overflow: hidden;
}
.downBox .downBoxListBox {
display: flex;
flex-wrap: wrap;
align-items: center;
background: #fff;
padding: 30rpx 0 42rpx 0;
}
.downBox .downBoxListBox .item {
display: flex;
align-items: center;
justify-content: center;
background:#F6F6F6;
border-radius: 8rpx;
padding: 18rpx 22rpx;
margin: 0 18rpx 18rpx 18rpx;
font-size: 24rpx;
color: #333;
/* margin-bottom: 18rpx; */
}
.hide{
height: 0;
}
.show{
height: 100%;
/* top: 0; */
}
@keyframes slidedown{
from {
height: 0;
}
to {
height: 100%;
}
}
@keyframes slideup{
from {
height: 100%;
}
to {
height: 0;
}
}