Skip to content

蒋秀川 / miniProject

Go to a project
Commit c8fe9121 by Tianqing Liu
Options

feat: 优化云台功能

1 parent bae9c55a
Inline Side-by-side
Showing 1 changed file with 20 additions and 21 deletions
h5/src/components/extension/videoTime.vue
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<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-base ptz-control-bottom" @mousedown="ptzControlOneClick('down')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('down')" @touchend="ptzControlStop"></div>
<div class="ptz-control-content"></div> <div class="ptz-control-content"></div>
</div> </div>
<div class="ptz-control-right-box" style="display: none"> <div class="ptz-control-right-box">
<div class="ptz-control-jia" @mousedown="ptzControlOneClick('zoomExpand')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomExpand')" @touchend="ptzControlStop">+</div> <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 class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
</div> </div>
...@@ -463,39 +463,39 @@ export default { ...@@ -463,39 +463,39 @@ export default {
overflow: hidden; overflow: hidden;
.ptz-control-base { .ptz-control-base {
border: none; border: none;
width: 4vw; width: 2.4vw;
height: 4vw; height: 2.4vw;
border-radius: 2vw; border-radius: 1.2vw;
background-color: rgba(205, 207, 214, 1); background-color: rgba(205, 207, 214, 1);
} }
.ptz-control-left{ .ptz-control-left{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: calc(50% - 2vw); top: calc(50% - 1vw);
left: 8vw; left: 8vw;
} }
.ptz-control-top{ .ptz-control-top{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: calc(50% - 2vw); left: calc(50% - 1.4vw);
top: 8vw; top: 8vw;
} }
.ptz-control-right{ .ptz-control-right{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: calc(50% - 2vw); top: calc(50% - 1vw);
left: calc(100% - 10vw); left: calc(100% - 10vw);
} }
.ptz-control-bottom{ .ptz-control-bottom{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
left: calc(50% - 2vw); left: calc(50% - 1.4vw);
top: calc(100% - 10vw); top: calc(100% - 10vw);
} }
.ptz-control-content{ .ptz-control-content{
width: 14vw; width: 14vw;
height: 14vw; height: 14vw;
background-color: rgba(205, 207, 214, 1); background: linear-gradient( 180deg, #E3E4EA 0%, #CDCFD6 100%);
position: absolute; position: absolute;
border-radius: 14vw; border-radius: 14vw;
left: calc(50% - 7vw); left: calc(50% - 7vw);
...@@ -515,25 +515,24 @@ export default { ...@@ -515,25 +515,24 @@ export default {
background-image: linear-gradient(0deg, rgba(131,197,224,0.8) 0%, rgba(100, 143, 252, 0) 30%); background-image: linear-gradient(0deg, rgba(131,197,224,0.8) 0%, rgba(100, 143, 252, 0) 30%);
} }
.ptz-control-right-box{ .ptz-control-right-box{
display: inline-flex; position: absolute;
align-items: center; top: -8px;
justify-content: center; right: 6vw;
color: #03a7ef;
margin-left: 13.5vw;
.ptz-control-jia,.ptz-control-jian{ .ptz-control-jia,.ptz-control-jian{
width: 8.1vw; width: 8vw;
height: 8.1vw; height: 8vw;
line-height: 8.1vw; border-radius: 4vw;
color: rgba(139, 147, 172, 1);
font-size: 6.3vw;
line-height: 6.5vw;
text-align: center; text-align: center;
font-size: 8.1vw; border: 0.27vw solid rgba(211, 212, 219, 1);
border-radius: 1.08vw;
border: 0.27vw solid #03a7ef;
&:active{ &:active{
background-image: radial-gradient(circle at center,rgba(29,141,216,.8) 0,rgba(100,143,252,0) 80%); background-image: radial-gradient(circle at center,rgba(29,141,216,.8) 0,rgba(100,143,252,0) 80%);
} }
} }
.ptz-control-jia{ .ptz-control-jia{
margin-right: 8vw; margin-bottom: 4vw;
} }
} }
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!