419 lines
11 KiB
Vue
419 lines
11 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-warp" :class="{ active: active ? 'active' : '' }">
|
|
<div class="card-content">
|
|
<div class="card-header">
|
|
<div class="card-header-left">
|
|
<slot name="title"> </slot>
|
|
</div>
|
|
<div class="card-header-right">
|
|
<slot name="action"> </slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="card-item"
|
|
style="display: flex"
|
|
@click="handleClick"
|
|
>
|
|
<!-- 图片 -->
|
|
<div class="card-item-avatar">
|
|
<slot name="img"> </slot>
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="card-item-body">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 勾选 -->
|
|
<div v-if="active" class="checked-icon">
|
|
<div>
|
|
<AIcon type="CheckOutlined" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 状态 -->
|
|
<div
|
|
v-if="showStatus"
|
|
class="card-state"
|
|
:class="statusNames ? statusNames[status] : ''"
|
|
>
|
|
<div class="card-state-content">
|
|
<BadgeStatus
|
|
:status="status"
|
|
:text="statusText"
|
|
:statusNames="statusNames"
|
|
></BadgeStatus>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-mask" v-if="props.hasMark">
|
|
<div class="mask-content">
|
|
<slot name="mark" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 按钮 -->
|
|
<slot name="bottom-tool">
|
|
<div
|
|
v-if="showTool && actions && actions.length"
|
|
class="card-tools"
|
|
>
|
|
<div
|
|
v-for="item in actions"
|
|
:key="item.key"
|
|
class="card-button"
|
|
:class="{
|
|
delete: item.key === 'delete',
|
|
}"
|
|
>
|
|
<slot name="actions" v-bind="item"></slot>
|
|
</div>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ActionsType } from '@/components/Table/index';
|
|
import { PropType } from 'vue';
|
|
|
|
type EmitProps = {
|
|
// (e: 'update:modelValue', data: Record<string, any>): void;
|
|
(e: 'click', data: Record<string, any>): void;
|
|
};
|
|
|
|
type TableActionsType = Partial<ActionsType>;
|
|
|
|
const emit = defineEmits<EmitProps>();
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: Object as PropType<Record<string, any>>,
|
|
default: () => {},
|
|
},
|
|
showStatus: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showTool: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
statusText: {
|
|
type: String,
|
|
default: '正常',
|
|
},
|
|
status: {
|
|
type: [String, Number],
|
|
default: 'default',
|
|
},
|
|
statusNames: {
|
|
type: Object,
|
|
},
|
|
actions: {
|
|
type: Array as PropType<TableActionsType[]>,
|
|
default: () => [],
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hasMark: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const handleClick = () => {
|
|
emit('click', props.value);
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.card {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
.checked-icon {
|
|
position: absolute;
|
|
right: -22px;
|
|
bottom: -22px;
|
|
z-index: 2;
|
|
width: 44px;
|
|
height: 44px;
|
|
color: #fff;
|
|
background-color: #2f54eb;
|
|
transform: rotate(-45deg);
|
|
|
|
> div {
|
|
position: relative;
|
|
height: 100%;
|
|
right: -2px;
|
|
bottom: -4px;
|
|
transform: rotate(45deg);
|
|
|
|
> span {
|
|
position: absolute;
|
|
// top: 6px;
|
|
// left: 6px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-warp {
|
|
position: relative;
|
|
border: 1px solid #e6e6e6;
|
|
|
|
&:hover {
|
|
// cursor: pointer;
|
|
box-shadow: 0 0 24px rgba(#000, 0.1);
|
|
|
|
.card-mask {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
position: relative;
|
|
border: 1px solid #2f54eb;
|
|
}
|
|
|
|
.card-content {
|
|
position: relative;
|
|
padding: 40px 12px 16px 30px;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 30px + 10px;
|
|
display: block;
|
|
width: 15%;
|
|
min-width: 64px;
|
|
height: 2px;
|
|
// background-image: url('/images/rectangle.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: ' ';
|
|
}
|
|
|
|
.card-header {
|
|
// display: flex;
|
|
position: absolute;
|
|
left: 133px;
|
|
top: 20px;
|
|
// background: #5995f5;
|
|
// width: calc(100% - 100px);
|
|
width: calc(100% - 150px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-item {
|
|
cursor: pointer;
|
|
}
|
|
.card-item-avatar {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.card-item-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
width: 0;
|
|
}
|
|
|
|
.card-state {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: -12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100px;
|
|
padding: 2px 0;
|
|
background-color: rgba(#5995f5, 0.15);
|
|
transform: skewX(-45deg);
|
|
|
|
&.success {
|
|
background-color: @success-color-deprecated-bg;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: rgba(#ff9000, 0.1);
|
|
}
|
|
|
|
&.error {
|
|
background-color: rgba(#e50012, 0.1);
|
|
}
|
|
|
|
.card-state-content {
|
|
transform: skewX(45deg);
|
|
}
|
|
}
|
|
|
|
:deep(.card-item-content-title) {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: @primary-color;
|
|
width: calc(100% - 100px);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:deep(.card-item-heard-name) {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
:deep(.card-item-content-text) {
|
|
color: rgba(0, 0, 0, 0.75);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.card-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #fff;
|
|
background-color: rgba(#000, 0.5);
|
|
visibility: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
.mask-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.item-active {
|
|
position: relative;
|
|
color: #2f54eb;
|
|
|
|
.checked-icon {
|
|
display: block;
|
|
}
|
|
|
|
.card-warp {
|
|
border: 1px solid #2f54eb;
|
|
}
|
|
}
|
|
|
|
.card-tools {
|
|
display: flex;
|
|
margin-top: 8px;
|
|
|
|
.card-button {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
|
|
& > :deep(span, button) {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
:deep(button) {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
background: #f6f6f6;
|
|
border: 1px solid #e6e6e6;
|
|
color: #2f54eb;
|
|
|
|
&:hover {
|
|
background-color: @primary-color-hover;
|
|
border-color: @primary-color-hover;
|
|
|
|
span {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: @primary-color-active;
|
|
border-color: @primary-color-active;
|
|
|
|
span {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&.delete {
|
|
flex-basis: 60px;
|
|
flex-grow: 0;
|
|
|
|
:deep(button) {
|
|
background: @error-color-deprecated-bg;
|
|
border: 1px solid @error-color-outline;
|
|
|
|
span {
|
|
color: @error-color !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @error-color-hover;
|
|
|
|
span {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: @error-color-active;
|
|
|
|
span {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(button[disabled]) {
|
|
background: @disabled-bg;
|
|
border-color: @disabled-color;
|
|
|
|
span {
|
|
color: @disabled-color !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: @disabled-active-bg;
|
|
}
|
|
|
|
&:active {
|
|
background-color: @disabled-active-bg;
|
|
}
|
|
}
|
|
|
|
// :deep(.ant-tooltip-disabled-compatible-wrapper) {
|
|
// width: 100%;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|