From a07196de3dfbfa67b4261c7da31289a7c1ad8b29 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Fri, 17 Mar 2023 16:22:17 +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 | 45 ++++++++++++++-----------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/TitleComponent/index.vue b/src/components/TitleComponent/index.vue
index dfaf4527..15d347c2 100644
--- a/src/components/TitleComponent/index.vue
+++ b/src/components/TitleComponent/index.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="title" :style='style'>
-    <span>{{ data }}</span>
-    <slot name="extra"></slot>
-  </div>
+    <div class="title" :style="style">
+        <span class="titleData">{{ data }}</span>
+        <slot name="extra"></slot>
+    </div>
 </template>
 
-<script setup lang='ts' name='TitleComponent'>
-import type { CSSProperties, PropType } from 'vue'
+<script setup lang="ts" name="TitleComponent">
+import type { CSSProperties, PropType } from 'vue';
 
 const props = defineProps({
-  data: {
-    type: String,
-    default: ""
-  },
-  style: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({})
-  }
-})
-
+    data: {
+        type: String,
+        default: '',
+    },
+    style: {
+        type: Object as PropType<CSSProperties>,
+        default: () => ({}),
+    },
+});
 </script>
 
 <style lang="less" scoped>
@@ -26,18 +25,24 @@ const props = defineProps({
     position: relative;
     width: 100%;
     margin-bottom: 10px;
-    padding-left: 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;
-        top: 0;
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+        bottom: 0.5px;
         left: 0;
         width: 4px;
-        height: 100%;
+        height: 80%;
         background-color: @primary-color;
         content: '';
     }
 }
-</style>
\ No newline at end of file
+</style>