From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/components/Login.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..6a62431
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,171 @@
+<template>
+ <div class="login-wrapper">
+ <div class="video-wrapper">
+ <!--<video class="w-full h-full object-fill" muted autoplay="true" loop="loop" poster="/login/bg-video-poster.jpg">
+ <source src="/login/bg-video.mp4" type="video/mp4" />
+ </video>-->
+ <img src="/login/login-bg.jpg" alt="logo"/>
+ </div>
+ <div class="form-wrapper">
+ <img class="logo" src="/login/logo.png" alt="logo"/>
+ <div class="form">
+ <div class="content">
+ <el-form ref="loginForm" :inline="true" :model="formInline" size="medium" :rules="formInline.rules" @keyup.enter.native="doLogin">
+ <el-form-item prop="id">
+ <el-input class="el-formitem-cus id" v-model="formInline.id" placeholder="请输入您的账号"></el-input>
+ </el-form-item>
+ <el-form-item prop="pwd">
+ <el-input class="el-formitem-cus pwd" v-model="formInline.pwd" placeholder="请输入您的密码" :type="formInline.type">
+ <div slot="suffix" @click.stop="toggleInputType" class="hover:cursor-pointer">
+ <img v-if="isPassword" src="/login/eye-closed.png" alt="密码" />
+ <img v-else src="/login/eye.png" alt="文本" />
+ </div>
+ </el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button class="el-formitem-cus btn-login" type="primary" :loading="isAuthenticating" @click="doLogin">登录</el-button>
+ </el-form-item>
+ <el-form-item class="rember">
+ <el-checkbox v-model="formInline.rember">记住我</el-checkbox>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { doAuthenticateLogin } from "../api/authenticate";
+export default {
+ name: "Login",
+ data() {
+ return {
+ formInline: {
+ id: "",
+ pwd: "",
+ type: "password",
+ rember: false,
+ rules: {
+ id: [{ required: true, message: "请输入账号", trigger: "change" }],
+ pwd: [{ required: true, message: "请输入密码", trigger: "change" }],
+ },
+ },
+ };
+ },
+ computed: {
+ ...mapGetters("common", ["isAuthenticating", "token"]),
+ isPassword() {
+ return this.formInline.type === "password";
+ },
+ },
+ methods: {
+ toggleInputType() {
+ if (this.formInline.type === "password") {
+ this.formInline.type = "text";
+ } else {
+ this.formInline.type = "password";
+ }
+ },
+ doLogin() {
+ this.$refs.loginForm.validate((valid) => {
+ if (valid) {
+ doAuthenticateLogin({ name: this.formInline.id, pwd: this.formInline.pwd }).then((loginResult) => {
+ if (loginResult?.code === 0) {
+ this.$router.replace("/home");
+ }
+ });
+ }
+ });
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+ .video-wrapper {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .form-wrapper {
+ margin-top: 180px;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ align-items: center;
+ .logo {
+ margin: 0 auto;
+ width: 606px;
+ // height: auto;
+ }
+ .form {
+ position: relative;
+ z-index: 2;
+ margin-top: 70px;
+ width: 966px;
+ min-height: 186px;
+ background: url("/login/form-bg.png") center/cover no-repeat;
+ .content {
+ display: flex;
+ position: absolute;
+ z-index: 90;
+ top: 70px;
+ left: 40px;
+ @apply space-x-3;
+ @apply font-pingfang;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ ::v-deep .el-formitem-cus {
+ height: 50px;
+ border: none;
+ font-size: 16px;
+ &.id,
+ &.pwd {
+ width: 360px;
+ .el-input__inner {
+ height: 50px;
+ background-color: #5b6693;
+ border-radius: 6px;
+ }
+ }
+ .el-input__suffix {
+ &-inner {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ }
+ }
+ &.btn-login {
+ width: 130px;
+ background-color: rgba(0, 140, 153, 1);
+ }
+ }
+ ::v-deep .rember {
+ margin: 0;
+ margin-top: -8px;
+ width: 100%;
+ .el-checkbox__label {
+ color: #d8d7da;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3