<template>
|
<div class="title-box">
|
<el-button
|
icon="ele-ArrowLeft"
|
text
|
style="margin-right: 10px; margin-left: 10px; width: 40px"
|
size="small"
|
@click="handleExitClick"
|
>
|
</el-button>
|
<!-- <div class="title-icon"></div> -->
|
<div style="flex: 1">
|
<div class="title">{{ title }}</div>
|
<ToolbarMenu v-for="(content, index) in menu" :key="'bar-' + index" :content="content" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { PropType } from 'vue';
|
import ToolbarMenu from '/@/components/flow/ToolbarMenu.vue';
|
defineProps({
|
menu: Object as PropType<Array<Object[]>>,
|
title: String,
|
});
|
|
const emits = defineEmits(['exit']);
|
const handleExitClick = () => {
|
emits('exit');
|
};
|
</script>
|
<style scoped lang="scss">
|
.title-icon {
|
width: 40px;
|
height: 40px;
|
background: #d8e8ff;
|
position: relative;
|
margin-right: 5px;
|
}
|
.title-icon:before {
|
content: ' ';
|
display: block;
|
width: 18px;
|
height: 19px;
|
background: #3c8efd;
|
position: absolute;
|
bottom: 0;
|
}
|
.title-box {
|
display: flex;
|
|
align-items: center;
|
background-color: #f0f0f0;
|
.title {
|
color: #191919;
|
font-weight: 600;
|
font-size: 18px;
|
margin-left: 10px;
|
display: inline-block;
|
}
|
}
|
</style>
|
