<template>
|
<div class="content-title">
|
<div class="content-title-container">
|
<div class="content-title-left"></div>
|
<div class="content-title-text">{{title}}</div>
|
<div class="content-title-right"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
title: {
|
type: String,
|
default: '测点信息'
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.content-title {
|
text-align: center;
|
}
|
.content-title-container {
|
display: inline-block;
|
}
|
.content-title-left {
|
position: relative;
|
display: inline-block;
|
width: 20px;
|
margin-bottom: -8px;
|
border-bottom: 3px solid #468FB6;
|
}
|
.content-title-left::before {
|
content:"";
|
position:absolute;
|
left: -10px;
|
top: -4px;
|
width: 12px;
|
box-sizing:border-box;
|
border-bottom:1px solid #468FB6;
|
transform-origin:bottom center;
|
transform:rotateZ(45deg) scale(1);
|
}
|
.content-title-right {
|
position: relative;
|
display: inline-block;
|
width: 20px;
|
margin-bottom: -8px;
|
border-bottom: 3px solid #468FB6;
|
}
|
.content-title-right::after {
|
content:"";
|
position:absolute;
|
right: -10px;
|
top: -4px;
|
width: 12px;
|
box-sizing:border-box;
|
border-bottom:1px solid #468FB6;
|
transform-origin:bottom center;
|
transform:rotateZ(135deg) scale(1);
|
}
|
.content-title-text {
|
display: inline-block;
|
padding-left: 16px;
|
padding-right: 16px;
|
font-size: 14px;
|
font-weight: bold;
|
color: #468FB6;
|
border-bottom: 1px solid #468FB6;
|
}
|
</style>
|
