<template>
|
<div class="container-inquiry-title">
|
<header class="title-bar">
|
<h1 class="title">{{ props.title }}</h1>
|
<div class="detail-button" @click="()=>{ emit('detailchange')}" >
|
<div class="detail-link">{{ detaiText }}</div>
|
</div>
|
</header>
|
<div class="num-container">
|
{{ titleData.SPEC_CNLabel }}:{{ props.specCn }}
|
</div>
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup>
|
import { reactive,defineProps,computed } from "vue";
|
const props = defineProps({
|
specCn: {
|
type: String,
|
required: true
|
},
|
title: {
|
type: String,
|
default: "询价依赖单"
|
},
|
isDetail: {
|
type: Boolean,
|
default: false
|
}
|
});
|
const emit = defineEmits(["detailchange"]);
|
const detaiText = computed(() => {
|
return props.isDetail ? "返回审批" : "查看审批详情";
|
});
|
const titleData = reactive({
|
title: "询价依赖单",
|
detailLink: "查看审批详情",
|
detailLinkUrl: "http://www.baidu.com",
|
SPEC_CNLabel: "申请单号",
|
subTitle: "询价单1",
|
content: "内容",
|
});
|
</script>
|
|
<style scoped lang="less">
|
@import url("~@/styles/var.less");
|
.title-bar {
|
color: #fff;
|
display: flex;
|
justify-content: space-between;
|
align-content: center;
|
gap: 5px;
|
background-color: @color-title-bg;
|
.title {
|
font-size: 20px;
|
margin: 0;
|
padding: 2px 0px 2px 10px;
|
}
|
.detail-link {
|
cursor: pointer;
|
font-size: 16px;
|
align-self: center;
|
padding-right: 20px;
|
color: #fff;
|
}
|
}
|
.sub-title {
|
display: flex;
|
.sub-title-label {
|
background-color: @color-sub-title-bg;
|
padding: 5px 10px;
|
font-size: 12px;
|
border: 1px solid #000;
|
flex: 0 0 200px;
|
}
|
.content {
|
flex: 1 1 auto;
|
}
|
}
|
.content {
|
border: 1px solid #000;
|
padding: 5px 10px;
|
font-size: 12px;
|
border-left: none;
|
}
|
.num-container {
|
border-top: none;
|
color: #fff;
|
background-color:#006dbb;
|
padding: 2px 0px 2px 10px;
|
}
|
|
.title-bar{
|
position: relative;
|
}
|
|
.detail-button{
|
position: absolute;
|
right: 0;
|
top: 50%;
|
}
|
|
</style>
|