Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b0f712a9 1 parent 900ab514

✨ feat(视频播放组件): 组件更新纯播放模式，优化实例展示

Inline Side-by-side
Showing 2 changed files with 33 additions and 10 deletions
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-23 13:42:35
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-02 17:51:59
6 + * @FilePath: /tswj/src/components/MuiVideo/index.vue
7 + * @Description:
8 +-->
1 <template> 9 <template>
2 <div class="video-wrapper"> 10 <div class="video-wrapper">
3 - <status :item="item"></status> 11 + <div v-if="type === 'video'">
4 - <div class="video-div" :id="'mui-player-' + item.id"></div> 12 + <div :id="'mui-player-' + item.id" class="video-div" />
5 - <video-bar :item="item" :barType="1"></video-bar> 13 + </div>
6 - <banner v-if="type === 'bookDetail'" :item="item"></banner> 14 + <div v-else>
15 + <status :item="item" />
16 + <div :id="'mui-player-' + item.id" class="video-div" />
17 + <video-bar :item="item" :bar-type="1" />
18 + <banner v-if="type === 'bookDetail'" :item="item" />
19 + </div>
7 </div> 20 </div>
8 </template> 21 </template>
9 22
...@@ -52,10 +65,10 @@ onMounted(() => { ...@@ -52,10 +65,10 @@ onMounted(() => {
52 }); 65 });
53 </script> 66 </script>
54 67
55 -<style lang="less" scoped > 68 +<style lang="less" scoped>
56 .video-wrapper { 69 .video-wrapper {
57 position: relative; 70 position: relative;
58 - margin: 1rem; 71 + margin: 1rem 0;
59 border-bottom-left-radius: 5px; 72 border-bottom-left-radius: 5px;
60 border-bottom-right-radius: 5px; 73 border-bottom-right-radius: 5px;
61 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13); 74 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
......
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-23 18:00:39
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-02 17:41:38
6 + * @FilePath: /tswj/src/components/MuiVideo/test.vue
7 + * @Description: 视频播放通用组件演示组件
8 + * @Description: type: video 为纯视频播放框，bookDetail为定制模式
9 +-->
1 <template> 10 <template>
2 <mui-video 11 <mui-video
3 - @on-play="onPlay"
4 - :item="item"
5 - type="bookDetail"
6 v-for="(item, index) in mock" 12 v-for="(item, index) in mock"
7 - :key="index"></mui-video> 13 + :key="index"
14 + :item="item"
15 + type="video"
16 + @on-play="onPlay"
17 + />
8 </template> 18 </template>
9 19
10 <script setup> 20 <script setup>
......