|
@@ -28,8 +28,23 @@
|
28
|
28
|
</div>
|
29
|
29
|
</slideTabH>
|
30
|
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
|
48
|
</div>
|
34
|
49
|
</van-dialog>
|
35
|
50
|
</div>
|
|
@@ -45,7 +60,7 @@ export default {
|
45
|
60
|
data () {
|
46
|
61
|
return {
|
47
|
62
|
tabList: [{ value: '借阅记录', id: '1' }, { value: '线上预约记录', id: '2' }],
|
48
|
|
- showDialog: false
|
|
63
|
+ showDialog: true
|
49
|
64
|
}
|
50
|
65
|
},
|
51
|
66
|
created () {
|
|
@@ -120,5 +135,64 @@ export default {
|
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
|
198
|
</style>
|