Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
38ac698c
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
38ac698c
编写于
11月 24, 2023
作者:
雪洛
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: 格式化代码
上级
a6d45c06
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
382 addition
and
381 deletion
+382
-381
pages/template/drop-card/card/card.uvue
pages/template/drop-card/card/card.uvue
+136
-136
pages/template/swiper-vertical-video/swiper-vertical-video.uvue
...template/swiper-vertical-video/swiper-vertical-video.uvue
+246
-245
未找到文件。
pages/template/drop-card/card/card.uvue
浏览文件 @
38ac698c
<template>
<template>
<view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)"
<view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)"
@touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
@touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
<image class="card-img" ref="card-img" :src="img"></image>
<image class="card-img" ref="card-img" :src="img"></image>
<view class="state">
<view class="state">
<image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix">
<image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix">
</image>
</image>
<image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png"
<image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png"
mode="widthFix"></image>
mode="widthFix"></image>
<!-- cardIndex:{{cardIndex}} -->
<!-- cardIndex:{{cardIndex}} -->
</view>
</view>
</view>
</view>
</template>
</template>
<script>
<script>
let sX : number = 0,
let sX : number = 0,
...
@@ -21,22 +21,22 @@
...
@@ -21,22 +21,22 @@
export default {
export default {
data() {
data() {
return {
return {
$elementMap:new Map<string, Element>(),
$elementMap:
new Map<string, Element>(),
x: 0 as number,
x: 0 as number,
y: 0 as number,
y: 0 as number,
// 飘走的卡片计数
// 飘走的卡片计数
floatCount:
0 as number
floatCount:
0 as number
}
}
},
},
props: {
props: {
img: {
img: {
type: String,
type: String,
default: "/static/template/drop-card/1.jpg"
default: "/static/template/drop-card/1.jpg"
},
},
cardIndex:
{
cardIndex:
{
type:
Number,
type:
Number,
default:
0
default:
0
}
}
},
},
computed: {
computed: {
movePercent() : number {
movePercent() : number {
...
@@ -47,47 +47,47 @@
...
@@ -47,47 +47,47 @@
},
},
dislikeOpacity() : number {
dislikeOpacity() : number {
return this.x > 0 ? 0 : this.movePercent * 100
return this.x > 0 ? 0 : this.movePercent * 100
}
}
},
mounted() {
uni.getSystemInfo({
success: (e) => {
screenWidth = e.screenWidth;
screenHeight = e.screenHeight;
}
})
// TODO 需要延迟设置才能生效
setTimeout(()=>{
this.setElementStyle('card','height', screenHeight * 0.7 + 'px');
this.setElementStyle('card-img','height', screenHeight * 0.7 + 'px');
this.initCardStyle()
},200)
uni.$on('uni-drop-card-float',()=>{
this.floatCount ++
this.initCardStyle()
})
},
},
methods: {
mounted() {
initCardStyle(){
uni.getSystemInfo({
let _index = (this.cardIndex + this.floatCount)%3
success: (e) => {
// console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
screenWidth = e.screenWidth;
this.setElementStyle('card','z-index', _index)
screenHeight = e.screenHeight;
this.setElementStyle('card','margin-top', screenHeight * 0.15 - 30 * _index + 'px');
}
this.setElementStyle('card','transform', 'scale('+(0.9 + 0.05 * _index)+')')
})
},
// TODO 需要延迟设置才能生效
setTimeout(() => {
this.setElementStyle('card', 'height', screenHeight * 0.7 + 'px');
this.setElementStyle('card-img', 'height', screenHeight * 0.7 + 'px');
this.initCardStyle()
}, 200)
uni.$on('uni-drop-card-float', () => {
this.floatCount++
this.initCardStyle()
})
},
methods: {
initCardStyle() {
let _index = (this.cardIndex + this.floatCount) % 3
// console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
this.setElementStyle('card', 'z-index', _index)
this.setElementStyle('card', 'margin-top', screenHeight * 0.15 - 30 * _index + 'px');
this.setElementStyle('card', 'transform', 'scale(' + (0.9 + 0.05 * _index) + ')')
},
// 工具方法,用于快速设置 Element 的 style
// 工具方法,用于快速设置 Element 的 style
setElementStyle(refName
:string,propertyName : string, propertyStyle : any) : void {
setElementStyle(refName
: string, propertyName : string, propertyStyle : any) : void {
const elementMap = this.$data['$elementMap'] as Map<string, Element>
const elementMap = this.$data['$elementMap'] as Map<string, Element>
let element : Element | null = elementMap[refName]
let element : Element | null = elementMap[refName]
if
(element == null){
if
(element == null) {
element = this.$refs[refName] as Element;
element = this.$refs[refName] as Element;
elementMap[refName] = element
elementMap[refName] = element
}
else{
}
else {
// console.log('直接拿');
// console.log('直接拿');
}
}
element?.style?.setProperty(propertyName, propertyStyle);
element?.style?.setProperty(propertyName, propertyStyle);
},
},
touchstart(e : TouchEvent) {
touchstart(e : TouchEvent) {
...
@@ -114,85 +114,85 @@
...
@@ -114,85 +114,85 @@
this.moveCard()
this.moveCard()
},
},
touchend() {
touchend() {
// console.log('touchend')
// console.log('touchend')
touchstartAfter = false
touchstartAfter = false
if
(floating){
if
(floating) {
return // 浮动动画进行中
return // 浮动动画进行中
}
}
floating = true
floating = true
// 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
// 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
let k
:number = 0;
let k
: number = 0;
if (this.x > screenWidth / 10
) {
if (this.x > screenWidth / 10
) {
k = 1
k = 1
}
else if(this.x < screenWidth * -1 / 10){
}
else if (this.x < screenWidth * -1 / 10) {
k = -1
k = -1
}
}
function cardTo(x
:number,y:number,callback: () => void,speed:number = 10){
function cardTo(x
: number, y : number, callback : () => void, speed : number = 10) {
let interval
:number = 0
let interval
: number = 0
let acceleration
:number = 1
let acceleration
: number = 1
interval = setInterval(()
=>{
interval = setInterval(()
=> {
// 加速度
// 加速度
acceleration += 0.2
acceleration += 0.2
const dx = x - this.x
const dx = x - this.x
if
(Math.abs(dx) < 1){
if
(Math.abs(dx) < 1) {
this.x = x
this.x = x
}
else{
}
else {
this.x += dx
/speed*acceleration
this.x += dx
/ speed * acceleration
}
}
const dy = y - this.y
const dy = y - this.y
if
(Math.abs(dy) < 1){
if
(Math.abs(dy) < 1) {
this.y = y
this.y = y
}
else{
}
else {
this.y += dy
/speed*acceleration
this.y += dy
/ speed * acceleration
}
}
this.moveCard()
this.moveCard()
if
( this.x == x && this.y == y){
if
(this.x == x && this.y == y) {
clearInterval(interval)
clearInterval(interval)
callback()
callback()
}
}
},
16)
},
16)
}
}
if
(k.toInt() != 0){
if
(k.toInt() != 0) {
cardTo(k * screenWidth * 1.3, this.y * 3,
()=>{
cardTo(k * screenWidth * 1.3, this.y * 3,
() => {
// 状态图标变回透明
// 状态图标变回透明
this.setElementStyle("state-icon-like",
'opacity', 0)
this.setElementStyle("state-icon-like",
'opacity', 0)
this.setElementStyle("state-icon-dislike",
'opacity', 0)
this.setElementStyle("state-icon-dislike",
'opacity', 0)
// 设置为透明,防止飘回时因为 margin-top 太高,露出来
// 设置为透明,防止飘回时因为 margin-top 太高,露出来
this.setElementStyle("card",
'opacity', 0)
this.setElementStyle("card",
'opacity', 0)
setTimeout(()
=>{
setTimeout(()
=> {
this.setElementStyle("card",
'opacity', 1)
this.setElementStyle("card",
'opacity', 1)
},
300)
},
300)
// 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行
// 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行
uni.$emit('uni-drop-card-float',
null)
uni.$emit('uni-drop-card-float',
null)
floating = false
floating = false
},
8)
},
8)
}
else{
}
else {
const _x
:number = this.x
const _x
: number = this.x
const _y
:number = this.y
const _y
: number = this.y
cardTo(
(_x*-0.05).toInt() , (_y*-0.05).toInt() ,()=>{
cardTo(
(_x * -0.05).toInt(), (_y * -0.05).toInt(), () => {
cardTo(0,
0,()=>{
cardTo(0,
0, () => {
console.log('bounce')
console.log('bounce')
floating = false
floating = false
},
30)
},
30)
})
})
}
}
},
},
moveCard() {
moveCard() {
this.setElementStyle("card",
this.setElementStyle("card",
'transform',
'transform',
`translate(${this.x}px,${this.y}px) rotate(${this.x
/
-30}deg) scale(1)`
`translate(${this.x}px,${this.y}px) rotate(${this.x
/
-30}deg) scale(1)`
)
)
this.setElementStyle("state-icon-like",
'opacity', this.x < 0 ? 0 : this.movePercent * 10)
this.setElementStyle("state-icon-like",
'opacity', this.x < 0 ? 0 : this.movePercent * 10)
this.setElementStyle("state-icon-dislike",'opacity', this.x > 0 ? 0 : this.movePercent * 10)
this.setElementStyle("state-icon-dislike",
'opacity', this.x > 0 ? 0 : this.movePercent * 10)
}
}
}
}
}
}
</script>
</script>
...
@@ -210,7 +210,7 @@
...
@@ -210,7 +210,7 @@
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: #FFF;
background-color: #FFF;
transition: margin-top 300ms;
transition: margin-top 300ms;
transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
}
.card-img {
.card-img {
...
@@ -239,4 +239,4 @@
...
@@ -239,4 +239,4 @@
box-shadow: 0 0 1px #EBEBEB;
box-shadow: 0 0 1px #EBEBEB;
opacity: 0;
opacity: 0;
}
}
</style>
</style>
\ No newline at end of file
pages/template/swiper-vertical-video/swiper-vertical-video.uvue
浏览文件 @
38ac698c
<template>
<template>
<view class="page">
<view class="page">
<view @click="back" class="nav-back">
<view @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view>
</view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
@transition="onTransition">
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
@transition="onTransition">
<video @click="changeState(i)" ref="video" class="video-box" objectFit="cover" :id="'video-'+i"
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
@loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src"
<video @click="changeState(i)" ref="video" class="video-box" objectFit="cover" :id="'video-'+i"
:autoplay="false" :show-center-play-btn="false"
@loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :autoplay="false"
:
loop="true" @play="onPlay(i)" @pause="onPause(i)"
:
show-center-play-btn="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
></video>
<view class="video-cover" @click="changeState(i)">
<view class="video-cover" @click="changeState(i)">
<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png"
<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png"
mode="widthFix"></image>
mode="widthFix"></image>
</view>
</view>
<view class="video-info" v-if="0">
<view class="video-info" v-if="0">
<text class="video-info-text">容器:第 {{i}} 个</text>
<text class="video-info-text">容器:第 {{i}} 个</text>
<text class="video-info-text">内容:{{item.content}}</text>
<text class="video-info-text">内容:{{item.content}}</text>
</view>
</view>
</swiper-item>
</swiper-item>
</swiper>
</swiper>
<view class="debug-info" v-if="0">
<view class="debug-info" v-if="0">
<text class="status-text">debug-info 播放状态:</text>
<text class="status-text">debug-info 播放状态:</text>
<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text>
<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text>
</view>
</view>
</view>
</view>
</template>
</template>
<script>
<script>
type ListItem = { _id : string, content : string, src : string, poster_src : string }
type ListItem = { _id : string, content : string, src : string, poster_src : string }
let page : number = 0,
let page : number = 0,
currentPageIsShow : boolean = true;
currentPageIsShow : boolean = true;
export default {
export default {
components: {},
components: {},
data() {
data() {
return {
return {
$videoContextMap: new Map<string, VideoContext>(),
$videoContextMap: new Map<string, VideoContext>(),
list: [] as ListItem[],
list: [] as ListItem[],
visibleList: [] as ListItem[],// 提高性能 可见的只有3个
visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number,
current: 0 as number,
index: 0,
index: 0,
state: ["unPlay", "unPlay", "unPlay"] as string[]
state: ["unPlay", "unPlay", "unPlay"] as string[]
}
}
},
},
created() {
created() {
this.list = this.getData()
this.list = this.getData()
this.visibleList = this.list.slice(0, 3)
this.visibleList = this.list.slice(0, 3)
},
},
watch: {
watch: {
current(current : number, oldCurrent : number) {
current(current : number, oldCurrent : number) {
let changeNumber = current - oldCurrent
let changeNumber = current - oldCurrent
if (changeNumber == 1 || changeNumber == -2) {
if (changeNumber == 1 || changeNumber == -2) {
// console.error('向右');
// console.error('向右');
this.index++
this.index++
} else {
} else {
// console.error('向左');
// console.error('向左');
this.index--
this.index--
}
}
// //翻页(3项为一页)
// //翻页(3项为一页)
if (Math.abs(changeNumber) == 2) {
if (Math.abs(changeNumber) == 2) {
// console.log('翻页');
// console.log('翻页');
page = Math.floor(this.index / 3);
page = Math.floor(this.index / 3);
// console.log(this.index);
// console.log(this.index);
// console.log('page',page);
// console.log('page',page);
// console.log('slice',3*page,3*page+3);
// console.log('slice',3*page,3*page+3);
if (this.list.length < 3 * page + 3) {
if (this.list.length < 3 * page + 3) {
let list : ListItem[] = this.getData()
let list : ListItem[] = this.getData()
this.list.push(...list)
this.list.push(...list)
}
}
let visibleList = this.list.slice(3 * page, 3 * page + 3)
let visibleList = this.list.slice(3 * page, 3 * page + 3)
// 换数据
// 换数据
this.visibleList = visibleList
this.visibleList = visibleList
}
}
this.state.forEach((_ : string, index : number) => {
this.state.forEach((_ : string, index : number) => {
if (index === current) {
if (index === current) {
this.doPlay(current)
this.doPlay(current)
} else {
} else {
// 除了选中的其他已经播放的都需要停止
// 除了选中的其他已经播放的都需要停止
this.doStop(index)
this.doStop(index)
console.log('index:' + index + '已被执行停止');
console.log('index:' + index + '已被执行停止');
}
}
})
})
}
}
},
},
onReady() {
onReady() {
// 一启动完成,就播放第一个
// 一启动完成,就播放第一个
this.doPlay(0)
this.doPlay(0)
},
},
onShow(){
onShow() {
currentPageIsShow = true
currentPageIsShow = true
},
},
onHide() {
onHide() {
currentPageIsShow = false
currentPageIsShow = false
console.log('pages-onHide');
console.log('pages-onHide');
this.doPause(this.current)
this.doPause(this.current)
},
onUnload() {
this.doPause(this.current)
},
},
methods: {
onUnload() {
changeState(index : number) {
this.doPause(this.current)
if (this.state[index] === 'play') {
},
this.doPause(index)
methods: {
} else {
changeState(index : number) {
this.doPlay(this.current)
if (this.state[index] === 'play') {
}
this.doPause(index)
},
} else {
onLoadstart(index : number) {
this.doPlay(this.current)
console.error("onLoadstart video" + index );
}
},
},
getVideoContext(index : number) : VideoContext {
onLoadstart(index : number) {
const videoContextMap = this.$data['$videoContextMap'] as Map<string, VideoContext>
console.error("onLoadstart video" + index);
let videoContext : VideoContext | null = videoContextMap['video-'+index]
},
if(videoContext == null){
getVideoContext(index : number) : VideoContext {
videoContext = uni.createVideoContext('video-'+index, this) as VideoContext
const videoContextMap = this.$data['$videoContextMap'] as Map<string, VideoContext>
videoContextMap['video-'+index] = videoContext
let videoContext : VideoContext | null = videoContextMap['video-' + index]
}
if (videoContext == null) {
return videoContext
videoContext = uni.createVideoContext('video-' + index, this) as VideoContext
videoContextMap['video-' + index] = videoContext
}
return videoContext
},
},
doPlay(index : number) {
doPlay(index : number) {
console.log("doPlay video" + index );
console.log("doPlay video" + index);
this.getVideoContext(index).play()
this.getVideoContext(index).play()
},
doStop(index : number) {
console.log("doStop video-" + index);
this.getVideoContext(index).stop();
// TODO 临时方案:解决.stop()时触发了doPause的问题
setTimeout(()=>{
this.state[index] = 'unPlay'
},1000)
},
doPause(index : number) {
this.getVideoContext(index).pause()
console.log("doPause video-" + index);
},
},
onPause(index : number) {
doStop(index : number) {
this.state[index] = 'pause'
console.log("doStop video-" + index);
console.log('onPause', index);
this.getVideoContext(index).stop();
},
// TODO 临时方案:解决.stop()时触发了doPause的问题
onPlay(index : number) {
setTimeout(() => {
if(this.current != index || !currentPageIsShow){
this.state[index] = 'unPlay'
this.onPause(index)
}, 1000)
}else{
},
this.state[index] = 'play'
doPause(index : number) {
console.log('onPlay', index);
this.getVideoContext(index).pause()
console.log("doPause video-" + index);
},
onPause(index : number) {
this.state[index] = 'pause'
console.log('onPause', index);
},
onPlay(index : number) {
if (this.current != index || !currentPageIsShow) {
this.onPause(index)
} else {
this.state[index] = 'play'
console.log('onPlay', index);
}
}
},
},
getData() : ListItem[] {
getData() : ListItem[] {
let videoUrlList = [
let videoUrlList = [
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-ai.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-ai.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-verify.mp4'
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-verify.mp4'
] as string[]
] as string[]
let posterSrcList = [
let posterSrcList = [
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-uts.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-uts.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-ai.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-ai.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-verify.jpg'
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-verify.jpg'
] as string[]
] as string[]
let list = [] as ListItem[];
let list = [] as ListItem[];
for (let i = 0; i < 6; i++) {
for (let i = 0; i < 6; i++) {
let index = this.list.length + i;
let index = this.list.length + i;
let listItem : ListItem = {
let listItem : ListItem = {
"_id": "a00" + index,
"_id": "a00" + index,
"content": "这是第" + index + "条数据,url地址" + videoUrlList[i % 3],
"content": "这是第" + index + "条数据,url地址" + videoUrlList[i % 3],
"src": videoUrlList[i % 3],
"src": videoUrlList[i % 3],
"poster_src": posterSrcList[i % 3]
"poster_src": posterSrcList[i % 3]
}
}
list.push(listItem)
list.push(listItem)
}
}
return list
return list
},
},
onSwiperChange(e : SwiperChangeEvent) {
onSwiperChange(e : SwiperChangeEvent) {
// console.error('SwiperChangeEvent',e.detail.current);
// console.error('SwiperChangeEvent',e.detail.current);
this.current = e.detail.current;
this.current = e.detail.current;
},
},
onTransition(/*e : SwiperTransitionEvent*/) {
onTransition(/*e : SwiperTransitionEvent*/) {
// console.log('onTransition e.detail.dx', e.detail.dx);
// console.log('onTransition e.detail.dx', e.detail.dx);
},
},
back() {
back() {
uni.navigateBack({
uni.navigateBack({
success(result) {
success(result) {
console.log('navigateBack success', result.errMsg)
console.log('navigateBack success', result.errMsg)
},
},
fail(error) {
fail(error) {
console.log('navigateBack fail', error.errMsg)
console.log('navigateBack fail', error.errMsg)
},
},
complete(result) {
complete(result) {
console.log('navigateBack complete', result.errMsg)
console.log('navigateBack complete', result.errMsg)
}
}
})
})
}
}
}
}
}
}
</script>
</script>
<style>
<style>
.page {
.page {
width: 750rpx;
width: 750rpx;
flex: 1;
flex: 1;
}
}
.swiper,
.swiper,
.swiper-item,
.swiper-item,
.video-box,
.video-box,
.video-cover {
.video-cover {
width:750rpx;
width: 750rpx;
flex: 1;
flex: 1;
height: 100%;
height: 100%;
}
}
.swiper-item {
.swiper-item {
position: relative;
position: relative;
}
}
.video-box {
.video-box {
width: 750rpx;
width: 750rpx;
}
}
.video-cover {
.video-cover {
position: absolute;
position: absolute;
justify-content: center;
justify-content: center;
align-items: center;
align-items: center;
align-content: center;
align-content: center;
}
.play-btn {
width: 80rpx;
height: 80rpx;
}
}
.video-info {
.play-btn {
position: absolute;
width: 80rpx;
bottom: 0;
height: 80rpx;
padding: 15px;
}
}
.video-info-text
{
.video-info
{
font-size: 14px
;
position: absolute
;
color: red
;
bottom: 0
;
line-height: 20
px;
padding: 15
px;
}
}
.debug-info{
.video-info-text {
position: fixed;
font-size: 14px;
top:15px;
color: red;
width: 750rpx;
line-height: 20px;
background-color: rgba(255, 255, 255, 0.3);
}
}
.status-text{
.debug-info {
color:red;
position: fixed;
padding: 15px;
top: 15px;
}
width: 750rpx;
background-color: rgba(255, 255, 255, 0.3);
.nav-back {
}
position: absolute;
top: 20px;
.status-text {
left: 8px;
color: red;
background-color: rgba(220, 220, 220, 0.8);
padding: 15px;
border-radius: 100px;
}
width: 28px;
height: 28px;
.nav-back {
justify-content: center;
position: absolute;
align-items: center;
top: 20px;
z-index: 10;
left: 8px;
}
background-color: rgba(220, 220, 220, 0.8);
border-radius: 100px;
.nav-back .back-img {
width: 28px;
width: 18px;
height: 28px;
height: 18px;
justify-content: center;
}
align-items: center;
</style>
z-index: 10;
}
.nav-back .back-img {
width: 18px;
height: 18px;
}
</style>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录