Vue2+ElementUI实现多个登录页面

于 2025-04-21 17:38:08 发布
阅读量666 收藏 3
点赞数 32
分类专栏： Web 文章标签： elementui vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45146962/article/details/147244875
版权

文章目录

响应式登录页面

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-row type="flex" justify="center" align="middle" style="height: 100vh;">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card class="box-card">
        <div class="clearfix">
          <img src="@/assets/logo.png" class="logo" />
          <h2>欢迎登录</h2>
        </div>
        <el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-user" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" show-password autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          alert('提交成功!');
          // 这里可以添加提交到服务器的逻辑
        } else {
          console.log('表单验证失败！');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    }
  }
};
</script>
 
<style scoped>
.box-card {
  /* border: 1px solid red; */
  width: 100%; /* 或者具体宽度 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 阴影 */
  background-color:aliceblue;
}

.el-row {
    background-image: url('../assets/pic01.jpg');
    background-size: cover; /* 使背景图片覆盖整个容器 */
    background-position: center; /* 将背景图片居中 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
}

.logo {
  width: 80px;
  height: 80px;
}
</style>

在这里插入图片描述

基础登录表单

<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">系统登录</h2>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" style="width:100%">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录逻辑
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
  width: 400px;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}
</style>

在这里插入图片描述

带背景图的登录页面

<template>
  <div class="login-container">
    <div class="login-bg"></div>
    <el-card class="login-card">
      <div class="login-header">
        <img src="@/assets/logo.png" class="logo" />
        <h2>欢迎登录</h2>
      </div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="remember">记住密码</el-checkbox>
          <el-link type="primary" :underline="false" style="float:right">忘记密码?</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" style="width:100%">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      remember: false
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录逻辑
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('~@/assets/login-bg.jpg') no-repeat center center;
  background-size: cover;
  filter: blur(5px);
}

.login-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  margin-top: 15px;
  color: #333;
  font-weight: 500;
}

.logo {
  width: 80px;
  height: 80px;
}
</style>

在这里插入图片描述

标签页切换登录方式

<template>
  <div class="login-container">
    <el-card class="login-card">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="账号登录" name="account">
          <el-form :model="accountForm" :rules="rules" ref="accountForm">
            <el-form-item prop="username">
              <el-input
                v-model="accountForm.username"
                prefix-icon="el-icon-user"
                placeholder="用户名/手机号/邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="accountForm.password"
                prefix-icon="el-icon-lock"
                placeholder="密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAccountLogin" style="width:100%">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="手机登录" name="phone">
          <el-form :model="phoneForm" :rules="rules" ref="phoneForm">
            <el-form-item prop="phone">
              <el-input
                v-model="phoneForm.phone"
                prefix-icon="el-icon-mobile"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <div style="display:flex">
                <el-input
                  v-model="phoneForm.code"
                  prefix-icon="el-icon-message"
                  placeholder="验证码"
                  style="flex:1"
                ></el-input>
                <el-button
                  type="primary"
                  style="margin-left:10px"
                  :disabled="codeDisabled"
                  @click="getCode"
                >{{ codeText }}</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handlePhoneLogin" style="width:100%">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div class="login-footer">
        <el-divider></el-divider>
        <div style="text-align:center">
          <el-link :underline="false">注册账号</el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link :underline="false">忘记密码</el-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'account',
      accountForm: {
        username: '',
        password: ''
      },
      phoneForm: {
        phone: '',
        code: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      codeDisabled: false,
      codeText: '获取验证码',
      countdown: 60
    }
  },
  methods: {
    handleAccountLogin() {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          // 账号登录逻辑
        }
      })
    },
    handlePhoneLogin() {
      this.$refs.phoneForm.validate(valid => {
        if (valid) {
          // 手机登录逻辑
        }
      })
    },
    getCode() {
      if (!this.phoneForm.phone) {
        this.$message.error('请输入手机号')
        return
      }
      
      this.codeDisabled = true
      const timer = setInterval(() => {
        this.countdown--
        this.codeText = `${this.countdown}秒后重新获取`
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.codeDisabled = false
          this.codeText = '获取验证码'
          this.countdown = 60
        }
      }, 1000)
      
      // 发送验证码请求
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f2f5;
}

.login-card {
  width: 450px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-footer {
  margin-top: 20px;
}
</style>

在这里插入图片描述

卡片式多风格登录

<template>
  <div class="multi-style-login">
    <el-row :gutter="20" class="login-row">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" class="login-left">
        <div class="welcome-text">
          <h1>欢迎回来</h1>
          <p>使用您的账号登录系统，开始您的工作</p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card class="login-card">
          <div class="login-header">
            <h2>账号登录</h2>
            <div class="login-methods">
              <el-tooltip content="微信登录" placement="top">
                <i class="iconfont icon-weixin"></i>
              </el-tooltip>
              <el-tooltip content="QQ登录" placement="top">
                <i class="iconfont icon-qq"></i>
              </el-tooltip>
              <el-tooltip content="微博登录" placement="top">
                <i class="iconfont icon-weibo"></i>
              </el-tooltip>
            </div>
          </div>
          <el-form :model="loginForm" :rules="rules" ref="loginForm">
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="remember">记住我</el-checkbox>
              <el-link type="primary" :underline="false" style="float:right">忘记密码?</el-link>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm"
                style="width:100%"
                size="medium"
              >登 录</el-button>
            </el-form-item>
          </el-form>
          <div class="register-tip">
            还没有账号? <el-link type="primary" :underline="false">立即注册</el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      remember: false
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录逻辑
        }
      })
    }
  }
}
</script>

<style scoped>
.multi-style-login {
  height: 100vh;
  background: linear-gradient(120deg, #f6f7f9 0%, #e7e9ee 100%);
  display: flex;
  align-items: center;
}

.login-row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.login-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.welcome-text {
  color: #333;
}

.welcome-text h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.welcome-text p {
  font-size: 16px;
  color: #666;
}

.login-card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.login-methods {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.login-methods i {
  font-size: 24px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.login-methods i:hover {
  color: #409EFF;
}

.register-tip {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

@media (max-width: 768px) {
  .login-left {
    display: none;
  }
  
  .login-row {
    padding: 20px;
  }
}
</style>

在这里插入图片描述

分栏登录页面

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-page">
    <div class="login-container">
      <div class="left-panel">
        <img src="@/assets/logo.png" alt="Logo" class="logo" />
        <!-- 替换为你的 logo 路径 -->
        <h1>HENGSHI SENSE</h1>
        <h2>系统标题</h2>
      </div>
      <div class="right-panel">
        <div class="title">
          <h3>欢迎登录</h3>
        </div>
        <el-form :model="form" class="login-form">
          <el-form-item label="用户名">
            <el-input
              v-model="form.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              show-password
              placeholder="密码"
            ></el-input>
            <el-button slot="append" icon="el-icon-view"></el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    handleLogin() {
      // 在这里处理登录逻辑，例如发送请求到后端
      console.log("登录信息:", this.form);
    },
  },
};
</script>

<style scoped>
.login-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
}
.login-container {
  display: flex;
  width: 80%;
  height: 60%;
}

.left-panel {
  flex: 1;
  background-color: #00b0ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.right-panel {
  flex: 1;
  background-color: #00b0ff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.login-form {
  width: 100%;
  max-width: 300px;
}

.footer-text {
  margin-top: 20px;
  text-align: center;
}
</style>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值