100 lines
4.5 KiB
HTML
100 lines
4.5 KiB
HTML
<nc-component :data="data[index]" class="image-ads">
|
||
|
||
<!-- 预览 -->
|
||
<template slot="preview">
|
||
|
||
<template v-if="nc.lazyLoad">
|
||
<image-ads-carouse></image-ads-carouse>
|
||
<div class="image-ads-warp" :style="{
|
||
backgroundColor: nc.componentBgColor,
|
||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0)
|
||
}">
|
||
<div class="image-ads-content">
|
||
<template v-for="(item,index) in nc.list">
|
||
<div v-if="item.imageUrl" :style="{backgroundImage: 'url('+ changeImgUrl(item.imageUrl) +')',height: nc.tempData.swiperHeight + 'px'}" :class="['image-ads-item',{'layui-hide': nc.tempData.carouselIndex != index}]"></div>
|
||
<div v-else :style="{backgroundImage: 'url(' + changeImgUrl('public/static/img/default_img/figure.png') + ')',height: nc.tempData.swiperHeight + 'px'}" :class="['image-ads-item',{'layui-hide': nc.tempData.carouselIndex != index}]"></div>
|
||
</template>
|
||
</div>
|
||
<div class="carousel-btn" v-if="nc.list.length > 1">
|
||
<div class="arrows">
|
||
<i class="iconfont iconback_light" @click="nc.tempData.carouselIndex = (nc.tempData.carouselIndex ? nc.tempData.carouselIndex-1 : nc.tempData.carouselIndex)"></i>
|
||
<i class="iconfont iconyoujiantou" @click="nc.tempData.carouselIndex = [nc.tempData.carouselIndex < nc.list.length-1 ? +nc.tempData.carouselIndex+1 : nc.list.length-1]"></i>
|
||
</div>
|
||
<div :class="['dot-wrap',nc.indicatorLocation,nc.carouselStyle]">
|
||
<i v-for="(numItem,numIndex) in nc.list.length" :class="{'active': nc.tempData.carouselIndex == numIndex}" :style="[nc.tempData.carouselIndex == numIndex && {'backgroundColor': nc.indicatorColor}]" @click="nc.tempData.carouselIndex = numIndex"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</template>
|
||
|
||
<!-- 内容编辑 -->
|
||
<template slot="edit-content">
|
||
<template v-if="nc.lazyLoad">
|
||
<div class="template-edit-title">
|
||
<h3>图片设置</h3>
|
||
<image-ads-list></image-ads-list>
|
||
<div class="image-ad-list">
|
||
<p class="word-aux">建议上传尺寸相同的图片，推荐尺寸750*350</p>
|
||
<ul class="navigation-set-list">
|
||
<li v-for="(item,index) in nc.list" :data-sort="index" :data-index="index" :key="item.id">
|
||
<img-upload :data="{ data: item}" data-disabled="1"></img-upload>
|
||
<div class="content-block">
|
||
<nc-link :data="{ field : item.link }"></nc-link>
|
||
<div class="selected-style" :class="{'text-color' : item.heatMapData }" @click="nc.tempData.methods.setHeatMap(index)">
|
||
<span>热区设置</span>
|
||
<i class="layui-icon layui-icon-right"></i>
|
||
</div>
|
||
</div>
|
||
<div class="error-msg"></div>
|
||
<i class="del" @click="nc.tempData.methods.deleteItem(index)" data-disabled="1">x</i>
|
||
<div class="iconfont icontuodong"></div>
|
||
</li>
|
||
</ul>
|
||
<div class="add-item text-color" v-if="nc.list.length < 5" @click="nc.tempData.methods.addItem()">
|
||
<p>
|
||
<i>+</i>
|
||
<span>添加一个图片广告</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 样式编辑 -->
|
||
<template slot="edit-style">
|
||
<template v-if="nc.lazyLoad">
|
||
<div class="template-edit-title" v-if="nc.list.length > 1">
|
||
<h3>指示器设置</h3>
|
||
<div class="layui-form-item icon-radio">
|
||
<label class="layui-form-label sm banner-sm">样式</label>
|
||
<div class="layui-input-block">
|
||
<span v-for="(item) in nc.tempData.imgAdsCarousel" :class="[item.value == nc.carouselStyle ? '' : 'layui-hide']">{{item.text}}</span>
|
||
<ul class="icon-wrap">
|
||
<li v-for="(item) in nc.tempData.imgAdsCarousel" :class="[item.value == nc.carouselStyle ? 'text-color border-color' : '']" @click="nc.carouselStyle=item.value">
|
||
<i class="iconfont" :class="[{'text-color': item.value == nc.carouselStyle}, item.src]"></i>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<text-align :data="{ field : 'indicatorLocation', 'label' : '位置' }"></text-align>
|
||
<color :data="{ field : 'indicatorColor', 'label' : '颜色' }"></color>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
|
||
<!-- 资源 -->
|
||
<template slot="resource">
|
||
<js>
|
||
var imageAdsResourcePath = "{$resource_path}";
|
||
</js>
|
||
<css src="{$resource_path}/css/design.css"></css>
|
||
<js src="{$resource_path}/js/design.js"></js>
|
||
</template>
|
||
|
||
</nc-component> |