bottom_nav_design.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. {extend name="base"/}
  2. {block name="resources"}
  3. <link rel="stylesheet" href="STATIC_EXT/color_picker/css/colorpicker.css" />
  4. <link rel="stylesheet" href="STATIC_EXT/diyview/css/bottom_nav_design.css" />
  5. <style>
  6. .ns-form {margin-top: 0; overflow: hidden;}
  7. </style>
  8. {/block}
  9. {block name="main"}
  10. <div id="bottomNav" class="layui-form ns-form">
  11. <div class="preview">
  12. <div class="preview-head">
  13. <span>底部导航</span>
  14. </div>
  15. <div class="preview-block">
  16. <ul v-show="data.list.length>0" v-bind:style="{ backgroundColor : data.backgroundColor }">
  17. <li v-for="(item,index) in data.list" v-on:mouseover="mouseOver(index)" v-on:mouseout="mouseOut()">
  18. <div v-show="data.type == 1 || data.type == 2">
  19. <img v-bind:src="(selected == index ? (item.selectedIconPath? changeImgUrl(item.selectedIconPath) : 'STATIC_EXT/diyview/img/crack_figure.png') : (item.iconPath? changeImgUrl(item.iconPath) : 'STATIC_EXT/diyview/img/crack_figure.png') )"/>
  20. </div>
  21. <span v-bind:style="{ fontSize : ( data.fontSize + 'px'), color : (selected == index ? data.textHoverColor : data.textColor ) }" v-show="data.type == 1 || data.type == 3">{{ item.text }}</span>
  22. </li>
  23. </ul>
  24. </div>
  25. <div class="custom-save">
  26. <button class="layui-btn save ns-bg-color">保存</button>
  27. </div>
  28. </div>
  29. <div class="edit-attribute">
  30. <bottom-menu></bottom-menu>
  31. </div>
  32. </div>
  33. {if condition="$bottom_nav_info"}
  34. <input type="hidden" id="info" value='{$bottom_nav_info}' />
  35. {/if}
  36. {/block}
  37. {block name="script"}
  38. <script>
  39. var STATICIMG = 'STATIC_IMG';
  40. var link_url = 'admin/diy/link';
  41. {if condition="$bottom_nav_info"}
  42. var bottomNavInfo = JSON.parse($("#info").val().toString());
  43. {else/}
  44. var bottomNavInfo = null;
  45. {/if}
  46. </script>
  47. <script src="STATIC_JS/vue.js"></script>
  48. <script src="STATIC_EXT/color_picker/js/colorpicker.js"></script>
  49. <script src="STATIC_EXT/diyview/js/components.js"></script>
  50. <script src="STATIC_EXT/diyview/js/bottom_nav.js"></script>
  51. {/block}