design.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <nc-component :data="data[index]" class="hot-area">
  2. <!-- 预览 -->
  3. <template slot="preview">
  4. <template v-if="nc.lazyLoad">
  5. <hot-area-carouse></hot-area-carouse>
  6. <div class="hot-area-warp" :style="{
  7. backgroundColor: nc.componentBgColor,
  8. borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
  9. borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
  10. borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
  11. borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0)
  12. }">
  13. <div class="hot-area-content">
  14. <div v-if="nc.imageUrl" :style="{backgroundImage: 'url('+ changeImgUrl(nc.imageUrl) +')',height: nc.tempData.swiperHeight + 'px'}" class="hot-area-item"></div>
  15. <div v-else :style="{backgroundImage: 'url(' + changeImgUrl('public/static/img/default_img/figure.png') + ')',height: nc.tempData.swiperHeight + 'px'}" class="hot-area-item"></div>
  16. </div>
  17. </div>
  18. </template>
  19. </template>
  20. <!-- 内容编辑 -->
  21. <template slot="edit-content">
  22. <template v-if="nc.lazyLoad">
  23. <hot-area-list></hot-area-list>
  24. <div class="template-edit-title">
  25. <h3>图片设置</h3>
  26. <div class="hot-area-wrap">
  27. <p class="word-aux">推荐尺寸750*350</p>
  28. <img-upload :data="{ data: nc }" data-disabled="1"></img-upload>
  29. <div class="selected-style" :class="{'text-color' : nc.heatMapData }" @click="nc.tempData.methods.setHeatMap()">
  30. <span>热区设置</span>
  31. <i class="layui-icon layui-icon-right"></i>
  32. </div>
  33. <div class="error-msg"></div>
  34. </div>
  35. </div>
  36. </template>
  37. </template>
  38. <!-- 样式编辑 -->
  39. <template slot="edit-style">
  40. </template>
  41. <!-- 资源 -->
  42. <template slot="resource">
  43. <js>
  44. var hotAreaResourcePath = "{$resource_path}"; // http路径
  45. var hotAreaRelativePath = "{$relative_path}"; // 相对路径
  46. </js>
  47. <css src="{$resource_path}/css/design.css"></css>
  48. <js src="{$resource_path}/js/design.js"></js>
  49. </template>
  50. </nc-component>