301hospital/web/src/components/hotspot/title.vue

<template>
  <div class="images">
    <div class="img-con">
      <div class="title">{{hotspot.title}}</div>
      <div class="desc" v-html="hotspot.content"></div>
      <img @click="$emit('close')" class="close" :src="require('@/assets/images/project/close.png')" alt="">

    </div>
  </div>
</template>

<script>
export default {
  props:['hotspot'],
  data(){
    return {
      active:0
    }
  },
  methods:{
  }
}
</script>


<style lang="less" scoped>
.noshow{
  opacity: 0!important;;
  pointer-events: none!important;;
}

.images{
  width: 1010px;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  border-top: 10px solid #338F7B;
  text-align: left;
   .title {
    padding: 0 10px;
    font-weight: bold;
    color: #333333;
    font-size: 24px;
    width: 100%;
    padding: 20px 60px;
  }
  .img-con{
    .desc{
      margin: 0 auto;
      width: 100%;
      text-align: left;
      line-height: 1.5;
      max-height: 250px;
      color: #333333;
      overflow-y: auto;
      font-size: 16px;
      padding: 20px;
    }
  }
  
}

 .close{
    position: absolute;
    top: 40px;
    right: 50px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 9999999;
  }
</style>