From 878e36a4a7b82628f50cea15dcfb3c9366db9e8a Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 20 Mar 2023 10:33:54 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=9B=B4=E6=94=B9TitleComponent?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TitleComponent/index.vue | 43 +++++++++++++------------
 1 file changed, 22 insertions(+), 21 deletions(-)

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