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.
73 lines
1.6 KiB
73 lines
1.6 KiB
4 years ago
|
<template>
|
||
|
|
<v-col :class="`section-title ${theme} `">
|
||
|
|
<div class="content">
|
||
|
|
<div class='step En Bold' v-text="number"></div>
|
||
|
|
<div class="title">
|
||
|
|
<div class="Fa" v-text="titleFa"></div>
|
||
|
|
<div class="En" v-text="titleEn"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</v-col>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "section-title-absolute",
|
||
|
|
props: {
|
||
|
|
theme: { default: "" },
|
||
|
|
titleFa: { default: "عنوان بخش" },
|
||
|
|
titleEn: { default: "Part Title" },
|
||
|
|
color: { default: "cyan" },
|
||
|
|
number: { default: "01" },
|
||
|
|
},
|
||
|
|
data: function () {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
/* --------------------------------------------------------
|
||
|
|
SectionTitle :: Begin
|
||
|
|
-------------------------------------------------------- */
|
||
|
|
.section-title {
|
||
|
|
padding: 10px;
|
||
|
|
margin: -10px -10px -10px -10px;
|
||
|
|
background-color: #fff9f8;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 80px;
|
||
|
|
}
|
||
|
|
.section-title .content {
|
||
|
|
writing-mode: tb-rl;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.section-title .step {
|
||
|
|
font-size: 50px;
|
||
|
|
float: right;
|
||
|
|
line-height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title .title {
|
||
|
|
float: right;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title .title .Fa {
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 1.2;
|
||
|
|
margin-right: 5px;
|
||
|
|
margin-left: -5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title .title .En {
|
||
|
|
font-size: 12px;
|
||
|
|
letter-spacing: 5px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|