浏览代码

Merge branch 'dev' of http://git.ycjcjy.com/SpaceOfCheng/wechat into dev

wangfei 6 年前
父节点
当前提交
03ae75c51f
共有 1 个文件被更改,包括 77 次插入3 次删除
  1. 77
    3
      src/pages/user/library/borrowedRecord/index.vue

+ 77
- 3
src/pages/user/library/borrowedRecord/index.vue 查看文件

28
       </div>
28
       </div>
29
     </slideTabH>
29
     </slideTabH>
30
     <van-dialog v-model="showDialog" :show-confirm-button="false">
30
     <van-dialog v-model="showDialog" :show-confirm-button="false">
31
-      <div class="borrowedRecordContent" @click="showDialog = false">
32
-        1
31
+      <div class="borrowedRecordContent flex-h" @click="showDialog = false">
32
+        <div class="img">
33
+          <a>
34
+            <img src class="centerLabel" alt>
35
+          </a>
36
+        </div>
37
+        <div class="flex-item">
38
+          <div>
39
+            <div>
40
+              <span>状态值</span>
41
+            </div>
42
+            <span class="title">书名</span>
43
+            <span>借阅时间:</span>
44
+            <span>应还时间:</span>
45
+            <span>归还时间:</span>
46
+          </div>
47
+        </div>
33
       </div>
48
       </div>
34
     </van-dialog>
49
     </van-dialog>
35
   </div>
50
   </div>
45
   data () {
60
   data () {
46
     return {
61
     return {
47
       tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
62
       tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
48
-      showDialog: false
63
+      showDialog: true
49
     }
64
     }
50
   },
65
   },
51
   created () {
66
   created () {
120
       }
135
       }
121
     }
136
     }
122
   }
137
   }
138
+  .borrowedRecordContent {
139
+    padding: 0.12rem;
140
+    position: relative;
141
+    overflow: hidden;
142
+    align-items: center;
143
+    .img {
144
+      width: 0.8rem;
145
+      position: relative;
146
+      overflow: hidden;
147
+      a {
148
+        width: 100%;
149
+        display: block;
150
+        height: 0;
151
+        position: relative;
152
+        overflow: hidden;
153
+        padding-bottom: 137.5%;
154
+        border-radius: 0.03rem;
155
+        background: #eee;
156
+      }
157
+    }
158
+    > div.flex-item {
159
+      position: relative;
160
+      overflow: visible;
161
+      margin-left: 0.12rem;
162
+      > div {
163
+        width: 100%;
164
+        position: relative;
165
+        overflow: visible;
166
+        > div {
167
+          text-align: right;
168
+          span {
169
+            display: inline-block;
170
+            line-height: .24rem;
171
+            font-size: .12rem;
172
+            color: #869EC3;
173
+            background: #f2f4f7;
174
+            padding: 0 .1rem 0 .15rem;
175
+            border-radius: .15rem 0 0 .15rem;
176
+            margin-right: -.12rem;
177
+          }
178
+        }
179
+        > span {
180
+          width: 100%;
181
+          display: block;
182
+          line-height: 0.18rem;
183
+          font-size: 0.11rem;
184
+          color: #666;
185
+          white-space: nowrap;
186
+          overflow: hidden;
187
+          text-overflow: ellipsis;
188
+          &.title {
189
+            font-size: 0.16rem;
190
+            color: #333;
191
+            line-height: 0.22rem;
192
+          }
193
+        }
194
+      }
195
+    }
196
+  }
123
 }
197
 }
124
 </style>
198
 </style>