在vue中使用海康web3.2插件连接云台摄像机

在index.html文件中先引入需要的脚本

  <script src="./hikvision/jquery-1.7.1.min.js"></script>
  <script src="./hikvision/webVideoCtrl.js"></script>
  <script src="./hikvision/jsPlugin-1.0.0.min.js"></script>

创建一个摄像机组件（复制粘贴直接可用）

<template>
  <div class="container">
    <div class="single_watch">
      <div class="watch_image">
            <div class="btn_des" @click="switchImage">热成像/可视光切换</div>
            <div class="refresh" @click="refresh(2)">
        </div>
        <!-- 此div用于视频插件嵌入 -->
        <div id="divPlugin"></div>
      </div>
      <div class="control_box">
        <span class="title">▎&nbsp;云台控制</span>
        <div class="outcircle">
          <div class="incircle">
            <div class="smallcircle"></div>
          </div>
          <div
            class="toptriangle"
            @mousedown="mouseDownPTZControl(1)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="top_left_triangle"
            @mousedown="mouseDownPTZControl(5)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="lefttriangle"
            @mousedown="mouseDownPTZControl(3)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="left_bot_triangle"
            @mousedown="mouseDownPTZControl(6)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="bottriangle"
            @mousedown="mouseDownPTZControl(2)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="right_bot_triangle"
            @mousedown="mouseDownPTZControl(8)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="righttriangle"
            @mousedown="mouseDownPTZControl(4)"
            @mouseup="mouseUpPTZControl()"
          ></div>
          <div
            class="right_top_triangle"
            @mousedown="mouseDownPTZControl(7)"
            @mouseup="mouseUpPTZControl()"
          ></div>
        </div>
        <div class="all_btn">
          <div class="btn" @click="clickFullScreen()">全屏</div>
          <div class="btn" @mousedown="PTZZoomIn()" @mouseup="PTZZoomStop()">
            变倍+
          </div>
          <div class="btn" @mousedown="PTZZoomout()" @mouseup="PTZZoomStop()">
            变倍-
          </div>
          <!-- <div class="btn" @click="clickOpenSound()">打开声音</div> -->
          <!-- <div class="btn" @click="clickCloseSound()">关闭声音</div> -->
          <div class="btn" @click="clickCapturePic()">抓图</div>
          <!-- <div class="btn" @click="clickStartRecord('realplay')">开始录像</div> -->
          <!-- <div class="btn" @click="clickStopRecord('realplay')">停止录像</div> -->
          <!-- <div class="btn" @click="clickSetPreset()">预置点</div> -->
          <!-- <div class="btn">
            <select id="channels" class="sel"></select>
          </div> -->
          <div class="option_item">
            <div class="desc">预览抓图保存路径:</div>
            <input id="previewPicPath" type="text" />
            <div class="skim" @click="clickOpenFileDlg('previewPicPath', 0)">
              浏览
            </div>
          </div>
          <!-- <div class="option_item">
            <div class="desc">录像文件保存路径:</div>
            <input id="recordPath" type="text" />
            <div class="skim" @click="clickOpenFileDlg('recordPath', 0)">
              浏览
            </div>
          </div> -->
          <div class="btn" @click="clickGetLocalCfg()">获取</div>
          <div class="btn" @click="clickSetLocalCfg()">设置</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['loginParams'],
  data() {
    return {
      iChannelID: 1, //播放通道号，默认通道 1
      // ip: '192.168.0.2',
      // port: '80',
      // username: 'admin',
      // password: '1qaz2wsx',
      szDeviceIdentify: '',
      g_bPTZAuto: false,
      g_szRecordType: '',
      iPTZSpeed: 4, //云台速度，默认为 4
      // 全局保存当前选中窗口
      g_iWndIndex: 0 //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.cameraDirectPlay()
    // this.clickSetPreset()
    // this.clickGoPreset()
  },
  methods: {
    //切换视频显示方式
    switchImage() {
      this.clickStopRealPlay()
      if (this.iChannelID == 1) {
        this.iChannelID = 2
      } else if (this.iChannelID == 2) {
        this.iChannelID = 1
      }
      this.clickStartRealPlay()
    },
    // 刷新视频
    refresh(key) {
      //先停止预览，再退出
      this.clickStopRealPlay()
      this.clickLogout(key)
    },
    //开始预览
    clickStartRealPlay() {
      WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
        iChannelID: this.iChannelID,
        success: function() {
          console.log('预览成功')
        },
        error: function(status, xmlDoc) {
          console.log('预览失败')
        }
      })
    },
    // 停止预览
    clickStopRealPlay() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      console.log(oWndInfo)
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function() {
            console.log('停止预览成功！')
          },
          error: function() {
            console.log('停止预览失败！')
          }
        })
      }
    },
    //退出
    clickLogout(key) {
      if (null == this.szDeviceIdentify) {
        return
      }
      console.log(this.szDeviceIdentify)
      var iRet = WebVideoCtrl.I_Logout(this.szDeviceIdentify)
      if (0 == iRet) {
        console.log('退出成功！')
      } else {
        console.log('退出失败！')
      }
      //无论退出成功失败与否，都会切换另一台设备
      if (key > 1) {
        this.login(1)
      }
    },
    //“一键播放”按钮的@click响应代码
    cameraDirectPlay() {
      // 检查插件是否已经安装过
      var iRet = WebVideoCtrl.I_CheckPluginInstall()
      if (-1 == iRet) {
        alert('您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！')
        return
      }
      //第一步，初始化并嵌入插件
      WebVideoCtrl.I_InitPlugin('100%', '100%', {
        bWndFull: true,
        iPackageType: 2,
        iWndowType: 1,
        //参数
        // bNoPlugin: true, //是否启用无插件
        cbInitPluginComplete: function() {
          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin')
          console.log('初始化成功')
        }
      })
      // this.clickGetLocalCfg()
      // setTimeout(() => {
      //   this.clickSetLocalCfg()
      // }, 1000)
      this.login()
    },
    login(key) {
      if (key) {
        console.log('刷新了')
      }
      //第二步，登录设备
      var self = this
      self.szDeviceIdentify = self.loginParams.ip + '_' + self.loginParams.port
      var iRet = WebVideoCtrl.I_Login(
        self.loginParams.ip,
        1,
        self.loginParams.port,
        self.loginParams.username,
        self.loginParams.password,
        {
          success: function() {
            // WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
            //   async: false
            // })
            console.log('登录成功')
            setTimeout(function() {
              self.getChannelInfo()
            }, 10)
          },
          error: function() {
            //失败的回调函数
            console.log('登录失败!')
          }
        }
      )
      if (-1 == iRet) {
        console.log('已登录过！')
      }
    },

    // 获取通道
    getChannelInfo() {
      // 模拟通道
      var self = this
      var oSel = $('#channels').empty()

      WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
        async: false,
        success: function(xmlDoc) {
          var oChannels = $(xmlDoc).find('VideoInputChannel')

          $.each(oChannels, function(i) {
            var id = $(this)
                .find('id')
                .eq(0)
                .text(),
              name = $(this)
                .find('name')
                .eq(0)
                .text()
            if ('' == name) {
              name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1)
            }
            oSel.append(
              "<option value='" + id + "' bZero='false'>" + name + '</option>'
            )
            // oSel.append(
            //   "<option value='" +
            //     id +
            //     "' bZero='false' οnclick='" +
            //     self.iChannelID +
            //     '=' +
            //     id +
            //     "'>" +
            //     name +
            //     '</option>'
            // )
          })
          console.log(' 获取模拟通道成功！')
          WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
            iChannelID: this.iChannelID,
            success: function() {
              console.log('预览成功')
            },
            error: function(status, xmlDoc) {
              console.log('预览失败')
            }
          })
        },
        error: function() {
          console.log(' 获取模拟通道失败！')
        }
      })
    },
    // 设置预置点
    clickSetPreset() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      // var iPresetID = parseInt($('#preset').val(), 10)
      var iPresetID = parseInt(1, 10)
      var self = this
      if (oWndInfo != null) {
        WebVideoCtrl.I_SetPreset(iPresetID, {
          success: function(xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + ' 设置预置点成功！')
            self.clickGoPreset()
          },
          error: function(status, xmlDoc) {
            console.log(
              oWndInfo.szDeviceIdentify + ' 设置预置点失败！',
              status,
              xmlDoc
            )
          }
        })
      }
    },
    // 调用预置点
    clickGoPreset() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      // var iPresetID = parseInt($('#preset').val(), 10)
      var iPresetID = parseInt(1, 10)
      if (oWndInfo != null) {
        WebVideoCtrl.I_GoPreset(iPresetID, {
          success: function(xmlDoc) {
            console.log(oWndInfo.szDeviceIdentify + ' 调用预置点成功！')
          },
          error: function(status, xmlDoc) {
            console.log(
              oWndInfo.szDeviceIdentify + ' 调用预置点失败！',
              status,
              xmlDoc
            )
          }
        })
      }
    },
    // PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
    mouseDownPTZControl(iPTZIndex) {
      var self = this
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      // var bZeroChannel =
      //   $('#channels option')
      //     .eq($('#channels').get(0).selectedIndex)
      //     .attr('bZero') == 'true'
      //     ? true
      //     : false
      // if (bZeroChannel) {
      //   // 零通道不支持云台
      //   return
      // }
      if (oWndInfo != null) {
        if (9 == iPTZIndex && this.g_bPTZAuto) {
          this.iPTZSpeed = 0 // 自动开启后，速度置为0可以关闭自动
        } else {
          this.g_bPTZAuto = false // 点击其他方向，自动肯定会被关闭
        }
        WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
          iPTZSpeed: this.iPTZSpeed,
          success: function(xmlDoc) {
            if (9 == iPTZIndex && this.g_bPTZAuto) {
              console.log(' 停止云台成功！')
            } else {
              console.log(' 开启云台成功！')
            }
            if (9 == iPTZIndex) {
              self.g_bPTZAuto = !self.g_bPTZAuto
            }
          },
          error: function(status, xmlDoc) {
            console.log(' 开启云台失败！', status, xmlDoc)
          }
        })
      }
    },
    // 方向PTZ停止
    mouseUpPTZControl() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(1, true, {
          success: function(xmlDoc) {
            console.log(' 停止云台成功！')
          },
          error: function(status, xmlDoc) {
            console.log(' 停止云台失败！', status, xmlDoc)
          }
        })
      }
    },
    PTZZoomIn() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(10, false, {
          iWndIndex: this.g_iWndIndex,
          success: function(xmlDoc) {
            console.log(' 变倍+成功！')
          },
          error: function(status, xmlDoc) {
            console.log('  变倍+失败！', status, xmlDoc)
          }
        })
      }
    },
    PTZZoomout() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(11, false, {
          iWndIndex: this.g_iWndIndex,
          success: function(xmlDoc) {
            console.log('变倍-成功！')
          },
          error: function(status, xmlDoc) {
            console.log('变倍-失败！', status, xmlDoc)
          }
        })
      }
    },
    PTZZoomStop() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        WebVideoCtrl.I_PTZControl(11, true, {
          iWndIndex: this.g_iWndIndex,
          success: function(xmlDoc) {
            console.log('变倍停止成功！')
          },
          error: function(status, xmlDoc) {
            console.log('变倍停止失败！', status, xmlDoc)
          }
        })
      }
    },
    // 打开声音
    clickOpenSound() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      var szInfo = ''

      if (oWndInfo != null) {
        var allWndInfo = WebVideoCtrl.I_GetWindowStatus()
        // 循环遍历所有窗口，如果有窗口打开了声音，先关闭
        for (var i = 0, iLen = allWndInfo.length; i < iLen; i++) {
          oWndInfo = allWndInfo[i]
          if (oWndInfo.bSound) {
            WebVideoCtrl.I_CloseSound(oWndInfo.iIndex)
            break
          }
        }

        var iRet = WebVideoCtrl.I_OpenSound()

        if (0 == iRet) {
          szInfo = '打开声音成功！'
        } else {
          szInfo = '打开声音失败！'
        }
        console.log(szInfo)
      }
    },
    // 关闭声音
    clickCloseSound() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      var szInfo = ''

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_CloseSound()
        if (0 == iRet) {
          szInfo = '关闭声音成功！'
        } else {
          szInfo = '关闭声音失败！'
        }
        console.log(szInfo)
      }
    },
    // 抓图
    clickCapturePic() {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      if (oWndInfo != null) {
        var xmlDoc = WebVideoCtrl.I_GetLocalCfg()
        var szCaptureFileFormat = '0'
        if (xmlDoc != null) {
          szCaptureFileFormat = 'JPEG'
        }
        var szPicName = this.szDeviceIdentify + '_' + new Date().getTime()
        szPicName += '0' === szCaptureFileFormat ? '.jpg' : '.bmp'
        var iRet = WebVideoCtrl.I_CapturePic(szPicName, {
          bDateDir: true //是否生成日期文件
        })
        if (0 == iRet) {
          this.$message({
            type: 'success',
            message: '抓图成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '抓图失敗'
          })
        }
      }
    },
    // 开始录像
    clickStartRecord(szType) {
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex)
      this.g_szRecordType = szType
      var self = this
      if (oWndInfo != null) {
        // var szChannelID = $('#channels').val(),
        var szFileName =
          this.szDeviceIdentify +
          '_' +
          // szChannelID +
          // '_' +
          new Date().getTime()

        WebVideoCtrl.I_StartRecord(szFileName, {
          bDateDir: true, //是否生成日期文件
          success: function() {
            if ('realplay' === szType) {
              console.log('开始录像成功！')
              self.$message({
                type: 'success',
                message: '开始录像成功！'
              })
            } else if ('playback' === szType) {
              console.log('开始剪辑成功！')
            }
          },
          error: function() {
            if ('realplay' === szType) {
              console.log('开始录像失败！')
            } else if ('playback' === szType) {
              console.log('开始剪辑失败！')
            }
          }
        })
      }
    },
    // 停止录像
    clickStopRecord(szType, iWndIndex) {
      if ('undefined' === typeof iWndIndex) {
        iWndIndex = this.g_iWndIndex
      }
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex)
      var szInfo = ''
      var self = this
      if (oWndInfo != null) {
        WebVideoCtrl.I_StopRecord({
          success: function() {
            if ('realplay' === szType) {
              szInfo = '停止录像成功！'
              self.$message({
                type: 'success',
                message: '停止录像成功！'
              })
            } else if ('playback' === szType) {
              szInfo = '停止剪辑成功！'
            }
            console.log(szInfo)
          },
          error: function() {
            if ('realplay' === szType) {
              szInfo = '停止录像失败！'
            } else if ('playback' === szType) {
              szInfo = '停止剪辑失败！'
            }
            console.log(szInfo)
          }
        })
      }
    },
    // 全屏
    clickFullScreen() {
      WebVideoCtrl.I_FullScreen(true)
    },
    // 打开选择框 0：文件夹  1：文件
    clickOpenFileDlg(id, iType) {
      var szDirPath = WebVideoCtrl.I_OpenFileDlg(iType)
      if (szDirPath != -1 && szDirPath != '' && szDirPath != null) {
        $('#' + id).val(szDirPath)
      }
    },
    // 获取本地参数
    clickGetLocalCfg() {
      var xmlDoc = WebVideoCtrl.I_GetLocalCfg()
      if (xmlDoc != null) {
        $('#previewPicPath').val(
          $(xmlDoc)
            .find('CapturePath')
            .eq(0)
            .text()
        )
        $('#recordPath').val(
          $(xmlDoc)
            .find('RecordPath')
            .eq(0)
            .text()
        )
        console.log('本地配置获取成功！')
      } else {
        console.log('本地配置获取失败！')
      }
    },
    // 设置本地参数
    clickSetLocalCfg() {
      var arrXml = []
      var szInfo = ''

      arrXml.push('<LocalConfigInfo>')
      arrXml.push(
        '<CapturePath>' + $('#previewPicPath').val() + '</CapturePath>'
      )
      arrXml.push('<RecordPath>' + $('#recordPath').val() + '</RecordPath>')
      arrXml.push('</LocalConfigInfo>')

      var iRet = WebVideoCtrl.I_SetLocalCfg(arrXml.join(''))

      if (0 == iRet) {
        szInfo = '本地配置设置成功！'
      } else {
        szInfo = '本地配置设置失败！'
      }
      console.log(szInfo)
    }
  }
}
</script>

