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.
126 lines
3.6 KiB
126 lines
3.6 KiB
<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>
|