个人信息 登录

App.vue

@@ -26,7 +26,6 @@
 
 <style lang="scss">
 	
-	
 	html, body {
 	  background-color:#F2F4F6;
 	  margin: 0;

assets/img/riLine-calendar-todo-line 1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="24" height="24" style="" filter="none">
+    
+    <g>
+    <path d="M22.667 4h5.333c0.736 0 1.333 0.597 1.333 1.333v0 21.333c0 0.736-0.597 1.333-1.333 1.333v0h-24c-0.736 0-1.333-0.597-1.333-1.333v0-21.333c0-0.736 0.597-1.333 1.333-1.333v0h5.333v-2.667h2.667v2.667h8v-2.667h2.667v2.667zM20 6.667h-8v2.667h-2.667v-2.667h-4v5.333h21.333v-5.333h-4v2.667h-2.667v-2.667zM26.667 14.667h-21.333v10.667h21.333v-10.667zM8 18.667h2.667v2.667h-2.667v-2.667zM13.333 18.667h10.667v2.667h-10.667v-2.667z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

pages.json

@@ -108,6 +108,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/mine/personInfos",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mine/electronicMonitoring",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/mine/login",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 
 	"globalStyle": {

pages/mine/login.vue

@@ -0,0 +1,84 @@
+<template >
+	<view>
+		<view class="logo">
+			<image class="img" src="@/assets/img/logo.png" mode=""></image>
+		</view>
+		<!-- 手机号/密码 -->
+		<view class="input-box">
+			<input class="tel-input" type="text" placeholder="请输入手机号码"  >
+			<input  class="password-input" type="password"  placeholder="请输入密码">
+		</view>
+		
+		 <button class="login-disable" >登录</button>
+		 <button class="login-disable login" >登录</button>
+		 
+		 <view class="reset">
+		 	联系园区管家重置密码
+		 </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		background-color: #fff;
+		padding-top: 160rpx;
+	}
+	.logo{
+		margin: 0 auto;
+		width: 160rpx;
+		height: 160rpx;
+		border-radius: 16px;
+		background: linear-gradient(180deg, rgba(31,85,255,1) 0%,rgba(39,171,255,1) 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.img{
+			
+			width: 112rpx;
+			height: 112rpx;
+		}
+	}
+
+.input-box{
+	padding: 0 58rpx;
+	margin-top: 112rpx;
+	.tel-input,.password-input{
+		border-radius: 50px;
+		background-color: rgba(248,248,248,1);
+		color: rgba(16,16,16,1);
+		height: 100rpx;
+		line-height: 100rpx;
+		padding: 0 48rpx;
+		margin-bottom: 40rpx;
+	}
+	
+}
+
+.login-disable{
+	margin: 80rpx 56rpx 40rpx;
+	border-radius: 100rpx;
+	background-color: rgba(223,223,223,1);
+	color: rgba(255, 255, 255, 1);
+}
+.login{
+	background-color: rgba(27,119,251,1);
+}
+
+.reset{
+	color: rgba(119,119,119,1);
+	text-align: center;
+}
+</style>

pages/mine/personInfos.vue

@@ -0,0 +1,94 @@
+<template>
+	<view>
+		<u-navbar title="个人信息"  title-color="#101010" ></u-navbar>
+		<view class="infos-group">
+			<view class="infos-item">
+				<view class="item-title">
+					头像
+				</view>
+				<view class="item-value value-img">
+					<image class="img" src="../../assets/img/photo@x1.png" mode=""></image>
+				    <u-icon color="#b2b2b2" name="arrow-right"></u-icon>
+				</view>
+			</view>
+			
+		</view>
+		
+		<view class="infos-group">
+			<view class="infos-item">
+				<view class="item-title">
+					姓名
+				</view>
+				<view class="item-value">
+					周琼
+				    <u-icon color="#b2b2b2" name="arrow-right"></u-icon>
+				</view>
+			</view>
+			<view class="infos-item">
+				<view class="item-title">
+					性别
+				</view>
+				<view class="item-value">
+					女
+				    <u-icon color="#b2b2b2" name="arrow-right"></u-icon>
+				</view>
+			</view>
+			<view class="infos-item">
+				<view class="item-title">
+					租户单位
+				</view>
+				<view class="item-value">
+					联通公司
+				    
+				</view>
+			</view>
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.infos-group{
+		margin: 24rpx 32rpx;
+		background-color: #fff;
+		border-radius: 8px;
+		.infos-item{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 36rpx 32rpx;
+			.item-title{
+				color: rgba(51,51,51,1);
+				font-size: 32rpx;
+			}
+			.item-value{
+				
+				color:#777777;
+				
+				.img{
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 50px;
+				}
+			}
+			.value-img{
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+</style>