<template>
  <el-dialog
    class="warn_modal"
    :title="$t('Configuration')"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="handleClose">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="图文说明" name="1">
        <p class="tip">障碍物告警</p>
        <p class="p1">处理方法</p>
        <p class="p2">1.查看避障传感器</p>
        <img src="../../images/new/bg1.png" alt="">
      </el-tab-pane>
      <el-tab-pane label="视频说明" name="2">
        <video src=""></video>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      activeName: '1'
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handleClose (done) {
      this.visible = false
      done()
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-dialog__header
  padding 0.2rem 0.2rem 0.3rem
.tip
  font-size .2rem
  font-weight 700
  font-family 'SourceHanSansCN-Bold'
  line-height .2rem
  color #E54F29
  text-align center
  border-bottom 1px dashed #85DFFF
  padding .2rem
  margin-bottom .2rem
.p1
  font-size .18rem
  line-height .2rem
  color #fff
  margin-bottom .2rem
.p2
  font-size .16rem
  line-height .2rem
  color #fff
</style>
