53 lines
1 KiB
Vue
53 lines
1 KiB
Vue
<template>
|
|
<div class="mb-4">
|
|
<div>
|
|
<strong>
|
|
{{ headerText }}
|
|
</strong>
|
|
</div>
|
|
<div class="price" :class="markAsHigher ? 'red' : 'green'">
|
|
{{ priceText }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "price-display",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
price: Number,
|
|
markAsHigher: Boolean,
|
|
},
|
|
methods: {},
|
|
computed: {
|
|
headerText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "Text");
|
|
},
|
|
priceText() {
|
|
const toFixed = this.price.toFixed(2);
|
|
return `$${toFixed}`;
|
|
},
|
|
},
|
|
components: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.price {
|
|
font-size: 1.5em;
|
|
display: inline-block;
|
|
|
|
&.green {
|
|
color: $green-700;
|
|
border-bottom: 3px solid $red-800;
|
|
}
|
|
&.red {
|
|
color: $red-700;
|
|
border-bottom: 3px solid $red-800;
|
|
}
|
|
}
|
|
</style>
|