|
@@ -2,11 +2,22 @@
|
|
|
<popup v-if="ifShow">
|
|
|
<div class="preview-wrapper">
|
|
|
<div class="title">
|
|
|
- <i class="iconfont icon-material_video title-icon"/>
|
|
|
- {{title}}
|
|
|
+ <i class="iconfont icon-material_video title-icon" />
|
|
|
+ {{ title }}
|
|
|
</div>
|
|
|
- <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
|
|
|
- <video class="video" controls controlslist="nodownload noremoteplayback noplaybackrate" disablePictureInPicture autoplay :src="videoSrc"></video>
|
|
|
+ <img
|
|
|
+ class="close-btn"
|
|
|
+ :src="require('@/assets/images/icons/material_preview_close@2x.png')"
|
|
|
+ @click="onClickClose"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ class="video"
|
|
|
+ controls
|
|
|
+ controlslist="nodownload noremoteplayback noplaybackrate"
|
|
|
+ disablePictureInPicture
|
|
|
+ autoplay
|
|
|
+ :src="videoSrc"
|
|
|
+ ></video>
|
|
|
</div>
|
|
|
</popup>
|
|
|
</template>
|
|
@@ -15,86 +26,83 @@
|
|
|
import Popup from "@/components/shared/popup";
|
|
|
|
|
|
export default {
|
|
|
- props: {
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ Popup,
|
|
|
},
|
|
|
- components:{
|
|
|
- Popup
|
|
|
- },
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
return {
|
|
|
ifShow: false,
|
|
|
- title: '',
|
|
|
- videoSrc: '',
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- },
|
|
|
- watch: {
|
|
|
+ title: "",
|
|
|
+ videoSrc: "",
|
|
|
+ };
|
|
|
},
|
|
|
- methods:{
|
|
|
- show(title = '', videoSrc) {
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ show(title = "", videoSrc) {
|
|
|
if (!videoSrc) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- this.title = title
|
|
|
- this.videoSrc = videoSrc
|
|
|
- this.ifShow = true
|
|
|
+ this.title = title;
|
|
|
+ this.videoSrc = videoSrc;
|
|
|
+ this.ifShow = true;
|
|
|
},
|
|
|
onClickClose() {
|
|
|
- this.ifShow = false
|
|
|
- }
|
|
|
+ this.ifShow = false;
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$bus.on('clickEsc',()=>{
|
|
|
- this.onClickClose()
|
|
|
- })
|
|
|
+ this.$bus.on("clickEsc", () => {
|
|
|
+ this.onClickClose();
|
|
|
+ });
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .preview-wrapper {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- top: 16px;
|
|
|
- left: 30px;
|
|
|
- z-index: 2;
|
|
|
- height: 36px;
|
|
|
- font-size: 14px;
|
|
|
- color: #FFFFFF;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- border-radius: 18px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding-left: 16px;
|
|
|
- padding-right: 16px;
|
|
|
- .title-icon {
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
- .close-btn {
|
|
|
- position: absolute;
|
|
|
- top: 16px;
|
|
|
- right: 30px;
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- z-index: 2;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .video {
|
|
|
- position: absolute;
|
|
|
- width: 960px;
|
|
|
- height: 540px;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- z-index: 1;
|
|
|
+.preview-wrapper {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ left: 30px;
|
|
|
+ z-index: 2;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border-radius: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 16px;
|
|
|
+ padding-right: 16px;
|
|
|
+ .title-icon {
|
|
|
+ margin-right: 6px;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+ .close-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ right: 30px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ z-index: 2;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .video {
|
|
|
+ position: absolute;
|
|
|
+ width: 960px;
|
|
|
+ height: 540px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|