design.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <nc-component v-bind:data="data[index]" class="component-presale">
  2. <!-- 预览 -->
  3. <template slot="preview">
  4. <div class="preview-box" v-bind:style="{ margin: nc.marginTop + 'px 15px 0' }">
  5. <template v-if="nc.style == 1">
  6. <div class="marketing-wrap marketing-wrap-1">
  7. <img v-if="nc.bgSelect == 'red'" src="{$resource_path}/presale/img/red.png" />
  8. <img v-if="nc.bgSelect == 'blue'" src="{$resource_path}/presale/img/blue.png" />
  9. <img v-if="nc.bgSelect == 'yellow'" src="{$resource_path}/presale/img/yellow.png" />
  10. <img v-if="nc.bgSelect == 'violet'" src="{$resource_path}/presale/img/violet.png" />
  11. <div class="marketing-box">
  12. <template v-if="nc.lazyLoad">
  13. <presale-top-content></presale-top-content>
  14. </template>
  15. <div class="list-wrap">
  16. <div class="item">
  17. <div class="img-wrap">
  18. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  19. </div>
  20. <div class="content">
  21. <div class="content-desc">商品名称</div>
  22. <!--<div class="content-num">¥15抵¥30</div>-->
  23. <div class="content-price">
  24. ¥<span>99.00</span>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="item">
  29. <div class="img-wrap">
  30. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  31. </div>
  32. <div class="content">
  33. <div class="content-desc">商品名称</div>
  34. <!--<div class="content-num">¥15抵¥30</div>-->
  35. <div class="content-price">
  36. ¥<span>99.00</span>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="item">
  41. <div class="img-wrap">
  42. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  43. </div>
  44. <div class="content">
  45. <div class="content-desc">商品名称</div>
  46. <!--<div class="content-num">¥15抵¥30</div>-->
  47. <div class="content-price">
  48. ¥<span>99.00</span>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <template v-if="nc.style == 2 || nc.style == 3">
  57. <div class="marketing-wrap marketing-wrap-two">
  58. <div class="marketing-box">
  59. <template v-if="nc.lazyLoad">
  60. <presale-top-content></presale-top-content>
  61. </template>
  62. <div class="list-wrap">
  63. <div class="item">
  64. <div class="img-wrap">
  65. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  66. </div>
  67. <div class="content">
  68. <div class="content-desc">商品名称</div>
  69. <!--<div class="content-num">¥15抵¥30</div>-->
  70. <div class="content-price">
  71. ¥<span>99.00</span>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="item">
  76. <div class="img-wrap">
  77. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  78. </div>
  79. <div class="content">
  80. <div class="content-desc">商品名称</div>
  81. <!--<div class="content-num">¥15抵¥30</div>-->
  82. <div class="content-price">
  83. ¥<span>99.00</span>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="item">
  88. <div class="img-wrap">
  89. <img src="STATIC_EXT/diyview/img/crack_figure.png" />
  90. </div>
  91. <div class="content">
  92. <div class="content-desc">商品名称</div>
  93. <!--<div class="content-num">¥15抵¥30</div>-->
  94. <div class="content-price">
  95. ¥<span>99.00</span>
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </template>
  103. </div>
  104. </template>
  105. <!-- 编辑 -->
  106. <template slot="edit">
  107. <template v-if="nc.lazyLoad">
  108. <presale-list></presale-list>
  109. <presale-style></presale-style>
  110. </template>
  111. <!-- <color v-bind:data="{ field : 'backgroundColor', 'label' : '背景颜色' }"></color> -->
  112. <template v-if="nc.lazyLoad">
  113. <presale-color v-if="nc.style == 1"></presale-color>
  114. <change-type></change-type>
  115. </template>
  116. <div class="template-edit-title">
  117. <h3>顶部标题设置</h3>
  118. <i class="layui-icon layui-icon-down" onclick="closeBox(this)"></i>
  119. </div>
  120. <template v-if="nc.lazyLoad">
  121. <presale-top-list></presale-top-list>
  122. </template>
  123. <div class="template-edit-title">
  124. <h3>其他设置</h3>
  125. <i class="layui-icon layui-icon-down" onclick="closeBox(this)"></i>
  126. </div>
  127. <template v-if="nc.lazyLoad">
  128. <slide v-bind:data="{ field : 'marginTop', label : '页面间距' }"></slide>
  129. </template>
  130. <!-- 弹框 -->
  131. <div class="presale-list-style">
  132. <div class="style-list-presale layui-form">
  133. <div class="style-list-con-presale">
  134. <div class="style-li-presale" v-bind:class="{'selected ns-border-color': nc.style == 1}">
  135. <img src="{$resource_path}/presale/img/presale_style_1.png" />
  136. <span class="layui-hide">风格一</span>
  137. </div>
  138. <div class="style-li-presale" v-bind:class="{'selected ns-border-color': nc.style == 2}">
  139. <img src="{$resource_path}/presale/img/presale_style_2.png" />
  140. <span class="layui-hide">风格二</span>
  141. </div>
  142. <div class="style-li-presale" v-bind:class="{'selected ns-border-color': nc.style == 3}">
  143. <img src="{$resource_path}/presale/img/presale_style_3.png" />
  144. <span class="layui-hide">风格三</span>
  145. </div>
  146. </div>
  147. <input type="hidden" name="style">
  148. <input type="hidden" name="style_name" />
  149. </div>
  150. </div>
  151. </template>
  152. <!-- 资源 -->
  153. <template slot="resource">
  154. <js>
  155. var presaleResourcePath = "{$resource_path}";
  156. </js>
  157. <css src="{$resource_path}/presale/css/design.css"></css>
  158. <js src="{$resource_path}/presale/js/design.js"></js>
  159. </template>
  160. </nc-component>