71 lines
1.2 KiB
Vue
71 lines
1.2 KiB
Vue
<template>
|
|
<div class="data-list-item">
|
|
<h3>{{ nick }}</h3>
|
|
<div class="data-list-item-content">
|
|
<dl>
|
|
<dt>总消费</dt>
|
|
<dd>{{ userTotalPay }}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>总产出</dt>
|
|
<dd>{{ totalPlatformValue }}</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>爆率</dt>
|
|
<dd>{{ rate }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DataListItem",
|
|
props: {
|
|
nick: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
userTotalPay: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
totalPlatformValue: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
rate: {
|
|
type: [Number, String],
|
|
default: 0
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.data-list-item {
|
|
& > h3 {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
line-height: 60px;
|
|
}
|
|
&-content {
|
|
display: flex;
|
|
margin-top: 15px;
|
|
& > dl {
|
|
flex: 1;
|
|
text-align: center;
|
|
& > dt {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
line-height: 60px;
|
|
}
|
|
& > dd {
|
|
font-size: 26px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|