类似LeetCode的登录页面(小程序版)

news2024/11/17 0:38:54

前言

每一个项目都会有用户端的注册和登录页面,对于刚入门的小白来说,在UI设计方面不太擅长,就算大致的UI界面设计出来了,但是落实到代码上来实现的时候就很容易卡住。这篇博客主要介绍的就是仿作一个类似LeetCode登录的简约大方页面。废话不多说我们开始吧!


具体实现

我们先来看看LeetCode的登录页面吧,大致是长图一这样的,我们制作出来的样式是图二这样的。

图一

图二

主要的难点就是在原来的页面上添加一个遮罩层并且点击不能穿透在遮罩层上写出一个白色盒子的形状,再往里面添加一些内容(如loge、设计元素之类的)。这种悬浮的登录页面比普通的页面更加简约大方,设计和实现起来又很方便快捷。


由于外部组件库中有遮罩层这种已经被封装的比较完善的组件,所以我们也可以直接使用。这里我使用的vant-weapp里面的组件.这里我就不详细介绍Overlay组件所支持的API了,文档里面有很详细的介绍。

我们将页面分为两部分来实现,一块是原始内容层,一块是遮罩层。原始内容负责显示初始状,遮罩层负责当用户点击了登录时则弹出遮罩层和悬浮的登录窗口。

除此之外再搭配上js代码来实现当用户点击遮罩层右上角的取消按钮的时候不显示遮罩层,这样一来一个雏形就完成了。我将代码放下面了~

代码的主要思想:

  1. 将wxml分块:原始内容块、遮罩层登录块

  1. 通过onClickHide函数实现点击遮罩层右上角的×来实现关闭遮罩层显示原始层

  1. 为了实现所有型号的手机都通用,用rpx来代替px完成大部分的CSS部分。

<!-- wxml -->
<!-- 原始内容层 -->
<view class="box">
       ......
</view>

<!-- 遮罩层 -->
<van-overlay show="{{ show }}" z-index="2">
       <view class="wrapper">
              <view class="login">
                     <image src="../../icon/tuantuan.png" class="tuantuan"></image>
                     <van-icon name="cross" size="40px" custom-style="position:relative ; left:280rpx ; bottom:40rpx" bindtap="onClickHide"/>
                     <van-divider
                     contentPosition="left"
                     customStyle="color: grey; border-color: grey; font-size: 18px; width: 90% ; margin-left:20px ; margin-right:20px ; margin-top:20%"
                     >
                            Account
                     </van-divider>
                     <input bindinput="getAccount" class="inputborder1" placeholder="输入账号"></input>
                     <van-divider
                     contentPosition="left"
                     customStyle="color: grey; border-color: grey; font-size: 18px; width: 90% ; margin-left:20px ; margin-right:20px ; margin-top:0%"
                     >
                            Password
                     </van-divider>
                     <input class="inputborder2" type="password"  placeholder="输入密码" value='{{password}}' bindinput='getPassWord'></input> 
                     <view bindtap="goRegister" class="goRegister">注册账号</view>
                     <view bindtap="goRetrieve" class="goRetrieve">忘记密码</view>
                     <button bindtap="enterApproval" style="width: 88%;" class="loginButton">登录</button>
                     <image src="../../icon/client-side.png" class="client-side"></image>
              </view>
       </view>
</van-overlay>       

