✨ feat(书籍列表展示组件): 显示细节调整

 <template>
 <template>
   <div class="book-item van-hairline--bottom" @click="handle">
   <div class="book-item van-hairline--bottom" @click="handle">
     <van-row>
     <van-row>
-      <van-col span="6">
-        <van-image width="5rem" height="5rem" :src="item.avatar" style="text-align: center;" />
+      <van-col span="8">
+        <van-image width="7rem" height="7rem" :src="item.avatar" style="text-align: center;" />
       </van-col>
       </van-col>
-      <van-col class="wrapper" span="18">
-        <p class="title">逃家小兔绘本</p>
+      <van-col class="wrapper" span="16">
+        <p class="title van-multi-ellipsis--l2">逃家小兔绘本</p>
         <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">
         <div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">
           从前有一只小兔子，总是想要离家出走。有一天，他对妈妈说如果有大灰狼怎么办，不要把门打开
           从前有一只小兔子，总是想要离家出走。有一天，他对妈妈说如果有大灰狼怎么办，不要把门打开
         </div>
         </div>
@@ -20,7 +20,6 @@
 
 
 <script setup>
 <script setup>
 import icon_video from '@images/video.png'
 import icon_video from '@images/video.png'
-
 import { ref, reactive, onMounted } from 'vue'
 import { ref, reactive, onMounted } from 'vue'
 const props = defineProps({
 const props = defineProps({
   item: Object,
   item: Object,
@@ -35,21 +34,21 @@ const handle = () => {
 
 
 // 上传视频
 // 上传视频
 const onUpload = (v) => {
 const onUpload = (v) => {
-    console.warn(v);
+  console.warn(v);
 }
 }
-  onMounted(() => {
-    
-  })
+onMounted(() => {
+
+})
 </script>
 </script>
 
 
 <script>
 <script>
 export default {
 export default {
-  data () {
+  data() {
     return {
     return {
 
 
     }
     }
   },
   },
-  mounted () {
+  mounted() {
 
 
   },
   },
   methods: {
   methods: {
@@ -59,36 +58,42 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  .book-item {
-    margin: 1rem;
-    padding: 1rem;
-    .wrapper {
-      padding-left: 1rem;
-      .title {
-        font-size: 1.15rem; 
-        color: #222222; 
-        font-weight: bold;
-      }
-      .content {
-        font-size: 0.85rem; 
-        color: #999999; 
-        margin: 0.5rem 0;
-      }
-      .sub {
-        font-size: 0.85rem; 
-        color: #999999; 
-        margin-top: 0.5rem;
-      }
-      .upload {
-        color: #713610; 
-        background-color: #F9D95C; 
-        border-radius: 15px; 
-        width: 4rem; 
-        padding: 0.25rem 0.5rem; 
-        font-size: 0.8rem; 
-        text-align: center; 
-        margin-top: 1rem;
-      }
+.book-item {
+  // margin: 1rem;
+  padding: 1rem;
+
+  .wrapper {
+    padding-left: 1rem;
+
+    .title {
+      font-size: 1.15rem;
+      color: #222222;
+      font-weight: bold;
+      margin: 0.5rem 0;
+    }
+
+    .content {
+      font-size: 0.85rem;
+      color: #999999;
+      margin: 0.5rem 0;
+    }
+
+    .sub {
+      font-size: 0.85rem;
+      color: #999999;
+      margin-top: 0.5rem;
+    }
+
+    .upload {
+      color: #713610;
+      background-color: #F9D95C;
+      border-radius: 15px;
+      width: 4rem;
+      padding: 0.25rem 0.5rem;
+      font-size: 0.8rem;
+      text-align: center;
+      margin-top: 1rem;
     }
     }
   }
   }
+}
 </style>
 </style>
\ No newline at end of file