<template>
|
<div class="standard-service-card-wrapper">
|
<SquareView>
|
<img :src="setOSSLink(file)" class="standard-service-card-cover" />
|
</SquareView>
|
<div class="standard-service-card-content">
|
<div class="standard-service-card-content-title">{{ name }}</div>
|
<div class="standard-service-card-content-price-wrapper">
|
<div class="standard-service-card-content-price">{{ minSpecPrice ?? 0 }}</div>
|
<div class="standard-service-card-content-suffix">起</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { setOSSLink } from '@12333/utils';
|
import { SquareView } from '@12333/components';
|
|
defineOptions({
|
name: 'StandardServiceCard',
|
});
|
|
type Props = {
|
id?: string;
|
file?: string;
|
name?: string;
|
/** 最低规格价格 */
|
minSpecPrice?: number;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.standard-service-card-wrapper {
|
background-color: #fff;
|
border-radius: 12px;
|
|
.standard-service-card-cover {
|
height: 100%;
|
border-radius: 12px;
|
object-fit: cover;
|
width: 100%;
|
}
|
|
.standard-service-card-content {
|
padding: 16px;
|
padding-bottom: 24px;
|
|
.standard-service-card-content-title {
|
font-weight: 600;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
margin-bottom: 24px;
|
}
|
|
.standard-service-card-content-price-wrapper {
|
display: flex;
|
align-items: flex-end;
|
|
.standard-service-card-content-price {
|
font-weight: 600;
|
font-size: 32px;
|
color: #ff3949;
|
margin-right: 8px;
|
}
|
|
.standard-service-card-content-suffix {
|
font-weight: 400;
|
font-size: 24px;
|
color: #ff3949;
|
}
|
}
|
}
|
}
|
</style>
|
