Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1d16be05 1 parent 03ab72d5

fix 视频16:9比例根据页面width动态判断

Inline Side-by-side
Showing 4 changed files with 20 additions and 3 deletions
...@@ -121,6 +121,10 @@ export default { ...@@ -121,6 +121,10 @@ export default {
121 _this.detail.showStatus = true; 121 _this.detail.showStatus = true;
122 }); 122 });
123 }, 500); 123 }, 500);
124 + // 配置16:9高度比
125 + const width = document.getElementById('mui-player-' + this.item.id).clientWidth;
126 + const height = (width * 9) / 16;
127 + document.getElementById('mui-player-' + this.item.id).height = height;
124 }, 128 },
125 methods: { 129 methods: {
126 goTo () { // 跳转作品详情页 130 goTo () { // 跳转作品详情页
...@@ -162,7 +166,6 @@ export default { ...@@ -162,7 +166,6 @@ export default {
162 .video-div { 166 .video-div {
163 border-top-left-radius: 5px; 167 border-top-left-radius: 5px;
164 border-top-right-radius: 5px; 168 border-top-right-radius: 5px;
165 - height: 13rem !important;
166 } 169 }
167 170
168 .video-bar { 171 .video-bar {
......
...@@ -62,6 +62,10 @@ onMounted(() => { ...@@ -62,6 +62,10 @@ onMounted(() => {
62 props: props.item, 62 props: props.item,
63 }); 63 });
64 }); 64 });
65 + // 配置16:9高度比
66 + const width = document.getElementById('mui-player-' + props.item.id).clientWidth;
67 + const height = (width * 9) / 16;
68 + document.getElementById('mui-player-' + props.item.id).height = height;
65 }); 69 });
66 </script> 70 </script>
67 71
...@@ -76,7 +80,6 @@ onMounted(() => { ...@@ -76,7 +80,6 @@ onMounted(() => {
76 .video-div { 80 .video-div {
77 border-top-left-radius: 5px; 81 border-top-left-radius: 5px;
78 border-top-right-radius: 5px; 82 border-top-right-radius: 5px;
79 - height: 13rem !important;
80 } 83 }
81 84
82 .video-bar { 85 .video-bar {
......
...@@ -106,6 +106,10 @@ onMounted(() => { ...@@ -106,6 +106,10 @@ onMounted(() => {
106 video && video.addEventListener('play', function () { 106 video && video.addEventListener('play', function () {
107 handleAction('play', props.item.id) 107 handleAction('play', props.item.id)
108 }); 108 });
109 + // 配置16:9高度比
110 + const width = document.getElementById('mui-player-' + props.item.id).clientWidth;
111 + const height = (width * 9) / 16;
112 + document.getElementById('mui-player-' + props.item.id).height = height;
109 }); 113 });
110 114
111 const goTo = () => { // 跳转作品详情页 115 const goTo = () => { // 跳转作品详情页
...@@ -143,7 +147,6 @@ const setComment = () => { ...@@ -143,7 +147,6 @@ const setComment = () => {
143 .video-div { 147 .video-div {
144 border-top-left-radius: 5px; 148 border-top-left-radius: 5px;
145 border-top-right-radius: 5px; 149 border-top-right-radius: 5px;
146 - height: 13rem !important;
147 } 150 }
148 151
149 .video-bar { 152 .video-bar {
......
...@@ -91,6 +91,10 @@ export default { ...@@ -91,6 +91,10 @@ export default {
91 _this.handleAction('play', _this.item.id) 91 _this.handleAction('play', _this.item.id)
92 }); 92 });
93 }, 500) 93 }, 500)
94 + // 配置16:9高度比
95 + const width = document.getElementById('mui-player-' + this.item.id).clientWidth;
96 + const height = (width * 9) / 16;
97 + document.getElementById('mui-player-' + this.item.id).height = height;
94 }, 98 },
95 methods: { 99 methods: {
96 } 100 }
...@@ -99,6 +103,10 @@ export default { ...@@ -99,6 +103,10 @@ export default {
99 103
100 <style lang="less" scoped> 104 <style lang="less" scoped>
101 .video-wrapper { 105 .video-wrapper {
106 + .video-div {
107 + border-top-left-radius: 5px;
108 + border-top-right-radius: 5px;
109 + }
102 .video-bar { 110 .video-bar {
103 color: #713610; 111 color: #713610;
104 padding: 1rem; 112 padding: 1rem;
......