| | |
| | | <template> |
| | | <div class="income-detail-list-item"> |
| | | <div class="income-detail-list-item" :class="{ hasPaddingH }"> |
| | | <div class="income-detail-list-item-inner" :class="{ 'border-none': !showBorder }"> |
| | | <slot name="title"> |
| | | <div class="income-detail-list-item-title"> |
| | | <div class="income-detail-list-item-title-text">{{ title }}</div> |
| | | <div class="income-detail-list-item-title-value">{{ funds }}</div> |
| | | <div class="income-detail-list-item-title-value">{{ toThousand(funds) }}</div> |
| | | </div> |
| | | </slot> |
| | | <div class="income-detail-list-item-content"> |
| | | <div class="income-detail-list-item-content-item">{{ item }}</div> |
| | | <div class="income-detail-list-item-content-value" v-if="showValue">{{ value }}</div> |
| | | <!-- <div class="income-detail-list-item-content-value" v-if="showValue">{{ value }}</div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { toThousand } from '@12333/utils'; |
| | | |
| | | defineOptions({ |
| | | name: 'IncomeDetailListItem', |
| | | }); |
| | | |
| | | type Props = { |
| | | title?: string; |
| | | funds?: string; |
| | | funds?: number; |
| | | item?: string; |
| | | value?: string; |
| | | showValue?: boolean; |
| | | showBorder?: boolean; |
| | | hasPaddingH?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | showValue: true, |
| | | showBorder: true, |
| | | hasPaddingH: false, |
| | | }); |
| | | </script> |
| | | |
| | |
| | | @import '@/styles/common.scss'; |
| | | |
| | | .income-detail-list-item { |
| | | padding: 0 boleGetCssVar('size', 'body-padding-h'); |
| | | &.hasPaddingH { |
| | | padding: 0 boleGetCssVar('size', 'body-padding-h'); |
| | | } |
| | | |
| | | .income-detail-list-item-inner { |
| | | padding: 24px 0 18px; |