pdfDialog.vue

<template>
    <el-dialog
      :visible.sync="isShow"
      :close-on-click-modal="false"
      center
      @close="close"
      :modal-append-to-body=true
      append-to-body>
        <div>
            {{src}}
            <pdf :src="src"></pdf>
        </div>
    </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  props: ['src', 'isShow'],
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    // 关闭
    close () {
      this.$emit('update:isShow', false)
    }
  }
}
</script>
<style lang="scss" scoped>
    .el-dialog{
        width: 60vw;
        height: 60vh;
        background: url("~@/assets/img/dialogBg.png") rgba(0,14,66,0.8);
        background-size: 100% 100%;
        box-shadow:0px 0px 8px 4px rgba(10,18,35,0.5);
        .el-dialog__header{padding: 0;}
        .el-dialog__body{
            height: 100%;
            padding: 0;
        }
        .el-dialog__headerbtn {
            font-size: 24px;
            z-index: 1;
            .el-dialog__close{
                color: #30DDF4;
            }
        }
        .el-input__inner{
            background:rgba(144,224,255,0.15);
            border-radius:2px;
            border:1px solid rgba(119,226,255,1);
            color: #FFFFFF;
            font-size:12px;
            font-family:PingFang-SC-Bold,PingFang-SC;
            font-weight:bold;
        }
        .search{
          font-size:12px;
          font-family:PingFang-SC-Bold,PingFang-SC;
          font-weight:bold;
          width: 100%;
          height:.28rem;
          margin-top:.2rem;
          border-bottom:1px solid rgba(119,226,255,1);
          display: flex;
          .el-autocomplete{
            flex: 1;
            .el-input__inner{
              width: 100%;
              background:transparent;
              color: #FFFFFF;
              border: 0 !important;
            }
          }
        }
        .el-checkbox{
            float: left;
            margin:4px 0;
            width: calc(100% - 20px);
            padding-left: 20px;
            .el-checkbox__inner{
                background: #000E42;
                border: 1px solid #30DDF4;
            }
            .el-checkbox__label{
                height: 16px;
                font-size:14px;
                font-family:PingFang-SC-Regular,PingFang-SC;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:16px
            }
            .el-checkbox__inner::after{
                border: 1px solid #30DDF4;
                border-left: 0;
                border-top: 0;
            }
        }
    }
</style>