uniapp学习系列二

登录

一、 新建项目 uniapp新建项目

二、 引入ColorUI

为了界面美观,同时偷懒,少写一点样式,我们引入ColorUI组件。

1. 先导入ColorUI 下载地址

colorui
可以直接使用HbuilderX导入,也可以下载zip源码解压,复制根目录的 /colorui 文件夹到你的根目录。

2. 找到main.js

在这里插入图片描述
加入下面代码

import cuCustom from './colorui/components/cu-custom.vue'

Vue.component('cu-custom',cuCustom)
3.找到App.vue

样式
加入下面代码

@import "colorui/main.css";
@import "colorui/icon.css";

这就完成了ColorUI的引入。

三、 新建登录页面

1.选择文件夹pages,点击右键选择新建页面,

新建页面
点击创建后,HbuilderX会自动创建好同名文件夹,并且在pages.json中注册。

2.修改pages.json

login排第一,默认显示login页面

{
	"pages": [{
            "path" : "pages/login/login",
            "style" : {
				"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景颜色(同状态栏背景色)
				"navigationBarTextStyle": "black", //导航栏标题颜色及状态栏前景颜色,仅支持 black/white
				"navigationStyle":"custom" //导航栏自定义,原生导航栏不显示,
			}
        },
		{
		"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "主页" //导航栏标题文字内容
			}
		}    
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "学习系统",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	}
}
3.编辑登录页面
<template>
	<view class="login bg-gradual-green"><!-- 背景颜色bg-gradual-green渐变色 -->
		<view class="content bounceInDown">
			<!-- 头部logo -->
			<view class="header">
				<image src="../../common/logo.png"></image>
			</view>
			
			<view class="systemName">
				学习系统
			</view>
			
			<!-- 主体表单 -->
			<view class="main">
				<form>
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-my"></text></view>
						<input class="inputText" placeholder="输入账户" name="input"></input>
					</view>
					<view class="cu-form-group margin-top account">
						<view class="title"><text class="lg cuIcon-lock"></text></view>
						<input class="inputText" placeholder="输入密码" name="input"></input>
					</view>
					<button class="cu-btn round lg btnlogin"  @click="Login()" >登 录</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			Login: function(url){ 
				//console.log(url)  
				uni.navigateTo({
					url: '../index/index',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
    /* 父容器,背景颜色显示 */
	uni-page-body{
		height: 100% !important;
	}
	/* 子容器,背景颜色显示 */
	.login{
		height: 100% !important;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content:center;
		/* margin-top: 128upx; */
	}
	
	/* 头部 logo */
	.header {
		width:161upx;
		height:161upx;
		box-shadow:0upx 0upx 60upx 0upx rgba(0,0,0,0.0);
		border-radius:50%;
		/* background-color: #000000; */
		margin-top: 128upx;
		margin-left: auto;
		margin-right: auto;
	}
	
	.header image{
		width:161upx;
		height:161upx;
		border-radius:50%;
	}
	
	.systemName{
		font-size: 50upx;
		margin-top: 1upx;
		margin-bottom: 72upx;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
		padding-left: 70upx;
		padding-right: 70upx;
	}
	
	.account{
		border-radius: 100rpx;
		height: 100rpx;
		background-color: rgba(0,0,0,0.2);
	}
	
	.title{
		font-size:26px;
		color: white;
	}
	
	.uni-input-input, .uni-input-placeholder{
		color:rgba(255,255,255,0.8) !important;
	}
	
	.btnlogin{
		margin-top: 60rpx;
		/* margin-bottom: 104%; */
		width: 100%;
		height: 100rpx;
		color: white;
		background-color: rgba(23, 104, 211, 0.4) !important;
	}
</style>

运行效果如下图:
效果图
提前准备好logo.png
这是简单登录界面,没有账号密码,可以直接跳转的。带验证功能请看下一篇。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值