AnalysisSystemForRadionuclide_vue/src/views/abnormalAlarm/components/boxTitle.vue

<template>
  <div class="chart-title">
    <span>{{ title }}</span>
    <div class="right">
      <slot name="right">
        <img src="@/assets/images/abnormalAlarm/title_right.png" alt="">
      </slot>
    </div>
    <div class="other">
      <slot name="other"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ""
      }
    }
  }
</script>

<style lang="less" scoped>
.chart-title{
  height: 40px;
  font-family: MicrogrammaD-MediExte;
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
  letter-spacing: 1px;
  color: #0cebc9;
  border-bottom: 4px solid rgba(12, 235, 201, 0.2);
  border-top: 1px solid rgba(12, 235, 201, 0.2);
  position: relative;
  // display: flex;
  // justify-content: space-between;
  span{
    display: inline-block;
    padding: 0 15px;
    background-color: rgba(12, 235, 201, 0.05);
  }
  .right{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .other{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
}
</style>