<template>
  <el-dialog
    width="90%"
    @open="opened"
    @closed="closed"
    :fullscreen="true"
    :show-close="true"
    custom-class="webMiscdialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">大数据训练样本库</div>
      </div>
    </template>
    <div class="bodyy" :style="pageHeight">
        <iframe src="http://18.6.30.66:8082/#/" class="iframeSty" frameborder="0" width="100%" height="98%"></iframe>
    </div>
  </el-dialog>
</template>
<script>
export default {
    data() {
        return {}
    },
    computed: {
        pageHeight() {
            return {
                'height': document.documentElement.clientHeight-70 + 'px'
            }
        }
    },
    methods: {}
};
</script>

<style lang="less" scoped>
.bodyy {
    width: 100%;
}
</style>
<style lang="less">
.webMiscdialogs{
    .el-dialog__header{
        z-index: 11111111111;
        position: relative;
        background: rgb(50, 65, 87);
    }
    .el-dialog__body{
        padding: 0 ;
        .iframeSty{
            position: absolute;
            top: 5px;
        }
    }
}
</style>
<style lang="less">
.bodyy {
  .pop-up-main,
  .paln-box {
    width: 100%;
    height: 90vh;
    overflow: hidden;
    position: relative;
  }
  .movableItem {
    // width: 1920PX !important;
    // height: 800PX !important;

    .svg {
    //   width: 100%;
    //   height: 92%;
      margin-left: 0;
      margin-top: 8%;
    }
  }

  .el-badge__content.is-fixed.is-dot {
    right: 0;
    top: 10px;
    background: #f25656;
    animation: twinkle 0.75s infinite;
    border-color: transparent;
  }

  @keyframes twinkle {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.currentShowTitles {
  width: 100%;
  position: relative;
  .alarIcon {
    position: absolute;
    right: 50px;
    top: 5;
    font-size: 20px;
    cursor: pointer;
  }
}

</style>