Situation-Display/src/views/page/technicalIndicator.vue

<template>
  <div class="bigBox">
    <div class="top">
      <el-button icon="el-icon-arrow-left" style="margin: 20px;" @click="goback">返回上一级</el-button>
      <h2 style="font-size: 42px;color: #0f0f0f;display: inline-block;margin: 0;">技术指标体系</h2>
    </div>
    <div class="imgBox">
      <el-image :src="url"></el-image>
      <el-button class="imgBtnOne" @click="check(1)"></el-button>
      <el-button class="imgBtnTwo" @click="check(2)"></el-button>
      <el-button class="imgBtnThree" @click="check(3)"></el-button>
    </div>
    <el-dialog
      :title=title
      :visible.sync="dialogVisible"
      class="dialog"
      width="900px">
      <div v-html="text" style="font-size: 18px;line-height: 30px;" v-if="!threeShow"></div>
      <el-image style="width: 800px" :src="urlImg" v-if="threeShow"></el-image>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
    name:'technicalIndicator',
  data() {
    return {
      url:require('../../assets/tree.png'),
      text:'',
      dialogVisible:false,
      title:'',
      urlImg:require('../../assets/12.png'),
      threeShow:false
    }
  },
  methods:{
    goback(){
      this.$router.push({ name:'mainPage' })
    },
    check(num){
      switch (num) {
        case 1:
          this.title='目标感知能力';
          this.threeShow=false
          this.text=`分为<span style="color:red;font-size:20px">目标智能探测技术</span>和<span style="color:red;font-size:20px">目标智能识别技术</span><br>`
          this.dialogVisible=true;
          break;
        case 2:
          this.title='目标智能探测';
          this.threeShow=false
          this.text=`<span style="color:red;font-size:20px">通用指标——识别准确率</span><br>
            <span style="font-weight:700">1)指标介绍</span><br>
            在已知目标类型时，识别系统输出结果正确数与总输入样本数的比值<br>
            <span style="font-weight:700">2)指标计算</span><br>
            记输出结果正确数为 A，错误数为 B，总样本数为 A+B，则<br>
            <span style="font-weight:700">3)指标分析</span><br>
            准确率越高，表明探测效果越好<br>`
          this.dialogVisible=true;
          break;
        case 3:
          this.title='基于被动声学信号的目标智能探测技术指标';
          this.threeShow=true
          this.dialogVisible=true;
          break;
        default:
          break;
      }
    }
  },
}
</script>
<style scoped>
.bigBox{
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 1920px;
  top: 0;
  background-color: white;
  /* background-image: url('/public/homeImg.jpg');
  background-repeat: no-repeat;
  background-size: 1920px 1080px;
  background-position: center top; */
  /* text-align: center; */
  
}
.imgBox{
  width: 100%;
  height:100%;
  position: relative;
}
::v-deep(.dialog .el-dialog__body) {
  height: 400px;
  overflow: hidden;
  overflow-y: scroll;
}
::v-deep(::-webkit-scrollbar) {
  display: none;
}
.imgBtnOne{
  opacity: 0;
  position:absolute;
  left:690px;
  top:136px;
  width:100px;
  height:30px;
}
.imgBtnTwo{
  opacity: 0;
  position:absolute;
  left:560px;
  top:50px;
  width:100px;
  height:30px;
}
.imgBtnThree{
  opacity: 0;
  position:absolute;
  left:300px;
  top:33px;
  width:250px;
  height:30px;
}
</style>