| 1 |
- {"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport md5 from 'js-md5';\nimport { loginApi } from '@/api';\nexport default {\n name: 'Login',\n data() {\n return {\n form: {\n username: '',\n password: '',\n captcha: ''\n },\n rules: {\n username: [{\n required: true,\n message: '请输入用户名',\n trigger: 'blur'\n }],\n password: [{\n required: true,\n message: '请输入密码',\n trigger: 'blur'\n }],\n captcha: [{\n required: true,\n message: '请输入验证码',\n trigger: 'blur'\n }]\n },\n loading: false,\n captchaText: '0000'\n };\n },\n methods: {\n refreshCaptcha() {\n // 模拟验证码，固定为0000\n this.captchaText = '0000';\n },\n handleLogin() {\n this.$refs.loginForm.validate(async valid => {\n if (!valid) return;\n\n // 验证码校验\n if (this.form.captcha !== '0000') {\n this.$message.error('验证码错误');\n return;\n }\n this.loading = true;\n try {\n // 密码使用md5加密后提交\n const params = {\n username: this.form.username,\n password: md5(this.form.password)\n };\n const res = await loginApi(params);\n // 保存token到Vuex\n this.$store.dispatch('login', res.data);\n this.$message.success('登录成功');\n this.$router.push('/lab-status');\n } catch (err) {\n this.$message.error('登录失败，请重试');\n } finally {\n this.loading = false;\n }\n });\n }\n }\n};","map":{"version":3,"names":["md5","loginApi","name","data","form","username","password","captcha","rules","required","message","trigger","loading","captchaText","methods","refreshCaptcha","handleLogin","$refs","loginForm","validate","valid","$message","error","params","res","$store","dispatch","success","$router","push","err"],"sources":["src/views/Login.vue"],"sourcesContent":["<template>\n <div class=\"login-page\">\n <div class=\"login-bg\">\n <div class=\"login-particles\"></div>\n </div>\n <div class=\"login-container\">\n <div class=\"login-header\">\n <h1>实验室安全智慧化管控中心</h1>\n <p>中国安全生产科学研究院</p>\n </div>\n <div class=\"login-form-wrapper\">\n <h2>用户登录</h2>\n <el-form ref=\"loginForm\" :model=\"form\" :rules=\"rules\" class=\"login-form\">\n <el-form-item prop=\"username\">\n <el-input\n v-model=\"form.username\"\n prefix-icon=\"el-icon-user\"\n placeholder=\"请输入用户名/手机号\"\n clearable\n />\n </el-form-item>\n <el-form-item prop=\"password\">\n <el-input\n v-model=\"form.password\"\n prefix-icon=\"el-icon-lock\"\n type=\"password\"\n placeholder=\"请输入密码\"\n show-password\n @keyup.enter.native=\"handleLogin\"\n />\n </el-form-item>\n <el-form-item prop=\"captcha\">\n <div class=\"captcha-row\">\n <el-input\n v-model=\"form.captcha\"\n prefix-icon=\"el-icon-key\"\n placeholder=\"请输入验证码\"\n clearable\n />\n <div class=\"captcha-img\" @click=\"refreshCaptcha\">{{ captchaText }}</div>\n </div>\n </el-form-item>\n <el-form-item>\n <el-button\n type=\"primary\"\n :loading=\"loading\"\n class=\"login-btn\"\n @click=\"handleLogin\"\n >\n 登 录\n </el-button>\n </el-form-item>\n </el-form>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport md5 from 'js-md5'\nimport { loginApi } from '@/api'\n\nexport default {\n name: 'Login',\n data() {\n return {\n form: {\n username: '',\n password: '',\n captcha: ''\n },\n rules: {\n username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],\n password: [{ required: true, message: '请输入密码', trigger: 'blur' }],\n captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]\n },\n loading: false,\n captchaText: '0000'\n }\n },\n methods: {\n refreshCaptcha() {\n // 模拟验证码，固定为0000\n this.captchaText = '0000'\n },\n handleLogin() {\n this.$refs.loginForm.validate(async (valid) => {\n if (!valid) return\n\n // 验证码校验\n if (this.form.captcha !== '0000') {\n this.$message.error('验证码错误')\n return\n }\n\n this.loading = true\n try {\n // 密码使用md5加密后提交\n const params = {\n username: this.form.username,\n password: md5(this.form.password)\n }\n const res = await loginApi(params)\n // 保存token到Vuex\n this.$store.dispatch('login', res.data)\n this.$message.success('登录成功')\n this.$router.push('/lab-status')\n } catch (err) {\n this.$message.error('登录失败，请重试')\n } finally {\n this.loading = false\n }\n })\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.login-page {\n width: 1920px;\n height: 1080px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: linear-gradient(135deg, #0a1628 0%, #0d2247 50%, #0a1a3a 100%);\n overflow: hidden;\n}\n\n.login-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: radial-gradient(ellipse at 50% 50%, rgba(30, 144, 255, 0.08) 0%, transparent 60%);\n}\n\n.login-container {\n position: relative;\n z-index: 1;\n text-align: center;\n}\n\n.login-header {\n margin-bottom: 50px;\n\n h1 {\n font-size: 36px;\n color: #fff;\n letter-spacing: 6px;\n text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);\n }\n\n p {\n font-size: 16px;\n color: $text-secondary;\n margin-top: 12px;\n letter-spacing: 4px;\n }\n}\n\n.login-form-wrapper {\n width: 420px;\n padding: 40px;\n background: rgba(13, 34, 71, 0.85);\n border: 1px solid rgba(30, 144, 255, 0.3);\n border-radius: 8px;\n backdrop-filter: blur(10px);\n box-shadow: 0 0 40px rgba(30, 144, 255, 0.1);\n\n h2 {\n font-size: 22px;\n color: #fff;\n margin-bottom: 30px;\n letter-spacing: 2px;\n }\n}\n\n.login-form {\n .el-input__inner {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n color: #fff;\n height: 44px;\n\n &::placeholder {\n color: rgba(255, 255, 255, 0.3);\n }\n\n &:focus {\n border-color: $accent-blue;\n }\n }\n\n .el-input__prefix {\n color: $text-secondary;\n }\n}\n\n.captcha-row {\n display: flex;\n gap: 12px;\n\n .el-input {\n flex: 1;\n }\n\n .captcha-img {\n width: 120px;\n height: 44px;\n line-height: 44px;\n text-align: center;\n background: rgba(30, 144, 255, 0.15);\n border: 1px solid rgba(30, 144, 255, 0.3);\n border-radius: 4px;\n color: $accent-cyan;\n font-size: 20px;\n letter-spacing: 8px;\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background: rgba(30, 144, 255, 0.25);\n }\n }\n}\n\n.login-btn {\n width: 100%;\n height: 44px;\n font-size: 16px;\n letter-spacing: 6px;\n background: linear-gradient(90deg, #1565c0, #1e88e5);\n border: none;\n\n &:hover {\n background: linear-gradient(90deg, #1e88e5, #42a5f5);\n }\n}\n</style>\n"],"mappings":";AA2DA,OAAAA,GAAA;AACA,SAAAC,QAAA;AAEA;EACAC,IAAA;EACAC,KAAA;IACA;MACAC,IAAA;QACAC,QAAA;QACAC,QAAA;QACAC,OAAA;MACA;MACAC,KAAA;QACAH,QAAA;UAAAI,QAAA;UAAAC,OAAA;UAAAC,OAAA;QAAA;QACAL,QAAA;UAAAG,QAAA;UAAAC,OAAA;UAAAC,OAAA;QAAA;QACAJ,OAAA;UAAAE,QAAA;UAAAC,OAAA;UAAAC,OAAA;QAAA;MACA;MACAC,OAAA;MACAC,WAAA;IACA;EACA;EACAC,OAAA;IACAC,eAAA;MACA;MACA,KAAAF,WAAA;IACA;IACAG,YAAA;MACA,KAAAC,KAAA,CAAAC,SAAA,CAAAC,QAAA,OAAAC,KAAA;QACA,KAAAA,KAAA;;QAEA;QACA,SAAAhB,IAAA,CAAAG,OAAA;UACA,KAAAc,QAAA,CAAAC,KAAA;UACA;QACA;QAEA,KAAAV,OAAA;QACA;UACA;UACA,MAAAW,MAAA;YACAlB,QAAA,OAAAD,IAAA,CAAAC,QAAA;YACAC,QAAA,EAAAN,GAAA,MAAAI,IAAA,CAAAE,QAAA;UACA;UACA,MAAAkB,GAAA,SAAAvB,QAAA,CAAAsB,MAAA;UACA;UACA,KAAAE,MAAA,CAAAC,QAAA,UAAAF,GAAA,CAAArB,IAAA;UACA,KAAAkB,QAAA,CAAAM,OAAA;UACA,KAAAC,OAAA,CAAAC,IAAA;QACA,SAAAC,GAAA;UACA,KAAAT,QAAA,CAAAC,KAAA;QACA;UACA,KAAAV,OAAA;QACA;MACA;IACA;EACA;AACA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
