base.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="renderer" content="webkit" />
  5. <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
  6. <title>安装程序 - NiuCloud-Admin</title>
  7. <link rel="icon" type="image/x-icon" href="INSTALL_IMG/shop_bitbug_favicon.ico" />
  8. <link rel="stylesheet" type="text/css" href="INSTALL_CSS/style.css" />
  9. <link rel="stylesheet" type="text/css" href="INSTALL_CSS/layui.css" />
  10. <link rel="stylesheet" type="text/css" href="INSTALL_CSS/common.css" />
  11. <script src="INSTALL_JS/jquery-3.1.1.js"></script>
  12. <script src="INSTALL_JS/layui.js"></script>
  13. <script>
  14. layui.use(['layer', 'upload', 'element'], function() {});
  15. </script>
  16. {block name="resources"}{/block}
  17. </head>
  18. <body>
  19. <div class="head-block">
  20. <div class="top">
  21. <div class="top-logo">
  22. <div class="top-logo-img">
  23. <img src="INSTALL_IMG/logo.jpg">
  24. </div>
  25. <span class="bar">|</span>
  26. <span class="logo-text">快速开发通用管理后台框架</span>
  27. </div>
  28. <div class="top-sub" style="flex:1;"></div>
  29. <ul class="top-link">
  30. <li><a href="https://www.niucloud.com/" target="_blank">官方网站</a></li>
  31. <li><a href="https://bbs.niucloud.com/" target="_blank">技术论坛</a></li>
  32. </ul>
  33. </div>
  34. </div>
  35. <div class="step-content">
  36. <div style="width:1000px;margin:0 auto;">
  37. <!-- 标题进度条 start-->
  38. <div class="content" style="margin:30px 0 0 0;width: 100%;">
  39. <div class="processBar">
  40. <div class="text" style="margin: 10px -25px;"><span class='poetry'>1.许可协议</span></div>
  41. <div id="line0" class="bar">
  42. <div id="point0" class="c-step c-select"></div>
  43. </div>
  44. </div>
  45. <div class="processBar">
  46. <div class="text" style="margin: 10px -30px;"><span class='poetry'>2.环境检测</span></div>
  47. <div id="line1" class="bar">
  48. <div id="point1" class="c-step"></div>
  49. </div>
  50. </div>
  51. <div class="processBar">
  52. <div class="text" style="margin: 10px -30px;"><span class='poetry'>3.参数配置</span></div>
  53. <div id="line2" class="bar">
  54. <div id="point2" class="c-step"></div>
  55. </div>
  56. </div>
  57. <div class="processBar" style="width:10px;">
  58. <div class="text" style="margin: 10px -39px;"><span class='poetry'>4.安装完成</span></div>
  59. <div id="line3" class="bar" style="width: 0;">
  60. <div id="point3" class="c-step"></div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- 标题进度条 end-->
  65. <div style="clear: both;"></div>
  66. </div>
  67. </div>
  68. <div class="install-content">
  69. {block name='main'}{/block}
  70. </div>
  71. <script>
  72. var index=0;
  73. $(document).ready(function(){
  74. $("#education").addClass('main-hide');
  75. $("#work").addClass('main-hide');
  76. $("#social").addClass('main-hide');
  77. $('#previous_step').hide();
  78. /*上一步*/
  79. $('#previous_step').bind('click', function () {
  80. index--;
  81. ControlContent(index);
  82. });
  83. /*下一步*/
  84. $('#next_step').bind('click', function () {
  85. index++;
  86. ControlContent(index);
  87. });
  88. });
  89. function ControlContent(index) {
  90. var stepContents = ["basicInfo","education","work","social"];
  91. var key;//数组中元素的索引值
  92. for (key in stepContents) {
  93. var stepContent = stepContents[key];//获得元素的值
  94. if (key == index) {
  95. if(stepContent=='basicInfo'){
  96. $('#previous_step').hide();
  97. }else{
  98. $('#previous_step').show();
  99. }
  100. if(stepContent=='social'){
  101. $('#next_step').hide();
  102. }else{
  103. $('#next_step').show();
  104. }
  105. $('#'+stepContent).removeClass('main-hide');
  106. $('#point'+key).addClass('c-select');
  107. $('#line'+key).removeClass('b-select');
  108. }else {
  109. $('#'+stepContent).addClass('main-hide');
  110. if(key>index){
  111. $('#point'+key).removeClass('c-select');
  112. $('#line'+key).removeClass('b-select');
  113. }else if(key<index){
  114. $('#point'+key).addClass('c-select');
  115. $('#line'+key).addClass('b-select');
  116. }
  117. }
  118. }
  119. }
  120. function success(message){
  121. layer.alert(message, {
  122. icon: 1,
  123. skin: 'layer-ext-moon',
  124. title:'提示'
  125. })
  126. }
  127. function error(message){
  128. layer.alert(message, {
  129. icon: 2,
  130. skin: 'layer-ext-moon',
  131. title:'提示'
  132. })
  133. }
  134. </script>
  135. {block name="script"}{/block}
  136. </body>
  137. </html>