From 5739012240df149e23835f23099fa4635db3cc9b Mon Sep 17 00:00:00 2001
From: 楚江漓i <85093541@qq.com>
Date: 星期日, 28 二月 2021 23:32:09 +0800
Subject: [PATCH] 登录页样式修改
---
src/views/login/login-scoped.scss | 138 ++++++++++++++--
src/views/login/index.vue | 259 ++++++++++++++++---------------
src/views/login/login.scss | 58 ++++--
3 files changed, 289 insertions(+), 166 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0a3d5eb..572b14c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,133 +1,140 @@
<template>
<div class="login-container">
- <el-row>
- <el-col :span="4"><p /></el-col>
- <el-col :span="20"><img src="../../assets/login/pic02.png" width="500px" height="75px"></el-col>
- </el-row>
- <el-row>
- <el-col :span="4"><p /></el-col>
- <el-col :span="11" style="background-color: #fff;height: 515px;">
- <img src="../../assets/login/pic03.png" style="float: left;">
- <img src="../../assets/login/pic04.png"></el-col>
- <el-col :span="5" style="background-color: #fff;height: 515px;"> <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="off" label-position="left">
- <h2 id="form-biao-dan"><span style="position: relative;">登录</span></h2>
- <span v-if="login.type === 'up'">
- <el-form-item prop="username" class="form-input">
- <el-input
- ref="username"
- v-model="loginForm.username"
- :placeholder="$t('login.username')"
- prefix-icon="el-icon-user"
- name="username"
- type="text"
- autocomplete="off"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <el-form-item prop="password" class="form-input">
- <el-input
- ref="password"
- v-model="loginForm.password"
- prefix-icon="el-icon-key"
- type="password"
- :placeholder="$t('login.password')"
- name="password"
- autocomplete="off"
- :show-password="true"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <el-form-item prop="code" class="code-input">
- <el-input
- ref="code"
- v-model="loginForm.code"
- prefix-icon="el-icon-lock"
- :placeholder="$t('login.code')"
- name="code"
- type="text"
- autocomplete="off"
- style="width: 70%"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
- <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
- {{ $t('login.logIn') }}
- </el-button>
- </span>
- <span v-if="login.type === 'social'">
- {{ $t('login.chooseToSignIn') }}
+ <div class="login-title">
+ <img src="../../assets/login/pic02.png">
+ </div>
+ <div class="login-main">
+
+ <div class="login-main-left">
+ <img src="../../assets/login/pic03.png">
+ <img src="../../assets/login/pic04.png">
+ </div>
+
+ <div class="login-main-right">
+ <div id="form-biao-dan">
<div>
- <template v-for="(l, index) in logo">
- <div :key="index" class="logo-wrapper">
- <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
- </div>
- </template>
+ <span>登录</span>
+ <span />
</div>
- </span>
- <span v-if="login.type === 'bind'" style="margin-top: -1rem">
- <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
- <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
- <el-form-item prop="bindUsername">
- <el-input
- ref="bindUsername"
- v-model="loginForm.bindUsername"
- :placeholder="$t('login.username')"
- prefix-icon="el-icon-user"
- name="bindUsername"
- type="text"
- autocomplete="off"
- />
- </el-form-item>
- <el-form-item prop="bindPassword">
- <el-input
- ref="bindPassword"
- v-model="loginForm.bindPassword"
- :placeholder="$t('login.password')"
- prefix-icon="el-icon-key"
- name="bindPassword"
- type="password"
- :show-password="true"
- autocomplete="off"
- />
- </el-form-item>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="bindLogin">
- {{ $t('common.bindLogin') }}
- </el-button>
- </el-tab-pane>
- <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
- <el-form-item prop="signUsername">
- <el-input
- ref="signUsername"
- v-model="loginForm.signUsername"
- :placeholder="$t('login.username')"
- prefix-icon="el-icon-user"
- name="signUsername"
- type="text"
- autocomplete="off"
- />
- </el-form-item>
- <el-form-item prop="signPassword">
- <el-input
- ref="signPassword"
- v-model="loginForm.signPassword"
- :placeholder="$t('login.password')"
- prefix-icon="el-icon-key"
- name="signPassword"
- type="password"
- :show-password="true"
- autocomplete="off"
- />
- </el-form-item>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="signLogin">
- {{ $t('common.signLogin') }}
- </el-button>
- </el-tab-pane>
- </el-tabs>
- </span>
- </el-form></el-col>
- <el-col :span="4"><p /></el-col>
- </el-row>
+
+ </div>
+ <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-new" autocomplete="off" label-position="left">
+ <span v-if="login.type === 'up'">
+ <el-form-item prop="username" style="width: 26vw;">
+ <el-input
+ ref="username"
+ v-model="loginForm.username"
+ :placeholder="$t('login.username')"
+ prefix-icon="el-icon-user"
+ name="username"
+ type="text"
+ autocomplete="off"
+ @keyup.enter.native="handleLogin"
+ />
+ </el-form-item>
+ <el-form-item prop="password" style="width: 26vw;">
+ <el-input
+ ref="password"
+ v-model="loginForm.password"
+ prefix-icon="el-icon-key"
+ type="password"
+ :placeholder="$t('login.password')"
+ name="password"
+ autocomplete="off"
+ @keyup.enter.native="handleLogin"
+ />
+ </el-form-item>
+ <el-form-item prop="code" style="width: 26vw;">
+ <el-input
+ ref="code"
+ v-model="loginForm.code"
+ prefix-icon="el-icon-lock"
+ :placeholder="$t('login.code')"
+ name="code"
+ type="text"
+ autocomplete="off"
+ style="width: 70%"
+ @keyup.enter.native="handleLogin"
+ />
+ <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
+ </el-form-item>
+ <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
+ {{ $t('login.logIn') }}
+ </el-button>
+ </span>
+ <span v-if="login.type === 'social'">
+ {{ $t('login.chooseToSignIn') }}
+ <div>
+ <template v-for="(l, index) in logo">
+ <div :key="index" class="logo-wrapper">
+ <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
+ </div>
+ </template>
+ </div>
+ </span>
+ <span v-if="login.type === 'bind'" style="margin-top: -1rem">
+ <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
+ <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
+ <el-form-item prop="bindUsername">
+ <el-input
+ ref="bindUsername"
+ v-model="loginForm.bindUsername"
+ :placeholder="$t('login.username')"
+ prefix-icon="el-icon-user"
+ name="bindUsername"
+ type="text"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item prop="bindPassword">
+ <el-input
+ ref="bindPassword"
+ v-model="loginForm.bindPassword"
+ :placeholder="$t('login.password')"
+ prefix-icon="el-icon-key"
+ name="bindPassword"
+ type="password"
+ :show-password="true"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="bindLogin">
+ {{ $t('common.bindLogin') }}
+ </el-button>
+ </el-tab-pane>
+ <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
+ <el-form-item prop="signUsername">
+ <el-input
+ ref="signUsername"
+ v-model="loginForm.signUsername"
+ :placeholder="$t('login.username')"
+ prefix-icon="el-icon-user"
+ name="signUsername"
+ type="text"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item prop="signPassword">
+ <el-input
+ ref="signPassword"
+ v-model="loginForm.signPassword"
+ :placeholder="$t('login.password')"
+ prefix-icon="el-icon-key"
+ name="signPassword"
+ type="password"
+ :show-password="true"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="signLogin">
+ {{ $t('common.signLogin') }}
+ </el-button>
+ </el-tab-pane>
+ </el-tabs>
+ </span>
+ </el-form>
+ </div>
+ </div>
<span class="login-footer">
© 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
</span>
diff --git a/src/views/login/login-scoped.scss b/src/views/login/login-scoped.scss
index 36c1876..b30cc45 100644
--- a/src/views/login/login-scoped.scss
+++ b/src/views/login/login-scoped.scss
@@ -2,15 +2,38 @@
$dark_gray:#aaa;
$light_gray:#eee;
-#form-biao-dan span::after {
- content: '';
- position: absolute;
- left: -20%;
- bottom: 0;
- background-color: rgba(147,30,30,0.2);
- height: 1vh;
- width: 140%;
- z-index: 1;
+#form-biao-dan {
+ position:relative;
+ div {
+ width: 5.57vw;
+ height: 4.25vh;
+ line-height: 4.25vh;
+ position:absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 0;
+ text-align: center;
+ }
+
+ div>span:first-of-type{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 2.65vh;
+ z-index: 9;
+}
+
+ div>span:last-of-type{
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 2.65vh;
+ width: 100%;
+ border-bottom: 1.59vh solid #e9d2d2;
+ }
+
}
.login-container {
@@ -18,7 +41,6 @@
background-size: cover;
width: 100%;
height: 100vh;
- padding-top: 5%;
#form-biao-dan{
text-align: center;
}
@@ -80,23 +102,22 @@
}
.login-footer {
position: fixed;
- bottom: 1rem;
+ bottom: 1.7vh;
width: 100%;
text-align: center;
- color: white;
- font-size: 1rem;
- line-height: 1rem;
- height: 1rem;
+ font-size: 1.7vh;
+ line-height: 1.7vh;
+ height: 1.7vh;
font-weight: 600;
color: #fff;
}
.tips {
- font-size: 14px;
+ font-size: 1.48vh;
color: #fff;
- margin-bottom: 10px;
+ margin-bottom: 1vh;
span {
&:first-of-type {
- margin-right: 16px;
+ margin-right: 0.83vw;
}
}
}
@@ -142,5 +163,82 @@
.login-info {
display: none;
}
-
-}
\ No newline at end of file
+
+}
+
+
+
+//====================2021-02-28========================
+.login-title {
+ height: 18%;
+ position: relative;
+ img {
+ position: absolute;
+ width: 30.88vw;
+ top: 5.85vh;
+ left: 13.5vw;
+ }
+}
+
+.login-main {
+ width: 73.2%;
+ height: 70.5%;
+ margin-left: 13.5vw;
+ background-color: #fff;
+ border-radius: 10px;
+
+ .login-main-left {
+ float: left;
+ width: 53%;
+ position: relative;
+ box-sizing: border-box;
+ padding-top: 5%;
+ >img:first-of-type {
+ width: 98.5%;
+ }
+ >img:last-of-type {
+ width: 1.5%;
+ position: absolute;
+ right: 0;
+ }
+ }
+
+ .login-main-right {
+ float: left;
+ width: 46.8%;
+ height: 100%;
+ padding-top: 30px;
+
+ #form-biao-dan {
+ height: 9.57vh;
+ line-height: 9.57vh;
+ span {
+ font-size: 3.19vh;
+ font-weight: 700;
+ }
+ }
+
+ .login-form-new {
+
+
+ .code-image {
+ width: 5.98vw;
+ height: 4.46vh;
+ position: absolute;
+ right: 0.78vw;
+ top: 1vh
+ }
+
+ .submit-but{
+ width:26vw;
+ height: 7.44vh;
+ background-color: rgba(163, 44, 48, 1);
+ border-color: rgba(163, 44, 48, 1);
+ border-radius: 20px;
+ margin-top: 10%;
+ font-size: 2.12vh;
+ }
+
+ }
+ }
+}
diff --git a/src/views/login/login.scss b/src/views/login/login.scss
index 63f096b..deb2b17 100644
--- a/src/views/login/login.scss
+++ b/src/views/login/login.scss
@@ -12,32 +12,50 @@
.el-col{
border-radius: 0px;
}
- .el-input {
- display: inline-block;
- font-size: .9rem !important;
- input {
- background: transparent;
- border: 0;
- -webkit-appearance: none;
- border-radius: 0;
- color: #000000;
- height: 32px;
- caret-color: $cursor;
- &:-webkit-autofill {
- box-shadow: 0 0 0 1000px $bg inset !important;
- -webkit-text-fill-color: $cursor !important;
- }
- }
- }
+ //.el-input {
+ // display: inline-block;
+ // font-size: .9rem !important;
+ // input {
+ // background: transparent;
+ // border: 0;
+ // -webkit-appearance: none;
+ // border-radius: 0;
+ // color: #000000;
+ // height: 32px;
+ // caret-color: $cursor;
+ // &:-webkit-autofill {
+ // box-shadow: 0 0 0 1000px $bg inset !important;
+ // -webkit-text-fill-color: $cursor !important;
+ // }
+ // }
+ //}
.el-form-item {
- border: 1px solid #dedede;
color: #454545;
transition: all .3s;
+ margin-bottom: 2.34vh;
&:hover {
border-color: #57a3f3;
}
}
.el-button:not(.is-circle,.is-round), .el-input__inner {
- border-radius: 20px !important;
+ border-radius: 40px !important;
}
-}
\ No newline at end of file
+}
+
+
+.login-container .login-form-new {
+ padding-left: 4.16vw;
+ input.el-input__inner {
+ width: 100%;
+ height: 7.44vh;
+ background-color: #f1f1f1 !important;
+ font-size: 1.91vh;
+ padding-left: 4.16vw;
+ }
+
+ i.el-input__icon {
+ width: 1.3vw;
+ font-size: 2.65vh;
+ margin-left: 1.3vw;
+ }
+}
--
Gitblit v1.8.0