<template>
|
<div class="service-detail-good-card">
|
<nut-card
|
:img-url="setOSSLink(imgUrl)"
|
:title="name ?? ''"
|
:price="toThousand(price ?? 0)"
|
class="service-good-card"
|
>
|
<template #prolist>
|
<div class="card-tag-list">
|
<span class="tag">{{ specName }}</span>
|
</div>
|
</template>
|
<template #origin>
|
<div></div>
|
</template>
|
<template #footer>
|
<div class="card-footer">x{{ specNumber }}</div>
|
</template>
|
</nut-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { toThousand, setOSSLink } from '@12333/utils';
|
|
defineOptions({
|
name: 'ServiceDetailGoodCard',
|
});
|
|
type Props = {
|
name?: string;
|
price?: number;
|
specName?: string;
|
specNumber?: number;
|
imgUrl?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.service-detail-good-card {
|
padding: 24px 32px;
|
margin-bottom: 24px;
|
background-color: #fff;
|
border-radius: 12px;
|
|
.card-tag-list {
|
margin: 6px 0 2px;
|
height: 30px;
|
overflow: hidden;
|
display: flex;
|
|
.tag {
|
padding: 0 10px;
|
border-radius: 2px;
|
font-size: 20px;
|
height: 30px;
|
line-height: 30px;
|
color: #999;
|
background-color: #f2f2f7;
|
margin-right: 10px;
|
}
|
}
|
|
.nut-card__right__shop {
|
/* flex: 1;
|
min-height: 0; */
|
}
|
|
.card-footer {
|
/* justify-content: flex-end; */
|
color: boleGetCssVar('text-color', 'primary');
|
}
|
}
|
</style>
|
