login.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>登录</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link rel="icon" type="image/x-ico" href=""/>
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  9. <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  10. <link rel="stylesheet" href="./public/static/amis-sdk/helper.css">
  11. <link rel="stylesheet" href="./public/static/amis-sdk/sdk.css">
  12. <style>
  13. html,
  14. body,
  15. .app-wrapper {
  16. /* position: relative; */
  17. width: 100%;
  18. height: 100%;
  19. margin: 0;
  20. padding: 0;
  21. touch-action: pan-y;
  22. overflow: hidden;
  23. }
  24. :root {
  25. --Form-item-gap: 1.3rem;
  26. --InputGroup-height: 2.5rem;
  27. --Button-height: 2.5rem;
  28. --InputGroup-paddingX: .6rem;
  29. --InputGroup-addOn-bg: var(--Form-input-bg);
  30. /* --fontSizeBase: .9rem; */
  31. }
  32. .app-wrapper {
  33. /* position: relative; */
  34. width: 100%;
  35. height: 100%;
  36. margin: 0;
  37. padding: 0;
  38. }
  39. .amis-scope .cxd-Icon{height: 1rem}
  40. .amis-scope .cxd-TextControl-input input{height: 100% !important;}
  41. .amis-scope .cxd-TextControl-input:hover{border:var(--Form-input-borderWidth) solid var(--Form-input-borderColor)}
  42. .amis-scope .cxd-InputGroup .cxd-TextControl-input{border-left-width: 0;padding-left: 0;}
  43. .code_img{cursor: pointer;}
  44. .amis-scope .cxd-Form{
  45. font-size: var(--Form-fontSize);
  46. position: none !important;
  47. max-width: 700px;
  48. margin: 0 auto;
  49. margin-top: 10vh;
  50. /* position:; */
  51. }
  52. .amis-scope .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
  53. width: 100%;
  54. height: 100%;
  55. }
  56. .amis-scope h1 {
  57. font-size: 5vw;
  58. }
  59. @media (max-width: 768px) {
  60. .amis-scope .cxd-Form{
  61. font-size: var(--Form-fontSize);
  62. position: none !important;
  63. margin: 0 auto;
  64. margin-top: 0vh;
  65. /* position:; */
  66. }
  67. .amis-scope .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
  68. padding: 0;
  69. }
  70. }
  71. .amis-scope .cxd-Button--default {
  72. border: none;
  73. outline: none;
  74. }
  75. .amis-scope .cxd-Button--default:not(:disabled):not(.is-disabled):hover {
  76. color: none;
  77. background: none;
  78. border-color: none;
  79. border-width: none;
  80. border-style: none;
  81. box-shadow: none;
  82. border: none;
  83. outline: none;
  84. }
  85. .amis-scope .m-r-xs {
  86. margin-top:-5px;
  87. width: 30px;
  88. height: 30px;
  89. }
  90. .amis-scope .cxd-Form .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
  91. height: 1%;
  92. }
  93. </style>
  94. </head>
  95. <body>
  96. <div id="root" class="app-wrapper"></div>
  97. <script type='text/javascript' src='./public/static/amis-sdk/sdk.js'></script>
  98. <script type="text/javascript">
  99. (function () {
  100. let amis = amisRequire('amis/embed');
  101. const amisJSON = {
  102. "type": "wrapper",
  103. "className": "fixed login_layout m:h-screen m:w-full bg-gray-50",
  104. "body": {
  105. "type": "form",
  106. "className": "h-full pc:p-9 m:p-4 m:pt-20",
  107. "api": {
  108. "method":"post",
  109. "url":"/login",
  110. "adaptor": function (data) {
  111. if (data.status !== 0) {
  112. // 登录请求提交后,刷新验证码
  113. refresh_code();
  114. }
  115. return data;
  116. },
  117. },
  118. "redirect": "/",
  119. "wrapWithPanel": false,
  120. "body": [
  121. {
  122. "type": "wrapper",
  123. "body": [
  124. {
  125. "type": "flex",
  126. "justify": "flex-end",
  127. "items": [
  128. {
  129. "type": "dropdown-button",
  130. "label": "",
  131. "className": "header-menu",
  132. "buttons": [
  133. {
  134. "type": "button",
  135. "label": "中文",
  136. "id": "u:6911502c8fcc",
  137. "onEvent": {
  138. "click": {
  139. "actions": [
  140. {
  141. "script": "localStorage.setItem('language', 'zh-CN')\nlocation.reload()",
  142. "actionType": "custom",
  143. "args": {
  144. }
  145. }
  146. ],
  147. "weight": 0
  148. }
  149. }
  150. },
  151. {
  152. "type": "button",
  153. "label": "English",
  154. "id": "u:e702685a7a45",
  155. "onEvent": {
  156. "click": {
  157. "actions": [
  158. {
  159. "script": "localStorage.setItem('language', 'en-US')\r\nlocation.reload()",
  160. "actionType": "custom"
  161. }
  162. ],
  163. "weight": 0
  164. }
  165. },
  166. "actionType": "",
  167. "link": "/view/user_info"
  168. }
  169. ],
  170. "id": "u:4fedf7a987bf",
  171. "size": "md",
  172. "level": "default",
  173. "align": "right",
  174. "block": false,
  175. "hideCaret": true,
  176. "trigger": "hover",
  177. "icon": "./public/static/icon/language-change.png",
  178. "btnClassName": "no-border"
  179. }
  180. ],
  181. "id": "u:e7752d0c1dbe"
  182. }
  183. ],
  184. "id": "u:d16525b6aae6",
  185. "asideResizor": false,
  186. "pullRefresh": {
  187. "disabled": true
  188. }
  189. },
  190. {
  191. "type":"html",
  192. "className":"text-center",
  193. "html":"<h1 class='title-name'>Roma管理后台</h1>"
  194. },
  195. {
  196. "type": "input-group",
  197. "label": "",
  198. "body": [
  199. {
  200. "type": "icon",
  201. "icon": "./public/static/icon/shield-user-line.svg"
  202. },
  203. {
  204. "type": "input-text",
  205. "label": false,
  206. "placeholder": "用户名",
  207. "name": "name",
  208. "required": true
  209. }
  210. ]
  211. },
  212. {
  213. "type": "input-group",
  214. "label": "",
  215. "body": [
  216. {
  217. "type": "icon",
  218. "icon": "./public/static/icon/lock-password-line.svg",
  219. },
  220. {
  221. "type": "input-password",
  222. "label": false,
  223. "placeholder": "密码",
  224. "name": "pwd",
  225. "required": true
  226. }
  227. ]
  228. },
  229. {
  230. "type": "input-group",
  231. "label": "",
  232. "body": [
  233. {
  234. "type": "icon",
  235. "icon": "./public/static/icon/shield-check-line.svg"
  236. },
  237. {
  238. "type": "input-text",
  239. "label": false,
  240. "placeholder": "验证码",
  241. "name": "code",
  242. "required": true
  243. },
  244. {
  245. "type": "action",
  246. "body": {
  247. "type": "image",
  248. "height": "38px",
  249. "width": "110px",
  250. "name":"codeUrl",
  251. "imageClassName":"code_img b-none",
  252. "imageMode":"original",
  253. "src": "/login/verify"
  254. },
  255. // 点击图片 刷新二维码
  256. "onClick": "refresh_code()"
  257. }
  258. ]
  259. },
  260. {
  261. "label": "登 录",
  262. "type": "action",
  263. "actionType": "submit",
  264. "level": "primary",
  265. "className":"w-full h-2.5",
  266. },
  267. // {
  268. // "type":"html",
  269. // "className":"text-center",
  270. // "html":"<p class='mt-10 text-gray-600'>Roma平台</p>"
  271. // },
  272. ]
  273. }
  274. };
  275. let amisScoped = amis.embed('#root', amisJSON);
  276. })();
  277. // 刷新验证码
  278. function refresh_code()
  279. {
  280. document.querySelector('.code_img').src = '/login/verify?' + Math.random();
  281. }
  282. </script>
  283. </body>
  284. </html>