//js
const db  = wx.cloud.database()
Page({
       data: {
              show:false,
              password :'',
              account :''
       },
       goIndex(e){
              console.log('点击了用户登录')
              //显示用户端的遮罩层
              this.setData({
                     show:true
              })
       },
       // 隐藏遮罩层
       onClickHide() {
              this.setData({ 
                     show: false 
              });
       },
      
       //点击登录
       enterApproval(){
              let account = this.data.account
              let password = this.data.password
              db.collection("studentUser")
              .where({
                     account:account
              })
              .get({})
              .then(res=>{
                     console.log("账号是",this.data.account)
                     console.log("密码是",this.data.password)
                     console.log("查询数据库成功",res.data)
                     if(password == res.data[0].password){
                            console.log('登录成功')
                            wx.showToast({
                              title: '登录成功',
                            })
                            wx.switchTab({
                                   url: '../index/index',
                            })
                     }
                     else{
                            console.log("登录失败")
                            wx.showToast({
                              title: '登录失败,账号或密码不正确',
                              icon : "none"
                            })
                     }
              })
              .catch(res=>{
                     wx.showToast({
                            title: '登录失败,账号或密码不正确',
                            icon : "none"
                          })
              })




       },
       //获取输入的账号
       getAccount(e){
              this.setData({
                     account : e.detail.value
              })
       },
       //获取输入的密码
       getPassWord: function(e) {
              var password = e.detail.value;
              this.setData({
                password: password
              })
       },
       //进入注册界面
       goRegister(){
              wx.navigateTo({
                     url: '../register3/register3',
              })
       },
       //进入找回账号密码页面
       goRetrieve(){
              wx.navigateTo({
                     url: '../retrieve/retrieve',
              })
       }
})

text{
       padding-right: 10px;
}
.loginHead{
       width: 100%;
       height: 160rpx;
}
.cross{
       float: right;
       width: 160rpx;
       height: 120rpx;
       padding-top: 40rpx;
       padding-right: 40rpx;
}
/* 团团图片样式 */
.tuantuan{
       width: 160rpx;
       height: 120rpx;
       padding-top: 40rpx;
       padding-left: 40rpx;
}
.loginBody{
       width: 100%;
       height: 700rpx;
}
.loginFeet{
       width: 100%;
       height: 300rpx;
}
.Teacherbutton_location{
       margin-top: 10px;
       border-radius: 80rpx;
       color:black;
       background-color: #FFFFFF;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);

    }
    .button_location{
       border-radius: 80rpx;
       margin-top: 55%;
       color:#FFFFFF;
       background-color: #D43030;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.35);

   }

   /* 遮罩层内嵌盒子包装层 */
.wrapper {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
     }
