house

src/components/Pageheader/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="PageHeaderBox">
+    <!-- 面包屑 -->
+    <breadcrumb class="breadcrumb-container" />
+    <!-- 页面标题 -->
+    <div class="pageTitleBox flex items-center">
+      <div class="line"></div>
+      <div class="pagetitle">{{ props.title }}</div>
+    </div>
+    <!-- solt -->
+    <slot name="content" v-if="showSlot"></slot>
+    <div class="h-20px" v-show="!showSlot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import Breadcrumb from '@/components/Breadcrumb/index.vue';
+const slots = useSlots();
+const showSlot = computed(() => {
+  return slots.content && slots.content().length > 0;
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '房屋管理'
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.PageHeaderBox {
+  padding: 15px 20px;
+  padding-bottom: 0;
+  background-color: #fff;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 1);
+  .pageTitleBox {
+    .line {
+      width: 5px;
+      height: 19px;
+      border-radius: 5px;
+      background-color: rgba(26, 117, 255, 1);
+      margin-right: 5px;
+    }
+    .pagetitle {
+      color: rgba(51, 51, 51, 1);
+      font-size: 18px;
+    }
+  }
+}
+</style>