platformFront/src/components/qualityControl/QCTipPop.vue

<template>
    <div class="pop" :style="getStyle()">
        <p class="close"><a href="javascript:void(0);" @click="closePop">×</a></p>
        <div class="info">
            <p>模块类型：{{name}}</p>
            <p>示例：{{example}}</p>
        </div>

    </div>
</template>

<script>
  export default {
    name: "QCTipPop",
    props: ['name','example','top','left','show'],
    data() {
      return {
        getStyle(){
            return {
                top:(this.top-340)+"px",
                left:(this.left-310)+"px",
                display:this.show?"block":"none"
            }
        }
      }
    },
    methods:{
      closePop(){
        this.$emit("close");
      }
    }
  }
</script>
<style lang="less" scoped>
    .pop{
        position: absolute;
        border: 1px solid #c0c4cc;
        padding: 5px 10px;
        border-radius: 5px;
        background: #fff;
        font-size: 12px;
        line-height: 22px;
        z-index: 99;
        width: 300px;
        .info{
            max-height: 270px;
            word-break: break-all;
            overflow: auto;
        }
        .close{
            text-align:right;
            a{
                display: inline-block;
                font-size: 18px;
                color: #909090;
            }

        }

    }
</style>