willaengine/resources/js/Global/components/Blocks/Price.vue

<template>
    <div :class="`we-price ${theme} ${(price == 0) ? 'zero-label' : ''}`">
        <div v-if="original_price && original_price != 0" class="discount">
            <div class="number-original En Bold" > {{ Intl.NumberFormat().format(Number(original_price))  }} </div>
            <div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
        </div>
        <div v-if="top_label" class="label top Fa" v-html="top_label"></div>
        <!----------------------------Main Value------------------------->
        <div v-if="(price != 0 || !zeroLabel)" class="number En Bold">
            <v-icon v-if="prepend_icon" class="prepend-icon">WMi-{{ prepend_icon}} </v-icon>
            {{ Intl.NumberFormat().format(price)  }}
            <v-icon v-if="append_icon" class="append-icon">WMi-{{ append_icon }} </v-icon>
        </div>
        <!----------------------------Main Value------------------------->
        <div v-else class="text--24 Fa Bold"> {{ zeroLabel }} </div>
        <div class="label Fa" v-html="label"></div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:                  { default: '' },
            original_price:         { default: 0 },
            price:                  { default: 1000 },
            label:                  { default: 'تومان' },
            zeroLabel:              String,
            top_label:              String,
            direction:              String,
            prepend_icon:           String,
            append_icon:            String,
        },
    };
</script>
<style lang="scss" scoped>

    .we-price {
        transition: 0.2s;
        border: 1px solid transparent;
        border-radius: 5px;
        text-align: center;
        padding: 5px 15px;
    }
    .we-price.left-align {
        text-align: left;
    }
    .we-price .number {
        font-size: 25px;
        line-height: 20px;
        direction: ltr;
    }
    .we-price .prepend-icon, .we-price .append-icon  {
        margin-right: -10px;
        margin-left: -10px;
        font-size: 18px;
    }

    .we-price .discount {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3px;
    }
    .we-price .discount .percent {
        background-color: var(--color-red);
        border-radius: 5px;
        border-top-left-radius: 0px;
        padding: 0px 5px 0px 2px;
        color: var(--color-white);
        font-size: 14px;
    }
    .we-price .discount .percent .v-icon {
        margin-top: -3px;
        margin-right: -5px;
        font-size: 12px;
    }
    .we-price .number-original {
        font-size: 12px;
        line-height: 10px;
        color: var(--color-red);
        text-decoration: line-through;
        text-align: right;
    }

    .we-price .label {
        font-size: 12px;
        opacity: 0.7;
        text-align: left;
    }
    .we-price .label.top {
        text-align: right;
    }

    /*----------------------------------------------------*/
    /*                Zero Label                          */
    /*----------------------------------------------------*/
    .we-price.zero-label .label {
        display: none;
    }
    .we-price.zero-label .number-original {
        text-decoration: none;
    }

    /*----------------------------------------------------*/
    /*                Misc                                */
    /*----------------------------------------------------*/
    .we-price.line-through .number {
        text-decoration: line-through;
    }
    .we-price.label-left {
        display: flex;
        align-items: baseline;
    }

    /*----------------------------------------------------*/
    /*                Lg Size                             */
    /*----------------------------------------------------*/
    .we-price.lg .number {
        font-size: 32px;
        line-height: 25px;
    }

    /*----------------------------------------------------*/
    /*                MD Size                             */
    /*----------------------------------------------------*/
    .we-price.md {
        transform: scale(0.8, 0.8);
    }



    /*----------------------------------------------------*/
    /*                SM Size                             */
    /*----------------------------------------------------*/
    .we-price.sm .number {
        font-size: 20px;
        line-height: 15px;
    }
    .we-price.sm .percent {
        display: none;
    }
    .we-price.sm .label {
        font-size: 11px;
        line-height: 10px;
        margin-top: 2px;
        display: none;
    }



    /*----------------------------------------------------*/
    /*                Colors                              */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .we-price.theme-#{$color} .discount .percent {
            background-color: $value;
        }
        .we-price.theme-#{$color} .number-original {
            color: $value;
        }
        .we-price.theme-#{$color}-full .number, .we-price.theme-#{$color}-full .label, .we-price.theme-#{$color}-full .prepend-icon, .we-price.theme-#{$color}-full .append-icon {
            color: $value;
        }
        .we-price.border-#{$color} {
            border: 1px solid $value;
        }
        .we-price.border-left-#{$color} {
            border-left: 3px solid $value;
            border-radius: 0px 5px 5px 0px;
        }
    }
    @each $backgroundColor,
    $value in $backgrounds {
        .we-price.bg-#{$backgroundColor} {
            background-color: $value;
        }
    }


</style>