首页样式

This commit is contained in:
weicw
2022-01-20 05:36:34 +08:00
parent 0842c23c99
commit 2a3b9803d0
3 changed files with 43 additions and 20 deletions

View File

@@ -1 +1 @@
VUE_APP_API_BASE_URL=http://1.14.132.108:10002/api VUE_APP_API_BASE_URL=http://localhost:10001/api

View File

@@ -144,7 +144,7 @@ export default {
}; };
return { return {
// 登录框方向, 0居中, 1居右, 2居左 // 登录框方向, 0居中, 1居右, 2居左
direction: 0, direction: 2,
// 加载状态 // 加载状态
loading: false, loading: false,
// 表单数据 // 表单数据
@@ -256,7 +256,7 @@ export default {
padding: 48px 16px 0 16px; padding: 48px 16px 0 16px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
background-image: url("~@/assets/bg-login.jpg"); background-image: url("~@/assets/bg-login2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
min-height: 100vh; min-height: 100vh;

View File

@@ -6,7 +6,9 @@
:rules="rules" :rules="rules"
layout="vertical" layout="vertical"
class="login-form ele-bg-white"> class="login-form ele-bg-white">
<h4>{{ $t('login.title') }}</h4> <h1>南宁生态环境监测数据<br/>
综合分析平台</h1>
<!-- <h4>{{ $t('login.title') }}</h4>-->
<a-form-item name="username"> <a-form-item name="username">
<a-input <a-input
allow-clear allow-clear
@@ -44,22 +46,23 @@
</a-button> </a-button>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item> <!-- <a-form-item>-->
<a-checkbox v-model:checked="form.remember"> <!-- <a-checkbox v-model:checked="form.remember">-->
{{ $t('login.remember') }} <!-- {{ $t('login.remember') }}-->
</a-checkbox> <!-- </a-checkbox>-->
<router-link <!-- <router-link-->
to="/forget" <!-- to="/forget"-->
class="ele-pull-right" <!-- class="ele-pull-right"-->
style="line-height: 22px;"> <!-- style="line-height: 22px;">-->
{{ $t('login.forget') }} <!-- {{ $t('login.forget') }}-->
</router-link> <!-- </router-link>-->
</a-form-item> <!-- </a-form-item>-->
<a-form-item> <a-form-item>
<a-button <a-button
block block
size="large" size="large"
type="primary" type="primary"
shape="round"
:loading="loading" :loading="loading"
@click="doSubmit"> @click="doSubmit">
{{ loading ? $t('login.loading') : $t('login.login') }} {{ loading ? $t('login.loading') : $t('login.login') }}
@@ -122,7 +125,7 @@ export default {
data() { data() {
return { return {
// 登录框方向, 0居中, 1居右, 2居左 // 登录框方向, 0居中, 1居右, 2居左
direction: 0, direction: 2,
// 加载状态 // 加载状态
loading: false, loading: false,
// 表单数据 // 表单数据
@@ -233,7 +236,7 @@ export default {
padding: 48px 16px 0 16px; padding: 48px 16px 0 16px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
background-image: url("~@/assets/bg-login.jpg"); background-image: url("~@/assets/bg-login2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
min-height: 100vh; min-height: 100vh;
@@ -246,7 +249,7 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, .2); /*background: rgba(0, 0, 0, .2);*/
} }
/* 卡片 */ /* 卡片 */
@@ -256,7 +259,7 @@ export default {
max-width: 100%; max-width: 100%;
padding: 0 28px; padding: 0 28px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);*/
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
z-index: 2; z-index: 2;
@@ -270,11 +273,21 @@ export default {
margin: 0 auto 0 15%; margin: 0 auto 0 15%;
} }
.login-form h1 {
padding: 22px 0;
text-align: left;
color: #2f95e9;
font-size: 30px;
}
.login-form h4 { .login-form h4 {
padding: 22px 0; padding: 22px 0;
text-align: center; text-align: center;
} }
.login-form :deep(.ant-input-affix-wrapper-lg) {
border-radius: 24px;
border-color: #ffffff;
box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
}
/* 验证码 */ /* 验证码 */
.login-input-group { .login-input-group {
display: flex; display: flex;
@@ -283,18 +296,28 @@ export default {
.login-input-group :deep(.ant-input-affix-wrapper) { .login-input-group :deep(.ant-input-affix-wrapper) {
flex: 1; flex: 1;
border-radius: 24px;
border-color: #ffffff;
box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
} }
.login-input-group .login-captcha { .login-input-group .login-captcha {
width: 102px; width: 102px;
height: 40px; height: 40px;
margin-left: 10px; margin-left: 10px;
padding: 0; padding: 0;
border: none;
} }
.login-input-group .login-captcha > img { .login-input-group .login-captcha > img {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 24px;
border-color: #ffffff;
box-shadow: 1px 2px 5px 3px rgba(0,0,0,.05);
overflow: hidden;
} }
/* 第三方登录图标 */ /* 第三方登录图标 */