hzzly / vue-particle-line Goto Github PK

<template>
  <vue-particle-line>
    <!--  <div class="login-wrapper" :style="'background-image:url('+ Background +')'"> 图片背景，可以替换下面的粒子线条背景-->
    <div class="login-wrapper" style="background-color: #263238">
      <div class="form-box" style="opacity: 0.9">
        <div class="form-title">
          <img src="../assets/img/logo1532-white.png" alt="icon">
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="0px" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" size="small" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </vue-particle-line>