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

src/views/iot/tplink/camera/components/CameraPreviewForm.vue

@@ -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;
+  width: 50px;
-    margin-right:10px;vertical-align: bottom;
+  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;
+  border: 1px solid #f4f5fa;
-    background: #a2a3a3;
+  background: #f4f5fa;
-    color:white;
+  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;
 }

src/views/iot/tplink/camera/components/CameraPreviewModal.vue

@@ -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="startPhone" v-show="!izPhone"><span
-		    <span class="buttonSpan djImg" @click="stopPhone" v-show="izPhone"><span style="margin-left:30px;">结束</span></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="recordingStart" v-show="!izRecording"><span
-		    <span class="buttonSpan lzImg" @click="recordingEnd" v-show="izRecording"><span style="margin-left:30px;">结束</span></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;
+  border: 1px solid #f4f5fa;
-	  background: #a2a3a3;
+  background: #f4f5fa;
-	  color:white;
+  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;
 }