术习电报 / electron-vue-template

转到一个项目
切换导航栏
切换导航栏固定状态
张恒
ddcfb781 1 个父辈 7bb83ecd

修改登录页效果，提升electron版本

内嵌 并排
正在显示 5 个修改的文件 包含 272 行增加 和 224 行删除
......@@ -37,7 +37,7 @@ npm config edit
---
这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [这里](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
# 更新日志
......
......@@ -5270,9 +5270,9 @@
"dev": true
},
"electron": {
"version": "5.0.10",
"resolved": "https://registry.npm.taobao.org/electron/download/electron-5.0.10.tgz",
"integrity": "sha1-o4GcP/jQXuVzFb+r4tYdNSn1ZZw=",
"version": "5.0.11",
"resolved": "https://registry.npm.taobao.org/electron/download/electron-5.0.11.tgz",
"integrity": "sha1-dk60YKqE+/yz3DA4X1+VCctyR1E=",
"dev": true,
"requires": {
"@types/node": "^10.12.18",
......@@ -5281,9 +5281,9 @@
},
"dependencies": {
"@types/node": {
"version": "10.14.16",
"resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-10.14.16.tgz?cache=0&sync_timestamp=1566325318079&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-10.14.16.tgz",
"integrity": "sha1-TWkMlsu3snKK/qDiYNaAUBs9pc8=",
"version": "10.14.19",
"resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-10.14.19.tgz?cache=0&sync_timestamp=1569481053118&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-10.14.19.tgz",
"integrity": "sha1-9SdCx4NKgV3t9m7fyKUVR+Kmc0I=",
"dev": true
}
}
......@@ -6022,7 +6022,7 @@
},
"read-pkg": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-2.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fread-pkg%2Fdownload%2Fread-pkg-2.0.0.tgz",
"integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
"dev": true,
"requires": {
......@@ -7098,6 +7098,15 @@
"universalify": "^0.1.0"
}
},
"fs-minipass": {
"version": "1.2.7",
"resolved": "https://registry.npm.taobao.org/fs-minipass/download/fs-minipass-1.2.7.tgz",
"integrity": "sha1-zP+FcIQef+QmVpPaiJNsVa7X98c=",
"dev": true,
"requires": {
"minipass": "^2.6.0"
}
},
"fs-write-stream-atomic": {
"version": "1.0.10",
"resolved": "https://registry.npm.taobao.org/fs-write-stream-atomic/download/fs-write-stream-atomic-1.0.10.tgz",
......@@ -7157,14 +7166,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -7179,20 +7186,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -7309,8 +7313,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -7322,7 +7325,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -7337,7 +7339,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -7345,14 +7346,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -7371,7 +7370,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -7452,8 +7450,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -7465,7 +7462,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -7587,7 +7583,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -9685,7 +9680,7 @@
"dependencies": {
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz",
"integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
"dev": true,
"requires": {
......@@ -11141,6 +11136,51 @@
"resolved": "https://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
},
"minipass": {
"version": "2.8.6",
"resolved": "https://registry.npm.taobao.org/minipass/download/minipass-2.8.6.tgz",
"integrity": "sha1-Yg2Ims4mNWOR0BDsuUWHSd+bbbU=",
"dev": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
},
"dependencies": {
"yallist": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.1.0.tgz",
"integrity": "sha1-kGzCEAly3CYlrnj1ZqJXcjCh1vc=",
"dev": true
}
}
},
"minipass-collect": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/minipass-collect/download/minipass-collect-1.0.1.tgz",
"integrity": "sha1-ThRTceADIzLTmLsOGL29VrcTFEM=",
"dev": true,
"requires": {
"minipass": "^2.5.1"
}
},
"minipass-flush": {
"version": "1.0.4",
"resolved": "https://registry.npm.taobao.org/minipass-flush/download/minipass-flush-1.0.4.tgz",
"integrity": "sha1-5DJhZJ2n/5udtSntxjW4+DVBF1k=",
"dev": true,
"requires": {
"minipass": "^2.6.2"
}
},
"minipass-pipeline": {
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/minipass-pipeline/download/minipass-pipeline-1.2.1.tgz",
"integrity": "sha1-bhlTdvx3/C7re4R2q/f7rQPXbAo=",
"dev": true,
"requires": {
"minipass": "^2.8.1"
}
},
"minstache": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/minstache/download/minstache-1.2.0.tgz",
......@@ -11560,7 +11600,7 @@
"dependencies": {
"buffer": {
"version": "4.9.1",
"resolved": "https://registry.npm.taobao.org/buffer/download/buffer-4.9.1.tgz?cache=0&sync_timestamp=1566942806368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-4.9.1.tgz",
"resolved": "https://registry.npm.taobao.org/buffer/download/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
......@@ -12293,9 +12333,9 @@
}
},
"parse-asn1": {
"version": "5.1.4",
"resolved": "https://registry.npm.taobao.org/parse-asn1/download/parse-asn1-5.1.4.tgz",
"integrity": "sha1-N/Zij4I/vesic7TVQENKIvPvH8w=",
"version": "5.1.5",
"resolved": "https://registry.npm.taobao.org/parse-asn1/download/parse-asn1-5.1.5.tgz?cache=0&sync_timestamp=1568806095714&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse-asn1%2Fdownload%2Fparse-asn1-5.1.5.tgz",
"integrity": "sha1-ADJxND2ljclMrOSU+u89IUfs6g4=",
"dev": true,
"requires": {
"asn1.js": "^4.0.0",
......@@ -15776,9 +15816,9 @@
}
},
"terser": {
"version": "4.3.1",
"resolved": "https://registry.npm.taobao.org/terser/download/terser-4.3.1.tgz",
"integrity": "sha1-CYILyzOYKZxLSNmoau/GUSfQ7WU=",
"version": "4.3.4",
"resolved": "https://registry.npm.taobao.org/terser/download/terser-4.3.4.tgz",
"integrity": "sha1-rZG63pVhnjQ0aF1p76Yhpa9fh30=",
"dev": true,
"requires": {
"commander": "^2.20.0",
......@@ -15787,9 +15827,9 @@
},
"dependencies": {
"commander": {
"version": "2.20.0",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.0.tgz",
"integrity": "sha1-1YuytcHuj4ew00ACfp6U4iLFpCI=",
"version": "2.20.1",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.20.1.tgz?cache=0&sync_timestamp=1569709401112&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.20.1.tgz",
"integrity": "sha1-OGPOPKktCDHc8qEC9ftLWSav0Pk=",
"dev": true
},
"source-map": {
......@@ -15811,42 +15851,45 @@
}
},
"terser-webpack-plugin": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.1.0.tgz",
"integrity": "sha1-uc7nmaLaK854hUDDc44IG22yjYo=",
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.1.2.tgz",
"integrity": "sha1-K5uBR6bxiRg0ggCADPlWDFD3Abs=",
"dev": true,
"requires": {
"cacache": "^12.0.3",
"cacache": "^13.0.0",
"find-cache-dir": "^3.0.0",
"jest-worker": "^24.9.0",
"schema-utils": "^2.2.0",
"schema-utils": "^2.4.1",
"serialize-javascript": "^2.1.0",
"source-map": "^0.6.1",
"terser": "^4.3.1",
"terser": "^4.3.4",
"webpack-sources": "^1.4.3"
},
"dependencies": {
"cacache": {
"version": "12.0.3",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-12.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-12.0.3.tgz",
"integrity": "sha1-vpmruk4b9d9GHNWiwQcfxDJXM5A=",
"version": "13.0.0",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.0.tgz",
"integrity": "sha1-F5fJV7zd97xpdSCSDjooTmT8Icw=",
"dev": true,
"requires": {
"bluebird": "^3.5.5",
"chownr": "^1.1.1",
"chownr": "^1.1.2",
"figgy-pudding": "^3.5.1",
"fs-minipass": "^1.2.7",
"glob": "^7.1.4",
"graceful-fs": "^4.1.15",
"infer-owner": "^1.0.3",
"graceful-fs": "^4.2.2",
"infer-owner": "^1.0.4",
"lru-cache": "^5.1.1",
"mississippi": "^3.0.0",
"minipass": "^2.6.5",
"minipass-collect": "^1.0.1",
"minipass-flush": "^1.0.3",
"minipass-pipeline": "^1.1.2",
"mkdirp": "^0.5.1",
"move-concurrently": "^1.0.1",
"p-map": "^3.0.0",
"promise-inflight": "^1.0.1",
"rimraf": "^2.6.3",
"ssri": "^6.0.1",
"unique-filename": "^1.1.1",
"y18n": "^4.0.0"
"rimraf": "^2.7.1",
"ssri": "^7.0.0",
"unique-filename": "^1.1.1"
}
},
"find-cache-dir": {
......@@ -15897,24 +15940,6 @@
"semver": "^6.0.0"
}
},
"mississippi": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
"integrity": "sha1-6goykfl+C16HdrNj1fChLZTGcCI=",
"dev": true,
"requires": {
"concat-stream": "^1.5.0",
"duplexify": "^3.4.2",
"end-of-stream": "^1.1.0",
"flush-write-stream": "^1.0.0",
"from2": "^2.1.0",
"parallel-transform": "^1.1.0",
"pump": "^3.0.0",
"pumpify": "^1.3.3",
"stream-each": "^1.1.0",
"through2": "^2.0.0"
}
},
"p-limit": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.2.1.tgz",
......@@ -15954,20 +15979,10 @@
"find-up": "^4.0.0"
}
},
"pump": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/pump/download/pump-3.0.0.tgz",
"integrity": "sha1-tKIRaBW94vTh6mAjVOjHVWUQemQ=",
"dev": true,
"requires": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
},
"schema-utils": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.2.0.tgz",
"integrity": "sha1-SKBlziGeDKz0YxRzFZA3ssGugto=",
"version": "2.4.1",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.4.1.tgz?cache=0&sync_timestamp=1569583621807&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.4.1.tgz",
"integrity": "sha1-6JreXQVtyLyso3dXS7SpxOG4vlY=",
"dev": true,
"requires": {
"ajv": "^6.10.2",
......@@ -15993,18 +16008,19 @@
"dev": true
},
"ssri": {
"version": "6.0.1",
"resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
"integrity": "sha1-KjxBso3UW2K2Nnbst0ABJlrp7dg=",
"version": "7.0.0",
"resolved": "https://registry.npm.taobao.org/ssri/download/ssri-7.0.0.tgz",
"integrity": "sha1-XCIpkQqRtsFhMSqNJgjT6D6CxDE=",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
"figgy-pudding": "^3.5.1",
"minipass": "^2.5.1"
}
},
"yallist": {
"version": "3.0.3",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.0.3.tgz",
"integrity": "sha1-tLBJ4xS+VF486AIjbWzSLNkcPek=",
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.1.0.tgz",
"integrity": "sha1-kGzCEAly3CYlrnj1ZqJXcjCh1vc=",
"dev": true
}
}
......@@ -17063,9 +17079,9 @@
}
},
"webpack": {
"version": "4.40.2",
"resolved": "https://registry.npm.taobao.org/webpack/download/webpack-4.40.2.tgz?cache=0&sync_timestamp=1568385142284&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.40.2.tgz",
"integrity": "sha1-0hQz0lD5AL8PrLq+j1DVhbLcMKc=",
"version": "4.41.0",
"resolved": "https://registry.npm.taobao.org/webpack/download/webpack-4.41.0.tgz?cache=0&sync_timestamp=1569532173364&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack%2Fdownload%2Fwebpack-4.41.0.tgz",
"integrity": "sha1-22olS95nF2n3wU6QoaVec2Avxws=",
"dev": true,
"requires": {
"@webassemblyjs/ast": "1.8.5",
......@@ -17095,7 +17111,7 @@
"dependencies": {
"acorn": {
"version": "6.3.0",
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-6.3.0.tgz",
"resolved": "https://registry.npm.taobao.org/acorn/download/acorn-6.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-6.3.0.tgz",
"integrity": "sha1-AIdQkRn/pPwKAEHR6TpBfmjLhW4=",
"dev": true
},
......@@ -17142,7 +17158,7 @@
},
"cacache": {
"version": "12.0.3",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-12.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-12.0.3.tgz",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-12.0.3.tgz",
"integrity": "sha1-vpmruk4b9d9GHNWiwQcfxDJXM5A=",
"dev": true,
"requires": {
......@@ -17520,7 +17536,7 @@
},
"schema-utils": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-1.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-1.0.0.tgz",
"resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-1.0.0.tgz?cache=0&sync_timestamp=1569583621807&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-1.0.0.tgz",
"integrity": "sha1-C3mpMgTXtgDUsoUNH2bCo0lRx3A=",
"dev": true,
"requires": {
......@@ -17546,7 +17562,7 @@
},
"terser-webpack-plugin": {
"version": "1.4.1",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-1.4.1.tgz",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-1.4.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-1.4.1.tgz",
"integrity": "sha1-YbGOQOruW+l+dxzbsQ7RKAiIwrQ=",
"dev": true,
"requires": {
......@@ -17572,9 +17588,9 @@
}
},
"yallist": {
"version": "3.0.3",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.0.3.tgz",
"integrity": "sha1-tLBJ4xS+VF486AIjbWzSLNkcPek=",
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/yallist/download/yallist-3.1.0.tgz",
"integrity": "sha1-kGzCEAly3CYlrnj1ZqJXcjCh1vc=",
"dev": true
}
}
......
......@@ -90,7 +90,7 @@
"css-loader": "^3.1.0",
"del": "^5.0.0",
"devtron": "^1.4.0",
"electron": "^5.0.10",
"electron": "^5.0.11",
"electron-builder": "^21.1.1",
"electron-debug": "^3.0.1",
"electron-devtools-installer": "^2.2.4",
......@@ -124,13 +124,13 @@
"spectron": "^3.8.0",
"style-loader": "^0.21.0",
"svg-sprite-loader": "^4.1.6",
"terser-webpack-plugin": "^2.1.0",
"terser-webpack-plugin": "^2.1.2",
"url-loader": "^2.1.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.40.2",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.1",
"webpack-hot-middleware": "^2.25.0",
......
......@@ -32,7 +32,9 @@ function createWindow () {
backgroundColor: '#fffff',
titleBarStyle: 'hidden',
webPreferences: {
nodeIntegration: true
nodeIntegration: true,
webSecurity: false,
experimentalFeatures: true
}
// 隐藏边框
// frame: false,
......
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<h3 class="title">后台管理框架</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<div class="tips">
<span style="margin-right:20px;">用户名: admin</span>
<span> 密码：随便什么都行</span>
</div>
</el-form>
<div class="login-from-box">
<el-form
class="login-form"
autocomplete="on"
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-position="left"
>
<h3 class="title">后台管理框架</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input
name="username"
type="text"
v-model="loginForm.username"
autocomplete="on"
placeholder="用户名"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input
name="password"
:type="pwdType"
@keyup.enter.native="handleLogin"
v-model="loginForm.password"
autocomplete="on"
placeholder="密码"
></el-input>
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-form-item>
<el-form-item>
<el-button
type="primary"
style="width:100%;"
:loading="loading"
@click.native.prevent="handleLogin"
>登录</el-button>
</el-form-item>
<div class="tips">
<span style="margin-right:20px;">用户名: admin</span>
<span>密码：随便什么都行</span>
</div>
</el-form>
</div>
</div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
import { isvalidUsername } from "@/utils/validate";
export default {
name: 'login',
name: "login",
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
callback(new Error("请输入正确的用户名"));
} else {
callback()
callback();
}
}
};
const validatePass = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
callback(new Error("密码不能小于5位"));
} else {
callback()
callback();
}
}
};
return {
loginForm: {
username: 'admin',
password: 'admin'
username: "admin",
password: "admin"
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePass }]
username: [
{ required: true, trigger: "blur", validator: validateUsername }
],
password: [{ required: true, trigger: "blur", validator: validatePass }]
},
loading: false,
pwdType: 'password'
}
pwdType: "password"
};
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
if (this.pwdType === "password") {
this.pwdType = "";
} else {
this.pwdType = 'password'
this.pwdType = "password";
}
},
handleLogin() {
console.log(11111)
console.log(11111);
this.$refs.loginForm.validate(valid => {
console.log(valid)
console.log(valid);
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
this.loading = true;
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.loading = false;
this.$router.push({ path: "/" });
})
.catch(() => {
this.loading = false;
});
} else {
console.log('error submit!!')
return false
console.log("error submit!!");
return false;
}
})
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$light_gray: #eee;
$dark_gray: #889aa4;
$light_gray: #eee;
/* reset element-ui css */
.login-container {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
.el-input {
background-image: url("https://cn.bing.com/th?id=OHR.ClavijoLandscape_ZH-CN1525245124_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
/deep/ .el-input {
display: inline-block;
height: 47px;
width: 85%;
......@@ -117,69 +155,61 @@ $light_gray:#eee;
}
}
}
.el-form-item {
/deep/ .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
.login-from-box {
position: relative;
backdrop-filter: saturate(180%) blur(20px);
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
width: 100%;
background-color: $bg;
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
.login-form {
position: absolute;
left: 0;
right: 0;
width: 520px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
}
}
.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
.title {
font-size: 26px;
font-weight: 400;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
</style>
......