Skip to content

O
offical_web
Commit 4dbbdab9 by qinjianhui
Options

fix: 样式修改

parent d7294ade
Showing with 32 additions and 21 deletions
src/assets/banner.jpg
src/assets/banner.jpg

673 KB | W: | H:

src/assets/banner.jpg

142 KB | W: | H:

src/assets/banner.jpg
src/assets/banner.jpg
src/assets/banner.jpg
src/assets/banner.jpg
  • 2-up
  • Swipe
  • Onion skin
src/views/login.vue
...@@ -9,15 +9,15 @@ ...@@ -9,15 +9,15 @@
</span> </span>
</a> </a>
</div> </div>
<div class="banner_text"> <!-- <div class="banner_text">
<div>智能化订单处理</div> <div>智能化订单处理</div>
<div style="margin-left: 20px">数字化供采平台</div> <div style="margin-left: 20px">数字化供采平台</div>
<div style="margin-left: 20px">多维度数据分析</div> <div style="margin-left: 20px">多维度数据分析</div>
</div> </div> -->
</div> </div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center; font-weight: 400">用户登录</h2> <h2 style="text-align: center; font-weight: 400;color: #4a4c6d;margin-bottom: 40px;">欢迎登录</h2>
<el-form <el-form
size="medium" size="medium"
:model="ruleForm" :model="ruleForm"
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
v-model="ruleForm.email" v-model="ruleForm.email"
placeholder="Email"></el-input> placeholder="Email"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" style="margin-bottom: 10px"> <el-form-item prop="password" style="margin-bottom: 20px">
<el-input <el-input
:type="showPwd ? 'text' : 'password'" :type="showPwd ? 'text' : 'password'"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
...@@ -47,13 +47,13 @@ ...@@ -47,13 +47,13 @@
</el-form-item> </el-form-item>
<div class="forget-password"> <div class="forget-password">
<span style="cursor: pointer" @click="forgetPassword"> <span style="cursor: pointer" @click="forgetPassword">
忘记密码 忘记密码?
</span> </span>
</div> </div>
<div style="text-align: center"> <div style="text-align: center">
<button class="login-btn" @click="submitForm">登录</button> <button class="login-btn" @click="submitForm">登录</button>
</div> </div>
<div style="margin-top: 20px; font-size: 14px; text-align: center"> <div style="margin-top: 40px; font-size: 14px; text-align: center">
还没有账号？ 还没有账号？
<router-link class="link" to="register">马上注册</router-link> <router-link class="link" to="register">马上注册</router-link>
</div> </div>
...@@ -308,6 +308,16 @@ export default { ...@@ -308,6 +308,16 @@ export default {
); );
color: #fff; color: #fff;
} }
.login_form::v-deep .el-form-item {
margin-bottom: 40px;
}
.login_form::v-deep .el-input__inner {
height: 42px;
line-height: 42px;
}
.get-code-button:disabled:hover { .get-code-button:disabled:hover {
background-color: #d0d2d8; background-color: #d0d2d8;
color: #666; color: #666;
...@@ -366,7 +376,7 @@ export default { ...@@ -366,7 +376,7 @@ export default {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
left: 4%; left: 7%;
top: 7%; top: 7%;
} }
.logo_text { .logo_text {
...@@ -385,11 +395,9 @@ export default { ...@@ -385,11 +395,9 @@ export default {
position: relative; position: relative;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
background: url(../assets/banner.jpg) left / cover no-repeat; background: url(../assets/banner.jpg) left / cover no-repeat;
background-color: #b3e2fe;
background-size: 50% auto;
} }
.login_content { .login_content {
padding: 30px; padding: 70px 40px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -401,13 +409,12 @@ export default { ...@@ -401,13 +409,12 @@ export default {
} }
.login_form { .login_form {
padding: 24px 0;
width: 330px; width: 330px;
border-radius: 6px; border-radius: 6px;
} }
.forget-password { .forget-password {
margin-bottom: 16px; margin-bottom: 40px;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
color: #006eff; color: #006eff;
...@@ -415,13 +422,13 @@ export default { ...@@ -415,13 +422,13 @@ export default {
.login-btn { .login-btn {
width: 100%; width: 100%;
height: 38px; height: 42px;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
background: #006eff; background: #006eff;
box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%); box-shadow: 0 4px 8px 0 rgb(26 90 216 / 32%);
border-radius: 4px; border-radius: 4px;
font-size: 16px; font-size: 18px;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
......
src/views/register.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="login_content"> <div class="login_content">
<h2 style="text-align: center">用户注册</h2> <h2 style="text-align: center;font-weight: 400;color: #4a4c6d;">用户注册</h2>
<el-form <el-form
size="medium" size="medium"
:model="registerForm" :model="registerForm"
...@@ -21,13 +21,13 @@ ...@@ -21,13 +21,13 @@
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
style="width: 300px; background: #fff" style="width: 300px;"
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" label=""> <el-form-item prop="code" label="">
<el-input <el-input
v-model="registerForm.code" v-model="registerForm.code"
style="width: 180px; background: #fff" style="width: 180px;"
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input> placeholder="请输入验证码"></el-input>
<el-button <el-button
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
type="password" type="password"
v-model="registerForm.password" v-model="registerForm.password"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
style="width: 300px; background: #fff" style="width: 300px;"
placeholder="请输入密码" placeholder="请输入密码"
autocomplete="off"></el-input> autocomplete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
type="password" type="password"
prefix-icon="el-icon-lock" prefix-icon="el-icon-lock"
v-model="registerForm.checkPass" v-model="registerForm.checkPass"
style="width: 300px; background: #fff" style="width: 300px;"
placeholder="请再次输入密码" placeholder="请再次输入密码"
autocomplete="off"></el-input> autocomplete="off"></el-input>
</el-form-item> </el-form-item>
...@@ -61,14 +61,14 @@ ...@@ -61,14 +61,14 @@
<el-input <el-input
v-model="registerForm.companyName" v-model="registerForm.companyName"
prefix-icon="el-icon-s-home" prefix-icon="el-icon-s-home"
style="width: 300px; background: #fff" style="width: 300px;"
placeholder="请输入公司名称"></el-input> placeholder="请输入公司名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="job" label=""> <el-form-item prop="job" label="">
<el-input <el-input
v-model="registerForm.job" v-model="registerForm.job"
prefix-icon="el-icon-s-order" prefix-icon="el-icon-s-order"
style="width: 300px; background: #fff" style="width: 300px;"
placeholder="请输入职务"></el-input> placeholder="请输入职务"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -210,6 +210,10 @@ export default { ...@@ -210,6 +210,10 @@ export default {
background: url(../assets/register.jpg) center / cover no-repeat; background: url(../assets/register.jpg) center / cover no-repeat;
} }
.login_bg::v-deep .el-input__inner {
background-color: #fff;
}
.el-form--inline .el-form-item { .el-form--inline .el-form-item {
margin-right: 0px; margin-right: 0px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment