shuguang/Ollama-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Login Input

Browse Source
This commit is contained in:
shuguang 2025-03-23 21:07:31 +08:00
parent 7097d0777c
commit f288d0ddbd
1 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Login.vue
View File

@ -1,36 +1,67 @@
<template>
<div class="login_container">
<div class="login_title">用户登录界面</div>
<div class="login_title">用户登录</div>
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/images/dinosaur.jpg" alt="" />
<!-- <img src="../assets/images/dinosaur.jpg" alt="" /> -->
</div>
<!-- 登录表单区域 -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
label-width="0px"
class="login_form"
>
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model.trim="loginForm.username" prefix-icon="iconfont icon-gerenxinxi"></el-input>
<el-input
v-model.trim="loginForm.username"
prefix-icon="iconfont icon-gerenxinxi"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-tianchongxing-" type="password"
@keyup.enter.native="login" :show-password="true"></el-input>
<el-input
v-model="loginForm.password"
prefix-icon="iconfont icon-tianchongxing-"
type="password"
@keyup.enter.native="login"
:show-password="true"
></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
<el-button type="primary" @click="login" :loading="loginLoading"
>登录</el-button
>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
<!-- 粒子插件特效-->
<vue-particles class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle"
:particleSize="4" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
:moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
<!-- 粒子插件特效-->
<vue-particles
class="login-bg"
color="#39AFFD"
:particleOpacity="0.7"
:particlesNumber="100"
shapeType="circle"
:particleSize="4"
linesColor="#8DD1FE"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
<div class="footer">
<span style="font-weight: bold;color:white;margin-bottom: 10px">
<span style="font-weight: bold; color: white; margin-bottom: 10px">
登录页面切换
<!-- <i class="iconfont icon-haoyou " @click="goUser"></i> -->
</span>
@ -38,7 +69,6 @@
<i class="iconfont icon-guanliyuan" @click="goManage"></i>
</span>
</div>
</div>
</template>
@ -73,7 +103,7 @@ export default {
},
],
},
loginLoading: false
loginLoading: false,
};
},
methods: {
@ -93,13 +123,10 @@ export default {
const username = this.loginForm.username;
const password = this.loginForm.password;
//向数据库发送axios请求，如果登录成功，就跳转
const { data: res } = await this.$http.post(
"user/login",
{
username,
password
}
);
const { data: res } = await this.$http.post("user/login", {
username,
password,
});
if (res.status !== 200) {
this.loginLoading = false;
return this.$message.error(res.msg);
@ -136,7 +163,8 @@ export default {
.login_container {
// background-color: #2b4b6b;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat 0px 0px;
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
no-repeat 0px 0px;
background-size: cover;
height: 100%;
}