zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: base 登录页美化

This commit is contained in:
caoqianming 2024-08-07 17:41:41 +08:00
parent e7a3ad5b19
commit afb4070f25
3 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/login/components/passwordForm.vue
View File

@ -14,7 +14,7 @@
<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
:placeholder="$t('login.PWPlaceholder')" @keyup.enter="login"></el-input>
</el-form-item>
<el-form-item style="margin-bottom: 10px">
<el-form-item style="margin-bottom: 10px;">
<el-col :span="12" class="login-reg">
<!-- <el-link @click="visitors">{{$t('login.fangke')}}</el-link> -->
</el-col>
@ -23,7 +23,7 @@
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%" :loading="islogin" round @click="login">{{ $t("login.signIn")
<el-button type="primary" style="width: 100%" :loading="islogin" @click="login">{{ $t("login.signIn")
}}</el-button>
</el-form-item>

4
src/views/login/components/phoneForm.vue
View File

@ -6,7 +6,7 @@
<template #prepend>+86</template>
</el-input>
</el-form-item>
<el-form-item prop="code" style="margin-bottom: 35px;">
<el-form-item prop="code" style="margin-bottom: 20px;">
<div class="login-msg-yzm">
<el-input v-model="form.code" prefix-icon="el-icon-unlock" clearable
:placeholder="$t('login.smsPlaceholder')"></el-input>
@ -15,7 +15,7 @@
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn')
<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn')
}}</el-button>
</el-form-item>
<!-- <div class="login-reg">

57
src/views/login/index.vue
View File

@ -27,16 +27,25 @@
<label>{{ baseConfig.base_name }}</label>
</div>
</div>
<el-tabs>
<div>
<el-segmented v-model="loginType" :options="loginTypeOptions" size="large">
<template #default="{ item }">
{{ item.label }}
</template>
</el-segmented>
<div style="height: 20px"></div>
<password-form v-if="loginType=='password'"></password-form>
<phone-form v-if="loginType=='phone'"></phone-form>
</div>
<!-- <el-tabs>
<el-tab-pane :label="$t('login.accountLogin')" lazy>
<password-form></password-form>
</el-tab-pane>
<!-- 手机号登陆 -->
<el-tab-pane :label="$t('login.mobileLogin')" lazy>
<phone-form></phone-form>
</el-tab-pane>
</el-tabs>
</el-tabs> -->
<!-- 微信登陆
<el-divider>{{ $t('login.signInOther') }}</el-divider>
<div class="login-oauth">
@ -52,6 +61,7 @@
<!-- <div class="login-oauth" v-else>
<el-button type="default" @click="faceLogin">刷脸登录</el-button>
</div> -->
<div class="copyright">Copyright © 2024 {{ baseConfig.base_right }}</div>
</div>
</div>
</div>
@ -119,7 +129,12 @@ export default {
showApp: false,
appUrl: 'http://222.222.144.147:6013/media/zc_ehs.apk',
showH5: false,
h5Url: 'http://222.222.144.147:6013/h5/'
h5Url: 'http://222.222.144.147:6013/h5/',
loginType:'password',
loginTypeOptions: [
{label: "账号登录", value: "password"},
{label: "手机登录", value: "phone"},
]
}
},
watch: {
@ -170,6 +185,9 @@ export default {
}
that.$API.system.config.base.req(req).then((res) => {
that.baseConfig = res.base;
if (that.baseConfig.base_right == undefined || that.baseConfig.base_right == null) {
that.baseConfig.base_right = "中存大数据";
}
that.$store.commit("SET_baseName", res.base.base_name);
that.$store.commit("SET_baseLogo", res.base.base_logo);
that.$TOOL.data.set("BASE_INFO", res)
@ -221,7 +239,7 @@ export default {
}
.login_adv {
width: 33.33333%;
width: 40%;
background-color: #555;
background-size: cover;
background-position: center center;
@ -379,6 +397,35 @@ export default {
top: 20px;
right: 20px;
}
.copyright {
position: absolute;
bottom: 30px;
right: 30px;
font-size: 16px;
color: rgb(36, 93, 116);
}
.copyright a {
color: #fff;
}
.copyright a:hover {
color: #fff;
}
.login-form:deep(.login-msg) {
display: flex;
width: 100%;
}
.login-form:deep(.login-msg) .el-input {
flex: 1;
}
.login-form:deep(.login-msg) .el-button {
margin-left: 10px;
--el-button-size: 42px;
}
.login-form:deep(.login-msg-yzm) {
display: flex;