【增加】Header 组件

This commit is contained in:
cherishsince 2024-05-15 16:31:14 +08:00
parent bd5262e21d
commit 76903f6868

View File

@ -0,0 +1,50 @@
<!-- header -->
<template>
<el-header class="chat-header">
<div class="title">
{{ title }}
</div>
<div class="title-right">
<slot></slot>
</div>
</el-header>
</template>
<script setup lang="ts">
//
defineProps({
title: {
type: String,
required: true
}
})
</script>
<style scoped lang="scss">
.chat-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
background-color: #ececec;
width: 100%;
.title {
font-size: 20px;
font-weight: bold;
overflow: hidden;
color: #3e3e3e;
max-width: 220px;
}
.title-right {
display: flex;
flex-direction: row;
}
}
</style>