smartai2dian0/src/views/manage-common/HeadManage.vue

<template>
  <div class="top-common">
    <div class="common-left">
      <div class="title">{{ title }}</div>
      <div class="tips">{{ tips }}</div>
    </div>
    <div class="common-right">
      <slot name="setting"></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    required: true,
    type: String
  },
  tips: {
    typeof: String
  }
});
</script>
<style scoped>
.top-common {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 80px;
}
.common-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.title {
  font-family: 'pingfang sc';
  font-size: 18px;
  font-weight: 600;
}
.tips {
  font-size: 12px;
  color: var(color-text-3);
}
</style>