KH/kh-device-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页pc适配调试（logo需完善）

Browse Source
This commit is contained in:
yaoyanan
2021-03-25 18:49:54 +08:00
parent bcb0016168
commit f4180dac4d
4 changed files with 109 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/layouts/UserLayout.vue
+58 -124
View File
@@ -2,7 +2,13 @@
<div id="userLayout" :class="['user-layout-wrapper',device]">
<div class="container">
<div class="top">
<!--<img src="~@/assets/logoNew.png" alt="">-->
<div class="logo">
<img class="logo-img" src="~@/assets/logoNew.png" alt="">
<div class="company">
<span>合众未来</span>
<span>HEZHONGWEILAI</span>
</div>
</div>
</div>
<route-view></route-view>
</div>
@@ -27,6 +33,16 @@
document.body.classList.remove('userLayout')
},
}
var comO,logo,logoImg
window.onresize = function(){
comO = document.getElementsByClassName("company")[0]
logo = document.getElementsByClassName("logo")[0]
logoImg = document.getElementsByClassName("logo-img")[0]
console.log(logo.width)
comO.style.left = (logoImg.width + 10) + 'px'
comO.style.height = logoImg.height + 'px'
logo.style.height = logoImg.height + 'px'
}
</script>
<style lang="less" >
#userLayout.user-layout-wrapper{
@@ -39,129 +55,47 @@
position: relative;
.top{
position: absolute;
left: 1.5%;
top: 2%;
width: 207px;
height: 70px;
background: url("~@/assets/logoNew.png") no-repeat;
background-size:100%;
left: 2%;
top: 3%;
min-width: 100px;
min-height: 50px;
width: 100%;
height: 10%;
.logo{
width: 30%;
height: 100%;
display: flex;
align-items: center;
position: relative;
img{
max-width: 100%;
}
.company{
position: absolute;
bottom: 0;
display: inline-block;
color: #000;
white-space: nowrap;
display: flex;
flex-direction: column;
justify-content: flex-end;
span{
&:first-child{
font-size: 140%;
font-weight: 600;
line-height: 100%;
min-height: 20%;
height: 40%;
letter-spacing: 1.5px;
}
&:last-child{
font-size: 110%;
font-weight: 700;
}
}
}
}
}
}
}
@media screen and (max-width:1920px){ // 分辨率<=1920px
#userLayout.user-layout-wrapper .container {
background: url(~@/assets/home1920.png) no-repeat;
background-size: 100% 100%;
}
}
@media screen and (max-width:1366px){ // 分辨率<=1366px
#userLayout.user-layout-wrapper .container {
background: url(~@/assets/home1366.png) no-repeat;
background-size: 100% 100%;
}
}
</style>
<!--<style lang="less" scoped>-->
<!--#userLayout.user-layout-wrapper {-->
<!--height: 100%;-->
<!--&.mobile {-->
<!--.container {-->
<!--.main {-->
<!--max-width: 368px;-->
<!--width: 98%;-->
<!--}-->
<!--}-->
<!--}-->
<!--.container {-->
<!--width: 100%;-->
<!--min-height: 100%;-->
<!--background: url(~@/assets/home3840.png) no-repeat;-->
<!--background-size: 100% 100%;-->
<!--padding: 110px 0 144px;-->
<!--position: relative;-->
<!--a {-->
<!--text-decoration: none;-->
<!--}-->
<!--.top {-->
<!--text-align: center;-->
<!--.header {-->
<!--height: 44px;-->
<!--line-height: 44px;-->
<!--.badge {-->
<!--position: absolute;-->
<!--display: inline-block;-->
<!--line-height: 1;-->
<!--vertical-align: middle;-->
<!--margin-left: -12px;-->
<!--margin-top: -10px;-->
<!--opacity: 0.8;-->
<!--}-->
<!--.logo {-->
<!--height: 44px;-->
<!--vertical-align: top;-->
<!--margin-right: 16px;-->
<!--border-style: none;-->
<!--}-->
<!--.title {-->
<!--font-size: 33px;-->
<!--color: rgba(0, 0, 0, .85);-->
<!--font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";-->
<!--font-weight: 600;-->
<!--position: relative;-->
<!--top: 2px;-->
<!--}-->
<!--}-->
<!--.desc {-->
<!--font-size: 14px;-->
<!--color: rgba(0, 0, 0, 0.45);-->
<!--margin-top: 12px;-->
<!--margin-bottom: 40px;-->
<!--}-->
<!--}-->
<!--.main {-->
<!--min-width: 260px;-->
<!--width: 368px;-->
<!--margin: 0 auto;-->
<!--}-->
<!--.footer {-->
<!--position: absolute;-->
<!--width: 100%;-->
<!--bottom: 0;-->
<!--padding: 0 16px;-->
<!--margin: 48px 0 24px;-->
<!--text-align: center;-->
<!--.links {-->
<!--margin-bottom: 8px;-->
<!--font-size: 14px;-->
<!--a {-->
<!--color: rgba(0, 0, 0, 0.45);-->
<!--transition: all 0.3s;-->
<!--&:not(:last-child) {-->
<!--margin-right: 40px;-->
<!--}-->
<!--}-->
<!--}-->
<!--.copyright {-->
<!--color: rgba(0, 0, 0, 0.45);-->
<!--font-size: 14px;-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--@media screen and (max-width: 1920px) { // 屏幕宽度>=1920px时-->
<!--.contain {-->
<!--background:url("~@/assets/home1920.png") no-repeat !important;-->
<!--}-->
<!--}-->
<!--</style>-->
</style>
jero-web/src/views/user/Login.vue
+35 -50
View File
@@ -28,7 +28,6 @@
type="password"
autocomplete="false"
placeholder="请输入密码"
@paste.native.capture.prevent="handleOperate"
>
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
@@ -36,7 +35,7 @@
</a-col>
<a-col :span="3"></a-col>
</a-row>
<a-row>
<a-row style="margin-bottom: 0%;">
<a-col :span="3"></a-col>
<a-col :span="12">
<a-form-item>
@@ -50,26 +49,29 @@
</a-input>
</a-form-item>
</a-col>
<a-col :span="6" style="text-align: right">
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
<a-col :span="3"></a-col>
</a-row>
<a-row>
<a-row style="margin-bottom: 2%;">
<a-col :span="3"></a-col>
<a-col :span="6">
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
<a-col :span="7">
<a-form-item>
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
</a-form-item>
</a-col>
<a-col :span="8"></a-col>
<a-col :span="7"></a-col>
<a-col :span="4" style="text-align: right;color: #1891FF;">
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
<a-form-item>
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-row class="login-btn">
<a-col :span="3"></a-col>
<a-col :span="18">
<a-form-item>
@@ -78,7 +80,6 @@
size="large"
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">
@@ -162,14 +163,12 @@
//登录成功
this.loginSuccess()
}).catch((err) => {
if (err.code === 500 && err.message === '验证码错误') {
if (err.code === 500) {
// 刷新验证码
this.handleChangeCheckCode();
}
that.requestFailed(err);
});
}else {
that.loginBtn = false;
}
@@ -201,7 +200,6 @@
setTimeout(hide, 0);
this.cmsFailed(res.message);
}
console.log(res);
setTimeout(hide, 500);
})
.catch(err => {
@@ -215,15 +213,6 @@
}
);
},
stepCaptchaSuccess () {
this.loginSuccess()
},
stepCaptchaCancel () {
this.Logout().then(() => {
this.loginBtn = false
this.stepCaptchaVisible = false
})
},
handleChangeCheckCode(){
this.currdatetime = new Date().getTime();
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
@@ -239,10 +228,7 @@
})
},
loginSuccess () {
this.$router.push({ path: "/dashboard/analysis" }).catch((res)=>{
console.log(res)
// console.log('登录跳转首页出错,这个错误从哪里来的')
})
this.$router.push({ path: "/dashboard/analysis" }).catch((res)=>{})
this.$notification.success({
message: '欢迎',
description: `${timeFix()}，欢迎回来`,
@@ -283,9 +269,6 @@
inputCodeChange(e){
this.inputCodeContent = e.target.value
},
loginSelectOk(){
this.loginSuccess()
},
getRouterData(){
this.$nextTick(() => {
if (this.$route.params.username) {
@@ -304,11 +287,14 @@
padding-left: 40px;
}
.ant-row{
margin-bottom: 5%;
margin-bottom: 4%;
}
.user-layout-login{
width: 550px;
height: 650px;
width: 24%;
height: 56%;
padding: 3% 0 3% 0;
min-width: 400px;
min-height: 460px;
background: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
@@ -325,29 +311,28 @@
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-direction: column;
.title{
display: block;
color: #1891FF;
font-size: 34px;
font-weight: 700;
margin: 12% 0 9% 0;
font-size: 28px;
font-weight: 500;
margin: 0 0 5% 0;
text-align: center;
}
.login-button{
margin: 5% 0 0 0;
.login-btn{
margin-bottom: 0;
font-size: 10px;
}
}
}
@media screen and (max-width:1920px){ // 分辨率<=1920px
.user-layout-login {
width: 550px;
height: 650px;
}
}
@media screen and (max-width:1366px){ // 分辨率<=1366px
.user-layout-login {
width: 450px;
height: 532px;
@media all and (max-width:600px){ // 分辨率<=600px
.user-layout-login{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
</style>
jero-web/src/views/user/alteration/Alteration.vue
+3
View File
@@ -63,4 +63,7 @@
max-width: 750px;
margin: 16px auto;
}
.ant-steps-item{
overflow: hidden;
}
</style>
jero-web/src/views/user/alteration/Step2.vue
+13 -5
View File
@@ -4,31 +4,32 @@
<a-form-item
label="手机"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
:wrapperCol="{span: 16}"
style="text-align: left"
>
<a-input
type="text"
autocomplete="false"
style="width:310px;margin-left:-10px"
v-decorator="['phone',{ rules: validatorRules.phone.rule}]"
placeholder="请输入手机号">
<a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
</a-input>
<a-col :span="3"></a-col>
</a-form-item>
<a-form-item
label="验证码"
:labelCol="{span: 5}"
:wrapperCol="{span: 19}"
v-if="show">
<a-row :gutter="16" style="margin-left: 2px">
<a-col class="gutter-row" :span="12">
<a-row :gutter="24">
<a-col :span="13">
<a-input
v-decorator="['captcha',validatorRules.captcha]"
type="text"
placeholder="手机短信验证码">
</a-input>
</a-col>
<a-col class="gutter-row" :span="8">
<a-col :span="8">
<a-button
tabindex="-1"
size="default"
@@ -182,6 +183,13 @@
.stepFormText {
margin-bottom: 24px;
}
.ant-row{
margin-left: 0 !important;
margin-right: 0 !important;
}
.ant-col{
padding: 0 !important;
}
.ant-form-item-label,
.ant-form-item-control {