<template lang="pug">
  <div class="animation">
    <div class='info-title'>当前资源点关联摄像头
      <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
    </div>
    <div style="height:40px; width:100%;padding-top:10px">
      <div style="width:80px; float:left; line-height:30px; padding-left:10px;">关联监控:</div>
      <div style="float:left">
        <el-select size='mini'  v-model="camera" placeholder="请选择" @change="cameraChange">
          <el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class='info-video'>
      <img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
      <video v-if="video1 == 1" class="video" ref="video" muted autoplay controls></video>
    </div>
    <div class="info-form">
      <div class="operate">
        <div class="btns">
          <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
          <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
          <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
          <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
          <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
          <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
          <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
          <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
          <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
          <div class="fx">方向</div>
          <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
          </div>
          <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
          </div>
          <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
          </div>
          <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
          </div>
          <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
          </div>
          <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
          </div>
          <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
          </div>
          <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
          </div>
        </div>
        <div class="ytBox ytBox2">
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
              <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
              <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
              <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
              <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
              <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
              <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
              <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
              <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
            </div>
          </div>
          <div class="bbBtn">
            <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
              <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
              <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
            </div>
            <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
              <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
              <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='info-title'>监控点信息</div>
    <div class='info-form'>
      <div class="quDetailM">
        <p class="leftP">设备名称&nbsp;:&nbsp;&nbsp;<span class='title'>{{dataForm.name}}</span></p>
      </div>
      <div class='typeInfoBox'  v-if="dataForm.type!='c788ce98c1f248f590434394da485ce4'">
        <div class="typeInfo" v-if="dataForm.type=='b45827c068254695864ee3c1d42573cb'">
          <div class='title'>水流流量</div>
          <div><span class='num'>9</span>&nbsp;<span class='unit'>L/s</span></div>
          <div class='scope'>参考值：5~20 L/s</div>
        </div>

        <div class="typeInfo" v-if="dataForm.type=='b47661ca1d454f9792ba5369f3cb2bc5'">
          <div class='title'>水流压力</div>
          <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
          <div class='scope'>参考值：0.35~1.45 Mpa</div>
        </div>

        <div class="typeInfo" v-if="dataForm.type=='303310efddb34a2e9bf269bdff8a7dc5'">
          <div class='title'>水位高度</div>
          <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
          <div class='scope'>参考值：0.35~1.45 Mpa</div>
        </div>

        <div class="typeInfo" v-if="dataForm.type=='f4c840711eae4bcb9536a890cdfda493'">
          <div class='title'>风速</div>
          <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
          <div class='scope'>参考值：0.35~1.45 Mpa</div>
        </div>

        <div class="typeInfo" v-if="dataForm.type=='5b26f6c8f2a143048bd0e327ca5c186d'">
          <div class='title'>风压</div>
          <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
          <div class='scope'>参考值：0.35~1.45 Mpa</div>
        </div>

      </div>
      <div class='typeInfoBox' v-if="dataForm.type=='c788ce98c1f248f590434394da485ce4'">
            <div class="typeInfo">
                <div class='title'>一氧化碳</div>
                <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
                <div class='scope'>参考值：0.35~1.45 Mpa</div>
            </div>
            <div class="typeInfo">
                <div class='title'>二氧化碳</div>
                <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
                <div class='scope'>参考值：0.35~1.45 Mpa</div>
            </div>
            <div class="typeInfo">
                <div class='title'>温度</div>
                <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
                <div class='scope'>参考值：0.35~1.45 Mpa</div>
            </div>
            <div class="typeInfo">
                <div class='title'>湿度</div>
                <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
                <div class='scope'>参考值：0.35~1.45 Mpa</div>
            </div>
      </div>

      <div class="quDetailM">
        <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;<span>{{dataForm.status==1?'正常':'异常'}}</span></p>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
  computed: {
    ...mapState('d2admin/user', ['info']),
    ...mapState('d2admin/typeList', ['typeList'])
  },
  watch: {
    typeList: {
      handler(n, o) {
        if (n) {
          this.setDataList()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      params: [],
      video1: 0,
      stationId: localStorage.getItem('stationId'),
      //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
      //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
      actionList: [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '变倍+',
        '变倍-',
        '变焦+',
        '变焦-',
        '光圈+',
        '光圈-',
        '',
        '',
        '',
        '',
        '上仰',
        '下俯',
        '左转',
        '右转',
        '左上',
        '右上',
        '左下',
        '右下',
        '自动扫描'
      ],
      imgUrl: '',
      imgRightUrl11: false,
      imgRightUrl12: false,
      imgRightUrl13: false,
      imgRightUrl14: false,
      imgRightUrl15: false,
      imgRightUrl16: false,
      monitorList: [
        {
          value: '1',
          label: '监控1'
        },
        {
          value: '2',
          label: '监控2'
        }
      ],
      monitorValue: '监控1',
      videoSrc: '',
      clickFlag: false,
      camera: '',
      cameraCur: {},
      restaurants: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        stationId: '',
        stationName: '',
        tierId: '',
        code: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      },
      wxyljList: [], //无线压力计
      hjtcqList: [], //4合1环境探测器
      lljList: [], //流量计
      wxywyList: [], //无线液位仪
      fsyList: [], //风速仪
      fyyList: [] //风压仪
    }
  },
  created() {
    console.log(this.typeList)
  },
  methods: {
    init(item, stationId) {
      console.log('item', item)
      this.clickFlag = false
      this.dataForm.id = item.id
      this.dataForm.name = item.name
      this.dataForm.type = item.type
      this.dataForm.status = item.status
      // this.stationId = stationId
      this.cameraCur = {}
      this.camera = ''
      // this.initResource()
      this.params = []
      switch (item.type) {
        case 'b47661ca1d454f9792ba5369f3cb2bc5': ////无线压力计
          this.params = this.wxyljList.filter((e) => e.resource_id == item.id)
          break
        case 'c788ce98c1f248f590434394da485ce4': //4合1环境探测器
          this.params = this.hjtcqList.filter((e) => e.resource_id == item.id)
          break
        case 'b45827c068254695864ee3c1d42573cb': //流量计
          this.params = this.lljList.filter((e) => e.resource_id == item.id)
          break
        case '303310efddb34a2e9bf269bdff8a7dc5': //无线液位仪
          this.params = this.wxywyList.filter((e) => e.resource_id == item.id)
          break
        case 'f4c840711eae4bcb9536a890cdfda493': //风速仪
          this.params = this.fsyList.filter((e) => e.resource_id == item.id)
          break
        case '5b26f6c8f2a143048bd0e327ca5c186d': //风压仪
          this.params = this.fyyList.filter((e) => e.resource_id == item.id)
          break
      }
      console.log('params运行状态', this.params)
    },
    setDataList() {
      this.wxyljList = this.typeList.wxyljList //无线压力计
      this.hjtcqList = this.typeList.hjtcqList //4合1环境探测器
      this.lljList = this.typeList.lljList //流量计
      this.wxywyList = this.typeList.wxywyList //无线液位仪
      this.fsyList = this.typeList.fsyList //风速仪
      this.fyyList = this.typeList.fyyList //风压仪
    },
    initResource() {
      this.video1 = 0 //初始化显示默认图片
      this.$http({
        url: this.$http.adornUrlEq(
          `/liResource/getResourceDetails/${this.dataForm.id}`
        ),
        method: 'get',
        params: this.$http.adornParams()
      }).then((data) => {
        if (data && data.code === 0) {
          this.dataForm = data.bean
          // if (this.dataForm.list && this.dataForm.list.length > 0) {
          //   this.cameraCur = this.dataForm.list[0]
          //   // console.log(this.cameraCur, '---------')
          //   this.camera = this.cameraCur.id
          //   this.video1 = 1
          //   this.$http({
          //     url: this.$http.adornUrlEq('/camera/camerasPlay'),
          //     method: 'post',
          //     data: {
          //       id: this.cameraCur.id,
          //       stationId: this.cameraCur.stationId,
          //       userId: localStorage.getItem('userId'),
          //       levelType: 1,
          //       controlType: 3
          //     }
          //   }).then(data => {
          //     if (data && data.code === 0) {
          //       //视频直播
          //       var src = data.url
          //       //视频连接
          //       if (flvjs.isSupported()) {
          //         this.flvPlayer = flvjs.createPlayer({
          //           type: 'flv',
          //           enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
          //           isLive: true, //直播模式
          //           hasAudio: false, //关闭音频
          //           hasVideo: true,
          //           stashInitialSize: 128,
          //           enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
          //           url: src
          //         })
          //         this.$nextTick(function () {
          //           this.flvPlayer.attachMediaElement(this.$refs.video)
          //           try {
          //             this.flvPlayer.load()
          //             // this.flvPlayer.play()
          //           } catch (error) {
          //             console.log(error)
          //           }
          //         })
          //       }
          //     }
          //   })
          // }
        }
      })
    },
    closeQueryDetailVisible() {
      this.$emit('closeQ')
    },
    clickPTZControl(ptz, dwStop, img) {
      // console.log(this.camera)
      if (
        !this.camera ||
        (this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' &&
          (ptz < 11 || ptz > 16))
      ) {
        return
      }
      if (!isAuth('ol:demo:corona')) {
        this.$message({
          type: 'warning',
          message: '没有操作权限，请联系管理员',
          duration: 1000
        })
        return
      }

      if (img && img != 'right') {
        this.imgUrl = img
      }
      if (dwStop) {
        this.imgUrl = ''
      }
      if (img && img == 'right') {
        this['imgRightUrl' + ptz] = true
      }
      if (dwStop && img == 'right') {
        this['imgRightUrl' + ptz] = false
      }
      this.$http({
        url: this.$http.adornUrlEq('/camera/ptzControl'),
        method: 'post',
        data: {
          resourceId: this.cameraCur.id,
          stationId: this.cameraCur.stationId,
          userId: localStorage.getItem('userId'),
          levelType: 1,
          controlType: 3,
          ip: this.cameraCur.addressCode, //ip地址
          port: this.cameraCur.port, //端口
          username: this.cameraCur.username, //账号
          password: this.cameraCur.password, //密码
          channel: this.cameraCur.byx1, //通道
          stream: 'main', //主码流
          dwPtzCommand: ptz, //云台控制命令
          dwStop: dwStop //云台控制0开始和1结束
        }
      }).then((data) => {
        if (data && data.code === 0) {
          if (dwStop == 0) {
            //云台控制0开始和1结束
            this.saveLog(1, ptz) // 执行结果 成功 1  失败 2
            this.$message.success(data.msg)
          }
        } else {
          if (dwStop == 0) {
            //云台控制0开始和1结束
            this.saveLog(2, ptz) // 执行结果 成功 1  失败 2
            this.$message.error(data.msg)
          }
        }
      })
    },
    //调用日志保存记录操作指令
    saveLog(result, ptz) {
      this.$http({
        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
        method: 'post',
        data: {
          source: 1,
          actionName: this.actionList[ptz],
          resourceId: this.cameraCur.id,
          stationId: this.stationId,
          type: this.cameraCur.type,
          result: result
        }
      }).then((data) => {})
    },
    cameraChange(id) {
      if (id) {
        this.camera = id
        this.dataForm.list.forEach((res) => {
          if (res.id === id) {
            this.cameraCur = res
          }
        })
        if (this.flvPlayer) {
          this.flvPlayer.pause()
          this.flvPlayer.unload()
          this.flvPlayer.detachMediaElement()
          this.flvPlayer.destroy()
          this.flvPlayer = null
        }
        this.$http({
          url: this.$http.adornUrlEq('/camera/camerasPlay'),
          method: 'post',
          data: {
            id: this.cameraCur.id,
            stationId: this.cameraCur.stationId,
            userId: localStorage.getItem('userId'),
            levelType: 1,
            controlType: 3
          }
        }).then((data) => {
          if (data && data.code === 0) {
            //视频直播
            var src = data.url
            //视频连接
            if (flvjs.isSupported()) {
              this.flvPlayer = flvjs.createPlayer({
                type: 'flv',
                enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
                isLive: true, //直播模式
                hasAudio: false, //关闭音频
                hasVideo: true,
                stashInitialSize: 128,
                enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
                url: src
              })
              this.$nextTick(function() {
                this.flvPlayer.attachMediaElement(this.$refs.video)
                try {
                  this.flvPlayer.load()
                  // this.flvPlayer.play()
                } catch (error) {
                  console.log(error)
                }
              })
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.info-title {
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  background-color: #e1edf4;
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
.info-video {
  padding: 0 10px 10px;
  height: 160px;
}
.info-form {
  padding: 10px 10px 0;
}
.info-block {
  border: 1px solid #cccccc;
}
.el-select {
  width: 100%;
}
.video {
  width: 100%;
  height: 180px;
}
.animation {
  animation: myfirst 1s;
  position: absolute;
  top: -40px;
  right: 5px;
  width: 350px;
  background-color: #f4f4f4;
  z-index: 11;
  border: 1px solid rgba(195, 195, 195, 1);
  box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
@keyframes myfirst {
  from {
    right: -500px;
  }
  to {
    right: 0;
  }
}
.quDetailM {
  width: 100%;
  border: 1px solid #bdcad1;
  margin-bottom: 10px;
  background: #fff;
}
.leftP {
  height: 30px;
  line-height: 30px;
  margin: 0;
  width: 100%;
  font-size: 14px;
  text-indent: 10px;
  span {
    color: #0179c1;
  }
}
.typeInfoBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5px;
  .typeInfo {
    width: 48%;
    height: 75px;
    background: #fff;
    border: 1px solid #bdcad1;
    text-align: center;
    margin-bottom: 5px;
    div {
      margin: 5px 0;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
    }
    .num {
      font-size: 16px;
      font-weight: bold;
      color: #0179c1;
    }
    .scope {
      font-size: 13px;

      color: #5e5d5d;
    }
  }
}
.operate {
  padding: 5px 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  border-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5),
      rgba(213, 213, 213, 0.5),
      rgba(255, 255, 255, 0.5),
      rgba(218, 218, 218, 0.5),
      rgba(255, 255, 255, 0.5)
    )
    2 2;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  .btns {
    width: 150px;
    height: 150px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      cursor: pointer;
      padding: 10px;
    }
    .s {
      position: absolute;
      top: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .x {
      position: absolute;
      bottom: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .z {
      position: absolute;
      top: 75px;
      left: 10px;
      width: 24px;
      height: 24px;
    }
    .y {
      position: absolute;
      top: 75px;
      right: 10px;
      width: 24px;
      height: 24px;
    }
    .zs {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .zx {
      position: absolute;
      bottom: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .ys {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .yx {
      position: absolute;
      bottom: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .fx {
      position: absolute;
      padding: 0;
      cursor: default;
      top: 50%;
      left: 50%;
      width: 65px;
      height: 65px;
      background: #ececec;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      color: #969696;
      transform: translate(-50%, -50%);
    }
  }
  .ytBox {
    width: 90px;
    font-size: 16px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .mllx {
      display: flex;
      justify-content: space-between;
      width: 90%;
      span {
        line-height: 40px;
        text-align: center;
        width: 35%;
      }
    }
    .bbBtn {
      height: 40px;
      display: flex;
      margin-left: 10px;
      justify-content: flex-start;
      div {
        width: 40px;
        height: 40px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.el-icon-wq-r1 {
  background: url(~@/assets/images/r1.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r1:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r2 {
  background: url(~@/assets/images/r2.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r2:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r3 {
  background: url(~@/assets/images/r3.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r3:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r5 {
  background: url(~@/assets/images/r5.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r5:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r6 {
  background: url(~@/assets/images/r6.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r6:before {
  content: '';
  font-size: 16px;
}

.el-icon-wq-r1b {
  background: url(~@/assets/images/r1b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r1b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r2b {
  background: url(~@/assets/images/r2b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r2b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r3b {
  background: url(~@/assets/images/r3b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r3b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r5b {
  background: url(~@/assets/images/r5b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r5b:before {
  content: '';
  font-size: 16px;
}
.el-icon-wq-r6b {
  background: url(~@/assets/images/r6b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r6b:before {
  content: '';
  font-size: 16px;
}
</style>
<style lang="scss">
.instuctions_content {
  table {
    th {
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
}
</style>
