Showing
1 changed file
with
26 additions
and
44 deletions
@@ -6,15 +6,8 @@ | @@ -6,15 +6,8 @@ | ||
6 | </template> | 6 | </template> |
7 | <div class="list-content"> | 7 | <div class="list-content"> |
8 | <div class="list-content-img" @click="editHandle()"> | 8 | <div class="list-content-img" @click="editHandle()"> |
9 | - <n-image | ||
10 | - object-fit="fill" | ||
11 | - height="180" | ||
12 | - width="350" | ||
13 | - preview-disabled | ||
14 | - :src="requestImag(cardData.imageUrl)" | ||
15 | - :alt="cardData.name" | ||
16 | - :fallback-src="requireErrorImg()" | ||
17 | - ></n-image> | 9 | + <n-image object-fit="fill" height="180" width="350" preview-disabled :src="requestImag(cardData.imageUrl)" |
10 | + :alt="cardData.name" :fallback-src="requireErrorImg()"></n-image> | ||
18 | </div> | 11 | </div> |
19 | </div> | 12 | </div> |
20 | <template #action> | 13 | <template #action> |
@@ -29,16 +22,8 @@ | @@ -29,16 +22,8 @@ | ||
29 | </span> | 22 | </span> |
30 | </n-button> | 23 | </n-button> |
31 | </n-text> | 24 | </n-text> |
32 | - <n-input | ||
33 | - v-else | ||
34 | - ref="inputInstRef" | ||
35 | - size="small" | ||
36 | - type="text" | ||
37 | - maxlength="16" | ||
38 | - show-count | ||
39 | - v-model:value.trim="title" | ||
40 | - @blur="handleBlur" | ||
41 | - ></n-input> | 25 | + <n-input v-else ref="inputInstRef" size="small" type="text" maxlength="16" show-count |
26 | + v-model:value.trim="title" @blur="handleBlur"></n-input> | ||
42 | </template> | 27 | </template> |
43 | {{ cardData.name || cardData.id }} | 28 | {{ cardData.name || cardData.id }} |
44 | </n-tooltip> | 29 | </n-tooltip> |
@@ -48,23 +33,25 @@ | @@ -48,23 +33,25 @@ | ||
48 | <div class="go-flex-items-center list-footer-ri"> | 33 | <div class="go-flex-items-center list-footer-ri"> |
49 | <n-space> | 34 | <n-space> |
50 | <n-text> | 35 | <n-text> |
51 | - <n-badge | ||
52 | - class="go-animation-twinkle" | ||
53 | - dot | ||
54 | - :color="cardData.state === 1 ? '#34c749' : '#fcbc40'" | ||
55 | - ></n-badge> | 36 | + <n-badge class="go-animation-twinkle" dot |
37 | + :color="cardData.state === 1 ? '#34c749' : '#fcbc40'"></n-badge> | ||
56 | {{ cardData.state === 1 ? $t('project.release') : $t('project.unreleased') }} | 38 | {{ cardData.state === 1 ? $t('project.release') : $t('project.unreleased') }} |
57 | </n-text> | 39 | </n-text> |
58 | 40 | ||
59 | <template v-for="item in fnBtnList" :key="item.key"> | 41 | <template v-for="item in fnBtnList" :key="item.key"> |
60 | <template v-if="item.key === 'select'"> | 42 | <template v-if="item.key === 'select'"> |
61 | - <n-dropdown | ||
62 | - trigger="hover" | ||
63 | - placement="bottom" | ||
64 | - :options="selectOptions" | ||
65 | - :show-arrow="true" | ||
66 | - @select="handleSelect" | ||
67 | - > | 43 | + <n-dropdown trigger="hover" placement="bottom" :options="[ |
44 | + { | ||
45 | + label: cardData?.state ? renderLang('global.r_unpublish') : renderLang('global.r_publish'), | ||
46 | + key: 'release', | ||
47 | + icon: renderIcon(SendIcon) | ||
48 | + }, | ||
49 | + { | ||
50 | + label: renderLang('global.r_delete'), | ||
51 | + key: 'delete', | ||
52 | + icon: renderIcon(TrashIcon) | ||
53 | + } | ||
54 | + ]" :show-arrow="true" @select="handleSelect"> | ||
68 | <n-button size="small"> | 55 | <n-button size="small"> |
69 | <template #icon> | 56 | <template #icon> |
70 | <component :is="item.icon"></component> | 57 | <component :is="item.icon"></component> |
@@ -133,19 +120,6 @@ const fnBtnList = reactive([ | @@ -133,19 +120,6 @@ const fnBtnList = reactive([ | ||
133 | } | 120 | } |
134 | ]) | 121 | ]) |
135 | 122 | ||
136 | -const selectOptions = ref([ | ||
137 | - { | ||
138 | - label: props.cardData?.state ? renderLang('global.r_unpublish') : renderLang('global.r_publish'), | ||
139 | - key: 'release', | ||
140 | - icon: renderIcon(SendIcon) | ||
141 | - }, | ||
142 | - { | ||
143 | - label: renderLang('global.r_delete'), | ||
144 | - key: 'delete', | ||
145 | - icon: renderIcon(TrashIcon) | ||
146 | - } | ||
147 | -]) | ||
148 | - | ||
149 | const handleSelect = (key: string) => { | 123 | const handleSelect = (key: string) => { |
150 | switch (key) { | 124 | switch (key) { |
151 | case 'delete': | 125 | case 'delete': |
@@ -200,17 +174,20 @@ const requestImag = (imageUrl: string | undefined) => { | @@ -200,17 +174,20 @@ const requestImag = (imageUrl: string | undefined) => { | ||
200 | 174 | ||
201 | <style lang="scss" scoped> | 175 | <style lang="scss" scoped> |
202 | $contentHeight: 180px; | 176 | $contentHeight: 180px; |
177 | + | ||
203 | @include go('items-list-card') { | 178 | @include go('items-list-card') { |
204 | position: relative; | 179 | position: relative; |
205 | border-radius: $--border-radius-base; | 180 | border-radius: $--border-radius-base; |
206 | border: 1px solid rgba(0, 0, 0, 0); | 181 | border: 1px solid rgba(0, 0, 0, 0); |
207 | @extend .go-transition; | 182 | @extend .go-transition; |
183 | + | ||
208 | // &:hover { | 184 | // &:hover { |
209 | // @include hover-border-color('hover-border-color'); | 185 | // @include hover-border-color('hover-border-color'); |
210 | // } | 186 | // } |
211 | .list-content { | 187 | .list-content { |
212 | cursor: pointer; | 188 | cursor: pointer; |
213 | border-radius: $--border-radius-base; | 189 | border-radius: $--border-radius-base; |
190 | + | ||
214 | // @include background-image('background-point'); | 191 | // @include background-image('background-point'); |
215 | // @extend .go-point-bg; | 192 | // @extend .go-point-bg; |
216 | &-top { | 193 | &-top { |
@@ -219,10 +196,12 @@ $contentHeight: 180px; | @@ -219,10 +196,12 @@ $contentHeight: 180px; | ||
219 | left: 10px; | 196 | left: 10px; |
220 | height: 22px; | 197 | height: 22px; |
221 | } | 198 | } |
199 | + | ||
222 | &-img { | 200 | &-img { |
223 | height: $contentHeight; | 201 | height: $contentHeight; |
224 | @extend .go-flex-center; | 202 | @extend .go-flex-center; |
225 | @extend .go-border-radius; | 203 | @extend .go-border-radius; |
204 | + | ||
226 | @include deep() { | 205 | @include deep() { |
227 | img { | 206 | img { |
228 | @extend .go-border-radius; | 207 | @extend .go-border-radius; |
@@ -230,14 +209,17 @@ $contentHeight: 180px; | @@ -230,14 +209,17 @@ $contentHeight: 180px; | ||
230 | } | 209 | } |
231 | } | 210 | } |
232 | } | 211 | } |
212 | + | ||
233 | .list-footer { | 213 | .list-footer { |
234 | flex-wrap: nowrap; | 214 | flex-wrap: nowrap; |
235 | justify-content: space-between; | 215 | justify-content: space-between; |
236 | line-height: 30px; | 216 | line-height: 30px; |
217 | + | ||
237 | &-ri { | 218 | &-ri { |
238 | justify-content: flex-end; | 219 | justify-content: flex-end; |
239 | min-width: 180px; | 220 | min-width: 180px; |
240 | } | 221 | } |
222 | + | ||
241 | .list-footer-button { | 223 | .list-footer-button { |
242 | display: flex; | 224 | display: flex; |
243 | // justify-content: flex-start; | 225 | // justify-content: flex-start; |