lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #245 from jamebal/search

Browse Source 
style: 优化视频播放器关闭按钮位置
This commit is contained in:
jmal 2024-07-30 10:02:41 +08:00 committed by GitHub
commit 20dbf09417
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/preview/VideoPreview.vue
View File

@ -3,9 +3,7 @@
<van-overlay :show="show"> <van-overlay :show="show">
<div class="wrapper"> <div class="wrapper">
<div class="block"> <div class="block">
<div class="close-bar" @click="close"> <el-button v-show="controlState" class="close-bar" icon="el-icon-close" size="mini" title="关闭" circle @click="close"></el-button>
<svg-icon class="audio-player-close" icon-class="close"/>
</div>
<Artplayer @get-instance="getInstance" :option="option" :style="style"/> <Artplayer @get-instance="getInstance" :option="option" :style="style"/>
</div> </div>
</div> </div>
@ -46,6 +44,7 @@ export default {
return { return {
pc: this.$pc, pc: this.$pc,
art: null, art: null,
controlState: true,
switchQuality: false, switchQuality: false,
option: { option: {
url: '', url: '',
@ -237,6 +236,11 @@ export default {
const infuse = doc.querySelector('[data-index="3"]').querySelector('a'); const infuse = doc.querySelector('[data-index="3"]').querySelector('a');
infuse.href = `infuse://x-callback-url/play?url=${this.videoLink}` infuse.href = `infuse://x-callback-url/play?url=${this.videoLink}`
} }
this.art.on('control', (state) => {
if (this.controlState !== state) {
this.controlState = state
}
});
}, },
playM3u8(video, url, art) { playM3u8(video, url, art) {
if (Hls.isSupported()) { if (Hls.isSupported()) {
@ -291,24 +295,18 @@ export default {
.block { .block {
.close-bar { .close-bar {
z-index: 2006; z-index: 2006;
position: absolute; position: relative;
top: -36px; top: -25px;
right: -36px; right: -25px;
float: right; float: right;
width: 0; color: #fff0f0;
height: 0; background: #d4d4d475;
border-radius: 36px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #69696975;
border-width: 36px;
border-style: solid;
border-color: transparent transparent transparent #d4d4d475;
line-height: 36px;
opacity: 1;
transform: rotate(315deg);
} }
.close-bar:hover { .close-bar:hover {
cursor: pointer; cursor: pointer;
border-color: transparent transparent transparent #69696975; border-color: #fff0f0;
} }
.audio-player-close { .audio-player-close {