xcx

src/components/libraryListItem/index.vue

         <h5 v-if="!type">{{data.BookDescription}}</h5>
         <div v-if="!type" class="flex-h" style="margin-top: .06rem;">
           <span class="flex-item">{{data.Author}} 著</span>
-          <span class="status" @click="appointmentBook(data.BookId)">{{data.Status}}</span>
+          <span class="status active" @click="appointmentBook(data.BookId)">{{data.Status}}</span>
         </div>
         <div v-if="!type" class="flex-h">
           <span class="flex-item">{{data.Publisher}}</span>
           &.status {
             padding: 0 0.15rem;
             font-size: 0.12rem;
+            color: #999;
+            background: #fff;
+            border: 1px solid #ccc;
+            border-radius: 0.25rem;
+            box-sizing: border-box;
+          }
+          &.status.active {
             color: #fc674a;
             background: #fcf3f3;
-            border-radius: 0.25rem;
+            border: none;
           }
         }
       }

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

   data () {
     return {
       tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
-      showDialog: true
+      showDialog: false
     }
   },
   created () {