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

<template>
  <div class="donate" @click.stop>
    <p class="qtitle">{{hotspot.title}}</p>
    <div class="qline">
      <img :src="require(`@/assets/images/icon/star.png`)" alt="" />
    </div>

    <div class="txtcon">
      <p v-html="hotspot.content"></p>
    </div>
   
  </div>
</template>

<script>

export default {
  props:['hotspot'],
};
</script>

<style lang="less" scoped>
.donate {
  width: 988px;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  background-color: rgba(3, 51, 48, 0.5);
  color: #fff;
  padding: 36px 34px;
  border-top: 8px solid #ccaf8f;
  border-bottom: 8px solid #ccaf8f;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% auto;
  .qtitle {
    width: 100%;
    height: 30px;
    font-size: 30px;
    font-weight: bold;
    line-height: 38px;
    color: #FFE0A6;
    text-align: center;
  }
  .qline {
    width: 100%;
    height: 1px;
    margin: 26px 0;
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%);
    > img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      top: -12px;
    }
  }

  .txtcon{
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    color: #626260;
    p{
      font-size: 18px;
      line-height: 1.5;
    }
  }





}
</style>