搜索结果列表页面开发

src/components/CustomHeader/README.md

@@ -0,0 +1,22 @@
+# CustomHeader
+
+### 说明
+- 自定义header组件
+
+``` js
+<CustomHeader title='' count='' />
+```
+
+### Props
+| 参数         | 说明     | 类型      | 可选值    | 默认值  |
+|------------|--------|---------|----------|------|
+| title?     | 标题     | string  | -        | '标题' |
+| count?     | 计数     | number  | -        | 0    |
+| showCount? | 是否显示计数 | boolean | -        | true |
+
+### Slots
+
+| 名称                 | 说明     |
+|--------------------|--------|
+| header-left             | 组件左边插槽 |
+| actions             | 组件右边插槽 |

src/components/CustomHeader/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="g-custom-header">
+    <div class="g-custom-header-left">
+      <slot name="header-left">
+        <div class="g-custom-header-title" :style="{ fontSize }">{{ title }}</div>
+        <div v-if="showCount" class="g-custom-header-count">
+          <custom-tag border-color="transparent">{{ count }}</custom-tag>
+        </div>
+      </slot>
+    </div>
+    <div class="g-custom-header-actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'custom-header'
+};
+</script>
+
+<script setup lang="ts">
+import CustomTag from '@/components/CustomTag/index.vue';
+withDefaults(defineProps<{
+  title?: string;
+  count?: number;
+  showCount?: boolean;
+  fontSize?: string;
+}>(), {
+  title: '标题',
+  count: 0,
+  showCount: true
+});
+</script>
+
+<style scoped lang="scss">
+$g-custom-header-color: #000000;
+.g-custom-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &-left {
+    display: flex;
+    align-items: center;
+  }
+  &-title {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    color: $g-custom-header-color;
+    font-weight: 500;
+    margin-right: 8px;
+  }
+}
+</style>