登录页

pages/index/index.vue

@@ -1,8 +1,34 @@
 <template>
-	<view class="content">
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+	<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>
 
@@ -10,9 +36,16 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				title: 'Hello',
+				form: {
+					name: '',
+
+				}
 			}
 		},
+		// onReady() {
+		// 	this.$refs.uForm.setRules(this.rules);
+		// },
 		onLoad() {
 
 		},
@@ -22,30 +55,118 @@
 	}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+<style lang="scss">
+	.app {
+		height: 100vh;
+		background-image: url(../../static/bg.png);
+		background-size: 100% 100%;
+		position: relative;
+		overflow: scroll;
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+		.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%);
+		}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+		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: 30%;
+				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: 96%;
+				/* background: red; */
+				left: 9%;
+				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
+				
+			}
+		}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
 	}
-</style>
+</style>