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.
140 lines
3.6 KiB
140 lines
3.6 KiB
<template>
|
|
<v-row>
|
|
<v-col v-for="(item, i) in items" :key="i" class="image-select" @click="changeSelected(item)" :class="`${size} pa-1`">
|
|
<div :class="{'active': isActive(item), 'item': true}">
|
|
<img class="thumbnail width-full" :src="item[itemSrc]"/>
|
|
<div class="name">
|
|
<div class="content">
|
|
<div class="Fa"> {{ item[itemText] }}</div>
|
|
<div class="En"> {{ item[itemTextEn] }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon-wrapper">
|
|
<v-icon class="WMi-ok" color="white"></v-icon>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
size: {default: "col-xl-2"},
|
|
items: {default: []},
|
|
itemValue: {default: 'id'},
|
|
itemText: {default: 'name'},
|
|
itemTextEn: {default: 'name_en'},
|
|
itemSrc: {default: 'src'},
|
|
value: {default: ''}
|
|
},
|
|
data: () => ({
|
|
thumbnail: "images/Business/Items/iPhoneX.jpg",
|
|
}),
|
|
computed: {
|
|
currentSelect: {
|
|
get() {
|
|
return this.value;
|
|
},
|
|
set(value) {
|
|
this.$emit('input', value);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
isActive(item) {
|
|
return item[this.itemValue] === this.value;
|
|
},
|
|
changeSelected(item) {
|
|
this.currentSelect = item[this.itemValue];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.no-en .content .En {
|
|
display: none;
|
|
}
|
|
.en-ltr-0 .image-select .item .name .En {
|
|
letter-spacing: 0px;
|
|
}
|
|
.image-select {
|
|
}
|
|
.image-select .item {
|
|
position: relative;
|
|
border: 1px solid transparent;
|
|
transition: 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-select .item .icon-wrapper {
|
|
display: none;
|
|
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: 100%;
|
|
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: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.image-select .item .name .En {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
letter-spacing: 5px;
|
|
text-transform: uppercase;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.image-select .item:hover, .image-select .item.active {
|
|
border: 1px solid #2f353b;
|
|
/*padding: 5px;*/
|
|
}
|
|
|
|
.image-select .item:hover .thumbnail, .image-select .item.active .thumbnail {
|
|
-webkit-filter: grayscale(0%);
|
|
}
|
|
|
|
.image-select .item:hover .name, .image-select .item.active .name {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|