blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-14 14:32: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

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

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

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

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