diff --git a/src/App.vue b/src/App.vue
index 37439eb..6afcd81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :class="isMobile?'mobile':''">
     <router-view />
   </div>
 </template>
@@ -7,6 +7,7 @@
   export default {
     data(){
         return {
+          isMobile:false
         }
     },
     created(){
@@ -16,6 +17,15 @@
     window.addEventListener("beforeunload",()=>{ //在页面刷新时将vuex里的信息保存到sessionStorage里
         sessionStorage.setItem("store",JSON.stringify(this.$store.state))
     })
+    if (
+      navigator.userAgent.match(
+        /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
+      )
+    ) {
+      this.isMobile=true
+    } else {
+      this.isMobile=false
+    }
     },
     mounted(){
  let inputList = document.querySelectorAll('input');
@@ -56,6 +66,12 @@ input::-webkit-inner-spin-button {
   min-height: 900px;
   width: 100vw;
   height: 100vh;
+  &.mobile{
+    min-width: unset;
+    min-height: unset;
+    width: auto;
+    height: auto;
+  }
 }
 @font-face {
   font-family: Oswald;
diff --git a/src/assets/wx/add.png b/src/assets/wx/add.png
new file mode 100644
index 0000000..cde0fac
Binary files /dev/null and b/src/assets/wx/add.png differ
diff --git a/src/assets/wx/add_act.png b/src/assets/wx/add_act.png
new file mode 100644
index 0000000..4885eb1
Binary files /dev/null and b/src/assets/wx/add_act.png differ
diff --git a/src/assets/wx/direction_keys.png b/src/assets/wx/direction_keys.png
new file mode 100644
index 0000000..48f1776
Binary files /dev/null and b/src/assets/wx/direction_keys.png differ
diff --git a/src/assets/wx/down_arrow.png b/src/assets/wx/down_arrow.png
new file mode 100644
index 0000000..19f7490
Binary files /dev/null and b/src/assets/wx/down_arrow.png differ
diff --git a/src/assets/wx/down_arrow_act.png b/src/assets/wx/down_arrow_act.png
new file mode 100644
index 0000000..ca1932c
Binary files /dev/null and b/src/assets/wx/down_arrow_act.png differ
diff --git a/src/assets/wx/left_arrow.png b/src/assets/wx/left_arrow.png
new file mode 100644
index 0000000..ca52b1b
Binary files /dev/null and b/src/assets/wx/left_arrow.png differ
diff --git a/src/assets/wx/left_arrow_act.png b/src/assets/wx/left_arrow_act.png
new file mode 100644
index 0000000..74ae4fb
Binary files /dev/null and b/src/assets/wx/left_arrow_act.png differ
diff --git a/src/assets/wx/right_arrow.png b/src/assets/wx/right_arrow.png
new file mode 100644
index 0000000..546b100
Binary files /dev/null and b/src/assets/wx/right_arrow.png differ
diff --git a/src/assets/wx/right_arrow_act.png b/src/assets/wx/right_arrow_act.png
new file mode 100644
index 0000000..a3d4f61
Binary files /dev/null and b/src/assets/wx/right_arrow_act.png differ
diff --git a/src/assets/wx/subtract.png b/src/assets/wx/subtract.png
new file mode 100644
index 0000000..7507572
Binary files /dev/null and b/src/assets/wx/subtract.png differ
diff --git a/src/assets/wx/subtract_act.png b/src/assets/wx/subtract_act.png
new file mode 100644
index 0000000..206c124
Binary files /dev/null and b/src/assets/wx/subtract_act.png differ
diff --git a/src/assets/wx/up_arrow.png b/src/assets/wx/up_arrow.png
new file mode 100644
index 0000000..39fd109
Binary files /dev/null and b/src/assets/wx/up_arrow.png differ
diff --git a/src/assets/wx/up_arrow_act.png b/src/assets/wx/up_arrow_act.png
new file mode 100644
index 0000000..c8938ec
Binary files /dev/null and b/src/assets/wx/up_arrow_act.png differ
diff --git a/src/assets/wx/videoLive.png b/src/assets/wx/videoLive.png
new file mode 100644
index 0000000..a91749a
Binary files /dev/null and b/src/assets/wx/videoLive.png differ
diff --git a/src/rem/rem.js b/src/rem/rem.js
index 1a1711c..192c468 100644
--- a/src/rem/rem.js
+++ b/src/rem/rem.js
@@ -5,8 +5,8 @@ const baseSize = 100;
 function setRem() {
   // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
   const scale = window.innerWidth / 1920;
-
- 
+  
+  
   // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
   document.documentElement.style.fontSize = baseSize * scale + "px";
 }
diff --git a/src/router/index.js b/src/router/index.js
index 87d5edd..d3999a3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,11 @@ const routes = [
     name: 'largeScreen',
     component: () => import('../views/page/largeScreen.vue')
   },
+  {
+    path: '/videoLive',
+    name: 'videoLive',
+    component: () => import('../views/videoLive.vue')
+  },
   {
     path: '/largeScreen1',
     name: 'largeScreen1',
diff --git a/src/views/videoLive.vue b/src/views/videoLive.vue
new file mode 100644
index 0000000..6e26f82
--- /dev/null
+++ b/src/views/videoLive.vue
@@ -0,0 +1,621 @@
+<template>
+    <div class="videoLive">
+        <div class="center">
+            <div class="video_live monitor" ref="monitor">
+                <img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
+                <div v-if="!imgUrl" ref="videoPlayer" class="video-js">
+                    <div id="video-js"></div>
+                </div>
+            </div>
+
+            <div class="skills">
+                <div class="left">
+                    <img src="../assets/wx/direction_keys.png" mode=""></img>
+                    <div :class="directionFlag == 0 ? 'left_arrow_item_act' : 'left_arrow_item'"
+                        @touchstart.stop.prevent='touchstart(2)' @touchend.stop.prevent='touchend(2)'>
+
+                    </div>
+                    <div :class="directionFlag == 1 ? 'right_arrow_item_act' : 'right_arrow_item'"
+                        @touchstart.stop.prevent='touchstart(3)' @touchend.stop.prevent='touchend(3)'>
+
+                    </div>
+                    <div :class="directionFlag == 2 ? 'up_arrow_item_act' : 'up_arrow_item'"
+                        @touchstart.stop.prevent='touchstart(0)' @touchend.stop.prevent='touchend(0)'>
+
+                    </div>
+                    <div :class="directionFlag == 3 ? 'down_arrow_item_act' : 'down_arrow_item'"
+                        @touchstart.stop.prevent='touchstart(1)' @touchend.stop.prevent='touchend(1)'>
+
+                    </div>
+
+                </div>
+                <div class="right">
+                    <div class="right_item">
+                        <div :class="flag1 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(10)'
+                            @touchend.stop.prevent='touchend(10)'>
+
+                        </div>
+                        <div class="focus">
+                            焦距
+                        </div>
+                        <div :class="flag1 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(11)'
+                            @touchend.stop.prevent='touchend(11)'>
+
+                        </div>
+                    </div>
+                    <div class="right_item">
+                        <div :class="flag2 ? 'add_act' : 'add'" @touchstart.stop.prevent='touchstart(8)'
+                            @touchend.stop.prevent='touchend(8)'>
+
+                        </div>
+                        <div class="focus">
+                            缩放
+                        </div>
+                        <div :class="flag2 ? 'subtract' : 'subtract_act'" @touchstart.stop.prevent='touchstart(9)'
+                            @touchend.stop.prevent='touchend(9)'>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import EZUIKit from 'ezuikit-js';
+export default {
+    data() {
+        return {
+            // 头部导航背景
+            background: {
+                backgroundColor: '#24B383',
+            },
+            directionFlag: 5,
+            flag1: true,
+            flag2: true,
+            cameraid: '',
+            channelid: '',
+            accesstoken: '',
+            src: '',
+            url:'',
+            imgUrl:'',
+            player: null,
+            
+        };
+    },
+    mounted() {
+        // console.log(options,'00');
+        // this.cameraSerialNumber = options.cameraSerialNumber;
+        // this.cameraChannelNumber = options.cameraChannelNumber
+        // this.getVideoData(this.cameraSerialNumber, this.cameraChannelNumber)
+
+        var router = this.$route.query
+        if (router.token && router.userid) {
+            localStorage.setItem('token', router.token)
+            
+            this.cameraid = router.cameraSerialNumber;
+              this.channelid = router.cameraChannelNumber
+             this.getVideoData(cameraid, channelid)
+            return
+        }
+    },
+    beforeDestroy() {
+        const that = this;
+        // 销毁播放器
+        if (this.player) {
+            // this.player.dispose();
+            this.player.stop()
+            this.player.destroy()
+            this.player = null
+        }
+        clearInterval(this.statusInterval) && this.statusInterval
+    },
+    methods: {
+      
+        // 获取摄像头得地址
+        getVideoData(cameraid, channelid) {
+            var data2 = {
+                cameraid: cameraid,
+                channelid: channelid
+            }
+
+            this.api.getGethls(data2).then(res => {
+                // console.log(res.data, 11);
+                if (res.data.code == 200) {
+                    this.url = res.data.data.ezopen
+                    this.imgUrl=''
+                    this.createVideoNew(res.data.data.accesstoken)
+                } else {
+                    this.imgUrl=require('../assets/wx/videoLive.png')
+                }
+            })
+
+        },
+        createVideoNew(accessToken) {
+            // divW和divH是获取了父级宽高 使播放容器能铺满div
+            let divW = this.$refs.videoPlayer.clientWidth
+            let divH = this.$refs.videoPlayer.clientHeight
+            this.player = new EZUIKit.EZUIKitPlayer({
+                id: 'video-js', // 视频容器ID
+                accessToken: accessToken,
+                url: this.url,
+                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
+                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
+                template: 'security',
+                useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
+                // plugin: ["talk"], // 加载插件，talk-对讲 非必填
+                width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
+                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
+            })
+            window.onresize = () => {
+                this.player.reSize(
+                    this.$refs.videoPlayer.clientWidth,
+                    this.$refs.videoPlayer.clientHeight
+                );
+            };
+        },
+        touchstart(num) {
+            const that = this
+            if (num == 2) {
+                this.directionFlag = 0;
+            } else if (num == 3) {
+                this.directionFlag = 1;
+            } else if (num == 0) {
+                this.directionFlag = 2;
+            } else if (num == 1) {
+                this.directionFlag = 3;
+            } else if (num == 10) {
+                this.flag1 = true;
+            } else if (num == 11) {
+                this.flag1 = false;
+            } else if (num == 8) {
+                this.flag2 = true;
+            } else if (num == 9) {
+                this.flag2 = false;
+            }
+            // let that = this;
+            // uni.request({
+            // 	url: 'https://open.ys7.com/api/lapp/device/ptz/start',
+            // 	method: 'POST',
+            // 	data:{
+            // 		accessToken: that.accesstoken,
+            // 		deviceSerial: that.cameraSerialNumber,
+            // 		channelNo: that.cameraChannelNumber,
+            // 		direction:num,
+            // 		speed: 1,
+            // 	},
+            // 	header: {
+            // 		'Content-Type': 'application/x-www-form-urlencoded',
+            // 	},
+            // 	success: (res) => {
+            // 		// console.log(res);
+            // 	}
+            // });
+            this.api.cameraStart(this.cameraid, this.channelid, num).then(res => {
+                setTimeout(() => {
+                    that.touchend(num)
+                }, 10000);
+            })
+            // this.$http({
+            // 	url: this.api.camera_start + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
+            // 	method: 'POST',
+            // }).then(res=>{
+
+            // })
+        },
+
+        touchend(num) {
+            this.directionFlag = 5
+            // let that = this;
+            // uni.request({
+            // 	url:'https://open.ys7.com/api/lapp/device/ptz/stop',
+            // 	method: 'POST',
+            // 	data:{
+            // 		accessToken: that.accesstoken,
+            // 		deviceSerial: that.cameraSerialNumber,
+            // 		channelNo: that.cameraChannelNumber,
+            // 		direction:num,
+            // 		speed: 1,
+            // 	},
+            // 	header: {
+            // 		'Content-Type': 'application/x-www-form-urlencoded',
+            // 	},
+            // 	success: (res) => {
+            // 		// console.log(res);
+            // 	}
+            // })
+            if (num != -1) {
+                this.api.cameraStop(this.cameraid, this.channelid, num).then(res => {
+                    this.nowNum = -1
+                })
+            }
+            // this.$http({
+            // 	url: this.api.camera_stop + '?cameraid=' + this.cameraSerialNumber + '&channelid=' + this.cameraChannelNumber + '&direction=' + num,
+            // 	method: 'POST',
+            // }).then(res=>{
+
+            // })
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.videoLive {
+    width: 7.5rem;
+    min-height: 100vh;
+    background-color: #F5F6FA;
+
+    .center {
+
+        .video_live {
+            width: 7.5rem;
+            height: 9.7rem;
+
+            >img {
+                width: 100%;
+                height: 100%;
+            }
+            >div{
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .skills {
+            width: 100%;
+            box-sizing: border-box;
+            padding: .61rem 0 0 .4rem;
+            display: flex;
+
+            .left {
+                width: 3.4rem;
+                height: 3.4rem;
+                position: relative;
+                margin-right: .6rem;
+
+                .left_arrow,
+                .right_arrow {
+                    width: .15rem;
+                    height: .28rem;
+                }
+
+                .up_arrow,
+                .down_arrow {
+                    width: .27rem;
+                    height: .15rem;
+                }
+
+                // 左箭头
+                .left_arrow_item {
+                    width: .51rem;
+                    height: .51rem;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: 1.45rem;
+                    left: .29rem;
+                }
+
+                .left_arrow_item_act {
+                    width: .51rem;
+                    height: .51rem;
+                    background: #24B383;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: 1.45rem;
+                    left: .29rem;
+                }
+
+                .left_arrow_item::after {
+                    content: '';
+                    width: .15rem;
+                    height: .28rem;
+                    background: url('../assets/wx/left_arrow.png') center no-repeat;
+                    background-size: .15rem .28rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .left_arrow_item_act::after {
+                    content: '';
+                    width: .15rem;
+                    height: .28rem;
+                    background: url('../assets/wx/left_arrow_act.png') center no-repeat;
+                    background-size: .15rem .28rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                // 右箭头
+                .right_arrow_item {
+                    width: .51rem;
+                    height: .51rem;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: 1.45rem;
+                    right: .29rem;
+                }
+
+                .right_arrow_item_act {
+                    width: .51rem;
+                    height: .51rem;
+                    background: #24B383;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: 1.45rem;
+                    right: .29rem;
+                }
+
+                .right_arrow_item::after {
+                    content: '';
+                    width: .15rem;
+                    height: .28rem;
+                    background: url('../assets/wx/right_arrow.png') center no-repeat;
+                    background-size: .15rem .28rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .right_arrow_item_act::after {
+                    content: '';
+                    width: .15rem;
+                    height: .28rem;
+                    background: url('../assets/wx/right_arrow_act.png') center no-repeat;
+                    background-size: .15rem .28rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                // 上箭头
+                .up_arrow_item {
+                    width: .51rem;
+                    height: .51rem;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: .29rem;
+                    left: 1.46rem;
+                }
+
+                .up_arrow_item_act {
+                    width: .51rem;
+                    height: .51rem;
+                    background: #24B383;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: .29rem;
+                    left: 1.46rem;
+                }
+
+                .up_arrow_item::after {
+                    content: '';
+                    width: .27rem;
+                    height: .15rem;
+                    background: url('../assets/wx/up_arrow.png') center no-repeat;
+                    background-size: .27rem .15rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .up_arrow_item_act::after {
+                    content: '';
+                    width: .27rem;
+                    height: .15rem;
+                    background: url('../assets/wx/up_arrow_act.png') center no-repeat;
+                    background-size: .27rem .15rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                // 下箭头
+                .down_arrow_item {
+                    width: .51rem;
+                    height: .51rem;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    bottom: .28rem;
+                    left: 1.46rem;
+                }
+
+                .down_arrow_item_act {
+                    width: .51rem;
+                    height: .51rem;
+                    background: #24B383;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    bottom: .28rem;
+                    left: 1.46rem;
+                }
+
+                .down_arrow_item::after {
+                    content: '';
+                    width: .27rem;
+                    height: .15rem;
+                    background: url('../assets/wx/down_arrow.png') center no-repeat;
+                    background-size: .27rem .15rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .down_arrow_item_act::after {
+                    content: '';
+                    width: .27rem;
+                    height: .15rem;
+                    background: url('../assets/wx/down_arrow_act.png') center no-repeat;
+                    background-size: .27rem .15rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                >img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .right {
+                box-sizing: border-box;
+                padding-top: .1rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .right_item {
+                    width: 2.4rem;
+                    height: .8rem;
+                    background: #EFFAF6;
+                    border: .02rem solid rgba(36, 179, 131, 0.35);
+                    border-radius: .4rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                    padding: .07rem;
+                    margin-bottom: .4rem;
+
+                    .add {
+                        width: .66rem;
+                        height: .66rem;
+                        background: #EFFAF6;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: relative;
+                    }
+
+                    .add_act {
+                        width: .66rem;
+                        height: .66rem;
+                        background: #24B383;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: relative;
+                    }
+
+                    .add::after {
+                        content: '';
+                        width: .38rem;
+                        height: .38rem;
+                        background: url('../assets/wx/add.png') center no-repeat;
+                        background-size: .38rem .38rem;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .add_act::after {
+                        content: '';
+                        width: .38rem;
+                        height: .38rem;
+                        background: url('../assets/wx/add_act.png') center no-repeat;
+                        background-size: .38rem .38rem;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .focus {
+                        font-size: .3rem;
+                        font-family: PingFang SC;
+                        font-weight: bold;
+                        color: #24B383;
+                    }
+
+                    .subtract {
+                        width: .66rem;
+                        height: .66rem;
+                        background: #EFFAF6;
+                        border: .02rem solid rgba(36, 179, 131, 0.35);
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: relative;
+                    }
+
+                    .subtract_act {
+                        width: .66rem;
+                        height: .66rem;
+                        background: #24B383;
+                        border: .02rem solid rgba(36, 179, 131, 0.35);
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: relative;
+                    }
+
+                    .subtract::after {
+                        content: '';
+                        width: .38rem;
+                        height: .08rem;
+                        background: url('../assets/wx/subtract.png') center no-repeat;
+                        background-size: .38rem .08rem;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+
+                    .subtract_act::after {
+                        content: '';
+                        width: .38rem;
+                        height: .08rem;
+                        background: url('../assets/wx/subtract_act.png') center no-repeat;
+                        background-size: .38rem .08rem;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>