xinelu-doctor-app/pages/login/login.vue

<template>
	<view class="app">
		<image src="../../static/logos.png" mode=""></image>
		<view class="text">
			欢迎加入新医路
		</view>
		<view class="body">
			<view class="login">
				<view class="logins">
					登录
				</view>
				<view class="border">
				</view>
			</view>
			<view class="name">
				<u-form :model="form" ref="uForm" label-width="110">
					<u-form-item label="用户名:"><u-input  placeholder="请输入用户名" /></u-form-item>
				</u-form>
				<u-form :model="form" ref="uForm">
					<u-form-item label="密码:">
						<u-input placeholder="请输入密码" :password-icon="true" type="password"/>
					<!-- 	<span class="pwd">忘记密码</span> -->
					</u-form-item>
				</u-form>
			</view>
			<view class="loginsubmit">
				登录
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				form: {
					name: '',

				}
			}
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// },
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-image: url(../../static/bg.png);
		background-size: 100% 100%;
		position: relative;
		overflow: scroll;

		.text {
			width: 235rpx;
			height: 30rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
			position: absolute;
			top: 22%;
			left: 50%;
			transform: translateX(-50%);
		}

		image {
			position: absolute;
			width: 114rpx;
			height: 114rpx;
			left: 50%;
			top: 12%;
			transform: translateX(-50%);
		}

		.body {
			width: 100%;
			height: 70%;
			position: relative;
			top: 32%;
			overflow: scroll;
			background: #F9F9F9;
			border-radius: 30rpx 0rpx 0rpx 30rpx;
			opacity: 1;

			.login {
				top: 31px;
				width: 36%;
				height: 49px;
				font-size: 23px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #18CBB3;
				/* background: red; */
				position: relative;

				.logins {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					// top: 5%;

				}

				.border {
					width: 30rpx;
					height: 8rpx;
					background: #18CBB3;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					opacity: 1;

					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					border: 1rpx solid #18CBB3;
					top: 65rpx;

				}

			}

			.name {
				position: relative;
				width: 83%;
				/* background: red; */
			left: 50%;
			transform: translateX(-50%);
			top: 9%;

				::v-deep .u-form-item--left {
					font-size: 30rpx;
				}
				.pwd{
					display: inline-block;
					position: absolute;
					right: 10%;
					font-size: 30rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #18CBB3;
					line-height: 38rpx;
				}


			}
			.loginsubmit{
			    text-align: center;
			    width: 83%;
			    height: 88rpx;
			    line-height: 88rpx;
			    background: #18CBB3;
			    /* position: absolute; */
			    margin: 177rpx auto;
			    color: #fff;
				border-radius: 100rpx
				
			}
		}

	}
</style>