{"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":""}