摄像头-预览-调整按钮样式
This commit is contained in:
parent
82ad11d3c4
commit
8ee2cf6d3d
|
|
@ -500,58 +500,87 @@
|
|||
.antd-modal-form {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
#video-container {
|
||||
padding: 0px 25px;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.buttonSpan {
|
||||
display: inline-flex; align-items: flex-end;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
margin-left: 20px;
|
||||
border: 1px solid #f6faff;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.buttonSpan:hover {
|
||||
border: 1px solid #1ea0fa;
|
||||
color: #1ea0fa;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttonImg {
|
||||
width:20px;margin-right:10px;vertical-align: bottom;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.fxjImgUp {
|
||||
width:50px;height: 50px;
|
||||
margin-right:10px;vertical-align: bottom;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;transform: rotate(270deg);
|
||||
border-radius: 5px;
|
||||
transform: rotate(270deg);
|
||||
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgUp:hover {
|
||||
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgLeft {
|
||||
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(180deg);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
transform: rotate(180deg);
|
||||
cursor: pointer;
|
||||
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgLeft:hover {
|
||||
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgDown {
|
||||
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;transform: rotate(90deg);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgDown:hover {
|
||||
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgRight {
|
||||
width:50px;height: 50px;margin-right:10px;vertical-align: bottom;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
background: url('../../../../../assets/iot/fxj.png') center/contain no-repeat;
|
||||
}
|
||||
|
||||
.fxjImgRight:hover {
|
||||
background: url('../../../../../assets/iot/fxj_blue.png') center/contain no-repeat;
|
||||
}
|
||||
|
|
@ -563,52 +592,67 @@
|
|||
width: 100px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.selectDiv:hover {
|
||||
border: 1px solid #a2a3a3;
|
||||
background: #a2a3a3;
|
||||
color:white;
|
||||
border: 1px solid #f4f5fa;
|
||||
background: #f4f5fa;
|
||||
color: #037FEA;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.djImg {
|
||||
background: url('../../../../../assets/iot/monitor_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.djImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_1_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.qxdImg {
|
||||
background: url('../../../../../assets/iot/monitor_5.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.qxdImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_5_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.lzImg {
|
||||
background: url('../../../../../assets/iot/monitor_4.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.lzImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_4_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.jtImg {
|
||||
background: url('../../../../../assets/iot/monitor_3.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.jtImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_3_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.bjImg {
|
||||
background: url('../../../../../assets/iot/monitor_8.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.bjImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_8_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.fpImg {
|
||||
background: url('../../../../../assets/iot/monitor_6.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.fpImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_6_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.hmxzImg {
|
||||
background: url('../../../../../assets/iot/monitor_7.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.hmxzImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_7_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
|
||||
:footer-style="{ textAlign: 'right' }" @close="handleCancel">
|
||||
<div v-if="showCamera">
|
||||
<CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></CameraPreviewForm>
|
||||
<CameraPreviewForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
|
||||
</CameraPreviewForm>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -13,13 +14,18 @@
|
|||
<a-col :span="20" style="text-align: center;margin-top: 15px;margin-bottom: 15px;">
|
||||
<!-- 对讲、停止对讲 切换 -->
|
||||
<!-- <img src="../../../../../assets/iot/monitor_1.png" class="buttonImg"/> -->
|
||||
<span class="buttonSpan djImg" @click="startPhone" v-show="!izPhone"><span style="margin-left:30px;">对讲</span></span>
|
||||
<span class="buttonSpan djImg" @click="stopPhone" v-show="izPhone"><span style="margin-left:30px;">结束</span></span>
|
||||
<span class="buttonSpan djImg" @click="startPhone" v-show="!izPhone"><span
|
||||
style="margin-left:30px;">对讲</span></span>
|
||||
<span class="buttonSpan djImg" @click="stopPhone" v-show="izPhone"><span
|
||||
style="margin-left:30px;">结束</span></span>
|
||||
<!-- 流畅、超清 切换 -->
|
||||
<span class="buttonSpan qxdImg" @click="switchResolution"><span style="margin-left:30px;">{{ resolution }}</span></span>
|
||||
<span class="buttonSpan qxdImg" @click="switchResolution"><span style="margin-left:30px;">{{ resolution
|
||||
}}</span></span>
|
||||
<!-- 录制、结束录制 切换 -->
|
||||
<span class="buttonSpan lzImg" @click="recordingStart" v-show="!izRecording"><span style="margin-left:30px;">录制</span></span>
|
||||
<span class="buttonSpan lzImg" @click="recordingEnd" v-show="izRecording"><span style="margin-left:30px;">结束</span></span>
|
||||
<span class="buttonSpan lzImg" @click="recordingStart" v-show="!izRecording"><span
|
||||
style="margin-left:30px;">录制</span></span>
|
||||
<span class="buttonSpan lzImg" @click="recordingEnd" v-show="izRecording"><span
|
||||
style="margin-left:30px;">结束</span></span>
|
||||
|
||||
<span class="buttonSpan jtImg" @click="screenshot"><span style="margin-left:30px;">截图</span></span>
|
||||
<span class="buttonSpan bjImg" @click="manualAlarm"><span style="margin-left:30px;">报警</span></span>
|
||||
|
|
@ -375,63 +381,87 @@
|
|||
<style lang="less" scoped>
|
||||
.selectDiv {
|
||||
text-align: center;
|
||||
border: 1px solid #f6faff;
|
||||
border: 1px solid white;
|
||||
padding: 3px 10px;
|
||||
width: 100px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.selectDiv:hover {
|
||||
border: 1px solid #a2a3a3;
|
||||
background: #a2a3a3;
|
||||
color:white;
|
||||
border: 1px solid #f4f5fa;
|
||||
background: #f4f5fa;
|
||||
color: #037FEA;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttonSpan {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
margin-left: 20px;
|
||||
//border: 1px solid #f6faff;
|
||||
padding: 6px 6px;
|
||||
}
|
||||
|
||||
.buttonSpan:hover {
|
||||
//border: 1px solid #1ea0fa;
|
||||
color: #1ea0fa;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.djImg {
|
||||
background: url('../../../../../assets/iot/monitor_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.djImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_1_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.qxdImg {
|
||||
background: url('../../../../../assets/iot/monitor_5.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.qxdImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_5_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.lzImg {
|
||||
background: url('../../../../../assets/iot/monitor_4.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.lzImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_4_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.jtImg {
|
||||
background: url('../../../../../assets/iot/monitor_3.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.jtImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_3_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.bjImg {
|
||||
background: url('../../../../../assets/iot/monitor_8.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.bjImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_8_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.fpImg {
|
||||
background: url('../../../../../assets/iot/monitor_6.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.fpImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_6_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.hmxzImg {
|
||||
background: url('../../../../../assets/iot/monitor_7.png') left/contain no-repeat;
|
||||
}
|
||||
|
||||
.hmxzImg:hover {
|
||||
background: url('../../../../../assets/iot/monitor_7_1.png') left/contain no-repeat;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue