|
|
@@ -14,12 +14,13 @@
|
|
|
html,
|
|
|
body,
|
|
|
.app-wrapper {
|
|
|
- position: relative;
|
|
|
+ /* position: relative; */
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
touch-action: pan-y;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
:root {
|
|
|
--Form-item-gap: 1.3rem;
|
|
|
@@ -31,21 +32,48 @@
|
|
|
}
|
|
|
|
|
|
.app-wrapper {
|
|
|
- position: relative;
|
|
|
+ /* position: relative; */
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
- .loginTitle {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .amis-scope .cxd-Icon{height: 1rem}
|
|
|
+ .amis-scope .cxd-TextControl-input input{height: 100% !important;}
|
|
|
+ .amis-scope .cxd-TextControl-input:hover{border:var(--Form-input-borderWidth) solid var(--Form-input-borderColor)}
|
|
|
+ .amis-scope .cxd-InputGroup .cxd-TextControl-input{border-left-width: 0;padding-left: 0;}
|
|
|
+ .code_img{cursor: pointer;}
|
|
|
|
|
|
- .loginTitle p {
|
|
|
- margin: 10px auto;
|
|
|
- color: black;
|
|
|
- font-size: 25px;
|
|
|
+ .amis-scope .cxd-Form{
|
|
|
+ font-size: var(--Form-fontSize);
|
|
|
+ position: none !important;
|
|
|
+ max-width: 700px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 10vh;
|
|
|
+ /* position:; */
|
|
|
+ }
|
|
|
+ .amis-scope .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .change-language {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .amis-scope h1 {
|
|
|
+ font-size: 5vw;
|
|
|
+ }
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .amis-scope .cxd-Form{
|
|
|
+ font-size: var(--Form-fontSize);
|
|
|
+ position: none !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 0vh;
|
|
|
+ /* position:; */
|
|
|
+ }
|
|
|
+ .amis-scope .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -58,87 +86,125 @@
|
|
|
let amis = amisRequire('amis/embed');
|
|
|
|
|
|
const amisJSON = {
|
|
|
- type: 'page',
|
|
|
- title: "",
|
|
|
- style: {
|
|
|
- "backgroundImage": "linear-gradient(180deg, #86a4e9, transparent)"
|
|
|
- },
|
|
|
- cssVars: {
|
|
|
- "--Form-input-onFocused-borderColor": "#e8e9eb",
|
|
|
- "--Form-input-onHover-borderColor": "#e8e9eb",
|
|
|
- },
|
|
|
- body: {
|
|
|
- "type": "grid-2d",
|
|
|
- "cols": 12,
|
|
|
- "grids": [{
|
|
|
- x: 5,
|
|
|
- y: 5,
|
|
|
- h: 1,
|
|
|
- w: 4,
|
|
|
- width: 200,
|
|
|
- type: 'form',
|
|
|
- mode: 'horizontal',
|
|
|
- title: "",
|
|
|
- api: {
|
|
|
- url: "/api/new-login",
|
|
|
- method: "post",
|
|
|
- dataType: "form-data",
|
|
|
- adaptor: function(payload, response, api) {
|
|
|
-
|
|
|
+ "type": "wrapper",
|
|
|
+ "className": "fixed login_layout m:h-screen m:w-full bg-gray-50",
|
|
|
+ "body": {
|
|
|
+ "type": "form",
|
|
|
+ "className": "h-full pc:p-9 m:p-4 m:pt-20",
|
|
|
+ "api": {
|
|
|
+ "method":"post",
|
|
|
+ "url":"/login",
|
|
|
+ "adaptor": function (data) {
|
|
|
+ if (data.status !== 0) {
|
|
|
+ // 登录请求提交后，刷新验证码
|
|
|
+ refresh_code();
|
|
|
}
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ "redirect": "/",
|
|
|
+ "wrapWithPanel": false,
|
|
|
+ "body": [
|
|
|
+ {
|
|
|
+ "type":"html",
|
|
|
+ "className":"text-center",
|
|
|
+ "html":"<img class='change-language' src='./public/static/icon/shield-user-line.svg'/>"
|
|
|
},
|
|
|
- panelClassName: "p-r p-l p-b-md",
|
|
|
- redirect: "/admins",
|
|
|
- body: [{
|
|
|
- "type": "tpl",
|
|
|
- "tpl": "<div class='loginTitle'><p>管理后台</p></div>"
|
|
|
+ {
|
|
|
+ "type":"html",
|
|
|
+ "className":"text-center",
|
|
|
+ "html":"<h1 class='title-name'>Roma管理后台</h1>"
|
|
|
},
|
|
|
- {
|
|
|
- type: "input-text",
|
|
|
- label: false,
|
|
|
- name: "userName",
|
|
|
- size: "full",
|
|
|
- placeholder: "登录名",
|
|
|
- addOn: {
|
|
|
- "label": "",
|
|
|
- "type": "text",
|
|
|
- "position": "left",
|
|
|
- "icon": "fa fa-user"
|
|
|
+ {
|
|
|
+ "type": "input-group",
|
|
|
+ "label": "",
|
|
|
+ "body": [
|
|
|
+ {
|
|
|
+ "type": "icon",
|
|
|
+ "icon": "./public/static/icon/shield-user-line.svg"
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- type: "input-password",
|
|
|
- label: false,
|
|
|
- name: "password",
|
|
|
- size: "full",
|
|
|
- placeholder: "密码",
|
|
|
- addOn: {
|
|
|
- "label": "",
|
|
|
- "type": "text",
|
|
|
- "position": "left",
|
|
|
- "icon": "fa fa-lock"
|
|
|
+ {
|
|
|
+ "type": "input-text",
|
|
|
+ "label": false,
|
|
|
+ "placeholder": "用户名",
|
|
|
+ "name": "name",
|
|
|
+ "required": true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "input-group",
|
|
|
+ "label": "",
|
|
|
+ "body": [
|
|
|
+ {
|
|
|
+ "type": "icon",
|
|
|
+ "icon": "./public/static/icon/lock-password-line.svg",
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- type: "control",
|
|
|
- label: false,
|
|
|
- body: {
|
|
|
- "type": "button",
|
|
|
- "level": "primary",
|
|
|
- "actionType": "submit",
|
|
|
- "block": true,
|
|
|
- "label": "登录"
|
|
|
+ {
|
|
|
+ "type": "input-password",
|
|
|
+ "label": false,
|
|
|
+ "placeholder": "密码",
|
|
|
+ "name": "pwd",
|
|
|
+ "required": true
|
|
|
}
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "input-group",
|
|
|
+ "label": "",
|
|
|
+ "body": [
|
|
|
+ {
|
|
|
+ "type": "icon",
|
|
|
+ "icon": "./public/static/icon/shield-check-line.svg"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "input-text",
|
|
|
+ "label": false,
|
|
|
+ "placeholder": "验证码",
|
|
|
+ "name": "code",
|
|
|
+ "required": true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "action",
|
|
|
+ "body": {
|
|
|
+ "type": "image",
|
|
|
+ "height": "38px",
|
|
|
+ "width": "110px",
|
|
|
+ "name":"codeUrl",
|
|
|
+ "imageClassName":"code_img b-none",
|
|
|
+ "imageMode":"original",
|
|
|
+ "src": "/login/verify"
|
|
|
+ },
|
|
|
+ // 点击图片 刷新二维码
|
|
|
+ "onClick": "refresh_code()"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "label": "登 录",
|
|
|
+ "type": "action",
|
|
|
+ "actionType": "submit",
|
|
|
+ "level": "primary",
|
|
|
+ "className":"w-full h-2.5",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // "type":"html",
|
|
|
+ // "className":"text-center",
|
|
|
+ // "html":"<p class='mt-10 text-gray-600'>Roma平台</p>"
|
|
|
+ // },
|
|
|
]
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
};
|
|
|
|
|
|
let amisScoped = amis.embed('#root', amisJSON);
|
|
|
})();
|
|
|
+ // 刷新验证码
|
|
|
+ function refresh_code()
|
|
|
+ {
|
|
|
+ document.querySelector('.code_img').src = '/login/verify?' + Math.random();
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
root