From 8ec9c517c58b70918f2d72f2bfa6ab4b0a4145f9 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Fri, 19 Aug 2022 18:03:39 +0800 Subject: [PATCH] 局部细节调整 --- src/components/group/MyVideo.vue | 38 +++++++++++++++++++++++++++++++++++--- 1 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue index 17fc80c..9b57872 100644 --- a/src/components/group/MyVideo.vue +++ b/src/components/group/MyVideo.vue @@ -1,10 +1,11 @@ <template> <div class="myModal"> - <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true" - :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}" :afterClose="afterClose"> - <videoDetail ref="videoDetail"></videoDetail> + <a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true" + :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose"> + <videoDetail ref="videoDetail" :showFade="showFade"></videoDetail> </a-modal> </div> + </template> <script> @@ -13,6 +14,14 @@ export default { components: { videoDetail, + }, + mounted() { + this.juseWidth(document.body.clientWidth) + window.onresize = () => { + return (() => { + this.juseWidth(document.body.clientWidth) + })(); + }; }, watch: { // '$route'(to, from) { @@ -36,10 +45,27 @@ return { visible: false, articleId: "", + myWidth: 410, + showFade: true, } }, methods: { + juseWidth(screenWidth) { + this.showFade = true; + if (screenWidth > 1000) { + this.myWidth = 1000 + } else if (screenWidth > 767) { + this.myWidth = 600 + } else { + this.myWidth = 410 + this.showFade = false; + } + }, showModal(param) { + if (this.$route.path == "/videoDetail") { + this.$message.info("已经在播放页面啦..") + return + } this.visible = true; this.$nextTick(function() { this.$refs.videoDetail.showVideo(param) @@ -49,6 +75,9 @@ this.visible = false; }, afterClose() { + //关闭视频播放 + this.$refs.videoDetail.$refs.videoPlayBox.pauseMyVideo() + this.$emit("closeMyVideo") } }, @@ -56,4 +85,7 @@ </script> <style scoped> + + + </style> -- Gitblit v1.9.1