You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
willaengine/resources/js/Global/components/Blocks/Rate.vue

60 lines
1.7 KiB

<template>
<div :class="`rates ${theme} LTR`">
<v-icon color="yellow"> WMi-star</v-icon>
<v-icon color="yellow"> WMi-star</v-icon>
<v-icon color="yellow"> WMi-star</v-icon>
<v-icon color="yellow"> WMi-star</v-icon>
<v-icon color="yellow"> WMi-star-half-alt</v-icon>
<div class="number En Bold yellow--text"> {{ rate }}% </div>
<div class="total Fa Thin"> بر اساس <span class="En Bold"> {{ total_rates }} </span> بررسی </div>
</div>
</template>
<script>
export default {
props: {
theme: { default: '' },
rate: { default: '' },
total_rates: { default: 'آیتم' },
},
};
</script>
<style lang="scss" scoped>
.rates {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 3px;
}
.rates .number {
margin-left: 5px;
margin-top: 3px;
font-size: 18px;
line-height: 26px;
}
.rates .total {
color: #777;
font-size: 14px;
margin-left: 15px;
border-left: 1px solid #000;
padding-left: 15px;
}
/*----------------------------------------------------*/
/* Colors */
/*----------------------------------------------------*/
@import "resources/js/Global/scss/_vars.scss";
@each $color,
$value in $colors {
.we-number.bg-#{$color} {
background-color: $value;
}
}
@each $color,
$value in $colors {
.we-number.theme-#{$color} {
color: $value;
}
}
</style>