69 lines
2.7 KiB
Vue
69 lines
2.7 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('input', index)" :for="'pos_' + index">
|
|
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
|
|
<img v-else style="width:100%"
|
|
:src="'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>
|
|
</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('input', 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: {},
|
|
props:['value'],
|
|
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> |