epmet-work-pc-chengyang/src/views/modules/visual/plugin/power/components/info-dialog.vue

<template>
    <div class="info-dialog" :style="'left:' + position.x + 'px; top:' + position.y + 'px;'">
        <img src="../../../../../../assets/img/plugins/close.png" class="info-dialog-close" @click="closeDialog">
        <div class="card-title">
            <img class="title-icon" src="../../../../../../assets/img/shuju/title-tip.png" />
            <div class="title-label">信息详情</div> 
        </div>
        <div class="info-dialog-content">
            <div class="info-dialog-content-item">
              <img class="info-dialog-content-item-img" src="">
              <div class="info-dialog-content-item-info">
                <div class="info-dialog-content-item-info-name">杨磊{{axisStructId}}</div>
                <div class="info-dialog-content-item-info-mobile">手机号：1500000000</div>
                <div class="info-dialog-content-item-info-mobile">类别：社区书记</div>
              </div>
            </div>
            <div class="info-dialog-content-intro" style="margin-top: 30px;">简介：xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'info-dialog',
  props: {
    axisStructId: {
      type: String,
      default: ''
    },
    leaderId: {
      type: String,
      default: ''
    },
    position: {
      type: Object,
      default: function () {
        return {
          x: '',
          y: ''
        }
      }
    }
  },
  watch: {
    axisStructId (newVal, oldVal) {
      this.getInfo()
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    closeDialog () {
        this.$emit('close')
    },
    getInfo () {
      console.log(this.axisStructId, this.leaderId)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-title {
  display: flex;
  align-items: center;
  margin: 27px 20px;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 46px;
    height: 34px;
    box-sizing: border-box;
    margin-right: 6px;
  }
  .title-label {
    font-size: 20px;
    font-weight: 800;
    ::v-deep .el-input {
      width: 180px;
      .el-input__inner {
        font-size: 18px;
        color: #fff;
        background: #06186d;
        border: 1px solid #1a64cc;
      }
      .el-icon-arrow-down::before {
          content: "\e790";
      }
    }
  }
}
.info-dialog {
    width: 494px;
    height: 372px;
    background: url('../../../../../../assets/img/plugins/tanchuang.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 999;
    &-close {
        position: absolute;
        right: -15px;
        top: -10px;
    }
    &-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 20px 20px 20px;
        box-sizing: border-box;
        &-item {
          display: flex;
          padding-left: 40px;
          box-sizing: border-box;
          &-img {
            width: 120px;
            height: 140px;
            height: 140px;
          }
          &-info {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            &-name {
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 30px;
            }
            &-mobile {
              font-size: 14px;
              margin-bottom: 12px;
            }
          }
        }
        &-intro {
          padding-left: 40px;
          box-sizing: border-box;
          word-break: break-all;
        }
    }
}
</style>