xcx

src/components/libraryListItem/index.vue

     <div class="flex-item">
       <div>
         <span>{{data.BookName}}</span>
+        <h5>{{data.BookDescription}}</h5>
         <div class="flex-h" style="margin-top: .06rem;">
           <span class="flex-item">{{data.Author}} 著</span>
           <span class="status" @click="appointmentBook(data.BookId)">{{data.Status}}</span>
         </div>
         <div class="flex-h">
           <span class="flex-item">{{data.Publisher}}</span>
-          <span>剩余可借
+          <span>
+            剩余可借
             <em>{{data.LeftNum}}</em>本
           </span>
         </div>
         -webkit-line-clamp: 2;
         max-height: 0.43rem;
       }
+      > h5 {
+        font-size: .12rem;
+        color: #ccc;
+        line-height: .16rem;
+        font-weight: normal;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        max-height: 0.31rem;
+      }
       > div {
         margin-top: 0.03rem;
         align-items: center;

src/components/slideTabH/index.vue

         v-for="(item, index) in data"
         :key="index"
         @click="cutNav(index)"
-        :style="{fontSize: fontSize + 'px', color: index === activeIndex ? (activeColor || 'red') : (normalColor || '#333')}"
+        :style="{fontSize: fontSize + 'px', fontWeight: index === activeIndex ? 'bolder' : 'normal'}"
       >{{item.value}}</a>
       <div class="activeLine" id="activeLine"></div>
     </div>

src/pages/user/library/borrowedRecord/index.vue

       normalColor="#666"
       @slideChange="slideChange"
     >
-      <div slot="slideTabH-1">1</div>
-      <div slot="slideTabH-2">2</div>
+      <div class="subMain" slot="slideTabH-1">
+        <div>
+          <ul>
+            <li v-for="(item, index) in borrowedRecordList" :key="index">
+              <libraryListItem :data="item"></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="subMain" slot="slideTabH-2">
+        <div>
+          <ul>
+            <li v-for="(item, index) in appointmentList" :key="index">
+              <libraryListItem :data="item"></libraryListItem>
+            </li>
+          </ul>
+        </div>
+      </div>
     </slideTabH>
   </div>
 </template>
     }),
     ...mapLibraryState({
       navList: x => x.navList,
-      bookTypeList: x => x.bookTypeList
+      bookTypeList: x => x.bookTypeList,
+      borrowedRecordList: x => x.borrowedRecordList,
+      appointmentList: x => x.appointmentList
     })
   },
   components: {
     ...mapLibraryAction(['getBookListByType']),
     navClick (item) {
     },
-    appointmentBook () { // 预约图书
-      this.showAppointmentDialog = true
-    },
-    sureAppointmentBook () { // 确定预约图书
-      this.showAppointmentDialog = false
-    },
     slideChange (e) {
-      console.log(e)
+      if (e === 1 && !this.appointmentList.length) {
+      }
     }
   }
 }
 
 <style lang="scss" scoped>
 .mainPage {
-  > div {
+  .subMain {
     width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
+    height: 100%;
+    position: relative;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
     transform: translateZ(0);
     -webkit-transform: translateZ(0);
-    > ul {
-      padding: 0 0.16rem;
-      margin-bottom: 0.1rem;
+    > div {
+      width: 100%;
       position: relative;
       overflow: hidden;
-      li {
-        margin: 0.1rem auto 0;
+      > ul {
+        padding: 0 0.16rem;
+        margin-bottom: 0.1rem;
+        position: relative;
+        overflow: hidden;
+        li {
+          margin: 0.1rem auto 0;
+        }
       }
     }
   }

src/store/library/index.js

 var booksData = [],
   recordData = [],
   aTarget = {
-    img: '',
-    name: '书名',
+    BookImg: '',
+    BookName: '书名',
     id: '',
-    status: '状态',
-    author: '作者',
-    publishingHouses: '出版社',
-    stock: '10'
+    Status: '状态',
+    Author: '作者',
+    Publisher: '出版社',
+    LeftNum: '10',
+    BookDescription: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述'
   },
   bTarget = {
-    img: '',
-    name: '书名',
+    BookImg: '',
+    BookName: '书名',
     id: '',
-    status: '状态',
-    author: '作者',
-    publishingHouses: '出版社',
-    stock: '10'
+    Status: '状态',
+    Author: '作者',
+    Publisher: '出版社',
+    LeftNum: '10',
+    BookDescription: '描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述'
   }
 for (var n = 0; n < 10; n++) {
   booksData.push(aTarget)
     setRecommendBookList (state, data) { // 赋值精选推荐书籍列表
       (data || []).map((item) => {
         state.bookList.push({
-          img: '',
-          name: '书名',
+          BookImg: '',
+          BookName: '书名',
           id: '',
-          status: '状态',
-          author: '作者',
-          publishingHouses: '出版社',
-          stock: '10'
+          Status: '状态',
+          Author: '作者',
+          Publisher: '出版社',
+          LeftNum: '10',
+          BookDescription: '描述描述描述描述描述描述描述描述描述'
         })
       })
     },
     setBookTypeList (state, data) { // 赋值分类书籍列表
       (data || []).map((item) => {
         state.bookList.push({
-          img: '',
-          name: '书名',
+          BookImg: '',
+          BookName: '书名',
           id: '',
-          status: '状态',
-          author: '作者',
-          publishingHouses: '出版社',
-          stock: '10'
+          Status: '状态',
+          Author: '作者',
+          Publisher: '出版社',
+          LeftNum: '10',
+          BookDescription: '描述描述描述描述描述描述描述描述描述'
         })
       })
     },