168 lines
2.9 KiB
Vue
168 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
:class="prefixCls"
|
|
@click="$emit('support')">
|
|
<div :class="`${prefixCls}-image`">
|
|
<a-image
|
|
width="100%"
|
|
height="250px"
|
|
:preview="false"
|
|
:src="data.coverUrl" />
|
|
</div>
|
|
<div :class="`${prefixCls}-wrap`">
|
|
<div :class="`${prefixCls}-title`">{{ data.title }}</div>
|
|
<div :class="`${prefixCls}-desc`">{{ data.profile }}</div>
|
|
<a-divider></a-divider>
|
|
<div :class="`${prefixCls}-money`">
|
|
{{ $t('common.money') }}
|
|
</div>
|
|
<a-progress
|
|
track-color="#333"
|
|
size="large"
|
|
:percent="percent">
|
|
</a-progress>
|
|
<div :class="`${prefixCls}-progress`">
|
|
<div :class="`${prefixCls}-progress-left`">
|
|
<span>{{ `USDT ${data.haveAmount || 0}` }}</span>
|
|
{{ `/ USDT ${data.amount}` }}
|
|
</div>
|
|
<!-- <mf-button
|
|
type="primary"
|
|
shape="round"
|
|
size="large"
|
|
@click="$emit('support')"
|
|
v-if="type == 'projects'">
|
|
{{ $t('common.supportProject') }}
|
|
</mf-button> -->
|
|
<div :class="`${prefixCls}-progress-right`">
|
|
{{ $t('common.remainingDay', { total: data.days }) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'mf-card',
|
|
data() {
|
|
return {
|
|
prefixCls: 'mf-card'
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
percent() {
|
|
return parseFloat(
|
|
((this.data.haveAmount || 0) / this.data.amount).toFixed(3)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.mf-card {
|
|
background: #111111;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
height: 500px;
|
|
border: 2px solid transparent;
|
|
background: linear-gradient(#000, #000) padding-box,
|
|
linear-gradient(118deg, #049ceb 0%, #00fff0 100%) border-box;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
:deep(.arco-image-error) {
|
|
background-color: transparent;
|
|
}
|
|
.arco-image {
|
|
transform: scale(1);
|
|
transition: all 1s;
|
|
}
|
|
&:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
|
|
.arco-image {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
|
|
&-image {
|
|
overflow: hidden;
|
|
height: 250px;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&-desc {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
line-height: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
&-money {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
&-progress {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
&-left {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
color: #ffffff;
|
|
span {
|
|
color: rgb(var(--primary-6));
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
font-size: 14px;
|
|
color: #999999;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
&-wrap {
|
|
padding: 24px 20px;
|
|
|
|
.arco-divider {
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
:deep(.arco-progress-line) {
|
|
&-bar {
|
|
background: linear-gradient(84deg, #049ceb 0%, #00fff0 100%);
|
|
}
|
|
&-text {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|