bi-element-ui 0.1.43 → 0.1.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/bi-element-ui.common.js +150 -42
- package/lib/bi-element-ui.css +1 -1
- package/lib/bi-element-ui.umd.js +150 -42
- package/lib/bi-element-ui.umd.min.js +12 -12
- package/package.json +1 -1
- package/src/views/img/left_page.png +0 -0
- package/src/views/img/right_page.png +0 -0
- package/src/views/showData.vue +292 -206
package/package.json
CHANGED
Binary file
|
Binary file
|
package/src/views/showData.vue
CHANGED
@@ -1,49 +1,61 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="
|
3
|
-
<
|
4
|
-
<
|
5
|
-
<
|
6
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
<div class="data_search">
|
12
|
-
<el-input placeholder="输入标题/关键字" v-model="searchData.combination" size="small" style="width:14vw;">
|
13
|
-
<el-button icon="el-icon-search" slot="append" style="width:3vw;height:32px;" @click="clickSearch"></el-button>
|
14
|
-
</el-input>
|
15
|
-
<div>
|
16
|
-
<el-button v-for="(item, index) in options.buttonList" :key="index" size="small" style="width:84px;height:32px;" @click="buttonClick(item.value)">{{ item.label }}</el-button>
|
2
|
+
<div class="bi_home_data">
|
3
|
+
<el-scrollbar>
|
4
|
+
<div class="content">
|
5
|
+
<div class="swiper">
|
6
|
+
<el-carousel class="swiper_data" height="19.5vw" :autoplay="true">
|
7
|
+
<el-carousel-item v-for="(item, index) in swiperData" :key="index">
|
8
|
+
<div class="swiper_content" :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'" @click="swiperClick(item)"></div>
|
9
|
+
</el-carousel-item>
|
10
|
+
</el-carousel>
|
17
11
|
</div>
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
<
|
12
|
+
<div class="data">
|
13
|
+
<div class="data_search">
|
14
|
+
<el-input placeholder="输入标题/关键字" v-model="searchData.combination" size="small" style="width:14vw;">
|
15
|
+
<el-button icon="el-icon-search" slot="append" style="width:3vw;height:32px;" @click="clickSearch"></el-button>
|
16
|
+
</el-input>
|
17
|
+
<div>
|
18
|
+
<el-button v-for="(item, index) in options.buttonList" :key="index" size="small" style="width:84px;height:32px;" @click="buttonClick(item.value)">{{ item.label }}</el-button>
|
19
|
+
</div>
|
24
20
|
</div>
|
25
|
-
<div class="
|
26
|
-
<
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
21
|
+
<div class="data_content">
|
22
|
+
<div v-for="(item, index) in messageData" :key="index" class="message_item" @click="getDataDetail(item)">
|
23
|
+
<div class="item_title">
|
24
|
+
<img :src="returnCategoryImg(item.category_id)" alt="" />
|
25
|
+
<p>{{ returnCategory(item.category_id) }}</p>
|
26
|
+
</div>
|
27
|
+
<div class="item_content">
|
28
|
+
<img :src="item.cover_image" alt="" />
|
29
|
+
<div class="content_content">
|
30
|
+
<div class="content_title">{{ item.title }}</div>
|
31
|
+
<div class="content_desc">{{ item.short_desc }}</div>
|
32
|
+
<div class="content_time">{{ item.create_time }}</div>
|
33
|
+
</div>
|
34
|
+
</div>
|
35
|
+
<img v-if="!item.is_read" class="is_read" src="./img/new.png" alt="" />
|
36
|
+
</div>
|
37
|
+
<div class="left_page" @click="pageClick('left')">
|
38
|
+
<img src="./img/left_page.png" :style="canLeftClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
|
39
|
+
</div>
|
40
|
+
<div class="right_page" @click="pageClick('right')">
|
41
|
+
<img src="./img/right_page.png" :style="canRightClick ? 'opacity:1' : 'opacity:0.5'" alt="" />
|
31
42
|
</div>
|
32
43
|
</div>
|
33
|
-
<img v-if="!item.is_read" class="is_read" src="./img/new.png" alt="" />
|
34
|
-
</div>
|
35
|
-
</div>
|
36
|
-
</div>
|
37
|
-
<el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" :size="560" :before-close="handleClose">
|
38
|
-
<div class="detail">
|
39
|
-
<div class="detail_title">{{ dataDetail.data.title }}</div>
|
40
|
-
<div class="detail_time">{{ dataDetail.data.create_time }}</div>
|
41
|
-
<div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
|
42
|
-
<div class="detail_content">
|
43
|
-
<div class="content_content" v-html="dataDetail.data.content"></div>
|
44
44
|
</div>
|
45
|
+
<el-drawer title="消息详情" :visible.sync="dataDetail.isShow" direction="rtl" size="560" :before-close="handleClose">
|
46
|
+
<el-scrollbar>
|
47
|
+
<div class="detail">
|
48
|
+
<div class="detail_title">{{ dataDetail.data.title }}</div>
|
49
|
+
<div class="detail_time">{{ dataDetail.data.create_time }}</div>
|
50
|
+
<div class="detail_desc">{{ dataDetail.data.short_desc }}</div>
|
51
|
+
<div class="detail_content">
|
52
|
+
<div class="content_content" v-html="dataDetail.data.content"></div>
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
</el-scrollbar>
|
56
|
+
</el-drawer>
|
45
57
|
</div>
|
46
|
-
</el-
|
58
|
+
</el-scrollbar>
|
47
59
|
</div>
|
48
60
|
</template>
|
49
61
|
|
@@ -51,7 +63,7 @@
|
|
51
63
|
import moment from 'moment'
|
52
64
|
import axios from 'axios'
|
53
65
|
export default {
|
54
|
-
name: '
|
66
|
+
name: 'BiHomeData',
|
55
67
|
props: {
|
56
68
|
userId: {
|
57
69
|
type: String,
|
@@ -64,7 +76,10 @@ export default {
|
|
64
76
|
searchData: {
|
65
77
|
uid: '1919',
|
66
78
|
combination: '',
|
67
|
-
category_id: ''
|
79
|
+
category_id: '',
|
80
|
+
page: 1,
|
81
|
+
page_size: 4,
|
82
|
+
total: 0
|
68
83
|
},
|
69
84
|
url: 'http://applause.zwwlkj03.top/api',
|
70
85
|
options: {
|
@@ -78,6 +93,23 @@ export default {
|
|
78
93
|
}
|
79
94
|
}
|
80
95
|
},
|
96
|
+
computed: {
|
97
|
+
canLeftClick() {
|
98
|
+
if (this.searchData.page <= 1) {
|
99
|
+
return false
|
100
|
+
} else {
|
101
|
+
return true
|
102
|
+
}
|
103
|
+
},
|
104
|
+
canRightClick() {
|
105
|
+
const allPage = Math.ceil(this.searchData.total / this.searchData.page_size)
|
106
|
+
if (this.searchData.page >= allPage) {
|
107
|
+
return false
|
108
|
+
} else {
|
109
|
+
return true
|
110
|
+
}
|
111
|
+
}
|
112
|
+
},
|
81
113
|
mounted() {
|
82
114
|
this.uid = this.userId
|
83
115
|
this.searchData.uid = this.userId
|
@@ -98,23 +130,32 @@ export default {
|
|
98
130
|
}
|
99
131
|
},
|
100
132
|
clickSearch() {
|
133
|
+
this.searchData.page = 1
|
101
134
|
this.searchData.category_id = ''
|
102
135
|
this.getMessage()
|
103
136
|
},
|
104
137
|
buttonClick(id) {
|
138
|
+
this.searchData.page = 1
|
105
139
|
this.searchData.category_id = id
|
106
140
|
this.getMessage()
|
107
141
|
},
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
this.
|
142
|
+
pageClick(type) {
|
143
|
+
if (type === 'left' && this.canLeftClick) {
|
144
|
+
this.searchData.page--
|
145
|
+
this.getMessage()
|
146
|
+
}
|
147
|
+
if (type === 'right' && this.canRightClick) {
|
148
|
+
this.searchData.page++
|
149
|
+
this.getMessage()
|
112
150
|
}
|
113
151
|
},
|
152
|
+
|
114
153
|
async getMessage() {
|
115
154
|
const res = await axios.post(this.url + '/home/notify/list', this.searchData)
|
116
155
|
if (res.data.status_code === 1) {
|
117
156
|
this.messageData = res.data.data.data
|
157
|
+
this.searchData.page = res.data.data.page_info.page
|
158
|
+
this.searchData.total = res.data.data.page_info.total
|
118
159
|
}
|
119
160
|
},
|
120
161
|
async getSwiper() {
|
@@ -123,6 +164,12 @@ export default {
|
|
123
164
|
this.swiperData = res.data.data.data
|
124
165
|
}
|
125
166
|
},
|
167
|
+
async Searchcondition() {
|
168
|
+
const res = await axios.post(this.url + '/home/Searchcondition/index', { uid: this.uid, notify_category: 1 })
|
169
|
+
if (res.data.status_code === 1) {
|
170
|
+
this.options.buttonList = res.data.data.notify_category
|
171
|
+
}
|
172
|
+
},
|
126
173
|
returnCategory(id) {
|
127
174
|
const list = this.options.buttonList.filter(data => {
|
128
175
|
return data.value === id
|
@@ -178,192 +225,231 @@ export default {
|
|
178
225
|
</script>
|
179
226
|
|
180
227
|
<style lang="scss" scoped>
|
181
|
-
.
|
182
|
-
|
183
|
-
background: #ffffff;
|
184
|
-
border-radius: 2px;
|
185
|
-
.swiper {
|
228
|
+
.bi_home_data {
|
229
|
+
.content {
|
186
230
|
width: 100%;
|
187
|
-
height:
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
231
|
+
height: calc(100vh - 115px);
|
232
|
+
background: #ffffff;
|
233
|
+
border-radius: 2px;
|
234
|
+
.swiper {
|
235
|
+
width: 100%;
|
236
|
+
height: 19.5vw;
|
237
|
+
.swiper_data {
|
238
|
+
.swiper_content {
|
239
|
+
width: 100%;
|
240
|
+
height: 19.5vw;
|
241
|
+
background: url(./img/swiperBg.png) no-repeat;
|
242
|
+
background-size: 100% 100%;
|
243
|
+
display: flex;
|
244
|
+
box-sizing: border-box;
|
245
|
+
padding: 1.5vw 6vw;
|
246
|
+
.swiper_message {
|
247
|
+
.title {
|
248
|
+
width: 31.5vw;
|
249
|
+
height: 3vw;
|
250
|
+
font-size: 2.1vw;
|
251
|
+
font-weight: 500;
|
252
|
+
color: #333333;
|
253
|
+
line-height: 3vw;
|
254
|
+
}
|
255
|
+
.desc {
|
256
|
+
width: 31.5vw;
|
257
|
+
height: 1.1vw;
|
258
|
+
font-size: 0.8vw;
|
259
|
+
font-weight: 400;
|
260
|
+
color: #333333;
|
261
|
+
line-height: 1.1vw;
|
262
|
+
margin-top: 1.5vw;
|
263
|
+
}
|
214
264
|
}
|
215
265
|
}
|
216
266
|
}
|
217
267
|
}
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
flex-wrap: wrap;
|
230
|
-
.message_item {
|
231
|
-
width: 37vw;
|
232
|
-
height: 9vw;
|
233
|
-
background: #f8f8fa;
|
234
|
-
box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
|
235
|
-
border-radius: 0.2vw;
|
236
|
-
border: 0.1vw solid #ffffff;
|
237
|
-
margin-bottom: 1.5vw;
|
238
|
-
box-sizing: border-box;
|
239
|
-
padding: 1vw;
|
268
|
+
.data {
|
269
|
+
.data_search {
|
270
|
+
margin: 1vw 3.5vw;
|
271
|
+
display: flex;
|
272
|
+
justify-content: space-between;
|
273
|
+
}
|
274
|
+
.data_content {
|
275
|
+
margin: 0 3.5vw;
|
276
|
+
display: flex;
|
277
|
+
justify-content: space-between;
|
278
|
+
flex-wrap: wrap;
|
240
279
|
position: relative;
|
241
280
|
left: 0;
|
242
281
|
top: 0;
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
height: 1vw;
|
282
|
+
height: 19.5vw;
|
283
|
+
.left_page {
|
284
|
+
position: absolute;
|
285
|
+
left: -2.8vw;
|
286
|
+
top: 45%;
|
287
|
+
width: 2.25vw;
|
288
|
+
height: 2.25vw;
|
289
|
+
cursor: pointer;
|
252
290
|
img {
|
253
|
-
width:
|
254
|
-
height:
|
255
|
-
}
|
256
|
-
p {
|
257
|
-
height: 1vw;
|
258
|
-
line-height: 1vw;
|
259
|
-
margin: 0 0 0 0.5vw;
|
291
|
+
width: 2.25vw;
|
292
|
+
height: 2.25vw;
|
260
293
|
}
|
261
294
|
}
|
262
|
-
.
|
263
|
-
|
264
|
-
|
295
|
+
.right_page {
|
296
|
+
position: absolute;
|
297
|
+
right: -2.8vw;
|
298
|
+
top: 45%;
|
299
|
+
width: 2.25vw;
|
300
|
+
height: 2.25vw;
|
301
|
+
cursor: pointer;
|
265
302
|
img {
|
266
|
-
width:
|
267
|
-
height:
|
268
|
-
margin-right: 1.2vw;
|
303
|
+
width: 2.25vw;
|
304
|
+
height: 2.25vw;
|
269
305
|
}
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
306
|
+
}
|
307
|
+
.message_item {
|
308
|
+
width: 37vw;
|
309
|
+
height: 9vw;
|
310
|
+
background: #f8f8fa;
|
311
|
+
box-shadow: 0px 0.1vw 0.45vw 0px rgba(168, 203, 255, 0.36);
|
312
|
+
border-radius: 0.2vw;
|
313
|
+
border: 0.1vw solid #ffffff;
|
314
|
+
margin-bottom: 1.5vw;
|
315
|
+
box-sizing: border-box;
|
316
|
+
padding: 1vw;
|
317
|
+
position: relative;
|
318
|
+
left: 0;
|
319
|
+
top: 0;
|
320
|
+
cursor: pointer;
|
321
|
+
&:nth-child(3) {
|
322
|
+
margin-bottom: 0;
|
323
|
+
}
|
324
|
+
&:nth-child(4) {
|
325
|
+
margin-bottom: 0;
|
326
|
+
}
|
327
|
+
.item_title {
|
328
|
+
display: flex;
|
329
|
+
height: 1vw;
|
330
|
+
img {
|
331
|
+
width: 1vw;
|
288
332
|
height: 1vw;
|
289
|
-
margin-top: 0.8vw;
|
290
|
-
font-size: 0.7vw;
|
291
|
-
font-weight: 400;
|
292
|
-
color: #333333;
|
293
|
-
line-height: 1vw;
|
294
|
-
overflow: hidden;
|
295
|
-
white-space: nowrap;
|
296
|
-
text-overflow: ellipsis;
|
297
333
|
}
|
298
|
-
|
299
|
-
position: absolute;
|
300
|
-
left: 22vw;
|
301
|
-
top: 0.05vw;
|
302
|
-
width: 8vw;
|
334
|
+
p {
|
303
335
|
height: 1vw;
|
304
|
-
font-size: 0.7vw;
|
305
|
-
font-weight: 400;
|
306
|
-
color: #333333;
|
307
336
|
line-height: 1vw;
|
308
|
-
|
309
|
-
white-space: nowrap;
|
310
|
-
text-overflow: ellipsis;
|
337
|
+
margin: 0 0 0 0.5vw;
|
311
338
|
}
|
312
339
|
}
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
340
|
+
.item_content {
|
341
|
+
margin-top: 1.6vw;
|
342
|
+
display: flex;
|
343
|
+
img {
|
344
|
+
width: 4vw;
|
345
|
+
height: 4vw;
|
346
|
+
margin-right: 1.2vw;
|
347
|
+
}
|
348
|
+
.content_content {
|
349
|
+
width: 31vw;
|
350
|
+
position: relative;
|
351
|
+
top: 0;
|
352
|
+
left: 0;
|
353
|
+
.content_title {
|
354
|
+
max-width: 20vw;
|
355
|
+
height: 1.1vw;
|
356
|
+
font-size: 0.8vw;
|
357
|
+
font-weight: 500;
|
358
|
+
color: #333333;
|
359
|
+
line-height: 1.1vw;
|
360
|
+
overflow: hidden;
|
361
|
+
white-space: nowrap;
|
362
|
+
text-overflow: ellipsis;
|
363
|
+
}
|
364
|
+
.content_desc {
|
365
|
+
max-width: 26vw;
|
366
|
+
height: 1vw;
|
367
|
+
margin-top: 0.8vw;
|
368
|
+
font-size: 0.7vw;
|
369
|
+
font-weight: 400;
|
370
|
+
color: #333333;
|
371
|
+
line-height: 1vw;
|
372
|
+
overflow: hidden;
|
373
|
+
white-space: nowrap;
|
374
|
+
text-overflow: ellipsis;
|
375
|
+
}
|
376
|
+
.content_time {
|
377
|
+
position: absolute;
|
378
|
+
left: 22vw;
|
379
|
+
top: 0.05vw;
|
380
|
+
width: 8vw;
|
381
|
+
height: 1vw;
|
382
|
+
font-size: 0.7vw;
|
383
|
+
font-weight: 400;
|
384
|
+
color: #333333;
|
385
|
+
line-height: 1vw;
|
386
|
+
overflow: hidden;
|
387
|
+
white-space: nowrap;
|
388
|
+
text-overflow: ellipsis;
|
389
|
+
}
|
390
|
+
}
|
391
|
+
}
|
392
|
+
.is_read {
|
393
|
+
position: absolute;
|
394
|
+
right: 0.1vw;
|
395
|
+
top: 0.3vw;
|
396
|
+
width: 1.5vw;
|
397
|
+
height: 0.8vw;
|
398
|
+
}
|
320
399
|
}
|
321
400
|
}
|
322
401
|
}
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
width: 500px;
|
354
|
-
font-size: 14px;
|
355
|
-
font-weight: 400;
|
356
|
-
color: #333333;
|
357
|
-
line-height: 20px;
|
358
|
-
}
|
359
|
-
.detail_content {
|
360
|
-
width: 520px;
|
361
|
-
margin-top: 24px;
|
362
|
-
overflow-y: auto;
|
363
|
-
.content_content {
|
402
|
+
.detail {
|
403
|
+
width: 100%;
|
404
|
+
box-sizing: border-box;
|
405
|
+
padding: 0 20px;
|
406
|
+
height: calc(100vh - 80px);
|
407
|
+
.detail_title {
|
408
|
+
width: 440px;
|
409
|
+
height: 22px;
|
410
|
+
font-size: 16px;
|
411
|
+
font-weight: 500;
|
412
|
+
color: #333333;
|
413
|
+
line-height: 22px;
|
414
|
+
overflow: hidden;
|
415
|
+
white-space: nowrap;
|
416
|
+
text-overflow: ellipsis;
|
417
|
+
}
|
418
|
+
.detail_time {
|
419
|
+
width: 320px;
|
420
|
+
height: 16px;
|
421
|
+
margin-top: 12px;
|
422
|
+
font-size: 12px;
|
423
|
+
font-weight: 400;
|
424
|
+
color: #999999;
|
425
|
+
line-height: 16px;
|
426
|
+
overflow: hidden;
|
427
|
+
white-space: nowrap;
|
428
|
+
text-overflow: ellipsis;
|
429
|
+
}
|
430
|
+
.detail_desc {
|
431
|
+
margin-top: 24px;
|
364
432
|
width: 500px;
|
433
|
+
font-size: 14px;
|
434
|
+
font-weight: 400;
|
435
|
+
color: #333333;
|
436
|
+
line-height: 20px;
|
437
|
+
}
|
438
|
+
.detail_content {
|
439
|
+
width: 520px;
|
440
|
+
margin-top: 24px;
|
441
|
+
overflow-y: auto;
|
442
|
+
.content_content {
|
443
|
+
width: 500px;
|
444
|
+
}
|
365
445
|
}
|
366
446
|
}
|
367
447
|
}
|
368
448
|
}
|
369
449
|
</style>
|
450
|
+
<style>
|
451
|
+
.el-carousel__indicator.is-active button {
|
452
|
+
opacity: 1;
|
453
|
+
background-color: #38ce81;
|
454
|
+
}
|
455
|
+
</style>
|