You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
13 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{"version":3,"sources":["webpack:///./src/components/page/Login.vue?a551","webpack:///src/components/page/Login.vue","webpack:///./src/components/page/Login.vue?0447","webpack:///./src/components/page/Login.vue","webpack:///./node_modules/core-js/internals/array-fill.js","webpack:///./node_modules/core-js/modules/es.array.fill.js","webpack:///./src/components/page/Login.vue?8576"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","ref","attrs","ruleForm","rules","model","value","callback","$$v","$set","expression","nativeOn","$event","type","indexOf","_k","keyCode","key","submitForm","on","staticRenderFns","name","data","username","password","methods","$refs","formName","validate","valid","localStorage","setItem","mounted","canvas","width","parentNode","offsetWidth","height","offsetHeight","console","log","window","requestAnimFrame","requestAnimationFrame","loop","ctx","clearRect","step","fillStyle","lines","j","beginPath","moveTo","posHeight","deltaHeight","bezierCurveTo","boHeight","deltaHeightRight","lineTo","closePath","fill","component","toObject","toAbsoluteIndex","toLength","module","exports","O","length","argumentsLength","arguments","index","undefined","end","endPos","$","addToUnscopables","target","proto"],"mappings":"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","file":"js/chunk-777aef64.7d303ad3.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"login-wrapper\"},[_c('div',{staticClass:\"login-main\"},[_c('h3',{staticClass:\"login-title\"},[_vm._v(\"MAA\")]),_c('el-form',{ref:\"ruleForm\",attrs:{\"model\":_vm.ruleForm,\"rules\":_vm.rules}},[_c('el-form-item',{attrs:{\"prop\":\"username\"}},[_c('el-input',{attrs:{\"placeholder\":\"用户名\"},model:{value:(_vm.ruleForm.username),callback:function ($$v) {_vm.$set(_vm.ruleForm, \"username\", $$v)},expression:\"ruleForm.username\"}})],1),_c('el-form-item',{attrs:{\"prop\":\"password\"}},[_c('el-input',{attrs:{\"type\":\"password\",\"placeholder\":\"密码\"},nativeOn:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }return _vm.submitForm('ruleForm')}},model:{value:(_vm.ruleForm.password),callback:function ($$v) {_vm.$set(_vm.ruleForm, \"password\", $$v)},expression:\"ruleForm.password\"}})],1),_c('el-form-item',[_c('el-button',{staticClass:\"login-btn\",attrs:{\"type\":\"primary\"},on:{\"click\":function($event){return _vm.submitForm('ruleForm')}}},[_vm._v(\"登录\")]),_c('p',{staticClass:\"login-tip\"},[_vm._v(\"提示:用户名和密可以随便填。\")])],1)],1)],1),_c('canvas',{staticClass:\"login-anim\",attrs:{\"id\":\"canvas\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n <div class=\"login-wrapper\">\r\n <div class=\"login-main\">\r\n <h3 class=\"login-title\">MAA</h3>\r\n <el-form :model=\"ruleForm\" :rules=\"rules\" ref=\"ruleForm\">\r\n <el-form-item prop=\"username\">\r\n <el-input v-model=\"ruleForm.username\" placeholder=\"用户名\"></el-input>\r\n </el-form-item>\r\n <el-form-item prop=\"password\">\r\n <el-input type=\"password\" placeholder=\"密码\" v-model=\"ruleForm.password\" @keyup.enter.native=\"submitForm('ruleForm')\"></el-input>\r\n </el-form-item>\r\n <el-form-item>\r\n <el-button class=\"login-btn\" type=\"primary\" @click=\"submitForm('ruleForm')\">登录</el-button>\r\n <p class=\"login-tip\">提示:用户名和密可以随便填。</p>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n <canvas id=\"canvas\" class=\"login-anim\"></canvas>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n name: 'login',\r\n data: function () {\r\n return {\r\n ruleForm: {\r\n username: 'admin',\r\n password: '123123'\r\n },\r\n rules: {\r\n username: [\r\n { required: true, message: '请输入用户名', trigger: 'blur' }\r\n ],\r\n password: [\r\n { required: true, message: '请输入密码', trigger: 'blur' }\r\n ]\r\n }\r\n }\r\n },\r\n methods: {\r\n submitForm (formName) {\r\n this.$refs[formName].validate(valid => {\r\n if (!valid) {\r\n this.$message.error('登录表单字段输入格式有误')\r\n return false\r\n }\r\n localStorage.setItem('username', this.ruleForm.username)\r\n this.$router.push('/')\r\n })\r\n }\r\n },\r\n mounted () {\r\n // 实现页面底部波纹特效\r\n const canvas = document.getElementById('canvas')\r\n const ctx = canvas.getContext('2d')\r\n canvas.width = canvas.parentNode.offsetWidth\r\n canvas.height = canvas.parentNode.offsetHeight\r\n console.log(canvas.width, canvas.height)\r\n\r\n // 如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout\r\n window.requestAnimFrame = (function () {\r\n return window.requestAnimationFrame ||\r\n window.webkitRequestAnimationFrame ||\r\n window.mozRequestAnimationFrame ||\r\n function (callback) {\r\n window.setTimeout(callback, 1000 / 60)\r\n }\r\n })()\r\n\r\n // 波浪大小\r\n const boHeight = 40// canvas.height / 10;\r\n const posHeight = canvas.height - 150// canvas.height / 1.2;\r\n\r\n // 初始角度为0\r\n let step = 0\r\n // 定义三条不同波浪的颜色\r\n const lines = ['rgba(69, 159, 117, 0.1)', 'rgba(95, 170, 135, 0.6)', 'rgba(69, 159, 117, 0.4)']\r\n\r\n function loop () {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n step++\r\n // 画3个不同颜色的矩形\r\n for (let j = lines.length - 1; j >= 0; j--) {\r\n ctx.fillStyle = lines[j]\r\n\r\n // 每个矩形的角度都不同每个之间相差45度\r\n const angle = (step + j * 70) * Math.PI / 180 // 50\r\n const deltaHeight = Math.sin(angle) * boHeight\r\n const deltaHeightRight = Math.cos(angle) * boHeight\r\n ctx.beginPath()\r\n ctx.moveTo(0, posHeight + deltaHeight)\r\n ctx.moveTo(0, posHeight + deltaHeight)\r\n ctx.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight)\r\n ctx.lineTo(canvas.width, canvas.height)\r\n ctx.lineTo(0, canvas.height)\r\n ctx.lineTo(0, posHeight + deltaHeight)\r\n ctx.closePath()\r\n ctx.fill()\r\n }\r\n requestAnimFrame(loop)\r\n }\r\n loop()\r\n }\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"less\">\r\n .login-wrapper {\r\n height: 100%;\r\n }\r\n #canvas {\r\n width: 100%;\r\n }\r\n .login-main {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 320px;\r\n height: 370px;\r\n padding: 20px 35px;\r\n border: 1px solid #eee;\r\n margin: -185px 0 0 -160px;\r\n &::before, &::after {\r\n position: absolute;\r\n height: 12px;\r\n content: \"\";\r\n }\r\n &::before {\r\n left: 4px;\r\n right: 4px;\r\n top: -12px;\r\n z-index: 2;\r\n background-color: #f5f5f5;\r\n }\r\n &::after {\r\n left: 10px;\r\n right: 10px;\r\n top: -22px;\r\n z-index: 1;\r\n background-color: #f0f0f0;\r\n }\r\n }\r\n .login-title {\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid @mainColor;\r\n margin: 15px 0 45px 0;\r\n color: #555;\r\n text-align: center;\r\n font-size: 30px;\r\n }\r\n .login-btn{\r\n width: 100%;\r\n height: 36px;\r\n margin-top: 30px;\r\n font-size: 16px;\r\n }\r\n .login-tip {\r\n color: #999;\r\n font-size: 12px;\r\n line-height: 30px;\r\n }\r\n .login-anim {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n z-index: -1;\r\n }\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Login.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Login.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Login.vue?vue&type=template&id=01571756&scoped=true&\"\nimport script from \"./Login.vue?vue&type=script&lang=js&\"\nexport * from \"./Login.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Login.vue?vue&type=style&index=0&id=01571756&scoped=true&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"01571756\",\n null\n \n)\n\nexport default component.exports","'use strict';\nvar toObject = require('../internals/to-object');\nvar toAbsoluteIndex = require('../internals/to-absolute-index');\nvar toLength = require('../internals/to-length');\n\n// `Array.prototype.fill` method implementation\n// https://tc39.es/ecma262/#sec-array.prototype.fill\nmodule.exports = function fill(value /* , start = 0, end = @length */) {\n var O = toObject(this);\n var length = toLength(O.length);\n var argumentsLength = arguments.length;\n var index = toAbsoluteIndex(argumentsLength > 1 ? arguments[1] : undefined, length);\n var end = argumentsLength > 2 ? arguments[2] : undefined;\n var endPos = end === undefined ? length : toAbsoluteIndex(end, length);\n while (endPos > index) O[index++] = value;\n return O;\n};\n","var $ = require('../internals/export');\nvar fill = require('../internals/array-fill');\nvar addToUnscopables = require('../internals/add-to-unscopables');\n\n// `Array.prototype.fill` method\n// https://tc39.es/ecma262/#sec-array.prototype.fill\n$({ target: 'Array', proto: true }, {\n fill: fill\n});\n\n// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables('fill');\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/style-resources-loader/lib/index.js??ref--10-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Login.vue?vue&type=style&index=0&id=01571756&scoped=true&lang=less&\""],"sourceRoot":""}