From 25c1d10f03df05104e323494fefd5af1e94c98f7 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Thu, 21 Aug 2025 17:12:55 +0800
Subject: [PATCH] 1
---
src/views/login.vue | 316 +++++++++++++++++++++++++++-------------------------
1 files changed, 163 insertions(+), 153 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 0d552de..9835399 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,191 +1,201 @@
<template>
- <div class="login-container page-w page-content">
- <div class="login-left">
- <div class="logo-container flex-center">
- <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
- </div>
- <div class="slogan">
+ <div class="login-container page-w page-content">
+ <div class="login-left">
+ <div class="logo-container flex-center">
+ <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
+ </div>
+ <!-- <div class="slogan">
<h1>Purchase, Trading</h1>
<h2>All here</h2>
- </div>
- </div>
- <div class="login-right">
- <div class="login-form">
- <h2>{{ $t('dlan') }}</h2>
- <el-form :model="loginForm" :rules="rules" ref="loginForm">
- <el-form-item prop="phone">
- <label>{{ $t('hj27') }}</label>
- <el-input v-model="loginForm.phone" placeholder=""></el-input>
- </el-form-item>
- <el-form-item prop="userPwd">
- <label>{{ $t('Password') }}</label>
- <el-input v-model="loginForm.userPwd" type="password" placeholder="" show-password></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" class="login-button" @click="submitForm('loginForm')"
- :loading="isloading">
- {{ $t('dlan') }}
- </el-button>
- </el-form-item>
- <div class="login-options">
- <span>{{ $t('hj14') }}?</span>
- <router-link to="/register" class="register-link">{{ $t('ar1') }}</router-link>
- </div>
- </el-form>
- </div>
- </div>
+ </div> -->
</div>
+ <div class="login-right">
+ <div class="login-form">
+ <h2>{{ $t("dlan") }}</h2>
+ <el-form :model="loginForm" :rules="rules" ref="loginForm">
+ <el-form-item prop="phone">
+ <label>{{ $t("hj27") }}</label>
+ <el-input v-model="loginForm.phone" placeholder=""></el-input>
+ </el-form-item>
+ <el-form-item prop="userPwd">
+ <label>{{ $t("Password") }}</label>
+ <el-input
+ v-model="loginForm.userPwd"
+ type="password"
+ placeholder=""
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="login-button"
+ @click="submitForm('loginForm')"
+ :loading="isloading"
+ >
+ {{ $t("dlan") }}
+ </el-button>
+ </el-form-item>
+ <div class="login-options">
+ <span>{{ $t("hj14") }}?</span>
+ <router-link to="/register" class="register-link">{{
+ $t("ar1")
+ }}</router-link>
+ </div>
+ </el-form>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import * as api from '@/axios/api.js'
+import * as api from "@/axios/api.js";
export default {
- name: "LoginView",
- data() {
- return {
- loginForm: {
- phone: "",
- userPwd: ""
- },
- rules: {
- phone: [
- { required: true, message: this.$t('请输入'), trigger: "blur" }
- ],
- userPwd: [
- { required: true, message: this.$t('请输入'), trigger: "blur" }
- ]
- },
- isloading: false,
- };
- },
- methods: {
- // 提交表单 登录
- submitForm(formName) {
- this.$refs[formName].validate(async (valid) => {
- if (valid) {
- // 登录逻辑
- this.isloading = true; // 显示加载状态
- let data = await api.login(this.loginForm);
+ name: "LoginView",
+ data() {
+ return {
+ loginForm: {
+ phone: "",
+ userPwd: "",
+ },
+ rules: {
+ phone: [
+ { required: true, message: this.$t("请输入"), trigger: "blur" },
+ ],
+ userPwd: [
+ { required: true, message: this.$t("请输入"), trigger: "blur" },
+ ],
+ },
+ isloading: false,
+ };
+ },
+ methods: {
+ // 提交表单 登录
+ submitForm(formName) {
+ this.$refs[formName].validate(async (valid) => {
+ if (valid) {
+ // 登录逻辑
+ this.isloading = true; // 显示加载状态
+ let data = await api.login(this.loginForm);
- if (data.status == 0) {
- this.$store.commit("undataToken", data.data.token); // 存储token,vuex
- window.localStorage.setItem("USERTOKEN", data.data.token); // 存储token,浏览器
- this.$router.replace({ path: "/" }); // 跳转到首页
- }
- this.isloading = false; // 隐藏加载状态
- } else {
- console.log("error submit!!");
- return false;
- }
- });
+ if (data.status == 0) {
+ this.$store.commit("undataToken", data.data.token); // 存储token,vuex
+ window.localStorage.setItem("USERTOKEN", data.data.token); // 存储token,浏览器
+ this.$router.replace({ path: "/" }); // 跳转到首页
+ }
+ this.isloading = false; // 隐藏加载状态
+ } else {
+ console.log("error submit!!");
+ return false;
}
- }
+ });
+ },
+ },
};
</script>
<style lang="scss" scoped>
+::v-deep .el-input__inner {
+ background: none;
+ color: #fff;
+ border: none;
+ border-radius: 0;
+ border-bottom: #ccc solid 1px;
+}
.login-container {
- display: flex;
- height: 100vh;
- width: 100%;
- background-color: #fff;
+ display: flex;
+ height: 100vh;
+ width: 100%;
+ // background-color: #fff;
}
.login-left {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- background-color: #f5f5f5;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #333;
}
.logo-container {
- margin-bottom: 40px;
+ margin-bottom: 40px;
}
.logo {
- width: 200px;
+ width: 200px;
}
.slogan {
- margin: 0 auto;
+ margin: 0 auto;
- h1 {
- font-size: 36px;
- color: #333;
- margin-bottom: 10px;
- font-weight: bold;
- }
+ h1 {
+ font-size: 36px;
+ color: #333;
+ margin-bottom: 10px;
+ font-weight: bold;
+ }
- h2 {
- font-size: 36px;
- color: #c8d405;
- font-weight: bold;
- }
+ h2 {
+ font-size: 36px;
+ color: #287dff;
+ font-weight: bold;
+ }
}
.login-right {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.login-form {
- width: 70%;
- max-width: 400px;
+ width: 70%;
+ max-width: 400px;
- h2 {
- font-size: 24px;
- margin-bottom: 30px;
- font-weight: normal;
+ h2 {
+ font-size: 24px;
+ margin-bottom: 30px;
+ font-weight: normal;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 8px;
+ color: #606266;
+ }
+
+ .el-form-item {
+ margin-bottom: 25px;
+ }
+
+ .el-input {
+ width: 100%;
+ }
+
+ .login-button {
+ width: 100%;
+ height: 50px;
+ font-size: 16px;
+ border-radius: 25px;
+ margin-top: 10px;
+ }
+
+ .login-options {
+ text-align: center;
+ margin-top: 15px;
+ font-size: 14px;
+ color: #606266;
+
+ .register-link {
+ color: #287dff;
+ margin-left: 5px;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
-
- label {
- display: block;
- margin-bottom: 8px;
- color: #606266;
- }
-
- .el-form-item {
- margin-bottom: 25px;
- }
-
- .el-input {
- width: 100%;
- }
-
- .login-button {
- width: 100%;
- height: 50px;
- background-color: #c8d405;
- border-color: #c8d405;
- font-size: 16px;
- border-radius: 25px;
- margin-top: 10px;
-
- &:hover,
- &:focus {
- background-color: #b8c205;
- border-color: #b8c205;
- }
- }
-
- .login-options {
- text-align: center;
- margin-top: 15px;
- font-size: 14px;
- color: #606266;
-
- .register-link {
- color: #c8d405;
- margin-left: 5px;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3