uni-app简单布局登录页面小案例

直接上代码：

// An highlighted block
<template><view class="content"><view class="avatorWrapper"><view class="avator"><image class="img" src="../../static/WX20200627-161205.png" mode="widthFix"></image></view></view><view class="form"><view class="inputWrapper"><input class="input" type="text" value="" placeholder="请输入用户名"/></view><view class="inputWrapper"><input class="input" type="password" value="" placeholder="请输入密码"/></view><view class="loginBtn"><text class="btnValue">登录</text></view><view class="forgotBtn"><text>找回密码</text></view></view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>.content {background: #377EB4;width: 100vw;height: 100vh;}.avatorWrapper{height: 30vh;width: 100vw;display: flex;justify-content: center;align-items: flex-end;}.avator{width: 200upx;height: 200upx;overflow: hidden;}.avator .img{width: 100%}.form{padding: 0 100upx;margin-top: 80px;}.inputWrapper{width: 100%;height: 80upx;background: white;border-radius: 20px;box-sizing: border-box;padding: 0 20px;margin-top: 25px;}.inputWrapper .input{width: 100%;height: 100%;text-align: center;font-size: 15px;}.loginBtn{width: 100%;height: 80upx;background: #77B307;border-radius: 50upx;margin-top: 50px;display: flex;justify-content: center;align-items: center;}.loginBtn .btnValue{color: white;}.forgotBtn{text-align: center;color: #EAF6F9;font-size: 15px;margin-top: 20px;}
</style>

来看看效果图：

uni-app简单布局登录页面小案例相关推荐

Android开发实现简单QQ登录页面
Android开发实现极为简单的QQ登录页面设计一个简单QQ登录页面,无任何功能.然后打包安装到手机. 1.首先创建一个空白页面 2.打开样式设计的页面在activity_main.xml中写入代 ...
写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
Kotlin实现简单的登录页面
目录一.流程: 二.代码实现: 一.流程: 输入登录昵称+密码,点击登录按钮,登录成功显示成功toast并进入详情页面,登录失败显示失败toast Kotlin实现简单的登录页面视频 Kotlin实 ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
JSP实现简单的登录页面实现及代码（非连接数据库）
** JSP实现简单的登录页面实现及代码(非连接数据库) ** 1.实现一个简单的登陆页面: 2.如果登陆成功,提示页面欢迎你,进入我的主页: 3.如果登陆不成功跳转到登陆页面: 4.使用固定用户名和 ...
PHP连接数据库实现简单的登录页面
最后实现结果如下图所示: 如果输入的用户名或密码为空,则会弹出对话框提示同样的,如果输入的密码不正确也会弹出对话框提示: 登录成功页面: 具体实现代码如下: HTML代码: <!DOCTYPE ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
简单java登录页面android_Android 之路 - RxJava2+Retrofit实现简单登陆
原标题:Android 之路 - RxJava2+Retrofit实现简单登陆前言使用RxJava2+Retrofit实现简单登陆. 正文1. Hello world1.1 相关版本 Androi ...

uni-app简单布局登录页面小案例

直接上代码：

uni-app简单布局登录页面小案例相关推荐

最新文章

热门文章