登录页面是每一个项目不可缺少的页面,是一个应用的门面,首次进入看见的可能就是登录界面,做了这么久的前端,发现登录界面其实都大同小异,有时候没必要从头写,我写了几个自认为比较好看的uniapp登录界面记录一下,下次用到的话,可以直接复制过来,修改下就行了。只有静态页面,并未做逻辑上的东西,这样便于在此基础上做调整。
先看效果
实际应用效果
源码
粉色登录界面(图一):
<template>
<view class="content">
<view class="loginBox">
<h3>登录</h3>
<view class="inputBox">
<view class="ipt">
<uni-icons type="contact" size="24" color="rgb(247,120,172)"></uni-icons>
<input type="text" value="" placeholder="请输入账号"/>
</view>
<view class="ipt">
<uni-icons type="eye" size="24" color="rgb(247,120,172)"></uni-icons>
<input type="passsword" value="" placeholder="请输入密码"/>
</view>
<view class="forgetPwd">
<span>忘记密码</span>
<span>没有账号,去注册</span>
</view>
<button>登录</button>
</view>
<view class="tipbox">
<view class="txt">
—— 其他账号登录 ——
</view>
<view class="otherUser">
<uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
<uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
</view>
</view>
</view>
<view class="tip">
某某应用 2024
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped>
.content{
height: 100vh;
background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F10%2F20200510005139_JR8fL.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714820289&t=e835cde99a094cbd98f9c318f25160ec") no-repeat;
background-size: 100% 100%;
}
.loginBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-60%);
width: 90%;
background-color: #fff;
border-radius: 20rpx;
padding: 60rpx;
box-sizing: border-box;
}
h3{
color: rgb(247,120,172);
font-size: 40rpx;
letter-spacing: 10rpx;
margin-bottom: 40rpx;
}
.inputBox{
}
.ipt{
height: 86rpx;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
padding-left: 10rpx;
}
.ipt input{
margin-left: 20rpx;
font-size: 28rpx;
}
.ipt input{
margin-left: 20rpx;
}
.forgetPwd{
font-size: 26rpx;
color: #b5b5b5;
text-align: end;
padding:0 10rpx;
display: flex;
justify-content: space-between;
}
button{
margin-top: 20rpx;
line-height: 85rpx;
text-align: center;
background: linear-gradient(to right,rgb(255, 170, 127),rgb(247,120,172));
border-radius: 40rpx;
color: #fff;
margin-top: 40rpx;
}
.tip{
text-align: center;
font-size: 28rpx;
position: fixed;
bottom: 50rpx;
left: 50%;
transform: translate(-50%,-50%);
color: #f4f4f4;
}
.tipbox {
text-align: center;
margin-top: 100rpx;
}
.otherUser {
margin-top: 30rpx;
display: flex;
justify-content: center;
}
.txt {
font-size: 28rpx;
color: #cbcbcb;
}
.otherUser .uni-icons {
margin-left: 20rpx;
}
</style>
🙇结束啦:
更多干货🎁
如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!
以上内容技术相关问题😈欢迎一起交流学习🔥嘉vx+18634371151
—— 往期推荐 ——
高颜值登录界面(一键复制)
个人中心页面(一键复制)
Echarts大屏(一键复制)
uniapp瀑布流实现(一键复制)
更多内容请前往我的首页侧边栏有专栏哦~!
......
....
..