<!-- 简洁登录页面 -->
<template><view class="login-bg"><image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image><image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image><!-- 标题 --><view class="t-b">{{ title }}</view><view class="t-b2">欢迎登录</view><view class="t-login"><form class="cl"><view class="t-a"><image src="https://zhoukaiwen.com/img/loginImg/user.png"></image><input type="number" name="phone" placeholder="请输入账号" maxlength="11" v-model="phone" /></view><view class="t-a"><image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image><input type="password" name="code" maxlength="6" placeholder="请输入密码" v-model="pwd" /></view><button @tap="login()">登 录</button><view class="t-c"><text class="t-c-txt" @tap="reg()">注册账号</text><text>返回首页</text></view></form><view class="t-f"><span :style="{width:width+'px'}"></span><text class="qt"> 其他登录方式 </text><span :style="{width:width+'px'}"></span></view><view class="t-e cl"><view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image></view><view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image></view><view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image></view></view></view><image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image></view>
</template>
<script>export default {data() {return {title: '数字政务！', //填写logo或者app名称，也可以用：欢迎回来，看您需求phone: '', //手机号码pwd: '', //密码width: ''};},onLoad() {setTimeout(() => {let query = uni.createSelectorQuery();query.select('.qt').boundingClientRect()query.select('.t-f').boundingClientRect()query.exec((res) => {console.log("res[0]", res[0]);console.log("res[1]", res[1])this.width = ((res[1].width - res[0].width) / 2) - 15})}, 200)},methods: {//当前登录按钮操作login() {var that = this;if (!that.phone) {uni.showToast({title: '请输入手机号',icon: 'none'});return;}if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {uni.showToast({title: '请输入正确手机号',icon: 'none'});return;}if (!that.pwd) {uni.showToast({title: '请输入密码',icon: 'none'});return;}uni.showToast({title: '登录成功！',icon: 'none'});},//立刻注册reg() {uni.showToast({title: '注册账号',icon: 'none'});}}};
</script>
<style scoped>.img-a {position: absolute;width: 100%;top: -150rpx;right: 0;z-index: -1;}.img-b {position: absolute;width: 50%;bottom: 0;left: -50rpx;z-index: -1;}.login-bg {max-width: 750px;width: 100vw;min-height: 100vh;}.t-b {text-indent: 40rpx;font-size: 46rpx;color: #000;padding: 200rpx 0 30rpx 0;font-weight: bold;}.t-b2 {text-indent: 40rpx;font-size: 32rpx;color: #aaaaaa;padding: 0rpx 0 60rpx 0;}.t-login {width: 80%;padding: 55rpx;margin: 0rpx auto 0 auto;font-size: 28rpx;z-index: 9;}.t-login button {font-size: 28rpx;background: linear-gradient(to right, #5677fc, hsla(217 100% 56% / 1));/* background-image: linear-gradient(325deg,hsla(217 100% 56% / 1) 0%,hsla(194 100% 69% / 1) 55%,hsla(217 100% 56% / 1) 90%); */color: #fff;height: 90rpx;line-height: 90rpx;border-radius: 50rpx;}.t-login input {padding: 0 20rpx 0 120rpx;height: 90rpx;line-height: 90rpx;margin-bottom: 50rpx;background: #f6f6f6;border: 1px solid #f6f6f6;font-size: 28rpx;border-radius: 50rpx;}.t-login .t-a {position: relative;}.t-login .t-a image {width: 40rpx;height: 40rpx;position: absolute;left: 40rpx;top: 28rpx;}.t-login .t-b {text-align: left;font-size: 46rpx;color: #000;padding: 300rpx 0 120rpx 0;font-weight: bold;}.t-login .t-d {text-align: center;color: #999;margin: 80rpx 0;}.t-login .t-c {display: flex;justify-content: space-evenly;color: #666666;margin: 30rpx 30rpx 40rpx 0;}.t-login .t-c .t-c-txt {margin-right: 300rpx;}.t-login .t-e {text-align: center;width: 80%;margin: 40rpx auto 0;}.t-login .t-g {float: left;width: 33.33%;}.t-login .t-e image {width: 70rpx;height: 70rpx;}.t-login .t-f {width: 100%;display: flex;align-items: center;justify-content: space-between;margin: 80rpx 0 0 0;color: #999;position: relative;}.t-login .t-f text {color: #b9b9b9;font-size: 27rpx;}.t-login .t-f span {display: block;background-color: #000;width: auto;height: 1.5rpx;}.t-login .uni-input-placeholder {color: #aeaeae;}.cl {zoom: 1;}.cl:after {clear: both;display: block;visibility: hidden;height: 0;content: '\20';}
</style>

参考文章：

复制了这个博主的大部分html结构和部分css（目前放置的是我初版的样式和代码后续根据业务调整了下，同时为了适配兼容修改成弹性布局及动态宽度）

uni-app 微信小程序之好看的ui登录页面（一）_微信小程序登录页面-CSDN博客 

uni-app 微信小程序之好看的ui登录页面（四）_微信小程序 登录页 样式-CSDN博客