style: 更改TitleComponent组件样式

This commit is contained in:
jackhoo_98 2023-03-20 10:33:54 +08:00
parent 865c9e989c
commit 878e36a4a7
1 changed files with 22 additions and 21 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="title" :style="style"> <div class="title" :style="style">
<span class="titleData">{{ data }}</span> <div class="title-content">{{ data }}</div>
<slot name="extra"></slot> <slot name="extra"></slot>
</div> </div>
</template> </template>
@ -22,27 +22,28 @@ const props = defineProps({
<style lang="less" scoped> <style lang="less" scoped>
.title { .title {
position: relative; display: flex;
align-items: center;
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 16px;
color: rgba(0, 0, 0, 0.8);
font-weight: 600; .title-content {
font-size: 16px; position: relative;
} padding-left: 10px;
.titleData { color: rgba(0, 0, 0, 0.8);
position: relative; font-weight: 600;
width: 100%; line-height: 1;
padding-left: 12px;
&::before { &::before {
position: absolute; position: absolute;
border-top-right-radius: 3px; top: 0;
border-bottom-right-radius: 3px; left: 0;
bottom: 0.5px; width: 4px;
left: 0; height: 100%;
width: 4px; background-color: @primary-color;
height: 80%; border-radius: 0 3px 3px 0;
background-color: @primary-color; content: ' ';
content: ''; }
} }
} }
</style> </style>