Skip to content

蒋秀川 / miniProject

Go to a project
Commit bae9c55a by Tianqing Liu
Options

feat: 优化云台样式

1 parent 526af74e
Inline Side-by-side
Showing 2 changed files with 29 additions and 45 deletions
h5/src/components/extension/videoTime.vue
......@@ -36,15 +36,16 @@
</div>
</div>
<!-- 云台控制模块 -->
<div class="ptz-control-box" v-if="ptzControlShow">
<!--v-if="ptzControlShow"-->
<div class="ptz-control-box">
<div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='up'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='down'?'ptz-bottom':'']">
<div class="ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
<div class="ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
<div class="ptz-control-right" @mousedown="ptzControlOneClick('right')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('right')" @touchend="ptzControlStop"></div>
<div class="ptz-control-bottom" @mousedown="ptzControlOneClick('down')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('down')" @touchend="ptzControlStop"></div>
<div class="ptz-control-base ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
<div class="ptz-control-base ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
<div class="ptz-control-base ptz-control-right" @mousedown="ptzControlOneClick('right')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('right')" @touchend="ptzControlStop"></div>
<div class="ptz-control-base ptz-control-bottom" @mousedown="ptzControlOneClick('down')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('down')" @touchend="ptzControlStop"></div>
<div class="ptz-control-content"></div>
</div>
<div class="ptz-control-right-box">
<div class="ptz-control-right-box" style="display: none">
<div class="ptz-control-jia" @mousedown="ptzControlOneClick('zoomExpand')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomExpand')" @touchend="ptzControlStop">+</div>
<div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
</div>
......@@ -452,66 +453,49 @@ export default {
align-items: center;
justify-content: center;
position: absolute;
top:50vw;
top:35vw;
.ptz-control-left-box{
width: 40vw;
height: 40vw;
background: rgba(215,215,215,0.9);
width: 64vw;
height: 64vw;
background-color: rgba(247, 248, 250, 1);
position: relative;
border-radius: 27vw;
border-radius: 32vw;
overflow: hidden;
.ptz-control-base {
border: none;
width: 4vw;
height: 4vw;
border-radius: 2vw;
background-color: rgba(205, 207, 214, 1);
}
.ptz-control-left{
position: absolute;
width: 0;
height: 0;
border-top: 4vw solid transparent;
border-bottom: 4vw solid transparent;
border-right: 5vw solid #83c5e0;
position: absolute;
display: inline-block;
top: calc(50% - 4vw);
left: 2vw;
top: calc(50% - 2vw);
left: 8vw;
}
.ptz-control-top{
position: absolute;
width: 0;
height: 0;
border-left: 4vw solid transparent;
border-right: 4vw solid transparent;
border-bottom: 5vw solid #83c5e0;
position: absolute;
display: inline-block;
left: calc(50% - 4vw);
top: 2vw;
left: calc(50% - 2vw);
top: 8vw;
}
.ptz-control-right{
position: absolute;
width: 0;
height: 0;
border-top: 4vw solid transparent;
border-bottom: 4vw solid transparent;
border-left: 5vw solid #83c5e0;
position: absolute;
display: inline-block;
top: calc(50% - 4vw);
left: calc(100% - 7vw);
top: calc(50% - 2vw);
left: calc(100% - 10vw);
}
.ptz-control-bottom{
position: absolute;
width: 0;
height: 0;
border-left: 4vw solid transparent;
border-right: 4vw solid transparent;
border-top: 5vw solid #83c5e0;
position: absolute;
display: inline-block;
left: calc(50% - 4vw);
top: calc(100% - 7vw);
left: calc(50% - 2vw);
top: calc(100% - 10vw);
}
.ptz-control-content{
width: 14vw;
height: 14vw;
background: #03a7ef;
background-color: rgba(205, 207, 214, 1);
position: absolute;
border-radius: 14vw;
left: calc(50% - 7vw);
......
h5/src/views/video/controller.vue
......@@ -2,7 +2,7 @@
<div class="controller-container">
<van-action-bar>
<van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
<!--<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon('ptz')" />-->
<van-action-bar-icon icon="aim" text="云台" @click="onClickIcon('ptz')" />
<van-action-bar-button type="danger" color="#387CF5" text="截图巡检" @click="onClickButton" />
</van-action-bar>
</div>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!