guanli
/
roma-frontend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Roma</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="icon" type="image/x-ico" href=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./public/static/amis-sdk/helper.css">

    <link rel="stylesheet" href="./public/static/amis-sdk/sdk.css">
    <style>
        html,
        body,
        .app-wrapper {
            /* position: relative; */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            touch-action: pan-y;
            overflow: hidden;
        }
        :root {
            --Form-item-gap: 1.3rem;
            --InputGroup-height: 2.5rem;
            --Button-height: 2.5rem;
            --InputGroup-paddingX: .6rem;
            --InputGroup-addOn-bg: var(--Form-input-bg);
            /* --fontSizeBase: .9rem; */
        }

        .app-wrapper {
            /* position: relative; */
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .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;}

        .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%;
        }
        .amis-scope h1 {
            font-size: 4vw;
        }
        @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;
            }
        }
        .amis-scope .cxd-Button--default {
          border: none;
          outline: none;
        }
        .amis-scope .cxd-Button--default:not(:disabled):not(.is-disabled):hover {
        color: none;
        background: none;
        border-color: none;
        border-width: none;
        border-style: none;
        box-shadow: none;
        border: none;
        outline: none;
      }
      .amis-scope .m-r-xs {
        margin-top:-5px;
        width: 30px;
        height: 30px;
      }
      .amis-scope .cxd-Form .cxd-Wrapper--md, .amis-scope .cxd-Container--md {
        height: 1%;
      }
    </style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script type='text/javascript' src='./public/static/amis-sdk/sdk.js'></script>
<script src="./lang/en-US.js"></script>
<script src="./lang/zh-CN.js"></script>

<script type="text/javascript">
    (function () {
        let amis = amisRequire('amis/embed');
        // 引入语言包内容
        let enUSLocale = enUs()
        let zhCNLocale = zhCn()
        //多语言映射
        const languageMap = {
          "en-US": {
            register: enUSLocale.register,
            replaceText: enUSLocale.replaceText,
            langReplaceTextIgnoreKeys: enUSLocale.langReplaceTextIgnoreKeys
          },
          "zh-CN": {
            register: zhCNLocale.register,
            replaceText: zhCNLocale.replaceText,
            langReplaceTextIgnoreKeys: zhCNLocale.langReplaceTextIgnoreKeys
          }
        }
        // 缓存中设置的语言
        let lang = localStorage.getItem('language')
        //内置组件的翻译信息
        let langRegister = {}
        //json配置的全文翻译信息
        let langReplaceText = {}
        //需要忽略json配置的全文替换key
        let langReplaceTextIgnoreKeys = {}
        if (undefined !== languageMap[lang]) {
          langRegister = languageMap[lang].register
          langReplaceText = languageMap[lang].replaceText
          langReplaceTextIgnoreKeys = languageMap[lang].langReplaceTextIgnoreKeys
        } else {
          // 未找到默认中文
          lang = 'zh-CN'
        }
        // 没有替换或忽略替换配置,则为{}
        if (undefined !== langReplaceText && Object.keys(langReplaceText).length !== 0) {
        } else {
          langReplaceText = {}
        }

        if (undefined !== langReplaceTextIgnoreKeys && Object.keys(langReplaceTextIgnoreKeys).length !== 0) {
        } else {
          langReplaceTextIgnoreKeys = {}
        }
      // 页面json内容
        const amisJSON = {
            "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": "wrapper",
  "body": [
    {
      "type": "flex",
      "justify": "flex-end",
      "items": [
        {
          "type": "dropdown-button",
          "label": "",
          "className": "header-menu",
          "buttons": [
            {
              "type": "button",
              "label": "中文",
              "id": "u:6911502c8fcc",
              "onEvent": {
                "click": {
                  "actions": [
                    {
                      "script": "localStorage.setItem('language', 'zh-CN')\nlocation.reload()",
                      "actionType": "custom",
                      "args": {
                      }
                    }
                  ],
                  "weight": 0
                }
              }
            },
            {
              "type": "button",
              "label": "English",
              "id": "u:e702685a7a45",
              "onEvent": {
                "click": {
                  "actions": [
                    {
                      "script": "localStorage.setItem('language', 'en-US')\r\nlocation.reload()",
                      "actionType": "custom"
                    }
                  ],
                  "weight": 0
                }
              },
              "actionType": "",
              "link": "/view/user_info"
            }
          ],
          "id": "u:4fedf7a987bf",
          "size": "md",
          "level": "default",
          "align": "right",
          "block": false,
          "hideCaret": true,
          "trigger": "hover",
          "icon": "./public/static/icon/language-change.png",
          "btnClassName": "no-border"
        }
      ],
      "id": "u:e7752d0c1dbe"
    }
  ],
  "id": "u:d16525b6aae6",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  }
},
                    {
                        "type":"html",
                        "className":"text-center",
                        "html":"<h1 class='title-name'>Roma 平台</h1>"
                    },
                    {
                        "type": "input-group",
                        "label": "",
                        "body": [
                            {
                                "type": "icon",
                                "icon": "./public/static/icon/shield-user-line.svg"
                            },
                            {
                                "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": "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, 
          { 
            locale: lang 
          }, 
          { 
            replaceText: langReplaceText,
            langReplaceTextIgnoreKeys: langReplaceTextIgnoreKeys
          }
        );
    })();
    // 刷新验证码
    function refresh_code()
    {
        document.querySelector('.code_img').src = '/login/verify?' + Math.random();
    }
</script>
</body>
</html>