<style></style>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.single_watch {
  width: 100%;
  display: flex;
  .watch_image {
    padding: 15px;
    flex-basis: 70%;
    .watch_box {
      background-color: #083c75;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .watch_title {
        color: #7afeff;
        font-size: 20px;
        margin: 15px 0;
      }
      .watch_data {
        margin: 15px 0;
        .data_item {
          margin-right: 10px;
        }
      }
    }
    #divPlugin {
      width: 650px;
      height: 420px;
      border: 1px solid #7afeff;
    }
  }
  .control_box {
    flex: 1;
    margin-left: 15px;
    padding: 10px;
    margin-top: 15px;
    position: relative;
    // border-left: 1px solid #7afeff;
    .title {
      color: #7afeff;
    }
    .all_btn {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      // width: 100%;
      margin-top: 20px;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        padding: 5px;
        margin: 5px;
        background-color: #015294;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
      }
      .btn:hover {
        color: #7afeff;
      }
    }
  }
}
.watch_switch {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .btn_des {
    cursor: pointer;
    background-color: #025194;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
  }
  .btn_des:hover {
    color: #7afeff;
  }
  .refresh {
    cursor: pointer;
    font-size: 24px;
    margin-top: 15px;
  }
  .refresh:hover {
    color: #7afeff;
  }
}
.outcircle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #053776;
  border: 5px solid #309dbe;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 25%;
  position: relative;
  .incircle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #309dbe;
    border: 3px solid #025194;
    position: absolute;
    margin-left: 50%;
    margin-top: 50%;
    transform: translate(-50%, -50%);
    .smallcircle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 3px solid #025194;
      position: absolute;
      margin-left: 50%;
      margin-top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .toptriangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #54e2e3;
    position: absolute;
    margin-left: 50%;
    margin-top: 5%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  // .toptriangle:hover:after {
  //   content: '上';
  //   position: absolute;
  //   top: -20px;
  //   left: -10px;
  //   width: 0;
  //   height: 0;
  //   font-size: 12px;
  // }
  .top_left_triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #54e2e3;
    position: absolute;
    margin-left: 15%;
    margin-top: 15%;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    cursor: pointer;
  }
  .lefttriangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid #54e2e3;
    border-bottom: 15px solid transparent;
    position: absolute;
    margin-left: 5%;
    margin-top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .left_bot_triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid #54e2e3;
    border-bottom: 15px solid transparent;
    position: absolute;
    margin-left: 15%;
    margin-top: 70%;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    cursor: pointer;
  }
  .bottriangle {
    width: 0;
    height: 0;
    border-top: 15px solid #54e2e3;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    margin-left: 50%;
    margin-top: 82%;
    transform: translateX(-50%);
    cursor: pointer;
  }
  .righttriangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid #54e2e3;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    margin-left: 80%;
    margin-top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .right_bot_triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid #54e2e3;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
    margin-left: 70%;
    margin-top: 70%;
    transform: translateY(-50%);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
  }
  .right_top_triangle {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #54e2e3;
    position: absolute;
    margin-left: 70%;
    margin-top: 15%;
    transform: translateX(-50%);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    cursor: pointer;
  }
}
.option_item {
  font-size: 12px;
  padding: 0 5px;
  .desc {
    margin: 5px 0;
  }
  .skim {
    display: inline;
    width: 30px;
    padding: 3px;
    background-color: #015294;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 5px;
  }
  .skim:hover {
    color: #7afeff;
  }
  #previewPicPath,
  #recordPath {
    width: 78%;
  }
}
</style>