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

+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-23 13:42:35
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-02 17:51:59
+ * @FilePath: /tswj/src/components/MuiVideo/index.vue
+ * @Description: 
+-->
 <template>
   <div class="video-wrapper">
-    <status :item="item"></status>
-    <div class="video-div" :id="'mui-player-' + item.id"></div>
-    <video-bar :item="item" :barType="1"></video-bar>
-    <banner v-if="type === 'bookDetail'" :item="item"></banner>
+    <div v-if="type === 'video'">
+      <div :id="'mui-player-' + item.id" class="video-div" />
+    </div>
+    <div v-else>
+      <status :item="item" />
+      <div :id="'mui-player-' + item.id" class="video-div" />
+      <video-bar :item="item" :bar-type="1" />
+      <banner v-if="type === 'bookDetail'" :item="item" />
+    </div>
   </div>
 </template>
 
@@ -52,10 +65,10 @@ onMounted(() => {
 });
 </script>
 
-<style lang="less" scoped >
+<style lang="less" scoped>
 .video-wrapper {
   position: relative;
-  margin: 1rem;
+  margin: 1rem 0;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);

+<!--
+ * @Author: hookehuyr hookehuyr@gmail.com
+ * @Date: 2022-05-23 18:00:39
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-02 17:41:38
+ * @FilePath: /tswj/src/components/MuiVideo/test.vue
+ * @Description: 视频播放通用组件演示组件
+ * @Description: type: video 为纯视频播放框，bookDetail为定制模式
+-->
 <template>
   <mui-video
-    @on-play="onPlay"
-    :item="item"
-    type="bookDetail"
     v-for="(item, index) in mock"
-    :key="index"></mui-video>
+    :key="index"
+    :item="item"
+    type="video"
+    @on-play="onPlay"
+  />
 </template>
 
 <script setup>