skin.html 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="renderer" content="webkit">
  7. <title>主题选择</title>
  8. <!--[if lt IE 9]>
  9. <meta http-equiv="refresh" content="0;ie.html"/>
  10. <![endif]-->
  11. <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
  12. <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  13. <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
  14. <style type="text/css">
  15. .list-unstyled{margin:10px;}
  16. .full-opacity-hover{opacity:1;filter:alpha(opacity=1);border:1px solid #fff}
  17. .full-opacity-hover:hover{border:1px solid #f00;}
  18. </style>
  19. </head>
  20. <body class="gray-bg">
  21. <ul class="list-unstyled clearfix">
  22. <li style="float:left; width: 33.33333%; padding: 5px;">
  23. <a href="javascript:" data-skin="skin-blue|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  24. <span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
  25. <span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
  26. <span style="width: 20%; float: left; height: 30px; background: #2f4050"></span>
  27. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  28. </a>
  29. <p class="text-center">蓝</p>
  30. </li>
  31. <li style="float:left; width: 33.33333%; padding: 5px;">
  32. <a href="javascript:" data-skin="skin-green|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  33. <span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
  34. <span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
  35. <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
  36. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  37. </a>
  38. <p class="text-center">绿</p>
  39. </li>
  40. <li style="float:left; width: 33.33333%; padding: 5px;">
  41. <a href="javascript:" data-skin="skin-purple|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  42. <span style="width: 20%; float: left; height: 13px; background: #555299"></span>
  43. <span style="width: 80%; float: left; height: 13px; background: #605ca8"></span>
  44. <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
  45. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  46. </a>
  47. <p class="text-center">紫</p>
  48. </li>
  49. <li style="float:left; width: 33.33333%; padding: 5px;">
  50. <a href="javascript:" data-skin="skin-red|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  51. <span style="width: 20%; float: left; height: 13px; background: #dd4b39"></span>
  52. <span style="width: 80%; float: left; height: 13px; background: #d73925"></span>
  53. <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
  54. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  55. </a>
  56. <p class="text-center">红</p>
  57. </li>
  58. <li style="float:left; width: 33.33333%; padding: 5px;">
  59. <a href="javascript:" data-skin="skin-yellow|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  60. <span style="width: 20%; float: left; height: 13px; background: #f39c12"></span>
  61. <span style="width: 80%; float: left; height: 13px; background: #e08e0b"></span>
  62. <span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
  63. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  64. </a>
  65. <p class="text-center">黄</p>
  66. </li>
  67. <li style="float:left; width: 33.33333%; padding: 5px;">
  68. <a href="javascript:" data-skin="skin-blue|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  69. <span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
  70. <span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
  71. <span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
  72. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  73. </a>
  74. <p class="text-center">蓝灰</p>
  75. </li>
  76. <li style="float:left; width: 33.33333%; padding: 5px;">
  77. <a href="javascript:" data-skin="skin-green|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  78. <span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
  79. <span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
  80. <span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
  81. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  82. </a>
  83. <p class="text-center">绿灰</p>
  84. </li>
  85. <li style="float:left; width: 33.33333%; padding: 5px;">
  86. <a href="javascript:" data-skin="skin-purple|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  87. <span style="width: 20%; float: left; height: 13px; background: #555299"></span>
  88. <span style="width: 80%; float: left; height: 13px; background: #605ca8"></span>
  89. <span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
  90. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  91. </a>
  92. <p class="text-center">紫灰</p>
  93. </li>
  94. <li style="float:left; width: 33.33333%; padding: 5px;">
  95. <a href="javascript:" data-skin="skin-red|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  96. <span style="width: 20%; float: left; height: 13px; background: #dd4b39"></span>
  97. <span style="width: 80%; float: left; height: 13px; background: #d73925"></span>
  98. <span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
  99. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  100. </a>
  101. <p class="text-center">红灰</p>
  102. </li>
  103. <li style="float:left; width: 33.33333%; padding: 5px;">
  104. <a href="javascript:" data-skin="skin-yellow|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  105. <span style="width: 20%; float: left; height: 13px; background: #f39c12"></span>
  106. <span style="width: 80%; float: left; height: 13px; background: #e08e0b"></span>
  107. <span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
  108. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  109. </a>
  110. <p class="text-center">黄灰</p>
  111. </li>
  112. <li style="float:left; width: 33.33333%; padding: 5px;">
  113. <a href="javascript:" data-skin="skin-blue|theme-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  114. <span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
  115. <span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
  116. <span style="width: 20%; float: left; height: 30px; background: rgba(15,41,80,1)"></span>
  117. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  118. </a>
  119. <p class="text-center">蓝浅(新)</p>
  120. </li>
  121. <li style="float:left; width: 33.33333%; padding: 5px;">
  122. <a href="javascript:" data-skin="skin-green|theme-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
  123. <span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
  124. <span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
  125. <span style="width: 20%; float: left; height: 30px; background: rgba(15,41,80,1)"></span>
  126. <span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
  127. </a>
  128. <p class="text-center">绿浅(新)</p>
  129. </li>
  130. </ul>
  131. </body>
  132. <script th:src="@{/js/jquery.min.js}"></script>
  133. <script th:src="@{/ruoyi/js/common.js?v=4.6.2}"></script>
  134. <script type="text/javascript">
  135. //皮肤样式列表
  136. var skins = ["skin-blue", "skin-green", "skin-purple", "skin-red", "skin-yellow"];
  137. // 主题样式列表
  138. var themes = ["theme-dark", "theme-light", "theme-blue"];
  139. $("[data-skin]").on('click',
  140. function(e) {
  141. var skin = $(this).data('skin');
  142. $.each(skins, function(i) {
  143. parent.$("body").removeClass(skins[i]);
  144. });
  145. $.each(themes, function(i) {
  146. parent.$("body").removeClass(themes[i]);
  147. });
  148. parent.$("body").addClass(skin.split('|')[0]);
  149. parent.$("body").addClass(skin.split('|')[1]);
  150. storage.set('skin', skin);
  151. });
  152. </script>
  153. </html>