增加 一个视频播放页面

src/router/index.js

@@ -76,6 +76,7 @@ const routes = [
     { path: '/deviceSetting', name: 'deviceSetting', component: resolve => require(['@/views/gps-card-frontend/device-setting'], resolve) },
     // c1（4g管理后台）涉水区域白名单
     { path: '/drownWhiteList', name: 'drownWhiteList', component: resolve => require(['@/views/gps-card-frontend/drown-white-list'], resolve) },
+    { path: '/smartCard', name: 'smartCard', component: resolve => require(['@/views/smart-card/index'], resolve) },
 ];
 
 const router = new VueRouter({

src/views/smart-card/index.vue

@@ -0,0 +1,136 @@
+<!--  -->
+<template>
+    <div class="video-containe">
+        <video ref="myVideo" playsinline muted loop @loadedmetadata="handleMetadata">
+            <source src="../../assets/img/card_bind.mp4" type="video/mp4">
+        </video>
+        <!-- 播放/暂停按钮 -->
+        <div class="btn-con">
+            <van-button @click="togglePlay" :color="btnColor">
+                {{ btnText }}
+            </van-button>
+            <van-button @click="goToWebApp" color="#ee3399">
+                智能名片
+            </van-button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            isPlaying: null
+        }
+    },
+    computed: {
+        btnText() {
+            let text = '讲解模式';
+            if (this.isPlaying == null) {
+                return text;
+            } else if (this.isPlaying == false) {
+                text = '继续讲解'
+            } else {
+                text = '暂停讲解'
+            }
+            return text
+        },
+        btnColor() {
+            let color = '';
+            if (this.isPlaying == null) {
+                // 默认
+                color = '#ee3399'
+            } else if (this.isPlaying == false) {
+                color = 'green'
+            } else {
+                color = 'orange'
+            }
+            return color
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+        window.document.title = '人工智能月子中心介绍';
+    },
+    methods: {
+        handleMetadata(event) {
+            const videoElement = event.target;
+            this.aspectRatio = videoElement.videoWidth / videoElement.videoHeight;
+        },
+        togglePlay() {
+            const videoPlayer = this.$refs.myVideo;
+
+            if (videoPlayer.paused) {
+                videoPlayer.play(); // 开始播放
+                this.isPlaying = true;
+            } else {
+                videoPlayer.pause(); // 暂停播放
+                this.isPlaying = false;
+            }
+        },
+        goToWebApp() {
+            let jumpUrl = 'https://hao-yun666-5g407x0f9e513af8-1325200810.tcloudbaseapp.com/jump-mp.html?sign=02240d77ff8df94a035322d647ac7196&t=1711071109';
+            /* window.location.href = jumpUrl; */
+            // replace,表明新窗口加载的内容是否替换浏览历史中的当前条目
+            window.open(jumpUrl, 'replace = true');
+        }
+    },
+}
+</script>
+<style scoped lang="scss">
+.video-containe {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    /* 动态计算padding-bottom保持宽高比 */
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+
+    video {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+
+        /* 或者 object-fit: cover 根据需求选择 */
+    }
+
+    .btn-con {
+        position: absolute;
+        bottom: 3%;
+
+        .van-button {
+            margin: 0 5px;
+        }
+    }
+
+
+    /* 当视口宽度小于等于600px时应用以下样式 */
+    @media screen and (max-width: 600px) {
+        .btn-con {
+
+            left: 20%;
+
+        }
+    }
+
+    /* 当视口宽度大于600px时应用另一组样式 */
+    @media screen and (min-width: 601px) {
+        .btn-con {
+
+
+            left: 45%;
+        }
+    }
+
+}
+
+/* @import url(); 引入css类 */
+</style>