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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bi-element-ui",
3
- "version": "0.1.43",
3
+ "version": "0.1.45",
4
4
  "private": false,
5
5
  "description": "基于element-ui编写的ui组件库",
6
6
  "main": "lib/bi-element-ui.common.js",
Binary file
Binary file
@@ -1,49 +1,61 @@
1
1
  <template>
2
- <div class="content">
3
- <div class="swiper">
4
- <el-carousel class="swiper_data" height="19.5vw" :autoplay="true">
5
- <el-carousel-item v-for="(item, index) in swiperData" :key="index">
6
- <div class="swiper_content" :style="'background: url(' + item.image_path + ') no-repeat;background-size: 100% 100%;'" @click="swiperClick(item)"></div>
7
- </el-carousel-item>
8
- </el-carousel>
9
- </div>
10
- <div class="data">
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
- </div>
19
- <div class="data_content">
20
- <div v-for="(item, index) in messageData" :key="index" class="message_item" @click="getDataDetail(item)">
21
- <div class="item_title">
22
- <img :src="returnCategoryImg(item.category_id)" alt="" />
23
- <p>{{ returnCategory(item.category_id) }}</p>
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="item_content">
26
- <img :src="item.cover_image" alt="" />
27
- <div class="content_content">
28
- <div class="content_title">{{ item.title }}</div>
29
- <div class="content_desc">{{ item.short_desc }}</div>
30
- <div class="content_time">{{ item.create_time }}</div>
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-drawer>
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: 'HomeData',
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
- async Searchcondition() {
109
- const res = await axios.post(this.url + '/home/Searchcondition/index', { uid: this.uid, notify_category: 1 })
110
- if (res.data.status_code === 1) {
111
- this.options.buttonList = res.data.data.notify_category
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
- .content {
182
- width: 100%;
183
- background: #ffffff;
184
- border-radius: 2px;
185
- .swiper {
228
+ .bi_home_data {
229
+ .content {
186
230
  width: 100%;
187
- height: 19.5vw;
188
- .swiper_data {
189
- .swiper_content {
190
- width: 100%;
191
- height: 19.5vw;
192
- background: url(./img/swiperBg.png) no-repeat;
193
- background-size: 100% 100%;
194
- display: flex;
195
- box-sizing: border-box;
196
- padding: 1.5vw 6vw;
197
- .swiper_message {
198
- .title {
199
- width: 31.5vw;
200
- height: 3vw;
201
- font-size: 2.1vw;
202
- font-weight: 500;
203
- color: #333333;
204
- line-height: 3vw;
205
- }
206
- .desc {
207
- width: 31.5vw;
208
- height: 1.1vw;
209
- font-size: 0.8vw;
210
- font-weight: 400;
211
- color: #333333;
212
- line-height: 1.1vw;
213
- margin-top: 1.5vw;
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
- .data {
220
- .data_search {
221
- margin: 1vw 3.5vw;
222
- display: flex;
223
- justify-content: space-between;
224
- }
225
- .data_content {
226
- margin: 0 3.5vw;
227
- display: flex;
228
- justify-content: space-between;
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
- &:nth-child(3) {
244
- margin-bottom: 0;
245
- }
246
- &:nth-child(4) {
247
- margin-bottom: 0;
248
- }
249
- .item_title {
250
- display: flex;
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: 1vw;
254
- height: 1vw;
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
- .item_content {
263
- margin-top: 1.6vw;
264
- display: flex;
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: 4vw;
267
- height: 4vw;
268
- margin-right: 1.2vw;
303
+ width: 2.25vw;
304
+ height: 2.25vw;
269
305
  }
270
- .content_content {
271
- width: 31vw;
272
- position: relative;
273
- top: 0;
274
- left: 0;
275
- .content_title {
276
- max-width: 20vw;
277
- height: 1.1vw;
278
- font-size: 0.8vw;
279
- font-weight: 500;
280
- color: #333333;
281
- line-height: 1.1vw;
282
- overflow: hidden;
283
- white-space: nowrap;
284
- text-overflow: ellipsis;
285
- }
286
- .content_desc {
287
- max-width: 26vw;
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
- .content_time {
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
- overflow: hidden;
309
- white-space: nowrap;
310
- text-overflow: ellipsis;
337
+ margin: 0 0 0 0.5vw;
311
338
  }
312
339
  }
313
- }
314
- .is_read {
315
- position: absolute;
316
- right: 0.1vw;
317
- top: 0.3vw;
318
- width: 1.5vw;
319
- height: 0.8vw;
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
- .detail {
325
- width: 100%;
326
- box-sizing: border-box;
327
- padding: 0 20px;
328
- .detail_title {
329
- width: 440px;
330
- height: 22px;
331
- font-size: 16px;
332
- font-weight: 500;
333
- color: #333333;
334
- line-height: 22px;
335
- overflow: hidden;
336
- white-space: nowrap;
337
- text-overflow: ellipsis;
338
- }
339
- .detail_time {
340
- width: 320px;
341
- height: 16px;
342
- margin-top: 12px;
343
- font-size: 12px;
344
- font-weight: 400;
345
- color: #999999;
346
- line-height: 16px;
347
- overflow: hidden;
348
- white-space: nowrap;
349
- text-overflow: ellipsis;
350
- }
351
- .detail_desc {
352
- margin-top: 24px;
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>