✨ 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,
@@ -37,19 +36,19 @@ 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,26 +58,32 @@ export default {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  .book-item {
-    margin: 1rem;
+.book-item {
+  // margin: 1rem;
   padding: 1rem;
   padding: 1rem;
+
   .wrapper {
   .wrapper {
     padding-left: 1rem;
     padding-left: 1rem;
+
     .title {
     .title {
       font-size: 1.15rem;
       font-size: 1.15rem;
       color: #222222;
       color: #222222;
       font-weight: bold;
       font-weight: bold;
+      margin: 0.5rem 0;
     }
     }
+
     .content {
     .content {
       font-size: 0.85rem;
       font-size: 0.85rem;
       color: #999999;
       color: #999999;
       margin: 0.5rem 0;
       margin: 0.5rem 0;
     }
     }
+
     .sub {
     .sub {
       font-size: 0.85rem;
       font-size: 0.85rem;
       color: #999999;
       color: #999999;
       margin-top: 0.5rem;
       margin-top: 0.5rem;
     }
     }
+
     .upload {
     .upload {
       color: #713610;
       color: #713610;
       background-color: #F9D95C;
       background-color: #F9D95C;
@@ -90,5 +95,5 @@ export default {
       margin-top: 1rem;
       margin-top: 1rem;
     }
     }
   }
   }
-  }
+}
 </style>
 </style>
\ No newline at end of file