zhgkpt-datav/app/src/components/YlycModalHeader.vue

<script>

export default {
  name: 'YlycModalHeader',
  methods: {
    getShoeInfo(name){
      this.showModal(name);
    },
  }
}
</script>

<template >
  <div class="el-dialog__title" >
    <span>“一楼一策”隐患整治清单</span>
    <!-- <img class="imgs" src="@/assets/images/dd_wh.png" alt="" > -->
    <div class="btn" @click="getShoeInfo('whFxModal')">隐患闭环处置流程</div>
    <!-- 风险问号弹窗 -->
    <basic-modal :modal="false" top="30px" ref="whFxModal" name="隐患处置流程" width="90%">
      <div style="display: flex; flex-direction: column; justify-content: center">
        <img  src="@/assets/images/yhpc-tip.png" />
      </div>
    </basic-modal>
  </div>
</template>

<style scoped lang='less'>
.el-dialog__title {
  display: flex;
  align-items: center;
}
.imgs{
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: inline-block;
  margin-left: 5px;
}

.btn {
  // width: 55px;
  height: 22px;
  margin-left: 5px;
  padding: 0px 5px;

  background: linear-gradient(
    180deg,
    rgba(0, 209, 255, 0.245) 0%,
    rgba(0, 255, 224, 0.435) 100%
  );
  border: 1px solid rgba(0, 213, 255, 0.22);
  border-radius: 2px;
  font-family: "Abel";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  align-items: center;

  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
</style>