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