feat: 优化阅读时间组件的展示样式

project-trans · Oct 26, 2024 · a774c13 · a774c13
1 parent c989ea5
commit a774c13
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/components/ReadingTime.vue b/src/components/ReadingTime.vue
@@ -23,8 +23,15 @@ watch(() => frontmatter.value, (newFrontmatter) => {
 </script>
 
 <template>
-  <div>
-    <p>字数: {{ wordCount }} &nbsp; 预计阅读时间: {{ readingTime }} 分钟</p>
+  <div class="inline-flex items-center gap-4">
+    <div class="inline-flex items-center gap-1">
+      <span class="i-octicon:pencil-16" />
+      <span>字数: {{ wordCount }} </span>
+    </div>
+    <div class="inline-flex items-center gap-1">
+      <span class="i-octicon:book-16" />
+      <span>预计阅读时间: {{ readingTime }} 分钟</span>
+    </div>
   </div>
 </template>