2 changed files with 314 additions and 153 deletions
@ -1,174 +1,142 @@ |
|||||
<template> |
<template> |
||||
<div class="login-container"> |
|
||||
<!-- 背景图 --> |
|
||||
<div class="background-image"></div> |
|
||||
<!-- 登录表单 --> |
|
||||
|
<div class="main"> |
||||
<div class="login-form"> |
<div class="login-form"> |
||||
<div class="login_logo"> |
|
||||
<img :src="logoSvg" class="logo_size"/> |
|
||||
<div class="company_name">长春黄金研究院有限公司</div> |
|
||||
</div> |
|
||||
<!-- 用户名输入框 --> |
|
||||
<div class="login-user-input"> |
|
||||
<div class="user_name">用户名</div> |
|
||||
<img class="user_name_icon" :src="userIconSvg"/> |
|
||||
<input type="text" v-model="username" placeholder="用户名" class="input-field" /> |
|
||||
</div> |
|
||||
<!-- 密码输入框 --> |
|
||||
<div class="login-pwd-input"> |
|
||||
<div class="user_name">密码</div> |
|
||||
<img class="pwd_icon" :src="pwdIconSvg"/> |
|
||||
<input type="password" v-model="password" placeholder="密码" class="input-field" /> |
|
||||
</div> |
|
||||
<!-- 登录按钮 --> |
|
||||
<button @click="handleLogin" class="login-button">登录</button> |
|
||||
</div> |
|
||||
|
|
||||
|
<img :src="logo" class="logo" alt=""/> |
||||
|
<div class="title">长春黄金研究院有限公司</div> |
||||
|
<el-form :model="form" :rules="rules" ref="formRef" style="width: 100%"> |
||||
|
<div class="input-title">用户名</div> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input |
||||
|
v-model="form.username" |
||||
|
placeholder="请输入用户名" |
||||
|
prefix-icon="userIconSvg" |
||||
|
style="width: 100%" |
||||
|
size="large" |
||||
|
> |
||||
|
<template #prefix> |
||||
|
<img :src="userIconSvg" alt="" class="icon" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<div class="input-title">密码</div> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="form.password" |
||||
|
placeholder="请输入密码" |
||||
|
prefix-icon="pwdIconSvg" |
||||
|
type="password" |
||||
|
style="width: 100%" |
||||
|
size="large" |
||||
|
> |
||||
|
<template #prefix> |
||||
|
<img :src="pwdIconSvg" alt="" class="icon"/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button style="width: 100%; margin-top: 10px" type="primary" @click="loginHandle" :loading="loading">登录</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span class="info">Changchun Gold Research Institute Co.,Ltd.</span> |
||||
</div> |
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { ref } from "vue"; |
import { ref } from "vue"; |
||||
import { useRouter } from "vue-router"; |
import { useRouter } from "vue-router"; |
||||
import { showToast } from "vant"; |
|
||||
import logoSvg from '@/assets/logo.svg' |
|
||||
|
import logo from '@/assets/logo.svg' |
||||
import userIconSvg from '@/assets/user_icon.svg' |
import userIconSvg from '@/assets/user_icon.svg' |
||||
import pwdIconSvg from '@/assets/pwdw_icon.svg' |
import pwdIconSvg from '@/assets/pwdw_icon.svg' |
||||
import { getCurrentUser, login, type User } from "@/services/user/userManager"; |
import { getCurrentUser, login, type User } from "@/services/user/userManager"; |
||||
import { useUserStore } from "@/stores/user"; |
import { useUserStore } from "@/stores/user"; |
||||
|
|
||||
|
import {ElMessage} from "element-plus"; |
||||
|
|
||||
|
const form = ref({ |
||||
|
username: "", |
||||
|
password: "", |
||||
|
}); |
||||
|
|
||||
|
const formRef = ref(); |
||||
|
|
||||
|
const rules = { |
||||
|
username: [ |
||||
|
{ required: true, message: "请输入用户名", trigger: "blur" }, |
||||
|
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }, |
||||
|
], |
||||
|
password: [ |
||||
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
||||
|
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false); |
||||
|
const userStore = useUserStore(); |
||||
const router = useRouter(); |
const router = useRouter(); |
||||
// 定义用户名和密码的响应式变量 |
|
||||
const username = ref(""); |
|
||||
const password = ref(""); |
|
||||
|
|
||||
const userStore = useUserStore(); |
|
||||
// 处理登录的函数 |
|
||||
const handleLogin = async () => { |
|
||||
if(!username.value || !password.value){ |
|
||||
showToast('请输入用户名或密码！'); |
|
||||
|
const loginHandle = () => { |
||||
|
formRef.value.validate(async(valid: any) => { |
||||
|
if (!valid) { |
||||
return; |
return; |
||||
} |
} |
||||
const res = await login({ username: username.value, password: password.value }); |
|
||||
if (res.success) { |
|
||||
|
loading.value = true; |
||||
|
const res = await login(form.value); |
||||
|
if(res.success) { |
||||
sessionStorage.setItem("token", res.data); |
sessionStorage.setItem("token", res.data); |
||||
const response = await getCurrentUser(); |
const response = await getCurrentUser(); |
||||
if (response.success) { |
if (response.success) { |
||||
const { username, nickname, role } = response.data; |
const { username, nickname, role } = response.data; |
||||
userStore.setUser({ username, nickname, role } as User); |
userStore.setUser({ username, nickname, role } as User); |
||||
} |
} |
||||
router.push("/home"); |
|
||||
} else { |
|
||||
showToast(res.msg); |
|
||||
|
await router.push("/home"); |
||||
|
loading.value = false; |
||||
|
}else { |
||||
|
ElMessage.error(res.msg); |
||||
|
loading.value = false; |
||||
} |
} |
||||
}; |
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
@use "@/assets/style/mixin.scss" as *; |
|
||||
.login-container { |
|
||||
position: relative; |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%); |
|
||||
.login_logo{ |
|
||||
.logo_size{ |
|
||||
width: 2.875rem; |
|
||||
height: 2.875rem; |
|
||||
margin-top:2.875rem; |
|
||||
margin-left: 12rem; |
|
||||
} |
|
||||
.company_name{ |
|
||||
color: #8799AB; |
|
||||
font-size: 1.25rem; |
|
||||
margin-top:1.5rem; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.background-image { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
|
.main { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
|
||||
background-image: url('https://via.placeholder.com/1920x1080'); /* 替换为你自己的背景图 URL */ |
|
||||
background-size: cover; |
|
||||
background-position: center; |
|
||||
filter: blur(5px); |
|
||||
z-index: -1; |
|
||||
} |
|
||||
|
|
||||
|
height: 100vh; |
||||
|
background: #BDE2FE; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
.login-form { |
.login-form { |
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
height: 33.5rem; |
|
||||
width:27.125rem; |
|
||||
transform: translate(-50%, -50%); |
|
||||
background-color: rgba(255, 255, 255, 0.8); |
|
||||
padding: 20px; |
|
||||
|
width: 25%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 50px 50px 10px; |
||||
border-radius: 10px; |
border-radius: 10px; |
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
|
||||
text-align: center; |
|
||||
|
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%); |
||||
|
.logo { |
||||
|
width: 50px; |
||||
} |
} |
||||
|
|
||||
.input-field { |
|
||||
width:19.75rem; |
|
||||
height: 2.75rem; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 5px; |
|
||||
margin-left: 3.625rem; |
|
||||
padding-left: 1.625rem; |
|
||||
|
.title { |
||||
|
color: #8799AB; |
||||
|
margin: 20px 0 30px 0; |
||||
} |
} |
||||
|
|
||||
.login-button { |
|
||||
width: 19.75rem; |
|
||||
height: 3rem; |
|
||||
background-color: #007bff; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
cursor: pointer; |
|
||||
margin-top: 2rem; |
|
||||
margin-left: 2rem; |
|
||||
|
.info { |
||||
|
margin-top: 10px; |
||||
|
color: #8799AB; |
||||
|
font-size: 10px; |
||||
} |
} |
||||
|
|
||||
|
|
||||
|
|
||||
.login-button:hover { |
|
||||
background-color: #0056b3; |
|
||||
} |
} |
||||
|
|
||||
.login-user-input{ |
|
||||
width: 10.2rem; |
|
||||
margin-top: 3rem; |
|
||||
.user_name{ |
|
||||
|
} |
||||
|
.icon { |
||||
|
width: 15px; |
||||
|
} |
||||
|
.input-title { |
||||
|
font-size: 14px; |
||||
color: #2C3E59; |
color: #2C3E59; |
||||
font-size: 1rem; |
|
||||
|
|
||||
} |
|
||||
.user_name_icon{ |
|
||||
position: absolute; |
|
||||
margin-left: 4rem; |
|
||||
margin-top: 0.85rem; |
|
||||
width: 1.25rem; |
|
||||
height: 1.25rem; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-pwd-input{ |
|
||||
width: 9.6rem; |
|
||||
margin-top: 2rem; |
|
||||
.pwd_icon{ |
|
||||
position: absolute; |
|
||||
margin-left: 4rem; |
|
||||
margin-top: 0.75rem; |
|
||||
width: 1.25rem; |
|
||||
height: 1.25rem; |
|
||||
} |
|
||||
} |
|
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
</style> |
</style> |
||||
@ -0,0 +1,193 @@ |
|||||
|
<template> |
||||
|
<div class="login-container"> |
||||
|
<!-- 背景图 --> |
||||
|
<div class="background-image"></div> |
||||
|
<!-- 登录表单 --> |
||||
|
<div class="login-form"> |
||||
|
<div class="login_logo"> |
||||
|
<img :src="logoSvg" class="logo_size"/> |
||||
|
<div class="company_name">长春黄金研究院有限公司</div> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<el-form-item label="账号"> |
||||
|
<el-input v-model="username" placehold="请输入用户名"> |
||||
|
<template #prefix> |
||||
|
<img :src="userIconSvg" class="icon" alt=""/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码"> |
||||
|
<el-input v-model="password" placehold="请输入密码"> |
||||
|
<template #prefix> |
||||
|
<img :src="pwdIconSvg" class="icon" alt=""/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 用户名输入框 --> |
||||
|
<!-- <div class="login-user-input">--> |
||||
|
<!-- <div class="user_name">用户名</div>--> |
||||
|
<!-- <img class="user_name_icon" :src="userIconSvg"/>--> |
||||
|
<!-- <input type="text" v-model="username" placeholder="用户名" class="input-field" />--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <!– 密码输入框 –>--> |
||||
|
<!-- <div class="login-pwd-input">--> |
||||
|
<!-- <div class="user_name">密码</div>--> |
||||
|
<!-- <img class="pwd_icon" :src="pwdIconSvg"/>--> |
||||
|
<!-- <input type="password" v-model="password" placeholder="密码" class="input-field" />--> |
||||
|
<!-- </div>--> |
||||
|
<!-- 登录按钮 --> |
||||
|
<button @click="handleLogin" class="login-button">登录</button> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from "vue"; |
||||
|
import { useRouter } from "vue-router"; |
||||
|
import { showToast } from "vant"; |
||||
|
import logoSvg from '@/assets/logo.svg' |
||||
|
import userIconSvg from '@/assets/user_icon.svg' |
||||
|
import pwdIconSvg from '@/assets/pwdw_icon.svg' |
||||
|
import { getCurrentUser, login, type User } from "@/services/user/userManager"; |
||||
|
import { useUserStore } from "@/stores/user"; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
// 定义用户名和密码的响应式变量 |
||||
|
const username = ref(""); |
||||
|
const password = ref(""); |
||||
|
|
||||
|
const userStore = useUserStore(); |
||||
|
// 处理登录的函数 |
||||
|
const handleLogin = async () => { |
||||
|
if(!username.value || !password.value){ |
||||
|
showToast('请输入用户名或密码！'); |
||||
|
return; |
||||
|
} |
||||
|
const res = await login({ username: username.value, password: password.value }); |
||||
|
if (res.success) { |
||||
|
sessionStorage.setItem("token", res.data); |
||||
|
const response = await getCurrentUser(); |
||||
|
if (response.success) { |
||||
|
const { username, nickname, role } = response.data; |
||||
|
userStore.setUser({ username, nickname, role } as User); |
||||
|
} |
||||
|
router.push("/home"); |
||||
|
} else { |
||||
|
showToast(res.msg); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@use "@/assets/style/mixin.scss" as *; |
||||
|
.icon { |
||||
|
width: 20px; |
||||
|
} |
||||
|
.login-container { |
||||
|
position: relative; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%); |
||||
|
.login_logo{ |
||||
|
.logo_size{ |
||||
|
width: 2.875rem; |
||||
|
height: 2.875rem; |
||||
|
margin-top:2.875rem; |
||||
|
margin-left: 12rem; |
||||
|
} |
||||
|
.company_name{ |
||||
|
color: #8799AB; |
||||
|
font-size: 1.25rem; |
||||
|
margin-top:1.5rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.background-image { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-image: url('https://via.placeholder.com/1920x1080'); /* 替换为你自己的背景图 URL */ |
||||
|
background-size: cover; |
||||
|
background-position: center; |
||||
|
filter: blur(5px); |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.login-form { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
width:27.125rem; |
||||
|
transform: translate(-50%, -50%); |
||||
|
background-color: rgba(255, 255, 255, 0.8); |
||||
|
padding: 20px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.input-field { |
||||
|
width:19.75rem; |
||||
|
height: 2.75rem; |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 5px; |
||||
|
margin-left: 3.625rem; |
||||
|
padding-left: 1.625rem; |
||||
|
} |
||||
|
|
||||
|
.login-button { |
||||
|
width: 19.75rem; |
||||
|
height: 3rem; |
||||
|
background-color: #007bff; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 5px; |
||||
|
cursor: pointer; |
||||
|
margin-top: 2rem; |
||||
|
margin-left: 2rem; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.login-button:hover { |
||||
|
background-color: #0056b3; |
||||
|
} |
||||
|
|
||||
|
.login-user-input{ |
||||
|
width: 10.2rem; |
||||
|
margin-top: 3rem; |
||||
|
.user_name{ |
||||
|
color: #2C3E59; |
||||
|
font-size: 1rem; |
||||
|
|
||||
|
} |
||||
|
.user_name_icon{ |
||||
|
position: absolute; |
||||
|
margin-left: 4rem; |
||||
|
margin-top: 0.85rem; |
||||
|
width: 1.25rem; |
||||
|
height: 1.25rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.login-pwd-input{ |
||||
|
width: 9.6rem; |
||||
|
margin-top: 2rem; |
||||
|
.pwd_icon{ |
||||
|
position: absolute; |
||||
|
margin-left: 4rem; |
||||
|
margin-top: 0.75rem; |
||||
|
width: 1.25rem; |
||||
|
height: 1.25rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue