login.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. {include file="common/meta" /}
  5. <style type="text/css">
  6. * {
  7. box-sizing: border-box;
  8. }
  9. html, body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0;
  13. padding: 0;
  14. overflow: hidden;
  15. }
  16. body.login-page {
  17. height: 100vh;
  18. min-height: 100vh;
  19. max-height: 100vh;
  20. overflow: hidden;
  21. background-color: #020b1e;
  22. background-image: url('https://a-7in6-com.oss-cn-hangzhou.aliyuncs.com/xinhua/img/login1.png');
  23. background-repeat: no-repeat;
  24. background-position: center center;
  25. background-size: 100% 100%;
  26. color: #fff;
  27. font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  28. position: relative;
  29. }
  30. .login-top {
  31. position: relative;
  32. z-index: 2;
  33. padding: 12px 20px 0;
  34. text-align: center;
  35. }
  36. .login-top-brand {
  37. display: inline-block;
  38. margin: 0 auto;
  39. width: min(460px, 58vw);
  40. height: 64px;
  41. background: url('https://a-7in6-com.oss-cn-hangzhou.aliyuncs.com/xinhua/img/login4.png') no-repeat center center;
  42. background-size: contain;
  43. pointer-events: none;
  44. user-select: none;
  45. }
  46. .login-main {
  47. position: relative;
  48. z-index: 2;
  49. display: flex;
  50. align-items: center;
  51. justify-content: space-between;
  52. gap: clamp(16px, 2.5vw, 40px);
  53. width: 100%;
  54. max-width: 1760px;
  55. margin: 0 auto;
  56. min-height: calc(100vh - 76px);
  57. max-height: calc(100vh - 76px);
  58. padding: 0 clamp(32px, 4vw, 72px) 48px;
  59. overflow: hidden;
  60. }
  61. .login-visual {
  62. flex: 1 1 auto;
  63. min-width: 0;
  64. display: flex;
  65. align-items: center;
  66. justify-content: flex-start;
  67. overflow: visible;
  68. }
  69. .login-visual-art {
  70. display: block;
  71. flex-shrink: 0;
  72. height: calc(100vh - 105px);
  73. max-height: calc(100vh - 105px);
  74. aspect-ratio: 16 / 9;
  75. width: auto;
  76. max-width: min(calc((100vh - 105px) * 16 / 9), calc(100vw - 500px));
  77. min-width: 360px;
  78. min-height: 260px;
  79. background: url('https://a-7in6-com.oss-cn-hangzhou.aliyuncs.com/xinhua/img/login3.png') no-repeat center center;
  80. background-size: contain;
  81. pointer-events: none;
  82. user-select: none;
  83. }
  84. .login-panel {
  85. flex: 0 0 auto;
  86. width: 100%;
  87. max-width: 400px;
  88. min-width: 300px;
  89. margin-left: 0;
  90. margin-right: clamp(24px, 4vw, 64px);
  91. padding: 0;
  92. align-self: center;
  93. transform: translateY(0);
  94. }
  95. .login-panel-head {
  96. width: 100%;
  97. text-align: center;
  98. }
  99. .login-sys-title {
  100. display: block;
  101. width: 86%;
  102. height: 32px;
  103. margin: 0 auto;
  104. background: url('https://a-7in6-com.oss-cn-hangzhou.aliyuncs.com/xinhua/img/login5.png') no-repeat center center;
  105. background-size: contain;
  106. pointer-events: none;
  107. user-select: none;
  108. }
  109. .login-panel-body {
  110. margin-top: 28px;
  111. }
  112. .login-divider-wrap {
  113. width: 100%;
  114. height: 15px;
  115. margin: 0;
  116. background: url('https://a-7in6-com.oss-cn-hangzhou.aliyuncs.com/xinhua/img/login6.png') no-repeat center 54%;
  117. background-size: 100% auto;
  118. pointer-events: none;
  119. user-select: none;
  120. }
  121. .login-panel-box {
  122. margin-top: -11px;
  123. border-top: none;
  124. background: rgba(36, 98, 168, 0.34);
  125. border: 1px solid rgba(120, 195, 255, 0.42);
  126. box-shadow: 0 8px 32px rgba(8, 40, 90, 0.22), inset 0 0 24px rgba(120, 190, 255, 0.08);
  127. backdrop-filter: blur(10px);
  128. -webkit-backdrop-filter: blur(10px);
  129. padding: 29px 24px 40px;
  130. }
  131. .login-form-title {
  132. margin: 0 0 18px;
  133. text-align: center;
  134. font-size: 18px;
  135. font-weight: 600;
  136. letter-spacing: 3px;
  137. color: #f0f7ff;
  138. }
  139. #login-form {
  140. width: 100%;
  141. }
  142. #login-form .input-group {
  143. margin-bottom: 14px;
  144. width: 100%;
  145. background: rgba(72, 145, 215, 0.38);
  146. border-radius: 0;
  147. overflow: hidden;
  148. border: 1px solid rgba(150, 210, 255, 0.32);
  149. backdrop-filter: blur(6px);
  150. -webkit-backdrop-filter: blur(6px);
  151. }
  152. #login-form .input-group-addon {
  153. background: transparent;
  154. border: none;
  155. color: rgba(215, 235, 255, 0.88);
  156. padding: 0 12px;
  157. min-width: 42px;
  158. text-align: center;
  159. }
  160. #login-form .input-group-addon .glyphicon {
  161. font-size: 16px;
  162. top: 0;
  163. }
  164. #login-form .form-control {
  165. height: 42px;
  166. border: none;
  167. box-shadow: none;
  168. font-size: 14px;
  169. color: #f2f8ff;
  170. background: transparent;
  171. }
  172. #login-form .form-control:focus {
  173. box-shadow: none;
  174. background: rgba(255, 255, 255, 0.06);
  175. }
  176. #login-form .form-control::placeholder {
  177. color: rgba(200, 225, 250, 0.72);
  178. }
  179. #login-form .input-group .input-group-addon:last-child {
  180. padding: 0;
  181. border: none;
  182. }
  183. #login-form .btn-login-submit {
  184. margin-top: 6px;
  185. height: 44px;
  186. width: 100%;
  187. border: none;
  188. border-radius: 0;
  189. background: linear-gradient(180deg, #45a8ff 0%, #1a72ea 100%);
  190. color: #fff;
  191. font-size: 16px;
  192. font-weight: 600;
  193. letter-spacing: 6px;
  194. box-shadow: 0 4px 12px rgba(26, 111, 232, 0.4);
  195. }
  196. #login-form .btn-login-submit:hover,
  197. #login-form .btn-login-submit:focus {
  198. background: linear-gradient(180deg, #52abff 0%, #2580f0 100%);
  199. color: #fff;
  200. }
  201. .login-form-links {
  202. display: flex;
  203. justify-content: space-between;
  204. align-items: center;
  205. margin-top: 12px;
  206. padding: 0 4px;
  207. font-size: 12px;
  208. }
  209. .login-form-links a {
  210. color: rgba(195, 218, 245, 0.85);
  211. text-decoration: none;
  212. }
  213. .login-form-links a:hover {
  214. color: #fff;
  215. text-decoration: underline;
  216. }
  217. .login-footer {
  218. position: absolute;
  219. left: 0;
  220. right: 0;
  221. bottom: 0;
  222. z-index: 2;
  223. padding: 14px 20px 18px;
  224. text-align: center;
  225. font-size: 13px;
  226. color: rgba(220, 235, 255, 0.82);
  227. }
  228. .login-footer a {
  229. color: rgba(220, 235, 255, 0.82);
  230. }
  231. .login-footer a:hover {
  232. color: #fff;
  233. }
  234. @media (max-width: 1100px) {
  235. html, body {
  236. overflow-x: hidden;
  237. overflow-y: auto;
  238. }
  239. body.login-page {
  240. height: auto;
  241. min-height: 100vh;
  242. max-height: none;
  243. overflow-x: hidden;
  244. overflow-y: auto;
  245. }
  246. .login-main {
  247. flex-direction: column;
  248. justify-content: flex-start;
  249. align-items: center;
  250. padding: 16px 24px 96px;
  251. min-height: auto;
  252. max-height: none;
  253. overflow: visible;
  254. }
  255. .login-visual {
  256. flex: 0 0 auto;
  257. width: 100%;
  258. justify-content: center;
  259. overflow: visible;
  260. }
  261. .login-visual-art {
  262. width: 100%;
  263. max-width: 720px;
  264. height: auto;
  265. aspect-ratio: 16 / 9;
  266. min-height: 280px;
  267. max-height: none;
  268. margin-left: 0;
  269. background-position: center center;
  270. background-size: contain;
  271. }
  272. .login-panel {
  273. max-width: 460px;
  274. margin-left: 0;
  275. margin-right: 0;
  276. transform: none;
  277. }
  278. }
  279. @media (max-width: 480px) {
  280. .login-top {
  281. padding-top: 16px;
  282. }
  283. .login-panel-box {
  284. padding: 22px 18px 18px;
  285. }
  286. .login-form-title {
  287. font-size: 18px;
  288. }
  289. }
  290. </style>
  291. <script>
  292. document.addEventListener('wheel', function (e) {
  293. if (e.ctrlKey) {
  294. e.preventDefault();
  295. }
  296. }, {passive: false});
  297. document.addEventListener('gesturestart', function (e) {
  298. e.preventDefault();
  299. });
  300. document.addEventListener('gesturechange', function (e) {
  301. e.preventDefault();
  302. });
  303. document.addEventListener('gestureend', function (e) {
  304. e.preventDefault();
  305. });
  306. </script>
  307. </head>
  308. <body class="login-page">
  309. <header class="login-top">
  310. <div class="login-top-brand" role="img" aria-label="浙江新华数码印务有限公司"></div>
  311. </header>
  312. <main class="login-main">
  313. <div class="login-visual">
  314. <div class="login-visual-art" role="img" aria-label=""></div>
  315. </div>
  316. <div class="login-panel">
  317. <div class="login-panel-head">
  318. <div class="login-sys-title" role="img" aria-label="大数据协同系统"></div>
  319. </div>
  320. <div class="login-panel-body">
  321. <div class="login-divider-wrap" aria-hidden="true"></div>
  322. <div class="login-panel-box">
  323. <h2 class="login-form-title">用户登录</h2>
  324. <form action="" method="post" id="login-form">
  325. <!--@AdminLoginFormBegin-->
  326. <div id="errtips" class="hide"></div>
  327. {:token()}
  328. <div class="input-group">
  329. <div class="input-group-addon">
  330. <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
  331. </div>
  332. <input type="text" class="form-control" id="pd-form-username" placeholder="请输入用户名" name="username" autocomplete="off" value="" data-rule="{:__('Username')}:required;username"/>
  333. </div>
  334. <div class="input-group">
  335. <div class="input-group-addon">
  336. <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
  337. </div>
  338. <input type="password" class="form-control" id="pd-form-password" placeholder="请输入登录密码" name="password" autocomplete="off" value="" data-rule="{:__('Password')}:required;length(4~30)"/>
  339. </div>
  340. {if $Think.config.fastadmin.login_captcha}
  341. <div class="input-group">
  342. <div class="input-group-addon">
  343. <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
  344. </div>
  345. <input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length})" autocomplete="off"/>
  346. <span class="input-group-addon" style="cursor:pointer;">
  347. <img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="30" alt="captcha" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>
  348. </span>
  349. </div>
  350. {/if}
  351. <div class="form-group" style="margin-bottom:0;">
  352. <button type="submit" class="btn btn-login-submit btn-lg btn-block">登录</button>
  353. </div>
  354. <!--@AdminLoginFormEnd-->
  355. </form>
  356. </div>
  357. </div>
  358. </div>
  359. </main>
  360. <footer class="login-footer">
  361. <p style="margin:0;">Copyright @ 杭州可集达科技有限公司 2026-{:date('Y',time())} 版权所有 <a href="https://beian.miit.gov.cn" target="_blank">{$site.beian|htmlentities}</a></p>
  362. </footer>
  363. {include file="common/script" /}
  364. </body>
  365. </html>