图片模块
This commit is contained in:
parent
cf035f824e
commit
b01c12479b
|
|
@ -0,0 +1,44 @@
|
||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Render.php
|
||||||
|
*
|
||||||
|
* @copyright 2022 opencart.cn - All Rights Reserved
|
||||||
|
* @link http://www.guangdawangluo.com
|
||||||
|
* @author Edward Yang <yangjin@opencart.cn>
|
||||||
|
* @created 2022-07-08 17:09:15
|
||||||
|
* @modified 2022-07-08 17:09:15
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace Beike\Admin\View\DesignBuilders;
|
||||||
|
|
||||||
|
use Illuminate\View\Component;
|
||||||
|
use Illuminate\Contracts\View\View;
|
||||||
|
|
||||||
|
class Image401 extends Component
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Create a new component instance.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
public function __construct()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the view / contents that represent the component.
|
||||||
|
*
|
||||||
|
* @return View
|
||||||
|
*/
|
||||||
|
public function render(): View
|
||||||
|
{
|
||||||
|
$data['register'] = [
|
||||||
|
'code' => 'image_401',
|
||||||
|
'sort' => 0,
|
||||||
|
'name' => '一行四图-pro',
|
||||||
|
'icon' => '',
|
||||||
|
];
|
||||||
|
|
||||||
|
return view('admin::pages.design.module.image_401', $data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template id="module-editor-image-401-template">
|
||||||
|
<div class="image-edit-wrapper">
|
||||||
|
<div class="module-editor-title">{{ modules_content }}</div>
|
||||||
|
<div class="module-edit-group">
|
||||||
|
<div class="module-edit-title">{{ modules_select_image }}</div>
|
||||||
|
<div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
|
||||||
|
<div class="selector-head" @click="itemShow(index)">
|
||||||
|
<div class="left">
|
||||||
|
|
||||||
|
<img :src="thumbnail(item.image[{{ current_language_code() }}], 40, 40)" class="img-responsive">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right"><i :class="'el-icon-arrow-'+(item.show ? 'up' : 'down')"></i></div>
|
||||||
|
</div>
|
||||||
|
<div :class="'pb-images-list ' + (item.show ? 'active' : '')">
|
||||||
|
<div class="pb-images-top">
|
||||||
|
<pb-image-selector v-model="item.image"></pb-image-selector>
|
||||||
|
<div class="tag">{{ text_suggested_size }} 1060 x 380</div>
|
||||||
|
</div>
|
||||||
|
<link-selector v-model="item.link"></link-selector>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
setTimeout(() => {
|
||||||
|
app.source.modules.push(@json($register))
|
||||||
|
}, 100)
|
||||||
|
Vue.component('module-editor-image-401', {
|
||||||
|
delimiters: ['${', '}'],
|
||||||
|
|
||||||
|
template: '#module-editor-image-401-template',
|
||||||
|
|
||||||
|
props: ['module'],
|
||||||
|
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
module: {
|
||||||
|
handler: function (val) {
|
||||||
|
this.$emit('on-changed', val);
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created: function () {
|
||||||
|
//
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
itemShow(index) {
|
||||||
|
this.module.images.find((e, key) => {if (index != key) return e.show = false});
|
||||||
|
this.module.images[index].show = !this.module.images[index].show;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<div class="column-item" id="{{ $module_id }}">
|
||||||
|
<div class="container">
|
||||||
|
<div class="module-transverse-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 hidden-sm col-xs-12">
|
||||||
|
<a href="">
|
||||||
|
<img src="" class="img-responsive">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 hidden-xs col-sm-6 right">
|
||||||
|
<a href="">
|
||||||
|
<img src="" class="img-responsive">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-3 hidden-xs col-sm-6 right">
|
||||||
|
<a href="">
|
||||||
|
<img src="" class="img-responsive">
|
||||||
|
</a>
|
||||||
|
<a href="">
|
||||||
|
<img src="" class="img-responsive">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue