重构升级H5登录页面UI

This commit is contained in:
linfeng 2024-05-11 16:46:15 +08:00
parent b00b505a65
commit b21dfe710b

View File

@ -1,6 +1,7 @@
<template> <template>
<view class="login-register"> <view class="lf-login-register">
<view class="title">请先登录/注册</view> <image class="logo" :src="logo" mode="aspectFit" />
<view class="title">欢迎使用{{title}}</view>
<u-form :model="form" ref="uForm"> <u-form :model="form" ref="uForm">
<u-form-item> <u-form-item>
<u-input v-model="form.mobile" placeholder="请输入手机号" /> <u-input v-model="form.mobile" placeholder="请输入手机号" />
@ -13,8 +14,12 @@
</u-form-item> </u-form-item>
</u-form> </u-form>
<view class="button-login"> <view class="button-login">
<u-button v-show="form.mobile && form.code" type="success" @click="phoneLogin" shape="circle">登录</u-button> <u-button v-show="form.mobile && form.code" type="primary" @click="phoneLogin" shape="circle">登录/注册</u-button>
<u-button v-show="!form.mobile || !form.code" type="default" shape="circle">登录</u-button> <u-button v-show="!form.mobile || !form.code" type="success" shape="circle">登录/注册</u-button>
</view>
<view class="lf-bottom" @click="goIndex"><text> 暂不登录再看看 </text></view>
<view class="">
</view> </view>
</view> </view>
</template> </template>
@ -27,10 +32,27 @@
mobile: "", mobile: "",
code: "" code: ""
}, },
tips: '验证码' tips: '验证码',
logo: '',
title: this.$c.miniappName
}; };
}, },
onLoad() {
this.getSysInfo();
},
methods: { methods: {
goIndex(){
uni.switchTab({
url:"/pages/index/index"
})
},
getSysInfo() {
this.$H.get("system/miniConfig").then(res => {
if (res.code == 0) {
this.logo = res.logo;
}
})
},
phoneLogin() { phoneLogin() {
uni.showLoading({ uni.showLoading({
mask: true, mask: true,
@ -86,17 +108,39 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-register { .lf-login-register {
padding: 20rpx 50rpx; padding: 20rpx 50rpx;
text-align: center;
}
.logo {
width: 200rpx;
height: 200rpx;
margin-top: 100rpx;
}
.title {
font-size: 44rpx;
font-weight: 600;
margin-bottom: 50rpx;
} }
.button-login { .button-login {
margin-top: 100rpx; margin-top: 100rpx;
} }
.title { .lf-bottom {
font-size: 40rpx; text-align: center;
font-weight: 600; margin: 150rpx 0 0 0;
margin-bottom: 50rpx; color: #666;
} }
</style>
.lf-bottom text {
margin-left: 20rpx;
color: #aaaaaa;
font-size: 27rpx;
}
</style>