黑色渐变背景css,css-渐变背景，爱了爱了。

好看。嘻嘻！！！

Login

登 录

import md5 from 'js-md5'

import {mapActions} from 'vuex'

export default {

data () {

return {

formInline: {

user: '',

password: ''

},

ruleInline: {

user: [

{ required: true, message: '请填写用户名', trigger: 'blur' }

],

password: [

{ required: true, message: '请填写密码', trigger: 'blur' },

{ type: 'string', min: 5, message: '密码长度不能小于5位', trigger: 'blur' }

]

},

toPath: ''// 登录失效，重定向页面

}

},

created () {

this.toPath = this.$route.query.redirect

},

methods: {

...mapActions(['loginHandle']),

handleSubmit (name) {

this.$refs[name].validate((valid) => {

if (valid) {

let params = {

userName: this.formInline.user.trim(),

password: md5(this.formInline.password.trim())

}

this.loginHandle(params).then(res => {

if (this.toPath) {

this.$router.push(this.toPath)

} else {

this.$router.push({

path: '/home'

})

}

})

.catch(error => { console.log(error) })

.finally((msg) => {

console.log(msg)

})

} else {

return false

}

})

}

}

}

.container{

height: 100vh;

background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);

}

.login-wrapper{

background-color: #fff;

width: 350px;

height: 500px;

border-radius: 15px;

padding: 0 20px;

position: relative;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

.login-wrapper .header{

font-size: 30px;

font-weight: bold;

text-align: center;

line-height: 200px;

}

标签：toPath,formInline,背景,渐变,50%,blur,message,password,css

来源： https://www.cnblogs.com/wenshaochang123/p/13572206.html