Skip to content

N
nse-ui
Commit 90531cb0 by wanglizhen
Options

登陆页面上传

parent b5b22a5e
正在显示 包含 124 行增加 和 52 行删除
src/assets/styles/index.scss
...@@ -258,4 +258,9 @@ aside { ...@@ -258,4 +258,9 @@ aside {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
display: inline-block; /* 添加这个属性 */ display: inline-block; /* 添加这个属性 */
}
@font-face {
font-family: 'YSBTH';
src: url('../fonts/YSBTH.ttf');
} }
\ No newline at end of file
src/views/login.vue
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <div class="logo-box">
<h3 class="title">{{ title }}</h3> <img class="logo" src="@/assets/images/login/logo.png" alt="logo" />
<el-form-item prop="username"> <div class="tile">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号"> <img class="icon" src="@/assets/images/login/icon.png" alt="icon" />
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> <div class="title">{{ title }}</div>
</el-input> </div>
</el-form-item> </div>
<el-form-item prop="password"> <div class="form-box">
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
@keyup.enter="handleLogin"> <div class="top">
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> <div>欢迎登录</div>
</el-input> <div class="line"></div>
</el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item> -->
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
<el-form-item style="width:100%;">
<el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div> </div>
</el-form-item> <el-form-item prop="username" style="margin-bottom: 38px;">
</el-form> <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
@keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item> -->
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
<el-form-item style="width:100%;margin-top:78px;">
<el-button :loading="loading" size="large" type="primary" class="login-btn" @click.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
</div>
<!-- 底部 --> <!-- 底部 -->
<div class="el-login-footer"> <!-- <div class="el-login-footer">
<span>Copyright © 2018-2025 All Rights Reserved.</span> <span>Copyright © 2018-2025 All Rights Reserved.</span>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -181,26 +193,73 @@ function getCookie() { ...@@ -181,26 +193,73 @@ function getCookie() {
<style lang='scss' scoped> <style lang='scss' scoped>
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: flex-end;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url("../assets/images/login/background.jpg");
background-size: cover; background-size: cover;
padding-right: 14%;
.logo-box{
position: absolute;
top: 63px;
left: 49px;
display: flex;
align-items: center;
.logo{
margin-right: 40px;
width: 300px;
height: 47.04px;
}
.tile{
font-size: 36px;
font-weight: 400;
letter-spacing: 0px;
line-height: 46.8px;
color: rgba(51, 51, 51, 1);
display: flex;
align-items: center;
font-family: 'YSBTH';
.icon{
width: 40px;
height: 40px;
margin-right: 13px;
}
}
}
} }
.title { .form-box{
margin: 0px auto 30px auto; padding: 4px;
text-align: center; background: linear-gradient(90deg, rgba(176, 213, 255, 1) 0%, rgba(235, 235, 235, 1) 5.71%, rgba(255, 255, 255, 1) 100%);
color: #707070; border-radius: 15px;
} }
.login-form { .login-form {
border-radius: 6px; padding: 48px 70px 98px 70px;
// background: #ffffff; box-sizing: border-box;
background: #5b95d229; background: rgba(235, 245, 255, 0.65);
width: 400px; backdrop-filter: blur(10px);
padding: 25px 25px 5px 25px; border-radius: 15px;
overflow: hidden;
z-index: 1; z-index: 1;
.top{
font-size: 24px;
font-weight: 500;
letter-spacing: 0px;
line-height: 34.75px;
color: rgba(51, 51, 51, 1);
display: flex;
flex-direction: column;
align-items: center;
.line{
margin-top: 14px;
margin-bottom: 50px;
width: 50px;
height: 4px;
border-radius: 5px;
background: rgba(11, 136, 251, 1);
}
}
.el-input { .el-input {
width: 300px;
height: 40px; height: 40px;
input { input {
height: 40px; height: 40px;
...@@ -211,6 +270,13 @@ function getCookie() { ...@@ -211,6 +270,13 @@ function getCookie() {
width: 14px; width: 14px;
margin-left: 0px; margin-left: 0px;
} }
.login-btn{
width:100%;
height: 48px;
border-radius: 40px;
background: rgba(11, 136, 251, 1);
box-shadow: 0px 2px 19px rgba(52, 120, 237, 0.36);
}
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论