vue+elementui简约登录

        <!-- 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>

<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>