yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

摄像头-预览-调整按钮样式

This commit is contained in:
1378012178@qq.com 2025-10-29 13:55:22 +08:00
parent 7f5039859d
commit d119f93671
1 changed files with 441 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/iot/tplink/camera/components/CameraPreviewModal.vue
View File

@ -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,86 @@
<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;
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;
}