实现一个可进行上下左右,放大缩小操作的云台控制按钮,放大缩小按需求可修改成恢复至重置点,效果如下:
代码实现如下所示:
<template>
<div class="ptz">
<div class="outer-ring">
<button class="caret-up">
<i class="fa fa-caret-up"></i>
</button>
<button class="caret-down">
<i class="fa fa-caret-down"></i>
</button>
<button class="caret-left">
<i class="fa fa-caret-left"></i>
</button>
<button class="caret-right">
<i class="fa fa-caret-right"></i>
</button>
<div class="inner-ring">
<button class="plus"><i class="fa fa-plus"></i></button>
<div class="line"></div>
<button @click="controlPanTilt('ZOOM_IN')" class="minus">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
</div>
</template>
<style scoped>
.pan-tilt-button {
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
[class*='yuntai'] {
display: none;
}
button {
background-color: transparent;
border: none;
color: #000;
font-size: 24px;
cursor: pointer;
}
.ptz {
.outer-ring {
position: relative;
width: 80px;
height: 80px;
background-color: #fff;
border-radius: 50%;
box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
i {
font-size: 20px;
cursor: pointer;
&:hover {
color: #00b176;
}
}
.caret-up {
position: absolute;
top: 4px;
left: 36px;
margin-left: -10px;
}
.caret-down {
position: absolute;
bottom: -3px;
left: 36px;
margin-left: -10px;
}
.caret-left {
position: absolute;
left: -3px;
top: 42px;
margin-top: -10px;
}
.caret-right {
position: absolute;
right: -14px;
top: 42px;
margin-top: -10px;
}
.ob-caret-left {
transform: rotate(45deg);
position: absolute;
top: 24px;
left: 24px;
}
.ob-caret-up {
transform: rotate(45deg);
position: absolute;
top: 24px;
right: 24px;
}
.ob-caret-right {
transform: rotate(45deg);
position: absolute;
bottom: 24px;
right: 24px;
}
.ob-caret-down {
transform: rotate(45deg);
position: absolute;
bottom: 24px;
left: 24px;
}
.inner-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #ddd;
.plus {
position: absolute;
top: 4px;
left: 15px;
margin-left: -10px;
}
.line {
height: 1px;
width: 100%;
background-color: #ddd;
position: absolute;
top: 20px;
left: 0;
}
.minus {
position: absolute;
bottom: -6px;
left: 15px;
margin-left: -10px;
}
}
}
}
</style>