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.
74 lines
1.9 KiB
74 lines
1.9 KiB
<template>
|
|
<div class="SectionTitle WM-Width-100">
|
|
<div class="TitleFa Fa Bold WM-Align-R" :class="TextFaColor" v-text="TitleFa"></div>
|
|
<div class="TitleEn En WM-Flex">
|
|
<span :class="[color,TextColor]" v-text="TitleEn"></span>
|
|
<div class="Line">
|
|
<div class="inner" :class="color"></div>
|
|
</div>
|
|
</div>
|
|
<we-hint-text v-if="hintDesc != ''"
|
|
class="mt-1"
|
|
:icon="hintIcon"
|
|
:theme="hintClass"
|
|
:title="hintTitle"
|
|
:text="hintDesc"
|
|
text-color="black">
|
|
</we-hint-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "wm-part-title",
|
|
props: {
|
|
TitleFa: { default: "عنوان بخش" },
|
|
TitleEn: { default: "Part Title" },
|
|
color: { default: "black" },
|
|
TextColor: { default: "white--text" },
|
|
TextFaColor: { default: "black--text" },
|
|
hintClass: { default: "grey lighten-3 inline XS" },
|
|
hintTitle: { default: "" },
|
|
hintDesc: { default: "" },
|
|
hintIcon: { default: "info" }
|
|
},
|
|
data: function () {
|
|
return {}
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/* --------------------------------------------------------
|
|
SectionTitle :: Begin
|
|
-------------------------------------------------------- */
|
|
|
|
.SectionTitle .TitleFa {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.SectionTitle .TitleEn {
|
|
span {
|
|
color: #fff;
|
|
padding: 2px 20px 2px 25px;
|
|
border-radius: 0.2em;
|
|
letter-spacing: 0.5em;
|
|
line-height: 18px;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
.Line {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
.inner {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: calc(100% - 1em);
|
|
left: 0;
|
|
height: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|