1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <template>
| <view class="card" @click="onClick" :style="[customStyle]" :data-i="$attrs['data-i']">
| <image class="card-img" mode="aspectFill" :src="src" />
| <view class="text-wrap text-wrap-width" v-if="!!desc">
| <view class="title one-t">{{title}}</view>
| <view class="desc one-t">{{desc}}</view>
| </view>
| <view v-else class="text-wrap-width title more-t">{{title}}</view>
| <image class="card-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAABCFBMVEUAAAC/v7+qqqqZmZmLi6KJnZ2ImZmHlpaGlKGMjJmSkp6Li5eQkJuKlZ+Pj5mOjpeJkpuNjZ6IkJmHj5eLi5uKkpmGjZqJj5uLi5eIjpmIjZiKj5qKj5mJjpiHjJqJjZaGj5iKj5eIjJmKjpqHi5eGjZeIi5eHjZiIi5eHjJiIjpaHjJeIjZiGjJeIjZiGjJaGjJeIi5aGjJeHi5eHi5aHjJeHjJaHjJeGi5eHjJaHjJeGi5aGi5aHjJeHjJaGjJeGjJeHjJaHi5eGi5eHjJaHjJeGjJaGjJeHi5aHjJeHjJeHi5aGjJeHi5aGjJaHi5eGjJaHi5eHjJaGi5eGi5aHjJeGi5aGi5apAvjmAAAAV3RSTlMABAYKCw0PERMUFRYXGBkbHB0eICEjJiksLS8wMjQ1ODk7PD9ATFZXWFlaW1xdXl+Hi6msu7/Dx8vMzs/R0tTV19na3N3f4uTn6evs7e7v8PHy9PX7/P18cCTXAAABEklEQVRo3u2YWU5CQRQFn4qCM4LzhIoDAorzrIgCigiCimf/O/Gj3UIlmJxaQFXSea/T90aRMcYYY4zpG0ZPu9cZMnAi6SsLBjqS9LnJBcqSpC53Sjs/kqSPNaxwGAqtFbrQXKILjQW68DpPF17m6EI9TRdqM3TheZouVCbpQnkcK5RC4T5BF27jdOFqhC5cDtOFixhdOB+iC2cDdOEoggttLrDbk6QW5/+WJB1T/r1e+FAHWT/2q/35scsiF/w3cdZ/R13Y+8H/MMb6Hycgfz74n6ZYfzXJ+mspyF8I/vos68cep0X4eV2EB4SD4H9bZP3vy+yTtL3KjrGddXgQ34BXCVvwMmT7P69zjDHGGGP6gF83lHISOctsKQAAAABJRU5ErkJggg=="></image>
| </view>
| </template>
|
| <script>
| export default {
| props: {
| mode: {
| type: Boolean,
| default: false
| },
| src: String,
| title: String,
| desc: String,
| url: String,
| color: String,
| bgcolor: String,
| border: String
| },
| data () {
| return {
|
| }
| },
| computed: {
| customStyle () {
| return {
| 'background-color': this.bgColor || '#a4d0ff',
| border: this.border || '1px solid #FFF',
| color: this.color || '#000'
| }
| }
| },
| methods: {
| onClick (e) {
| if (this.url && this.url.trim().length > 6 && !this.mode) {
| uni.navigateTo({ url: this.url })
| }
| this.$emit('click', e)
| }
| }
| }
| </script>
|
| <style lang="scss">
| .one-t {
| overflow: hidden;
| white-space: nowrap;
| text-overflow: ellipsis;
| transition: all linear 0.2s;
| }
|
| .more-t {
| overflow: hidden;
| text-overflow: ellipsis;
| word-break:break-all;
| display: -webkit-box;
| -webkit-line-clamp: 2;
| -webkit-box-orient: vertical;
| transition: all linear 0.2s;
| }
|
| .card {
|
| width: 80%;
| margin: 10rpx auto;
| max-width: 700rpx;
| max-height: 140rpx;
|
| box-sizing: border-box;
| overflow: hidden;
|
| display: flex;
| justify-content: space-between;
| align-items: center;
|
| padding: 20rpx 0 20rpx 10rpx;
| border-radius: 12rpx;
|
| &-img {
| width: 96rpx;
| height: 96rpx;
| border-radius: 12rpx;
| flex: 0 0 96rpx;
| }
|
| &-icon {
| width: 30rpx;
| height: 96rpx;
| }
|
| .text-wrap {
|
| display: flex;
| flex-direction: column;
| justify-content: space-between;
|
| &-width {
| width: 72%;
| }
| }
|
| .title {
| font-weight: bold;
| font-size: 34rpx;
| line-height: 48rpx;
| }
|
| .desc {
| font-size: 27rpx;
| line-height: 37rpx;
| }
| }
| </style>
|
|
