From f51896f6358a60ab83456358446ac48085b48298 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期五, 05 五月 2023 09:49:11 +0800
Subject: [PATCH] 登录页面修改
---
src/views/login.less | 61 ++++++++++++++++++--
src/views/login.vue | 88 ++++++++++++++++++++--------
src/assets/img/login-mmain-left-bj.jpg | 0
src/assets/img/login-bj.jpg | 0
4 files changed, 117 insertions(+), 32 deletions(-)
diff --git a/src/assets/img/login-bj.jpg b/src/assets/img/login-bj.jpg
new file mode 100644
index 0000000..7ff64b1
--- /dev/null
+++ b/src/assets/img/login-bj.jpg
Binary files differ
diff --git a/src/assets/img/login-mmain-left-bj.jpg b/src/assets/img/login-mmain-left-bj.jpg
new file mode 100644
index 0000000..f6094df
--- /dev/null
+++ b/src/assets/img/login-mmain-left-bj.jpg
Binary files differ
diff --git a/src/views/login.less b/src/views/login.less
index 8629260..150d40b 100644
--- a/src/views/login.less
+++ b/src/views/login.less
@@ -1,8 +1,31 @@
.login {
height: 100%;
- background: url('../assets/background.svg');
- background-color: #f0f2f5;
-
+ //background: url('../assets/background.svg');
+ background: url("../assets/img/login-bj.jpg") no-repeat center;
+ background-size: 100% 100%;
+ .login-main-box{
+ display: flex;
+ box-shadow: 0 6px 6px rgba(34,66,168,0.38);
+ .login-img{
+ width: 20vw;
+ height: 35vw;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .login-form{
+ width: 44vw;
+ height: 35vw;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .login-form-inside{
+ width: 60%;
+ }
+ }
+ }
.ivu-tabs-nav-container {
line-height: 2;
font-size: 17px;
@@ -36,6 +59,12 @@
.other-login {
margin-top: 3vh;
}
+ .login-btn{
+ border-radius: 4vw;
+ box-shadow: 0 4px 4px rgba(0,118,255,0.31);
+ color: #fff;
+ height: 2.5vw;
+ }
.icons {
display: flex;
@@ -58,7 +87,27 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- width: 368px;
- height: 100%;
}
-}
\ No newline at end of file
+}
+@media screen and (max-width: 960px){
+ .login-img{
+ width: 200px!important;
+ height: 345px!important;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .login-form{
+ width: 400px!important;
+ height: 345px!important;
+ //height: 36vw;
+ //background: #fff;
+ //display: flex;
+ //justify-content: center;
+ //align-items: center;
+ //.login-form-inside{
+ // width: 60%;
+ //}
+ }
+}
diff --git a/src/views/login.vue b/src/views/login.vue
index bd884ae..7d02bb2 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -10,7 +10,12 @@
<Col class="content">
<div>
<Header />
- <div v-if="!socialLogining" style="margin-top: 150px">
+ <div class="login-main-box" v-if="!socialLogining">
+ <div class="login-img">
+ <img src="../assets/img/login-mmain-left-bj.jpg" alt="">
+ </div>
+ <div class="login-form">
+ <div class="login-form-inside">
<Form
ref="usernameLoginForm"
:model="form"
@@ -19,7 +24,8 @@
v-if="tabName == 'username'"
>
<FormItem>
- <h1 style="margin-left: 40%;">鐧� 闄�</h1>
+ <!--<h1 style="margin-left: 40%;">鐧� 褰�</h1>-->
+ <h1>瀹夊叏閰嶉�佺鐞嗙郴缁�</h1>
</FormItem>
<FormItem prop="username">
<Input
@@ -72,42 +78,46 @@
</FormItem>
</Form>
- <!--<Row justify="space-between" align="middle">-->
- <!--<Checkbox v-model="saveLogin" size="large">{{-->
+ <!--<Row justify="space-between" align="middle">-->
+ <!--<Checkbox v-model="saveLogin" size="large">{{-->
<!--$t("autoLogin")-->
<!--}}</Checkbox>-->
- <!--<Dropdown trigger="click" @on-click="handleDropDown">-->
+ <!--<Dropdown trigger="click" @on-click="handleDropDown">-->
<!--<a class="forget-pass">{{ $t("forgetPass") }}</a>-->
<!--<DropdownMenu slot="list">-->
- <!--<DropdownItem name="test">浣撻獙娴嬭瘯璐﹀彿</DropdownItem>-->
- <!--<DropdownItem name="resetByMobile"-->
- <!-->浣跨敤鎵嬫満鍙烽噸缃瘑鐮�(浠樿垂)</DropdownItem-->
- <!-->-->
- <!--<DropdownItem name="resetByEmail"-->
- <!-->浣跨敤閭閲嶇疆瀵嗙爜(浠樿垂)</DropdownItem-->
- <!-->-->
+ <!--<DropdownItem name="test">浣撻獙娴嬭瘯璐﹀彿</DropdownItem>-->
+ <!--<DropdownItem name="resetByMobile"-->
+ <!-->浣跨敤鎵嬫満鍙烽噸缃瘑鐮�(浠樿垂)</DropdownItem-->
+ <!-->-->
+ <!--<DropdownItem name="resetByEmail"-->
+ <!-->浣跨敤閭閲嶇疆瀵嗙爜(浠樿垂)</DropdownItem-->
+ <!-->-->
<!--</DropdownMenu>-->
- <!--</Dropdown>-->
- <!--</Row>-->
- <Button
- class="login-btn"
- type="primary"
- size="large"
- :loading="loading"
- @click="submitLogin"
- long
- >
- <span v-if="!loading">{{ $t("login") }}</span>
- <span v-else>{{ $t("logining") }}</span>
- </Button>
+ <!--</Dropdown>-->
+ <!--</Row>-->
+ <Button
+ class="login-btn"
+ type="primary"
+ size="large"
+ :loading="loading"
+ @click="submitLogin"
+ long
+ >
+ <span v-if="!loading">{{ $t("login") }}</span>
+ <span v-else>{{ $t("logining") }}</span>
+ </Button>
+ </div>
+
+ </div>
</div>
+
<div v-if="socialLogining">
<RectLoading />
</div>
</div>
<!--<Footer />-->
</Col>
- <LangSwitch />
+ <!--<LangSwitch />-->
</Row>
</div>
<!--<div>-->
@@ -508,5 +518,31 @@
</script>
<style lang="less">
+ .login-main-box{
+ .ivu-form-item{
+ margin-bottom: 2vw;
+ &:first-child{
+ margin-bottom: 4vw;
+ }
+ }
+ .ivu-form-item-content{
+ h1{
+ font-size: 1.5vw;
+ text-align: center;
+ }
+ }
+ .ivu-input-large{
+ height: 2vw;
+ }
+ .ivu-input-wrapper-large .ivu-input-prefix i, .ivu-input-wrapper-large .ivu-input-suffix i{
+ line-height: 2vw;
+ }
+ .ivu-input{
+ border: 1px solid #aaaaaa;
+ }
+ }
+
+</style>
+<style lang="less">
@import "./login.less";
</style>
--
Gitblit v1.9.1