css 毛玻璃效果
先上效果图vue代码css代码
先上效果图
vue代码
<template>
<div class="login-view">
<transition name="slide-fade">
<div class="wrap" v-if="show">
<div class="login-field">
<div class="login-content">
<h2>xxxxxxxxxx</h2>
<el-form status-icon>
<div class="input-item input-user">
<el-input v-model="form.phone" placeholder="请输入账号">
<i
slot="prefix"
style="font-size:24px;line-height:46px;margin:0 10px 0 10px"
class="iconfont icon-yonghu"
></i>
</el-input>
</div>
<div class="input-item input-passwd">
<el-input
type="password"
placeholder="请输入密码"
v-model="form.password"
autocomplete="off"
>
<i
slot="prefix"
style="font-size:22px;line-height:46px;margin:0 10px 0 10px"
class="iconfont icon-mima"
></i>
</el-input>
</div>
<div class="submit-login">
<el-button
type="primary"
:class="isAllowLogin ? '' : 'button-disable'"
@click="submitForm()"
>登 录</el-button
>
</div>
</el-form>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import request from "@/api/request.js";
import storage from "@/storage/storage.js";
export default {
name: "Login-view",
data() {
return {
show: false,
form: {
phone: "16888888888",
password: "123456"
}
};
},
mounted() {
this.show = true;
// setTimeout(() => {
// }, 100);
},
computed: {
isAllowLogin() {
return this.form.phone && this.form.password;
}
},
methods: {
async submitForm() {
try {
let res = await request.login(this.form);
storage.TOKEN = res.token;
storage.USER_ACCOUNT = this.form.phone;
storage.USER_INFO = res;
this.$router.push("/home");
console.log("current login user info: " + JSON.stringify(res));
} catch (exception) {
console.error("error:");
console.error(exception);
}
}
}
};
</script>
<style lang="less">
.login-view .login-field .el-input__inner {
height: 50px;
padding-left: 54px;
}
</style>
<style lang="less" scoped>
@import "./login.less";
</style>
css代码
.login-view {
background-color: red;
height: 100%;
background: url("../../assets/login_bg.jpg");
background-position: center center;
background-size: cover;
.wrap {
width: 420px;
margin: 0 auto;
height: 100%;
// padding-top: 80px;
box-sizing:border-box;
display: flex;
flex-direction: column;
justify-content: center;
// align-items: center;
h2 {
margin-bottom: 60px;
text-align: center;
color: @primary_clr;
font-size: 48px;
}
.login-field {
// height: 430px;
background-color: rgba(220 , 220, 220, 0.5);
background-position: center center;
background-size: cover;
box-shadow: 3px 3px 10px 3px rgba(0 , 0, 0, .3);
border-radius: 6px;
margin-bottom: 50px;
overflow: hidden;
position: relative;
// border: 10px solid yellow;
height: 530px;
.login-content {
padding: 40px 50px 60px;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
// background-color: red;
> p {
font-size: @font_size_18;
height: 30px;
border-bottom: 3px solid @primary_clr;
display: inline-block;
margin-bottom: 38px;
}
.input-item {
margin-bottom: 40px;
}
.submit-login .el-button {
width: 100%;
height: 46px;
font-size: 18px;
border-radius: 10px;
background-color: @primary_clr;
cursor: pointer;
}
.submit-login .el-button.button-disable {
background-color: #ddd;
outline: none;
border: none;
}
}
#毛玻璃效果核心css代码
&::before {
background: url("../../assets/login_bg.jpg");
background-attachment: fixed;
background-position: center center;
background-size: cover;
content: "";
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-ms-filter: blur(6px);
-o-filter: blur(6px);
filter: blur(6px);
z-index: 0;
}
}
}
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all 1s ease-in-out;
}
.slide-fade-enter
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateY(-100px);
opacity: 0;
}
