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; |