parent
8bafbd42ce
commit
87af0e86b4
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div :class="`RTL text-lg-right section-title ${theme} ${(icon) ? 'icon-visible' : ''}`">
|
||||
<v-icon v-if="icon" :color="color">WMi-{{icon}}</v-icon>
|
||||
<div v-if="number" :class='"step En color-"+color+""' v-text="number"></div>
|
||||
<div class="Title">
|
||||
<div class="Fa" v-text="titleFa"></div>
|
||||
<div class="En" v-text="titleEn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "wm-section-title",
|
||||
props: {
|
||||
titleFa: { default: "عنوان بخش" },
|
||||
titleEn: { default: "Part Title" },
|
||||
color: { default: "cyan" },
|
||||
number: String,
|
||||
theme: String,
|
||||
icon: String,
|
||||
},
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* --------------------------------------------------------
|
||||
SectionTitle :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title .step {
|
||||
font-size: 50px;
|
||||
opacity: 0.2;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.section-title .v-icon {
|
||||
font-size: 50px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
.section-title .Title {
|
||||
float: right;
|
||||
margin-right: -30px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.section-title .Title .Fa {
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-title .Title .En {
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
|
||||
.section-title.icon-visible .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.section-title.icon-visible .Title {
|
||||
margin-right: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
/* --------------------------------------------------------
|
||||
SM Size :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.section-title.sm .step {
|
||||
font-size: 45px;
|
||||
line-height: 55px;
|
||||
}
|
||||
.section-title.sm .Title .Fa {
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.section-title.sm .Title .En {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
Loading…
Reference in new issue