xcx

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

@@ -28,8 +28,23 @@
       </div>
     </slideTabH>
     <van-dialog v-model="showDialog" :show-confirm-button="false">
-      <div class="borrowedRecordContent" @click="showDialog = false">
-        1
+      <div class="borrowedRecordContent flex-h" @click="showDialog = false">
+        <div class="img">
+          <a>
+            <img src class="centerLabel" alt>
+          </a>
+        </div>
+        <div class="flex-item">
+          <div>
+            <div>
+              <span>状态值</span>
+            </div>
+            <span class="title">书名</span>
+            <span>借阅时间：</span>
+            <span>应还时间：</span>
+            <span>归还时间：</span>
+          </div>
+        </div>
       </div>
     </van-dialog>
   </div>
@@ -45,7 +60,7 @@ export default {
   data () {
     return {
       tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
-      showDialog: false
+      showDialog: true
     }
   },
   created () {
@@ -120,5 +135,64 @@ export default {
       }
     }
   }
+  .borrowedRecordContent {
+    padding: 0.12rem;
+    position: relative;
+    overflow: hidden;
+    align-items: center;
+    .img {
+      width: 0.8rem;
+      position: relative;
+      overflow: hidden;
+      a {
+        width: 100%;
+        display: block;
+        height: 0;
+        position: relative;
+        overflow: hidden;
+        padding-bottom: 137.5%;
+        border-radius: 0.03rem;
+        background: #eee;
+      }
+    }
+    > div.flex-item {
+      position: relative;
+      overflow: visible;
+      margin-left: 0.12rem;
+      > div {
+        width: 100%;
+        position: relative;
+        overflow: visible;
+        > div {
+          text-align: right;
+          span {
+            display: inline-block;
+            line-height: .24rem;
+            font-size: .12rem;
+            color: #869EC3;
+            background: #f2f4f7;
+            padding: 0 .1rem 0 .15rem;
+            border-radius: .15rem 0 0 .15rem;
+            margin-right: -.12rem;
+          }
+        }
+        > span {
+          width: 100%;
+          display: block;
+          line-height: 0.18rem;
+          font-size: 0.11rem;
+          color: #666;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          &.title {
+            font-size: 0.16rem;
+            color: #333;
+            line-height: 0.22rem;
+          }
+        }
+      }
+    }
+  }
 }
 </style>