93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row col-md-12 pagebuilder_section">
|
|
<div
|
|
v-for="(item, index) in $pagebuilder.items"
|
|
:key="index"
|
|
class="col-md-2"
|
|
>
|
|
<template v-if="!item.type || item.type != 'custom'">
|
|
<div class="my-check v2">
|
|
<label
|
|
@click="$emit('choose', index)"
|
|
:for="'pos_' + index"
|
|
>
|
|
<div
|
|
style="width: 100%"
|
|
v-if="item.svg"
|
|
v-html="item.svg"
|
|
></div>
|
|
|
|
<img
|
|
style="width: 100%"
|
|
v-else-if="item.image"
|
|
:src="item.image"
|
|
>
|
|
<img
|
|
v-else
|
|
style="width: 100%"
|
|
:src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'"
|
|
alt="1 kolumna"
|
|
/>
|
|
<span
|
|
style="cursor: pointer"
|
|
class="d-inline-block w-100 text-center mt-1 mb-1"
|
|
>{{ item.label }}</span
|
|
>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="col-md-12 text-center">
|
|
<h3>DESIGN SYSTEM</h3>
|
|
<div>
|
|
<div class="row col-md-12 pagebuilder_section">
|
|
<div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
|
|
<div class="form-check v2">
|
|
<input @input="event => { $emit('update:modelValue', index) }" type="radio" :id="'pos_' + index"
|
|
name="pos">
|
|
<label :for="'pos_' + index">
|
|
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
|
|
<img v-else style="width:100%"
|
|
:src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
|
|
alt="1 kolumna">
|
|
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
|
|
item.label
|
|
}}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
methods: {},
|
|
|
|
emits:['choose'],
|
|
data: function () {
|
|
return {
|
|
items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
|
|
}
|
|
},
|
|
mounted() {
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.my-check input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.my-check label {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|