You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<!--
|
|
* @Author: donghao donghao@supervision.ltd
|
|
* @Date: 2025-03-06 15:52:40
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
* @LastEditTime: 2025-09-05 14:00:15
|
|
* @FilePath: \vite-ai\data-dashboard\src\components\contentHeader.vue
|
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
-->
|
|
<template>
|
|
<div class="flex items-center justify-between content_header_wrap"
|
|
:style="{ 'background-image': `url(${sub_title_bg})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'left bottom' }">
|
|
<!-- 左侧标题区域 -->
|
|
<div class="flex items-center left-section pl-[16px]">
|
|
<img src="@/assets/common/sub_title_icon.png" class="w-[20px] h-[20px]">
|
|
<div class="fg-title ml-[12px]">
|
|
{{ title }}
|
|
<slot name="title"></slot>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧内容 -->
|
|
<div>
|
|
<slot name="extra"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import sub_title_bg from '@/assets/home/sub_title_bg.png';
|
|
// 定义组件 props
|
|
const props = withDefaults(defineProps<{
|
|
// bgLayout: number | string; // 背景样式 1855 918 800 450
|
|
title: string; // 标题
|
|
}>(), {
|
|
// bgLayout: 1855,
|
|
title: ""
|
|
});
|
|
|
|
// 计算是否显示右侧内容
|
|
// const bgImageUrl = computed(() => {
|
|
// switch (Number(props.bgLayout)) {
|
|
// default:
|
|
// return sub_title_bg;
|
|
// }
|
|
// });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content_header_wrap {
|
|
width: 431px;
|
|
height: 38px;
|
|
// border-image: linear-gradient(90deg, rgba(25, 61, 72, 0), rgba(67, 215, 226, 1), rgba(29, 65, 76, 0)) 1 1;
|
|
}
|
|
</style> |