【无标题】

VUE3实现登录页面

如图所示：

代码如下：

<template>
  <div class="container">
    <div class="login-form">
      <div class="login-form-login">
        <div>
          <el-image
            style="width: 80px; height: 80px; margin-left: 50px;"
            :src="require('@/assets/login-logo.png')"
            fit="fill"
          />
          <div class="login-form-text">学生管理系统</div>
          <div class="login-form-desc">让办公更加简便，更快速！</div>
        </div>
      </div>
      <div v-if="status === true" class="login-form-form">
        <div style="display: flex; margin-top: 60px;">
          <div class="login-line"></div>
          <div class="login-text">欢迎登录</div>
        </div>
        <el-divider />
        <el-form :model="form" label-width="80px">
          <el-form-item label="学号:">
            <el-input v-model="form.stuno" />
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="form.password" />
          </el-form-item>
          <div class="xiugaimima">
            <div class="xiugaimima1">修改密码?</div>
          </div>
          <el-form-item>
            <el-button color="#626aef" style="width:100%;" plain @click="onLogin()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="status === false"  class="login-form-form">
        <div style="display: flex; margin-top: 60px;">
          <div class="login-line"></div>
          <div class="login-text">修改密码</div>
        </div>
        <el-divider />
        <el-form :model="form" label-width="80px">
          <el-form-item label="学号:">
            <el-input v-model="form.stuno" />
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="form.password" />
          </el-form-item>
          <div @click="updatePsword()" class="xiugaimima">修改密码?</div>
          <el-form-item>
            <el-button color="#626aef" style="width:100%;" plain @click="onLogin()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { login } from '@/api/student'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
// do not use same name with ref
const form = reactive({
  stuno: '2021',
  password: 'xie'
})

const status = ref<boolean>(true)

const updatePsword = () => {
  status.value = false
  console.log(3333333)
}
const onLogin = () => {
  login({
    stuno: form.stuno,
    password: form.password
  }).then((res: any) => {
    if (res.code === '200') {
      ElMessage({
        message: '登录成功！',
        type: 'success'
      })
      localStorage.setItem('token', '79FAF822-7194-4FE3-8C4F-1D99BE71BC9C')
      router.push('/')
    }
  })
}
</script>
<style lang="less" scoped>
.login-line {
  display: inline-block;
  margin-right: 3px;
  width: 6px;
  height: 30px;
  background: #409eff;
}
.login-text {
  font-size: 20px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: aqua;
  background: url("@/assets/background.png") no-repeat;
  background-size: cover;
}
.login-form {
  z-index: 99;
  display: flex;
  width: 700px;
  height: 400px;
  background: rgba(256, 256, 256, 0.6);
  border-radius: 20px;
  .login-form-login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: rgba(4, 247, 4, 0.2);
    border-radius: 20px 0px 0 20px;
    .login-form-text {
        margin-left: 20px;
        margin-bottom: 15px;
        font-size: 20px;
    }
    .login-form-desc {
        font-size: 14px;
        font-family: 楷体;
    }
  }
}
.xiugaimima {
  cursor:pointer;
  margin-bottom: 10px;
  color: rgba(10, 93, 247, 0.929);
  width: 100%;
  height: 100%;
  font-size: 12px;
  text-align: end;
}
</style>