/* 遮罩层内嵌盒子内容层 */
.login{
       background-color: #FFFFFF;
       width: 600rpx;
       height: 1200rpx;
       border-radius: 40rpx;
}
/* 输入账号的input */
.inputborder1{
       margin-left: 40rpx;
       margin-right:40rpx;
       margin-bottom: 30rpx;
       padding-top: 30rpx;
       padding-bottom: 30rpx;
       padding-left: 30rpx;
       padding-right:30rpx;
       border-radius: 20rpx;
       border: 2rpx solid #F2E6E6;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* 输入密码的input */
.inputborder2{
       margin-left: 40rpx;
       margin-right:40rpx;
       margin-bottom: 30rpx;
       padding-top: 30rpx;
       padding-bottom: 30rpx;
       padding-left: 30rpx;
       padding-right:30rpx;
       border-radius: 20rpx;
       border: 2rpx solid #F2E6E6;
       box-shadow: 16rpx 8rpx 24rpx rgba(212,48,48, 0.15);
}
/* button在wxss里面修改不了宽度和高度,故在wmxl里面添加style属性来实现 */
.loginButton{
       position: relative;
       padding-top: 100rpx;
     }

.goRegister{
       position: relative;
       top: 5rpx;
       float: right; 
       right: 40rpx; 
       font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.goRetrieve{
       position: relative;
       top: 5rpx; 
       left: 40rpx;
       float: left; 
       font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.client-side{
       width: 120rpx;
       height: 80rpx;
       float: right;
       margin-top:10rpx ;
       margin-right:20rpx;
}

结语

如果有疑问欢迎大家留言讨论,你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗?我们之间的交流是我最大的动力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/351373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

离线环境轻量级自动化部署

流程图&#xff1a; 常规系统发布的痛点 服务器频繁重启&#xff0c;上面部署的应用服务不能随之重启&#xff0c;导致服务时常宕机应用手动部署相对比较麻烦&#xff0c;步骤繁琐应用发布环境取决于发布人本地环境&#xff0c;导致不同发布人每次发布环境不一致&#xff0c;导…

【玩转多核异构】双核高速率CAN-FD评测——飞凌嵌入式

为了能够让更多的工程师朋友了解多核异构处理器&#xff0c;飞凌嵌入式特别推出了【玩转多核异构】专题&#xff0c;帮助大家解决在多核异构处理器的开发过程中遇到的问题。【玩转多核异构】专题持续更新中&#xff0c;欢迎您的持续关注。引言凭借实时性、抗干扰性和安全性等优…

Redis 开发规范

原创 | Java 2021 超神之路&#xff0c;很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 Elastic-Job 源码解析分布式事务中间件 TCC-Transaction 源…

详细总结Ansible中使用playbook

文章目录前言一、Playbook的功能二、YAML三、playbook执行命令1.使用ansible-playbook部署ftp服务&#xff0c;并开启匿名用户访问权利2.使用ansible-playbook部署apache服务&#xff0c;设定默认发布文件内容为www.westos.org3.tags&#xff1a;标签四、使用vim解决yaml书写格…

使用git中可能出现的问题

问题1&#xff1a;如果遇到自己的文件在远程仓库dev分支被别人修改了&#xff0c;自己在本地仓库test分支继续在写代码先拉取最新的代码 覆盖本地dev分支 TortoiseGit->Pull被修改如图2.拉取最新的代码(拉取成功后 本地dev分支user有四条属性)3.切换到自己的分支tortoiseGit…

C++009-C++循环结构while

文章目录C009-C循环结构whilewhile循环while循环举例题目描述 对折多少次能超过nmm题目描述 输入整数和超过n题目描述 输入若干个大写字母&#xff0c;输出对应的小写字母题目描述 输入整数&#xff0c;逆序输出作业在线练习&#xff1a;总结C009-C循环结构while 在线练习&…

模型转换 PyTorch转ONNX 入门

前言 本文主要介绍如何将PyTorch模型转换为ONNX模型&#xff0c;为后面的模型部署做准备。转换后的xxx.onnx模型&#xff0c;进行加载和测试。最后介绍使用Netron&#xff0c;可视化ONNX模型&#xff0c;看一下网络结构&#xff1b;查看使用了那些算子&#xff0c;以便开发部署…

计算机网络第1章(概述)学习笔记

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…

PPS文件如何转换成PPT?附两种方法

在工作中&#xff0c;PPS文件的使用还是很广泛的&#xff0c;因为作为幻灯片放映文件&#xff0c;点击后就能直接播放&#xff0c;十分方便。但如果想要修改PPS里的内容&#xff0c;PPS是无法编辑的&#xff0c;我们需要把文件转换成PPT&#xff0c;再进行修改。 那PPS文件如何…

详细解读ChatGPT:如何调用ChatGPT的API接口到官方例子的说明以及GitHub上的源码应用和csdn集成的ChatGPT

文章目录1. 解读ChatGPT1.1 词语解释1.2 功能解读2. GitHub上ChatGPT的应用源码3. 调用ChatGPT的API4. 官方例子说明5. 集成ChatGPT自ChatGPT出来到如今&#xff0c;始终走在火热的道路上&#xff0c;如今日活用户破亿&#xff0c;他为何有如此大的魅力&#xff0c;深受广大用户…

通用 GPU 领先企业登临科技加入龙蜥社区,完成与龙蜥操作系统的兼容适配

近日&#xff0c;上海登临科技有限公司&#xff08;以下简称“登临科技”&#xff09;签署了 CLA&#xff08;Contributor License Agreement&#xff0c;贡献者许可协议&#xff09;&#xff0c;正式加入龙蜥社区&#xff08;OpenAnolis&#xff09;。作为国内通用 GPU 领先企…

深入浅出带你学习GlassFish中间件漏洞

前文 上文给大家带来了WEBLOGIC常见的漏洞不知道大家理解了没有&#xff0c;今天给大家带来一个新的中间件漏洞的讲解——glassfish&#xff0c;本文会先介绍该中间件的简单信息然后解析一下该中间件可能存在的漏洞类型&#xff0c;下面我们展开文章来讲。 GlassFish GlassF…

2023美国大学生数学建模竞赛E题思路解析

背景&#xff1a;光污染是指任何过多或不当使用人造光的表现。我们所称为光污染的一些现象包括光侵入、过亮、以及光混乱。这些现象最容易在大城市太阳落山后观察到天空中的发光&#xff1b;然而&#xff0c;它们也可能发生在更偏远的地区。光污染改变了我们对夜空的看法&#…

(三十四)Vue之新生命周期钩子nextTick

文章目录普通实现的一个问题解决问题nextTick上一篇&#xff1a;&#xff08;三十三&#xff09;Vue之消息订阅与发布 首先先看这一个需求&#xff0c;给每个任务项新增一个编辑按钮 当编辑按钮点击时&#xff0c;任务项就会变成文本框&#xff0c;并且自动获取焦点 普通实…

中国天气——对流性天气过程复习笔记

对流性天气过程 对流性天气十分激烈&#xff0c;影响范围相对较小&#xff0c;持续时间短&#xff0c;通常是局部灾害性天气 雷暴结构 产生雷暴的积雨云叫雷暴云&#xff0c;也叫雷暴单体&#xff0c;水平尺度约为十几千米多个雷暴单体成群聚集在一起叫做雷暴群&#xff0c;…

【C语言】数组的声明和使用(一维数组、多维数组)

数组一、什么是数组&#xff1f;二、一维数组&#xff08;一&#xff09;一维数组声明&#xff08;二&#xff09;一维数组初始化&#xff08;三&#xff09;一维数组的引用三、多维数组&#xff08;以二维数组为例&#xff09;&#xff08;一&#xff09;二维数组声明&#xf…

PyQt5数据库开发1 4.3 QSqlTableModel 之 Qt项目的创建

目录 一、新建Qt项目 1. 编辑资源文件 2. 添加前缀 3. 新建放资源文件的目录 4. 添加图标文件 二、Action 1. 新建打开数据库Action 2. 添加其他Action 三、工具栏 1. 添加工具栏 2. 拖动actOpenDB到工具栏 3. 设置工具栏属性 4. 添加分隔符 5. 添加其他工具 6.…

精选案例 |《金融电子化》:光大银行云原生背景下的运维监控体系建设

顺应“十四五”规划中关于“加快金融机构数字化转型”要求&#xff0c;中国人民银行印发了《金融科技发展规划&#xff08;2022-2025年&#xff09;》。近几年来&#xff0c;金融行业牢牢占据着国内产业数字化转型市场投入的榜首位置。IDC调查显示&#xff0c;2022上半年&#…

北斗卫星信号类型及卫星颗数

文章目录一、北斗系统现阶段提供的公开服务信号二、北斗二号、三号卫星个数三、GNSS模块中的北斗信号参考来源这篇博客主要是整理一下北斗卫星现阶段提供的公开服务信号、二号和三号卫星个数&#xff0c;以及简单看看市场的GNSS模块对北斗信号的支持情况。一、北斗系统现阶段提…

智云通CRM:引起流单的三个问题,你了解了吗?

销售人员一般都会了解基本的销售流程&#xff0c;但是为什么还是出现了各种流单的问题&#xff1f;智云通CRM总结以下三个问题&#xff1a; 第一&#xff0c;采购流程是会发生反复的&#xff0c;不会一直向下走。 从整体上看&#xff0c;客户的采购流程遵循着上述规律&#x…