|
|
@ -1,10 +1,16 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div :class="`name-block ${theme}`">
|
|
|
|
<div :class="`name-block ${theme}`">
|
|
|
|
<div v-if="number!=''" class="number En Bold"> {{ number }} </div>
|
|
|
|
<div v-if="number!=''" class="number En Bold"> {{ number }} </div>
|
|
|
|
|
|
|
|
<div v-if="colorBox" :class="`color-box ${colorBox}`"></div>
|
|
|
|
<div class="text">
|
|
|
|
<div class="text">
|
|
|
|
<div class="Fa"> {{ name_fa }} </div>
|
|
|
|
<div class="Fa"> {{ name_fa }} </div>
|
|
|
|
<div v-if="name_en != ''" class="En"> {{ name_en }} </div>
|
|
|
|
<!------------------------Conditional::Begin----------------------->
|
|
|
|
<div v-if="date != ''" class="Fa Thin date"> {{ date }} </div>
|
|
|
|
<div v-if="name_en" class="En"> {{ name_en }} </div>
|
|
|
|
|
|
|
|
<div v-if="date" class="Fa Thin date"> {{ date }} </div>
|
|
|
|
|
|
|
|
<div v-if="$slots.customText">
|
|
|
|
|
|
|
|
<slot name="customText"></slot>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!------------------------Conditional::End----------------------->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
@ -15,8 +21,9 @@
|
|
|
|
theme: { default: '' },
|
|
|
|
theme: { default: '' },
|
|
|
|
number: { default: '' },
|
|
|
|
number: { default: '' },
|
|
|
|
name_fa: { default: 'نام فارسی' },
|
|
|
|
name_fa: { default: 'نام فارسی' },
|
|
|
|
name_en: { default: "" },
|
|
|
|
name_en: String,
|
|
|
|
date: { default: "" },
|
|
|
|
date: String,
|
|
|
|
|
|
|
|
colorBox: String,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
@ -29,7 +36,8 @@
|
|
|
|
.name-block .En.number {
|
|
|
|
.name-block .En.number {
|
|
|
|
font-size: 55px;
|
|
|
|
font-size: 55px;
|
|
|
|
line-height: 55px;
|
|
|
|
line-height: 55px;
|
|
|
|
margin-left: 15px;
|
|
|
|
margin-left: 10px;
|
|
|
|
|
|
|
|
min-width: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.name-block .text {
|
|
|
|
.name-block .text {
|
|
|
|
text-align: right;
|
|
|
|
text-align: right;
|
|
|
@ -52,20 +60,23 @@
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/* Size MD */
|
|
|
|
/* Size MD */
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
.name-block.size-md {
|
|
|
|
.name-block.md {
|
|
|
|
text-align:right;
|
|
|
|
text-align:right;
|
|
|
|
padding: 0px 2px;
|
|
|
|
padding: 0px 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.name-block.size-md .Fa {
|
|
|
|
.name-block.md .Fa {
|
|
|
|
font-size: 18px;
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.name-block.size-md .En {
|
|
|
|
.name-block.md .En {
|
|
|
|
font-size: 10px;
|
|
|
|
font-size: 10px;
|
|
|
|
letter-spacing: 3px;
|
|
|
|
letter-spacing: 3px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
text-transform: uppercase;
|
|
|
|
color: #9a9a9a;
|
|
|
|
color: #5a5a5a;
|
|
|
|
margin-right: -3px;
|
|
|
|
margin-right: -3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.name-block.md .En.number {
|
|
|
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/* Size MD */
|
|
|
|
/* Size MD */
|
|
|
@ -103,6 +114,12 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.color-box {
|
|
|
|
|
|
|
|
width: 10px;
|
|
|
|
|
|
|
|
height: 35px;
|
|
|
|
|
|
|
|
margin: 0px 0px 5px 15px;
|
|
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/*----------------------------------------------------*/
|
|
|
|
/* Colors */
|
|
|
|
/* Colors */
|
|
|
|