parent
bf69dc475d
commit
18de59e4b8
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<v-row>
|
||||||
|
<v-col class="image-select" :class="size" size="xl12 hidden-sm-and-down">
|
||||||
|
<div class="item" v-for="item in items">
|
||||||
|
<img class="thumbnail" style="width:100%;" :src="`/images/Global/Flags/${item.src}.png`"/>
|
||||||
|
<div class="name">
|
||||||
|
<div class="content">
|
||||||
|
<div class="Fa"> {{ item.name }} </div>
|
||||||
|
<div class="En"> {{ item.name_en }} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="icon-wrapper"><v-icon class="WMi-ok" style="color: #fff;"></v-icon></div>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
<v-col xl="4" offset-xl="8" class="hidden-md-and-up">
|
||||||
|
<v-card-text>
|
||||||
|
<v-autocomplete
|
||||||
|
:items="items"
|
||||||
|
:color="$_color('product')"
|
||||||
|
prepend-icon="WMi-globe"
|
||||||
|
append-icon="WMi-down-open"
|
||||||
|
label=" زبان ترجمه "
|
||||||
|
>
|
||||||
|
<template v-slot:selection="data">
|
||||||
|
<div class="color-square" :class="data.item.src"> </div> {{ data.item.name}}
|
||||||
|
</template>
|
||||||
|
<template v-slot:item="data">
|
||||||
|
<div class="color-square" :class="data.item.src "> </div> {{ data.item.name}}
|
||||||
|
</template>
|
||||||
|
</v-autocomplete>
|
||||||
|
</v-card-text>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
size: { default: "xl12" },
|
||||||
|
items: { default: []},
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
thumbnail:"images/Business/Items/iPhoneX.jpg",
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.image-select {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.image-select .thumbnail {
|
||||||
|
width: 12%;
|
||||||
|
}
|
||||||
|
.image-select .item {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: 0.2s;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 12%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.image-select .item .icon-wrapper {
|
||||||
|
display: none;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: var(--color-blue);
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.image-select .item.selected {
|
||||||
|
border: 1px solid var(--color-blue);
|
||||||
|
}
|
||||||
|
.image-select .item.selected .icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
.image-select .item .thumbnail {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.image-select .item .name {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
color: #fff;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: visibility 0s, opacity 0.2s linear;
|
||||||
|
background-color: rgba(0,0,0,0.8);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.image-select .item .name .Fa {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.image-select .item .name .En {
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-select .item:hover {
|
||||||
|
border: 1px solid #2f353b;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.image-select .item:hover .thumbnail {
|
||||||
|
-webkit-filter: grayscale(0%);
|
||||||
|
}
|
||||||
|
.image-select .item:hover .name {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
margin: 5px;
|
||||||
|
width: calc(100% - 10px);
|
||||||
|
height: calc(100% - 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="we-input-block" :class='direction'>
|
||||||
|
<v-text-field
|
||||||
|
:label="label"
|
||||||
|
:prepend-icon="`WMi-${icon}`"
|
||||||
|
color="cyan"
|
||||||
|
name="name"
|
||||||
|
class="pt-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
icon: { default: 'check' },
|
||||||
|
label: { default: " عنوان " },
|
||||||
|
value: { default: "" },
|
||||||
|
direction: { default: '' },
|
||||||
|
valueClass: { default: '' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.we-input-block {
|
||||||
|
text-align: right;
|
||||||
|
padding: 5px 10px 10px 10px;
|
||||||
|
margin: 0px 2px 10px;
|
||||||
|
border-right: 1px solid #dcdcdc;
|
||||||
|
}
|
||||||
|
.WM-Info-Block.LTR {
|
||||||
|
text-align: left;
|
||||||
|
direction: ltr;
|
||||||
|
font-family: "BYekan-Edited",'Montserrat-Regular' !important;
|
||||||
|
border-right: 0px;
|
||||||
|
border-left: 1px solid #dcdcdc;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,12 @@
|
|||||||
|
export default [
|
||||||
|
{ name: 'جهت بالا', icon:'up-open'},
|
||||||
|
{ name: 'جهت پایین', icon:'down-open'},
|
||||||
|
{ name: 'جهت چپ', icon:'left-open'},
|
||||||
|
{ name: 'جهت راست', icon:'right-open'},
|
||||||
|
{ name: 'کاربر', icon:'user'},
|
||||||
|
{ name: 'کاربران', icon:'users'},
|
||||||
|
{ name: 'هدیه', icon:'gift'},
|
||||||
|
{ name: 'ستاره', icon:'star'},
|
||||||
|
{ name: 'تلفن', icon:'phone'},
|
||||||
|
{ name: 'نامه', icon:'mail-alt'},
|
||||||
|
];
|
@ -0,0 +1,9 @@
|
|||||||
|
export default [
|
||||||
|
{ name: 'انگلیسی', name_en:'English', src:'English'},
|
||||||
|
{ name: 'عربی', name_en:'Arabic', src:'Arabic'},
|
||||||
|
{ name: 'آلمانی', name_en:'German', src:'German'},
|
||||||
|
{ name: 'چینی', name_en:'Chinese', src:'Chinese'},
|
||||||
|
{ name: 'فرانسوی', name_en:'France', src:'France'},
|
||||||
|
{ name: 'روسی', name_en:'Russian', src:'Russian'},
|
||||||
|
{ name: 'اسپانیایی', name_en:'Spanish', src:'Spanish'},
|
||||||
|
];
|
Loading…
Reference in new issue