parent
6899adfbfa
commit
c019056c34
Binary file not shown.
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,57 @@
|
|||||||
|
<template>
|
||||||
|
<v-col :class='"col-xl-"+colSize+" lg12 md12 sm12 xs12 RTL text-lg-right WM-Subtitle"'>
|
||||||
|
<div :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>
|
||||||
|
</v-col>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "wm-section-title",
|
||||||
|
props: {
|
||||||
|
colSize: { default: "2" },
|
||||||
|
titleFa: { default: "عنوان بخش" },
|
||||||
|
titleEn: { default: "Part Title" },
|
||||||
|
color: { default: "cyan" },
|
||||||
|
number: { default: "01" },
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* --------------------------------------------------------
|
||||||
|
SectionTitle :: Begin
|
||||||
|
-------------------------------------------------------- */
|
||||||
|
|
||||||
|
.WM-Subtitle .Step {
|
||||||
|
font-size: 50px;
|
||||||
|
opacity: 0.2;
|
||||||
|
float: right;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WM-Subtitle .Title {
|
||||||
|
float: right;
|
||||||
|
margin-right: -30px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WM-Subtitle .Title .FA {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WM-Subtitle .Title .EN {
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: 'Montserrat-Regular', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,162 @@
|
|||||||
|
<template>
|
||||||
|
<v-row class="radio-group">
|
||||||
|
<v-col v-for="(item, index) in items" :key="index" :xl="item.size" class="pt-0" @click="changeSelected($event, item || {})">
|
||||||
|
<div :class="{'active':item.id == currentSelect, [item.theme]: true, ['bubble']: true}">
|
||||||
|
<div class="body">
|
||||||
|
<div class="icon">
|
||||||
|
<v-icon>WMi-{{ item.icon }}</v-icon>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="Fa"> {{ item.title_fa }} </div>
|
||||||
|
<div v-if="item.title_en" class="En"> {{ item.title_en }} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer text-center mt-2" v-if="item.desc" >
|
||||||
|
{{ item.desc }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
items: {},
|
||||||
|
initialSelect: {default: 1},
|
||||||
|
name: {default: 'default_name'},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentSelect: this.initialSelect,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeSelected($event, item) {
|
||||||
|
this.currentSelect = item.id;
|
||||||
|
this.$emit('changeState', {'name':this.name,'value':item.value})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.radio-group {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.bubble {
|
||||||
|
width: 100%;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px;
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: ease all 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
.bubble .body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bubble.text-left .body {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
.bubble:hover, .bubble.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.bubble .v-icon {
|
||||||
|
font-size: 50px !important;
|
||||||
|
line-height: 50px;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble.right {
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
}
|
||||||
|
.bubble.left {
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
}
|
||||||
|
.bubble.text-right .body {
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.bubble.text-left .body {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.bubble .body .text {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
//------------------------Theme Colors
|
||||||
|
@import '../../scss/_vars.scss';
|
||||||
|
@each $Color,
|
||||||
|
$Value in $colors {
|
||||||
|
.bubble.theme-#{$Color} {
|
||||||
|
border-color: $Value;
|
||||||
|
background-color: #ffe5e9;
|
||||||
|
color: $Value;
|
||||||
|
}
|
||||||
|
.bubble.theme-#{$Color} .v-icon {
|
||||||
|
color: $Value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@each $Color,
|
||||||
|
$Value in $backgrounds {
|
||||||
|
.bubble.theme-#{$Color} {
|
||||||
|
background-color: $Value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble .En {
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-right: -5px;
|
||||||
|
}
|
||||||
|
.bubble .Fa {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble .footer {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #676767;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//------------------------Farsi Title Only
|
||||||
|
.bubble.fa-only {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.bubble.fa-only .v-icon {
|
||||||
|
font-size: 20px !important;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.bubble.fa-only .Fa {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
.bubble.fa-only.right {
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
}
|
||||||
|
.bubble.fa-only.left {
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//-----------------------------------Shadow hover
|
||||||
|
.radio-group.shadowed .bubble.theme-black:hover, .radio-group.shadowed .bubble.theme-black.active {
|
||||||
|
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.radio-group.shadowed .bubble.theme-red:hover, .radio-group.shadowed .bubble.theme-red.active {
|
||||||
|
box-shadow: 0 10px 20px 0 rgba(238, 53, 82, 0.2);
|
||||||
|
}
|
||||||
|
.radio-group.shadowed .bubble.theme-cyan:hover, .radio-group.shadowed .bubble.theme-cyan.active {
|
||||||
|
box-shadow: 0 10px 20px 0 rgba(57, 197, 210, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
Binary file not shown.
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -1,18 +1,74 @@
|
|||||||
export default {
|
export default {
|
||||||
|
// --------------------------
|
||||||
|
// Basic Colors
|
||||||
|
// --------------------------
|
||||||
|
red:'red',
|
||||||
|
purple:'purple',
|
||||||
|
cyan:'cyan',
|
||||||
|
orange:'orange',
|
||||||
|
black:'black',
|
||||||
|
blue:'blue',
|
||||||
|
gold:'gold',
|
||||||
|
yellow:'yellow',
|
||||||
|
default:"black",
|
||||||
|
help:"blue",
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// Basic Service
|
||||||
|
// --------------------------
|
||||||
|
sms:"orange",
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// CRM
|
||||||
|
// --------------------------
|
||||||
task: 'purple',
|
task: 'purple',
|
||||||
client: 'cyan',
|
client: 'cyan',
|
||||||
portfolio: 'brown',
|
|
||||||
|
// --------------------------
|
||||||
|
// Blog
|
||||||
|
// --------------------------
|
||||||
blog_news : 'orange',
|
blog_news : 'orange',
|
||||||
blog_article : 'black',
|
blog_article : 'black',
|
||||||
gallery : 'black',
|
|
||||||
|
// --------------------------
|
||||||
|
// Products
|
||||||
|
// --------------------------
|
||||||
product : 'cyan',
|
product : 'cyan',
|
||||||
service : 'red',
|
|
||||||
translation : 'blue',
|
translation : 'blue',
|
||||||
brand : 'purple',
|
|
||||||
pricing_method: 'purple',
|
pricing_method: 'purple',
|
||||||
product_option: 'gold',
|
product_option: 'gold',
|
||||||
product_variation:'yellow',
|
product_variation:'yellow',
|
||||||
stock_incoming:'cyan',
|
brand : 'purple',
|
||||||
stock_outgoing:'red',
|
|
||||||
default:"black",
|
// --------------------------
|
||||||
|
// Service
|
||||||
|
// --------------------------
|
||||||
|
service : 'red',
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// Store
|
||||||
|
// --------------------------
|
||||||
|
store:'black',
|
||||||
|
store_product:'red',
|
||||||
|
store_service:'orange',
|
||||||
|
store_order:'cyan',
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// WMS
|
||||||
|
// --------------------------
|
||||||
|
wms_incoming:'cyan',
|
||||||
|
wms_outgoing:'red',
|
||||||
|
wms:'black',
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// Portfolios
|
||||||
|
// --------------------------
|
||||||
|
portfolio: 'brown',
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// Gallery & File Handler
|
||||||
|
// --------------------------
|
||||||
|
gallery : 'black',
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in new issue