一.匯入js，css
<!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- jquery --> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
二.主題內容
<div class="store-login" id="app"> <!-- 背景 --> <div class="bg-login"> <li> <img src="./img/bg1.jpg"> </li> <li> <img src="./img/bg2.jpg"> </li> <li> <img src="./img/bg4.jpg"> </li> <li> <img src="./img/bg3.jpg"> </li> </div> <div class="login-s"> <!-- 登錄表單 --> <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form"> <!-- 用戶名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input> </el-form-item> <!-- 密碼 --> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input> </el-form-item> <!-- 按鈕 --> <el-form-item class="btns"> <el-button type="primary" @click="login">登錄</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form> </div> </div>
三.javascript代碼
<script>
new Vue({
el: '#app',
data: function() {
return {
//資料系結
index: 3,
show: {
diplay: 'blok',
},
loginForm: {
username: 'admin',
password: '123456'
},
//表單驗證規則
loginFormRules: {
username: [{
required: true,
message: '請輸入登錄名',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '登錄名長度在 3 到 10 個字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '請輸入密碼',
trigger: 'blur'
},
{
min: 6,
max: 15,
message: '密碼長度在 6 到 15 個字符',
trigger: 'blur'
}
]
}
}
},
methods: {
//添加表單重置方法
resetLoginForm() {
//this=>當前組件物件，其中的屬性$refs包含了設定的表單ref
// console.log(this)
this.$refs.LoginFormRef.resetFields()
},
login() {
//點擊登錄的時候先呼叫validate方法驗證表單內容是否有誤
this.$refs.LoginFormRef.validate(async valid => {
console.log(this.loginFormRules)
//如果valid引數為true則驗證通過
if (!valid) {
return
}
//發送請求進行登錄
const {
data: res
} = await this.$http.post('login', this.loginForm)
// console.log(res);
if (res.meta.status !== 200) {
return this.$message.error('登錄失敗:' + res.meta.msg) //console.log("登錄失敗:"+res.meta.msg)
}
this.$message.success('登錄成功')
console.log(res)
//保存token
window.sessionStorage.setItem('token', res.data.token)
// 導航至/home
this.$router.push('/home')
})
},
changBg() {
// alert(11);
// const bglogin = document.getElementsByClassName("bg-login");
// console.log(bglogin);
if (this.index === 0) {
this.index = 3;
} else {
this.index = this.index - 1;
}
$(".bg-login>li:eq(" + this.index + ")").fadeIn("3000").siblings().fadeOut("3000");
console.log(this.index);
}
},
created() {
setInterval(this.changBg, 7000);
}
})
</script>
四.代碼樣式
<style type="text/css"> *{ padding: 0; margin: 0; } body,html { width: 100%; height: 100%; } .store-login { background-color: white; height: 100%; position: relative; } .bg-login { /*background: url("../../public/img/3Dbg01.jpg") no-repeat;*/ /*background-size: 100% 100%;*/ position: relative; height: 100%; opacity: 0.8; z-index: 1; } .bg-login > li { list-style: none; /*display: none;*/ position: relative; width: 100%; height: 100%; position: absolute; } .bg-login > li > img { width: 100%; height: 100%; opacity: 0.9; transition: ease .5s; } .login-s { position: absolute; width: 350px; height: 400px; background-color: rgba(0, 0, 0, 0.3); top: 35%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; z-index: 2; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); text-align: center; } .login_form { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 30px; } </style>
五.效果圖
預覽地址：
個人學習，內容簡略
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/232982.html
標籤：其他
上一篇：js 日期時間的格式化
下一篇：切換npm源