blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-14 22:42:10 +08:00
Code Issues Projects Releases Wiki Activity

style:优化project/items 列表及预览

Browse Source
This commit is contained in:
xushihao 2022-10-25 15:42:12 +08:00
parent 08ccc64873
commit 2760245a3b
2 changed files with 28 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/project/items/components/ProjectItemsCard/index.vue
View File

@ -12,18 +12,12 @@
></mac-os-control-btn> ></mac-os-control-btn>
</div> </div>
<!-- 中间 --> <!-- 中间 -->
<div class="list-content-img" @click="resizeHandle"> <div
<n-image class="list-content-img"
object-fit="contain" @click="resizeHandle"
height="180" :title="cardData.title"
preview-disabled :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')}), url(${requireErrorImg()})`"
:src=" ></div>
requireUrl('project/moke-20211219181327.png')
"
:alt="cardData.title"
:fallback-src="requireErrorImg()"
></n-image>
</div>
</div> </div>
<template #action> <template #action>
<div class="go-flex-items-center list-footer" justify="space-between"> <div class="go-flex-items-center list-footer" justify="space-between">
@ -34,16 +28,8 @@
<div class="go-flex-items-center list-footer-ri"> <div class="go-flex-items-center list-footer-ri">
<n-space> <n-space>
<n-text> <n-text>
<n-badge <n-badge class="go-animation-twinkle" dot :color="cardData.release ? '#34c749' : '#fcbc40'"></n-badge>
class="go-animation-twinkle" {{ cardData.release ? $t('project.release') : $t('project.unreleased') }}
dot
:color="cardData.release ? '#34c749' : '#fcbc40'"
></n-badge>
{{
cardData.release
? $t('project.release')
: $t('project.unreleased')
}}
</n-text> </n-text>
<template v-for="item in fnBtnList" :key="item.key"> <template v-for="item in fnBtnList" :key="item.key">
@ -145,9 +131,7 @@ const selectOptions = ref([
key: 'd1' key: 'd1'
}, },
{ {
label: props.cardData?.release label: props.cardData?.release ? renderLang('global.r_unpublish') : renderLang('global.r_publish'),
? renderLang('global.r_unpublish')
: renderLang('global.r_publish'),
key: 'send', key: 'send',
icon: renderIcon(SendIcon) icon: renderIcon(SendIcon)
}, },
@ -219,13 +203,11 @@ $contentHeight: 180px;
} }
&-img { &-img {
height: $contentHeight; height: $contentHeight;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@extend .go-flex-center; @extend .go-flex-center;
@extend .go-border-radius; @extend .go-border-radius;
@include deep() {
img {
@extend .go-border-radius;
}
}
} }
} }
.list-footer { .list-footer {

46
src/views/project/items/components/ProjectItemsModalCard/index.vue
View File

@ -1,10 +1,6 @@
<template> <template>
<!-- mask-closable 暂时是失效的，不知道为啥 --> <!-- mask-closable 暂时是失效的，不知道为啥 -->
<n-modal <n-modal class="go-modal-box" v-model:show="modalShow" @afterLeave="closeHandle">
class="go-modal-box"
v-model:show="modalShow"
@afterLeave="closeHandle"
>
<n-card hoverable size="small"> <n-card hoverable size="small">
<div class="list-content"> <div class="list-content">
<!-- 标题 --> <!-- 标题 -->
@ -17,21 +13,14 @@
</n-space> </n-space>
<!-- 顶部按钮 --> <!-- 顶部按钮 -->
<n-space class="list-content-top"> <n-space class="list-content-top">
<mac-os-control-btn <mac-os-control-btn :narrow="true" :hidden="['close']" @remove="closeHandle"></mac-os-control-btn>
:narrow="true"
:hidden="['close']"
@remove="closeHandle"
></mac-os-control-btn>
</n-space> </n-space>
<!-- 中间 --> <!-- 中间 -->
<div class="list-content-img"> <div
<img class="list-content-img"
:src=" :title="cardData?.title"
requireUrl('project/moke-20211219181327.png') :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')})`"
" ></div>
:alt="cardData?.title"
/>
</div>
</div> </div>
<template #action> <template #action>
<n-space class="list-footer" justify="space-between"> <n-space class="list-footer" justify="space-between">
@ -42,16 +31,8 @@
<!-- 工具 --> <!-- 工具 -->
<n-space> <n-space>
<n-text> <n-text>
<n-badge <n-badge class="go-animation-twinkle" dot :color="cardData?.release ? '#34c749' : '#fcbc40'"></n-badge>
class="go-animation-twinkle" {{ cardData?.release ? $t('project.release') : $t('project.unreleased') }}
dot
:color="cardData?.release ? '#34c749' : '#fcbc40'"
></n-badge>
{{
cardData?.release
? $t('project.release')
: $t('project.unreleased')
}}
</n-text> </n-text>
<template v-for="item in fnBtnList" :key="item.key"> <template v-for="item in fnBtnList" :key="item.key">
@ -143,15 +124,14 @@ $contentWidth: calc(82vw);
width: $contentWidth; width: $contentWidth;
} }
&-img { &-img {
height: $contentHeight;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
@extend .go-flex-center; @extend .go-flex-center;
img {
max-height: $contentHeight;
min-height: 200px;
max-width: 100%;
@extend .go-border-radius; @extend .go-border-radius;
} }
} }
}
.list-footer { .list-footer {
line-height: 30px; line-height: 30px;
} }