Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 82d79cf5 by lyl_task Committed by GitHub
Options

Merge pull request #3 from lanyulei/dev 

美化登录页面
parents 4d43b1ec f51202db
Inline Side-by-side
Showing with 424 additions and 89 deletions
package.json
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsonlint": "1.6.3", "jsonlint": "1.6.3",
"jszip": "3.2.1", "jszip": "3.2.1",
"moment": "^2.27.0",
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"normalize.css": "7.0.0", "normalize.css": "7.0.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
...@@ -73,6 +74,7 @@ ...@@ -73,6 +74,7 @@
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "^0.5.0", "vue-cropper": "^0.5.0",
"vue-i18n": "^5.0.3", "vue-i18n": "^5.0.3",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",
......
src/assets/dark.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/light.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/particles.json 0 → 100644
{
"particles": {
"number": {
"value": 60,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 4,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 100,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "Window",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
\ No newline at end of file
src/main.js
...@@ -25,6 +25,9 @@ import * as filters from './filters' // global filters ...@@ -25,6 +25,9 @@ import * as filters from './filters' // global filters
import Pagination from '@/components/Pagination' import Pagination from '@/components/Pagination'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
// 代码编辑器 // 代码编辑器
import VueCodeMirror from 'vue-codemirror' import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' import 'codemirror/lib/codemirror.css'
......
src/views/login/index.vue
<template> <template>
<div class="login-container"> <div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"> <div id="particles-js">
<vue-particles
color="#dedede"
:particle-opacity="0.7"
:particles-number="80"
shape-type="circle"
:particle-size="4"
lines-color="#dedede"
:lines-width="1"
:line-linked="true"
:line-opacity="0.4"
:lines-distance="150"
:move-speed="3"
:hover-effect="true"
hover-mode="grab"
:click-effect="true"
click-mode="push"
/>
</div>
<div class="title-container"> <div class="login-weaper animated bounceInDown">
<h3 class="title"> <div class="login-left">
FERRY 管理平台 <div class="login-time" v-text="currentTime" />
</h3> <img src="../../assets/logo/ferry_logo_white.png" alt="" class="img">
<p class="title" v-text="sysInfo.name" />
</div> </div>
<div class="login-border">
<div class="login-main">
<div class="login-title"> 用户登录 </div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<el-form-item prop="username">
<span class="svg-container">
<i class="el-icon-user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
placeholder="用户名"
name="username"
type="text"
tabindex="1"
autocomplete="on"
/>
</el-form-item>
<el-form-item prop="username"> <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<span class="svg-container"> <el-form-item prop="password">
<svg-icon icon-class="user" /> <span class="svg-container">
</span> <svg-icon icon-class="password" />
<el-input </span>
ref="username" <el-input
v-model="loginForm.username" :key="passwordType"
placeholder="用户名" ref="password"
name="username" v-model="loginForm.password"
type="text" :type="passwordType"
tabindex="1" placeholder="密码"
autocomplete="on" name="password"
/> tabindex="2"
</el-form-item> autocomplete="on"
@keyup.native="checkCapslock"
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> @blur="capsTooltip = false"
<el-form-item prop="password"> @keyup.enter.native="handleLogin"
<span class="svg-container"> />
<svg-icon icon-class="password" /> <span class="show-pwd" @click="showPwd">
</span> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
<el-input </span>
:key="passwordType" </el-form-item>
ref="password" </el-tooltip>
v-model="loginForm.password" <el-form-item prop="code" style="width: 66%;float: left;">
:type="passwordType" <span class="svg-container">
placeholder="密码" <svg-icon icon-class="validCode" />
name="password" </span>
tabindex="2" <el-input
autocomplete="on" ref="username"
@keyup.native="checkCapslock" v-model="loginForm.code"
@blur="capsTooltip = false" placeholder="验证码"
@keyup.enter.native="handleLogin" name="username"
/> type="text"
<span class="show-pwd" @click="showPwd"> tabindex="3"
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> maxlength="5"
</span> autocomplete="off"
</el-form-item> style=" width: 75%;"
</el-tooltip> @keyup.enter.native="handleLogin"
<el-form-item prop="code" style="width: 60%;float: left;"> />
<span class="svg-container"> </el-form-item>
<svg-icon icon-class="validCode" /> <div class="login-code" style="cursor:pointer; width: 30%;height: 48px;float: right;background-color: #f0f1f5;">
</span> <img style="height: 48px;width: 100%;border: 1px solid rgba(0,0,0, 0.1);border-radius:5px;" :src="codeUrl" @click="getCode">
<el-input </div>
ref="username"
v-model="loginForm.code" <el-button :loading="loading" type="primary" style="width:100%;padding:12px 20px;margin-bottom:30px;" @click.native.prevent="handleLogin">
placeholder="验证码" <span v-if="!loading">登 录</span>
name="username" <span v-else>登 录 中...</span>
type="text" </el-button>
tabindex="3" </el-form>
autocomplete="off" </div>
style=" width: 75%;"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
<div class="login-code" style=" width: 38%;height: 48px;float: right;background-color: darkgray;">
<img style="height: 48px;width: 100%;" :src="codeUrl" @click="getCode">
</div> </div>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin"> </div>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form>
<el-dialog title="Or connect with" :visible.sync="showDialog"> <el-dialog title="Or connect with" :visible.sync="showDialog">
Can not be simulated on local, so please combine you own business simulation! ! ! Can not be simulated on local, so please combine you own business simulation! ! !
...@@ -85,6 +112,7 @@ ...@@ -85,6 +112,7 @@
<script> <script>
import { getCodeImg } from '@/api/login' import { getCodeImg } from '@/api/login'
import moment from 'moment'
import SocialSign from './components/SocialSignin' import SocialSign from './components/SocialSignin'
export default { export default {
...@@ -115,7 +143,12 @@ export default { ...@@ -115,7 +143,12 @@ export default {
loading: false, loading: false,
showDialog: false, showDialog: false,
redirect: undefined, redirect: undefined,
otherQuery: {} otherQuery: {},
currentTime: null,
sysInfo: {
logo: '@/assets/logo/ferry_logo_white.png',
name: 'ferry管理平台'
}
} }
}, },
watch: { watch: {
...@@ -133,6 +166,7 @@ export default { ...@@ -133,6 +166,7 @@ export default {
created() { created() {
this.getCode() this.getCode()
// window.addEventListener('storage', this.afterQRScan) // window.addEventListener('storage', this.afterQRScan)
this.getCurrentTime()
}, },
mounted() { mounted() {
if (this.loginForm.username === '') { if (this.loginForm.username === '') {
...@@ -142,9 +176,15 @@ export default { ...@@ -142,9 +176,15 @@ export default {
} }
}, },
destroyed() { destroyed() {
clearInterval(this.timer)
// window.removeEventListener('storage', this.afterQRScan) // window.removeEventListener('storage', this.afterQRScan)
}, },
methods: { methods: {
getCurrentTime() {
this.timer = setInterval(_ => {
this.currentTime = moment().format('YYYY-MM-DD HH时mm分ss秒')
}, 1000)
},
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then(res => {
if (res !== undefined) { if (res !== undefined) {
...@@ -189,6 +229,7 @@ export default { ...@@ -189,6 +229,7 @@ export default {
this.getCode() this.getCode()
}) })
} else { } else {
console.log('error submit!!')
return false return false
} }
}) })
...@@ -205,7 +246,7 @@ export default { ...@@ -205,7 +246,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
/* 修复input 背景不协调 和光标变色 */ /* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
...@@ -213,6 +254,120 @@ $bg:#283443; ...@@ -213,6 +254,120 @@ $bg:#283443;
$light_gray:#fff; $light_gray:#fff;
$cursor: #fff; $cursor: #fff;
.login-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
background: url("../../assets/login.png") no-repeat;
background-color: #304175;
position: relative;
background-size: cover;
height: 100vh;
background-position: 50%;
}
#particles-js{
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
}
.login-weaper{
margin: 0 auto;
width: 1000px;
-webkit-box-shadow: -4px 5px 10px rgba(0,0,0,.4);
box-shadow: -4px 5px 10px rgba(0,0,0,.4);
z-index: 1000;
}
.login-left{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: rgba(64,158,255,0);
color: #fff;
float: left;
width: 50%;
position: relative;
min-height: 500px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
.login-time{
position: absolute;
left: 25px;
top: 25px;
width: 100%;
color: #fff;
opacity: .9;
font-size: 18px;
overflow: hidden;
font-weight: 500;
}
}
.login-left .img{
width: 120px;
height: 120px;
border-radius: 3px;
}
.login-left .title {
text-align: center;
color: #fff;
letter-spacing: 2px;
font-size: 30px;
font-weight: 600;
}
.login-border{
position: relative;
min-height: 500px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
color: #fff;
background-color: hsla(0,0%,100%,.9);
width: 50%;
float: left;
}
.login-main{
margin: 0 auto;
width: 65%;
}
.login-title{
color: #333;
margin-bottom: 40px;
font-weight: 500;
font-size: 22px;
text-align: center;
letter-spacing: 4px;
}
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input { .login-container .el-input input {
color: $cursor; color: $cursor;
...@@ -221,7 +376,7 @@ $cursor: #fff; ...@@ -221,7 +376,7 @@ $cursor: #fff;
/* reset element-ui css */ /* reset element-ui css */
.login-container { .login-container {
.el-input { /deep/ .el-input {
display: inline-block; display: inline-block;
height: 47px; height: 47px;
width: 85%; width: 85%;
...@@ -232,9 +387,9 @@ $cursor: #fff; ...@@ -232,9 +387,9 @@ $cursor: #fff;
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0px; border-radius: 0px;
padding: 12px 5px 12px 15px; padding: 12px 5px 12px 15px;
color: $light_gray; color: #333;
height: 47px; height: 47px;
caret-color: $cursor; caret-color: #333;
&:-webkit-autofill { &:-webkit-autofill {
box-shadow: 0 0 0px 1000px $bg inset !important; box-shadow: 0 0 0px 1000px $bg inset !important;
...@@ -244,33 +399,17 @@ $cursor: #fff; ...@@ -244,33 +399,17 @@ $cursor: #fff;
} }
.el-form-item { .el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(0,0,0, 0.1);
background: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.8);
border-radius: 5px; border-radius: 5px;
color: #454545; color: #454545;
} }
} }
</style>
<style lang="scss" scoped>
$bg:#2d3a4b; $bg:#2d3a4b;
$dark_gray:#889aa4; $dark_gray:#889aa4;
$light_gray:#eee; $light_gray:#eee;
.login-container { .login-container {
min-height: 100%;
width: 100%;
background-color: $bg;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 160px 35px 0;
margin: 0 auto;
overflow: hidden;
}
.tips { .tips {
font-size: 14px; font-size: 14px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment