文字显示

src/main/vue/src/views/Video.vue

@@ -36,6 +36,7 @@ import Video1 from '../widgets/Video1';
 import Video2 from '../widgets/Video2';
 import Video3 from '../widgets/Video3';
 import Video4 from '../widgets/Video4';
+import Video5 from '../widgets/Video5';
 
 export default {
     created() {},
@@ -46,7 +47,7 @@ export default {
                 { x: 0, y: 0, w: 4, h: 14.5, i: '0', name: 'Video1' },
                 { x: 4, y: 4, w: 4, h: 14.5, i: '3', name: 'Video4' },
                 { x: 8, y: 4, w: 3, h: 22, i: '1', name: 'Video2' },
-                { x: 4, y: 12.5, w: 4, h: 15.5, i: '4', name: 'Video1' }
+                { x: 4, y: 12.5, w: 4, h: 15.5, i: '4', name: 'Video5' }
                 // { x: 0, y: 12.5, w: 4, h: 12.5, i: '5', name: 'Video4' }
                 // { x: 8, y: 0, w: 4, h: 13.5, i: '6', name: 'Video3' }
             ],
@@ -63,7 +64,8 @@ export default {
         Video1,
         Video2,
         Video3,
-        Video4
+        Video4,
+        Video5
     }
 };
 </script>

src/main/vue/src/widgets/Video5.vue

@@ -0,0 +1,56 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <template #header>考点五</template>
+        <!-- <i class="fa-fw fas fa-user fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">User</div>
+            <div class="num">4,258</div>
+        </div> -->
+        <div>
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="max-width: 100%"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay="autoplay"
+                loop
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex'
+            },
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-24CxnKwMnv.mp4'
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>