优化详情页

jianyun8023 · Aug 4, 2024 · e4a7a56 · e4a7a56
1 parent b0e8842
commit e4a7a56
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 10 deletions.
diff --git a/app/calibre-pages/src/components/MetadataSearch.vue b/app/calibre-pages/src/components/MetadataSearch.vue
@@ -38,10 +38,6 @@ export default {
   name: 'MetadataSearch',
   components: {ElButton, ElInput},
   props: {
-    formLabelWidth: {
-      type: String,
-      default: '140px'
-    },
     book: {
       type: Object,
       default: () => ({})

diff --git a/app/calibre-pages/src/views/Detail.vue b/app/calibre-pages/src/views/Detail.vue
@@ -29,8 +29,15 @@
                 更新元数据
               </el-button>
             </template>
-            <el-descriptions-item label="ID">
-
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Box />
+                  </el-icon>
+                  ID
+                </div>
+              </template>
               <el-button text bg @click="copyToClipboard(book.id)">{{ book.id }}📋</el-button>
             </el-descriptions-item>
             <el-descriptions-item>
@@ -62,7 +69,17 @@
               </template>
               <span @click="searchByPublisher" >{{ book.publisher }}</span>
             </el-descriptions-item>
-            <el-descriptions-item label="ISBN">{{ book.isbn }}</el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon class="el-icon">
+                    <Key />
+                  </el-icon>
+                  ISBN
+                </div>
+              </template>
+              {{ book.isbn }}
+            </el-descriptions-item>
             <el-descriptions-item>
               <template #label>
                 <div class="cell-item">
@@ -79,7 +96,15 @@
                 {{ item }}
               </el-tag>
             </el-descriptions-item>
-            <el-descriptions-item label="File Size">
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Document />
+                  </el-icon>
+                  File Size
+                </div>
+              </template>
               {{ formatFileSize(book.size) }}
             </el-descriptions-item>
           </el-descriptions>
@@ -159,7 +184,6 @@ export default {
       book: {},
       dialogSearchVisible: false,
       dialogEditVisible: false,
-      formLabelWidth: '140px',
       currentRow: {},
       triggerUpdate: false,
       isPhone: document.documentElement.clientWidth < 993
@@ -307,10 +331,11 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  padding-top: 80px;
 }
 
 .book-cover {
-  width: 50%; /* 固定宽度 */
+  width: 60%; /* 固定宽度 */
   height: auto; /* 固定高度 */
 }
 
@@ -326,6 +351,9 @@ export default {
     padding-top: 30px;
     padding-left: 30px;
   }
+  .cover-container {
+    padding-top: 10px;
+  }
 }
 
 .book-info {
@@ -363,4 +391,18 @@ export default {
   color: #4a4a4a;
   text-indent: 2em;
 }
+
+.el-descriptions {
+  margin-top: 20px;
+}
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+.el-icon {
+  padding-right: 5px;
+}
+.margin-top {
+  margin-top: 20px;
+}
 </style>