我属于完全的前端小白,安装npm install sass-loader --save
当然还需要node-sass
等
1 Assets和static的区别
assets中静态文件加载和static静态文件加载方式不一样,如下面代码所示,static目录中可以加载出来
详细可参见vue2.0 资源文件assets和static的区别,虽然我不是看的非常明白。
<style lang="scss">
.login-container{
background: url("~@/assets/images/login-bg.jpg") no-repeat center fixed;
// background: url("/static/login-bg.jpg") no-repeat center fixed;
background-size: cover;
}
</style>
2 登录页面
<template>
<div class="bg-login">
<div class="login-header container">
</div>
<div class="middle-box loginscreen bg-white container">
<div class="login-top"></div>
<div class="login-title text-center">
<h1>用户登录</h1>
</div>
<el-form inline-message :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="username">
<el-input status-icon prefix-icon="fa fa-user" v-model="loginForm.username" placeholder="请输入用户名" ></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="fa fa-lock" :type="passwordType" @keyup.enter.native="doLogin"
v-model="loginForm.password" placeholder="请输入密码" auto-complete="on">
</el-input>
<span class="show-pwd" :style="eyeStatus" @click="showPwd"><i class="icon iconfont icon-eye"></i></span>
</el-form-item>
<el-form-item label="">
<el-button type="primary" :loading="loading" @click.native.prevent="doLogin">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name:'login',
data() {
return {
loginForm:{
username:'',
password:''
},
loginRules:{
username:[{required:true, message:'用户名不能为空',trigger:'blur'},{min:5, max:20, message:'长度在 5 到 20 个字符', trigger: 'blur'}],
password:[{required:true,trigger:'blur'},{min:6,message:'密码长度必须6位以上',trigger:'blur'}]
},
loading:false,
passwordType:'password',
eyeStatus:''
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
this.eyeStatus = 'color:#1296db'
} else {
this.passwordType = 'password'
this.eyeStatus = ''
}
},
doLogin() {
this.$refs.loginForm.validate(valid => {
if (valid){
this.loading = true
} else{
return false
}
})
}
}
}
</script>
<style lang="scss" >
$dark_gray:#889aa4;
body{
background: url("~@/assets/images/login-bg.jpg") no-repeat center fixed;
background-size: cover;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.bg-white{
background-color: #ffffff;
opacity: 0.8;
}
.middle-box{
max-width: 400px;
z-index: 100;
margin: 0 auto;
padding-bottom: 10px;
}
.loginscreen .middle-box{
width: 300px;
}
.login-top{
background-color: #3b3127;
height: 6px;
}
.login-title{
height:130px;
padding:30px;
font-weight:bold;
}
.login-header{
height:265px;
}
.login-logo{
margin-top:40px;
}
.login-logo-zh,
.login-logo-en{
font-weight:bold;
color:#3b3127;
}
.login-logo-zh{
font-size:45px;
font-family:"宋体";
}
.login-logo-en{
font-size:21px;
font-family:"Helvetica";
}
.middle-box{
.el-input {
display: inline-block;
}
.el-button {
display: inline-block;
width:100%;
}
.el-input__inner {
text-align: center;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 2px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
</style>
这里iconfont是自定义的图标,来源于http://www.iconfont.cn。导出样式