wip

src/components/Book.vue

@@ -33,13 +33,11 @@ const studyProgress = $computed(() => {
 </script>
 
 <template>
-  <div class="book relative overflow-hidden" :id="item?.id ?? 'no-book'">
-    <template v-if="!isAdd">
-      <div>
-        <div class="text-base">{{ item?.name }}</div>
-        <div class="text-sm line-clamp-3" v-opacity="item.name !== item.description">{{ item?.description }}</div>
-      </div>
-      <div class="absolute bottom-4 right-3">
+  <div :id="item?.id" v-if="!isAdd">
+    <div class="book overflow-hidden relative">
+      <img class="absolute top-0 left-0 w-full object-cover" v-if="item?.cover" :src='item.cover' alt=""/>
+      <div class="text-base mt-1" v-else>{{ item?.name }}</div>
+      <div class="absolute bottom-4 right-3 z-1" :class="item?.cover && 'color-white'">
         <div>{{ studyProgress }}{{ item?.length }}{{ quantifier }}</div>
       </div>
       <div class="absolute bottom-2 left-3 right-3">
@@ -51,10 +49,13 @@ const studyProgress = $computed(() => {
                 :model-value="checked"
                 @change="$emit('check')"
                 class="absolute left-3 bottom-3"/>
-      <div class="custom" v-if="item.custom">自定义</div>
-      <div class="custom bg-red! color-white" v-if="item.update">更新中</div>
-    </template>
-    <div v-else class="center h-full text-2xl">
+      <div class="custom z-1" v-if="item.custom">自定义</div>
+      <div class="custom bg-red! color-white z-1" v-else-if="item.update">更新中</div>
+    </div>
+    <div class="text-base mt-1" v-if="item?.cover">{{ item?.name }}</div>
+  </div>
+  <div v-else class="book" id="no-book">
+    <div class="h-full center text-2xl">
       <IconFluentAdd16Regular/>
     </div>
   </div>