_js.blade.php 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <style>
  2. /*图标展示*/
  3. .site-doc-icon{width: 1050px;background-color: #fff}
  4. .site-doc-icon li{cursor:pointer;display: inline-block; vertical-align: middle; width: 127px; height: 105px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
  5. .site-doc-anim li{height: auto;}
  6. .site-doc-icon li .layui-icon{display: inline-block; font-size: 36px;}
  7. .site-doc-icon li .doc-icon-name,
  8. .site-doc-icon li .doc-icon-code{color: #c2c2c2;}
  9. .site-doc-icon li .doc-icon-code xmp{margin:0}
  10. .site-doc-icon li .doc-icon-fontclass{height: 40px; line-height: 20px; padding: 0 5px; font-size: 13px; color: #333; }
  11. .site-doc-icon li:hover{background-color: #f2f2f2; color: #000;}
  12. </style>
  13. <script>
  14. //选择图标
  15. function chioceIcon(obj) {
  16. var icon_id = $(obj).data('id');
  17. $("input[name='icon_id']").val(icon_id);
  18. $("#icon_box").html('<i class="layui-icon '+$(obj).data('class')+'"></i> '+$(obj).data('name'));
  19. layer.closeAll();
  20. }
  21. //弹出图标
  22. function showIconsBox() {
  23. var index = layer.load();
  24. $.get("{{route('admin.icons')}}",function (res) {
  25. layer.close(index);
  26. if (res.code==0 && res.data.length>0){
  27. var html = '<ul class="site-doc-icon">';
  28. $.each(res.data,function (index,item) {
  29. html += '<li onclick="chioceIcon(this)" data-id="'+item.id+'" data-class="'+item.class+'" data-name="'+item.name+'" >';
  30. html += ' <i class="layui-icon '+item.class+'"></i>';
  31. html += ' <div class="doc-icon-name">'+item.name+'</div>';
  32. html += ' <div class="doc-icon-code"><xmp>'+item.unicode+'</xmp></div>';
  33. html += ' <div class="doc-icon-fontclass">'+item.class+'</div>';
  34. html += '</li>'
  35. });
  36. html += '</ul>';
  37. layer.open({
  38. type:1,
  39. title:'选择图标',
  40. area : ['1080px','600px'],
  41. content:html
  42. })
  43. }else {
  44. layer.msg(res.msg);
  45. }
  46. },'json')
  47. }
  48. </script>