group_web_merchant/src/views/businessData/components/DetailHeader.vue

<template>
  <div class="header">
    <el-button @click="$emit('back')"> 返回 </el-button>
    <h2 class="title">
      {{ title }}
    </h2>
    <div v-if="$slots.right" class="header-right">
      <slot name="right" />
    </div>
  </div>
</template>

<script setup lang="ts" name="DetailHeader">
defineProps<{
  title: string;
}>();
defineEmits<{
  (e: "back"): void;
}>();
</script>

<style scoped lang="scss">
/* 与订单详情、代金券详情等页面一致的头部结构，仅用于经营数据模块 */
.header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
}
.title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  text-align: center;
}
.header-right {
  flex-shrink: 0;
  min-width: 60px;
}
</style>