LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

变基

feature/home
LiLongLong 6 months ago
parent
0fe603a505 d731693aff
commit
112aabb5cd
6 changed files with 129 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/pwdw_icon.svg
  2. 1
      src/assets/user_icon.svg
  3. 1
      src/views/Test.vue
  4. 6
      src/views/components/Footer.vue
  5. 129
      src/views/login/index.vue
  6. 60
      src/views/login/login.css

1
src/assets/pwdw_icon.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32.66561508178711" height="39.13572692871094" viewBox="0 0 32.66561508178711 39.13572692871094"><g><path d="M29.768,16.829C29.4345,16.829,27.5584,16.8498,27.204,16.8498L27.204,10.9347C27.204,4.37387,22.9722,0.0208277,16.3641,0C9.75591,0,5.4408,4.58215,5.4408,10.9347L5.4408,16.7873C5.21149,16.7873,2.8142,16.8082,2.60574,16.8082C1.02145,16.8082,0,18.162,0,19.6199L0,36.2615C0,37.9069,0.87553,39.1357,2.56405,39.1357L29.8514,39.1357C31.1647,39.1357,32.6656,37.9485,32.6656,35.8033L32.6656,19.9948C32.6656,18.3703,32.1236,16.829,29.768,16.829ZM19.9704,31.7626C19.9704,33.8246,18.3444,35.4908,16.3432,35.4908C14.342,35.4908,12.716,33.8246,12.716,31.7626L12.716,31.7001C12.716,30.3255,13.4456,29.1175,14.5296,28.4718L14.5296,21.5986C14.5296,20.6197,15.3009,20.5155,16.2598,20.5155C17.2188,20.5155,18.1568,20.6197,18.1568,21.5986L18.1568,28.4718C19.2408,29.1175,19.9704,30.3255,19.9704,31.7001L19.9704,31.7626ZM23.6185,16.7873L9.08884,16.7873L9.08884,9.28927C9.08884,5.68603,13.1121,3.7282,16.1348,3.7282L16.8018,3.7282C19.8245,3.7282,23.6185,5.54024,23.6185,9.28927L23.6185,16.7873Z" fill="#1989FA" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/assets/user_icon.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="33.87468338012695" height="33.84542465209961" viewBox="0 0 33.87468338012695 33.84542465209961"><g><path d="M33.8747,32.442C33.8747,25.5468,28.9971,19.6889,22.2628,17.6265C24.8808,15.9057,26.6152,12.9605,26.6152,9.61666C26.6152,4.31204,22.275,0,16.9373,0C11.5996,0,7.25944,4.31204,7.25944,9.61259C7.25944,12.9565,8.99389,15.9017,11.6118,17.6224C4.87763,19.6889,0,25.5427,0,32.442L0,33.8454L33.8747,33.8454L33.8747,32.4623L33.8747,32.442Z" fill="#1989FA" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

1
src/views/Test.vue
View File

@ -26,7 +26,6 @@
const onReturn = () => {
menuId.value = 0
eventBus.emit("menuId", 0)
router.go(-1)
}

6
src/views/components/Footer.vue
View File

@ -2,7 +2,7 @@
<template>
<div class="h-[--footerHeight] bg-[--bgColor] footer">
<div class="footer_ins">
<van-icon name="discount-o" size="15" style="padding:5px"/>
<van-icon name="discount-o" size="40" style="padding:5px"/>
<span class="ins_text text_size">等待指令</span>
</div>
@ -62,7 +62,7 @@ const showWastePopover = ref(false)
width: 13.4375rem;
height: 2.5rem;
background: #FFFFFF;
margin-left: 10px;
margin-left: 1.5rem;
}
.footer_normal{
@ -71,7 +71,7 @@ const showWastePopover = ref(false)
.text_size{
font-size:1rem;
padding-right: 5px;
padding-right: .3125rem;
}
.footer_container{
display: flex;

129
src/views/login/index.vue
View File

@ -4,18 +4,26 @@
<div class="background-image"></div>
<!-- 登录表单 -->
<div class="login-form">
<h2>登录</h2>
<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 style="margin-top: 5%">
<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>
@ -24,7 +32,9 @@ import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { login } from "@/services/user/userManager";
import logoSvg from '@/assets/logo.svg'
import userIconSvg from '@/assets/user_icon.svg'
import pwdIconSvg from '@/assets/pwdw_icon.svg'
const router = useRouter();
// 定义用户名和密码的响应式变量
const username = ref("");
@ -32,6 +42,10 @@ const password = ref("");
// 处理登录的函数
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);
@ -42,6 +56,111 @@ const handleLogin = async () => {
};
</script>
<style scoped>
@import "./login.css";
<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;
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%;
height: 33.5rem;
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>

60
src/views/login/login.css
View File

@ -1,60 +0,0 @@
.login-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.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%;
height: 600px;
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: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 35%;
}
.login-button:hover {
background-color: #0056b3;
}
.login-user-input{
width: 400px;
margin-top: 15%;
}
Write Preview
Loading…
Cancel
Save