<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-04-11 18:14:04
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-12-20 18:02:20
|
* @FilePath: \jczz_web\src\views\userHouse\components\boxTitle.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div class="box-title-container flex j-c-s-b"
|
:style="{ margin: margin, height: boxHeight + 'px', lineHeight: boxHeight + 'px' }">
|
<div class="title-name">
|
<span>{{ title }}</span>
|
<slot name="icon"></slot>
|
</div>
|
|
<div class="region-more">
|
<div class="region">
|
<slot name="region"></slot>
|
</div>
|
<div class="more">
|
<slot name="more"></slot>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'boxTitle',
|
props: {
|
title: {
|
type: String,
|
default: ''
|
},
|
margin: {
|
type: String,
|
default: "0"
|
},
|
boxHeight: {
|
type: Number,
|
default: 36
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.flex {
|
display: flex;
|
}
|
|
.j-c-s-b {
|
justify-content: space-between;
|
}
|
|
.box-title-container {
|
|
.title-name {
|
display: flex;
|
align-items: center;
|
padding-left: 10px;
|
position: relative;
|
font-size: 20px;
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
font-weight: bold;
|
color: #333333;
|
|
&::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 4px;
|
height: 18px;
|
background: #1890FF;
|
border-radius: 2px 2px 2px 2px;
|
opacity: 1;
|
transform: translate(0, -50%);
|
}
|
}
|
|
.region {
|
font-size: 20px;
|
font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.more {
|
padding-right: 10px;
|
font-size: 15px;
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
font-weight: 400;
|
color: #1890FF;
|
cursor: pointer;
|
}
|
}
|
</style>
|
