uniapp/pages/login/login.vue

<template>
	<view class="section">

		<view class="text-area content">
			<text class="title">智慧用电</text>
		</view>

		<form class="padding-lg flex flex-direction">
			<view class="login-box shadow ">
				<view class="phone-box">
					<input type="text" placeholder="13636363636" onfocus="this.placeholder=''">
					<span class="icon iconfont left-icon">&#xe64f;</span>
					<span class="icon iconfont right-icon">&#xe610;</span>
				</view>
				<view class="password-box">
					<input type="text" placeholder="请输入验证码">
					<text class="icon iconfont left-icon">&#xe86a;</text>
					<view class="right-icon verify">获取验证码</view>
				</view>
				<button class="submit">提 交 </button>
			</view>
		</form>

	<view class="box ">
		<view class="cu-bar tabbar bg-white">
			<view class="action" @click="NavChange" data-cur="login">
				<view class="cuIcon-cu-image">
					<span class="icon iconfont">&#xe64e;</span>
				</view>
				<view class="text-green">主页</view>
			</view>
			<view class="action">
				<view class="cuIcon-cu-image">
					<span class="icon iconfont">&#xe606;</span>
					
				</view>
				<view class="text-gray">消息</view>
			</view>
			<view class="action">
				<view class="cuIcon-cu-image">
					<span class="icon iconfont">&#xe858;</span>
					<view class="cu-tag badge">99</view>
				</view>
				<view class="text-gray">分析</view>
			</view>
			<view class="action">
				<view class="cuIcon-cu-image">
					<span class="icon iconfont">&#xe606;</span>
					<view class="cu-tag badge"></view>
				</view>
				<view class="text-gray">设置</view>
			</view>
		</view>
	
	</view>
	</view>
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello222',
				InputBottom: 0
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#4866DF", //底部背景色

			})
			uni.setNavigationBarTitle({
				title: '登录'
			});


		},
		methods: {
			
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}



		}
	}
</script>

<style>
	.section {
		height: calc(100vh - 90rpx);
		background-image: url(/static/login-bg.png);
		background-size: contain;
		background-repeat: no-repeat;
	}

	.content {
		height: 434rpx;
		text-align: center;
		position: relative;


	}

	.login-box {
		height: 600rpx;
		position: relative;
		top: -150rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 100rpx 20rpx;
	}

	.shadow {
		box-shadow: 1px 1px 4px rgb(26 26 26 / 10%);
	}

	.title {
		position: absolute;
		color: #fff;
		font-size: 60rpx;
		bottom: 180rpx;
		display: block;
		width: 100%;

	}

	input,
	button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 1;
		border: 1px solid #dbdbdb;
		border-radius: 100rpx;
		background: #fff;
		coloe: #333;
		margin: 40rpx 0;
		font-size: 34rpx;

	}

	input {

		text-indent: 100rpx;

	}


	.submit {
		background: #4074E7;
		color: #fff
	}

	.phone-box,
	.password-box {
		position: relative;
	}

	.phone-box text,
	.password-box text {
		font-size: 38rpx;
		color: #999999
	}

	.left-icon {
		position: absolute;
		left: 48rpx;
		top: 50%;
		margin-top: -20rpx;
		line-height: 100%
	}

	.right-icon {
		position: absolute;
		right: 48rpx;
		top: 50%;
		margin-top: -20rpx;
		line-height: 100%
	}

	.right-icon.verify {
		margin-top: -10rpx;
		color: #4074E7
	}

	.iconfont{
		color:#999
		
	}
	
	/* 底部 */
	.box{
		    position: fixed;
		    bottom: 0;
		    width: 100%;
			border-top:1px solid pink
	}
	.cuIcon-cu-image .iconfont{
		width: 38rpx;
		    height: 38rpx;
		    display: inline-block;
			margin-bottom:10rpx;
	}
	.text-gray{
		font-size:26rpx;
	}
	
</style>