home下三个页面

config/project.js

@@ -1 +1 @@
-exports.name = 'business'
+exports.name = 'home'

src/assets/css/xpwyfyy.css

@@ -291,11 +291,6 @@ body {
 	font-size: 40px
 }
 
-.mui-input-row a {
-	font-size: 90%;
-	line-height: 60px;
-}
-
 .mui-slider .mui-slider-group .mui-slider-item {
 	font-size: 17px
 }
@@ -832,3 +827,100 @@ h3 {
 	text-align: center;
 	margin-bottom:10px
 }
+.vongi-login-logo{
+	width:72px;
+	height:72px;
+	margin:15% auto;
+	overflow: hidden;
+	border-radius: 7px;
+	display: flex;
+}
+.vongi-login-logo img{
+	width:100%;
+	min-height:100%;
+	object-fit: cover;
+}
+.vongi-xieyi.mui-input-group .mui-input-row{
+	background:0;
+	position:relative
+}
+.vongi-login-form .mui-input-row a{
+	position:absolute;
+	right:15px;
+	top:15px;
+	color:#3385FF
+}
+.vongi-xieyi .mui-radio input[type=radio]:before{
+	font-size:16px
+}
+.vongi-xieyi .mui-radio.mui-left label{
+	padding:5px 15px 5px 35px
+}
+.vongi-xieyi .mui-radio.mui-left input[type=radio]{
+	left:15px;
+	width:auto;
+	height:auto;
+	top:10px
+}
+.vongi-btn{
+	padding:15px
+}
+.vongi-btn button{
+	width:100%;
+	padding:11px 15px
+}
+.vongi-login-form.mui-input-group .mui-input-row:after{
+	-webkit-transform: initial;
+    transform: initial;
+    background-color: #eee;
+}
+.vongi-xieyi.mui-input-group .mui-input-row{
+	height:auto
+}
+.vongi-pipei.mui-table-view .mui-media-object{
+	line-height: 36px;
+    max-width: 36px;
+    height: 36px;
+    display: flex;
+    overflow: hidden;
+    border-radius: 50%;
+    margin: 0 auto;
+}
+.vongi-pipei.mui-table-view .mui-media-object img{
+	object-fit: cover;
+	width:100%;
+	min-height: 100%;
+}
+.vongi-pipei .mui-selected.mui-table-view-cell{
+	background:#3385FF
+}
+.vongi-pipei .mui-table-view-cell{
+	background:#FFFFFF;
+	border:1px #D9D9D9 solid
+}
+.vongi-pipei .mui-pull-left  p{
+	text-align: center;
+}
+
+.vongi-pipei .mui-pull-left{
+	margin-right:15px
+}
+.vongi-pipei .mui-table-view-cell a{
+	display: flex;
+	align-items: center;
+}
+.vongi-choose .vongi-pipei .mui-media-body,
+.vongi-choose .vongi-pipei .mui-media-body p{
+	color:#333;
+	overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.vongi-choose .vongi-pipei .mui-selected .mui-media-body,
+.vongi-choose .vongi-pipei .mui-selected .mui-media-body p,
+.vongi-pipei .mui-selected .mui-pull-left  p{
+	color:#ffffff
+}
+.vongi-choose.mui-content-padded{
+	padding:5px
+}

src/projects/home/views/Home.vue

@@ -1,6 +1,46 @@
 <template>
 	<div>
-		home
+		<header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">选择行业</h1>
+		</header>
+		<div class="mui-content margin60">
+			<div class="vongi-choose">
+				<h1>选择行业</h1>
+				<h5>“小鹏管家”是智慧物业、智慧园区、智慧养老的云管家，是智慧生活的守护神。管家服务于访客、园区（包括小区、居家+机构养老、企事业单位、厂区）人员及管理者。主要功能包括出入管理、健康监管、考勤打卡、物业管理、安全监管、访客管理以及在线缴费等。</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell mui-media vongi-choose-yq">
+						<a class="mui-navigate-right">
+							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon02.png">
+							<div class="mui-media-body">
+								工厂园区
+								<p class='mui-ellipsis'>适用于办公楼、工厂、工业园等场所</p>
+							</div>
+						</a>
+					</li>
+					<li class="mui-table-view-cell mui-media vongi-choose-zz">
+						<a class="mui-navigate-right">
+							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon17.png">
+							<div class="mui-media-body">
+								社区住宅
+								<p class='mui-ellipsis'>适用于社区、小区、公寓等场所</p>
+							</div>
+						</a>
+					</li>
+					<li class="mui-table-view-cell mui-media vongi-choose-yl">
+						<a class="mui-navigate-right">
+							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon46.png">
+							<div class="mui-media-body">
+								机构、居家养老
+								<p class='mui-ellipsis'>适用于养老院、居家养老等场所</p>
+							</div>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="fyy-footer">
+			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-outlined">我是访客</button></div>
+		</div>
 	</div>
 </template>
 
@@ -12,5 +52,8 @@
 </script>
 
 <style scoped src="$project/assets/css/iconfont.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style scoped>
 </style>
+
+

src/projects/home/views/Login.vue

@@ -1,16 +1,54 @@
 <template>
 	<div>
-		login
+		<header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">登录账号</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<div class="vongi-login-logo">
+					<img src="~$project/assets/img/logo.jpg" /> 
+				</div>
+				<form class="mui-input-group vongi-login-form">
+					<div class="mui-input-row">
+						<input type="text" class="mui-input-clear" placeholder="请填写您的姓名">
+					</div>
+					<div class="mui-input-row">
+						<input type="text" class="mui-input-clear" placeholder="请输入手机号码">
+					</div>
+					<div class="mui-input-row">
+						<input type="text" class="mui-input-clear" placeholder="请输入验证码">
+						<a href="">发送验证码</a>
+					</div>					
+				</form>
+				<form class="mui-input-group vongi-xieyi">
+					<div class="mui-input-row mui-radio mui-left">
+						<label class="mui-h6">我已阅读并同意<span class="color4fc5f7">《用户使用协议》</span></label>
+						<input name="radio1" type="radio">
+					</div>
+				</form>
+				
+			</div>
+			<div class="vongi-btn">
+				<button class="mui-btn mui-btn-primary ">
+					登录
+				</button>
+			</div>	
+		</div>
 	</div>
 </template>
 
 <script>
 	export default {
 		name: 'Login',
-		components: {}
+		components: {},
+		mounted() {
+            document.body.style.backgroundColor = '#fff';
+        },
 	}
 </script>
 
 <style scoped src="$project/assets/css/iconfont.css"></style>
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style scoped>
 </style>

src/projects/home/views/Role.vue

@@ -1,45 +1,73 @@
 <template>
 	<div>
 		<header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">选择行业</h1>
+			<h1 class="mui-title">匹配身份</h1>
 		</header>
 		<div class="mui-content margin60">
-			<div class="vongi-choose">
-				<h1>选择行业</h1>
-				<h5>“小鹏管家”是智慧物业、智慧园区、智慧养老的云管家，111111是智慧生活的守护神。管家服务于访客、园区（包括小区、养老院、企事业单位、厂区）人员及管理者。主要功能包括出入管理、健康监管、考勤打卡、物业管理、园区安全管理、访客管理以及在线缴费等。</h5>
-				<ul class="mui-table-view">
-					<li class="mui-table-view-cell mui-media vongi-choose-yq">
-						<a class="mui-navigate-right">
-							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon02.png">
-							<div class="mui-media-body">
-								工厂园区
-								<p class='mui-ellipsis'>适用于办公楼、工厂、工业园等场所</p>
+			<div class="vongi-choose mui-content-padded">
+				<h5>经过比对，您可以使用下列企业的身份登录: </h5>
+				<ul class="mui-table-view  mui-table-view-radio vongi-pipei">
+					<li class="mui-table-view-cell mui-selected">
+						<a>
+							<div class="mui-pull-left mui-col-xs-2">
+								<div class="mui-media-object">
+									<img src="~$project/assets/img/03.jpg">	
+								</div>
+								<p class='mui-ellipsis'>员工</p>
+							</div>
+							<div class="mui-media-body mui-col-xs-10">
+								湖北荆鹏软件集团有限公司
+								<p class='mui-ellipsis'>信息工程中心</p>
 							</div>
 						</a>
 					</li>
-					<li class="mui-table-view-cell mui-media vongi-choose-zz">
-						<a class="mui-navigate-right">
-							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon02.png">
-							<div class="mui-media-body">
-								社区住宅
-								<p class='mui-ellipsis'>适用于社区、小区、公寓等场所</p>
+					<li class="mui-table-view-cell">
+						<a>
+							<div class="mui-pull-left mui-col-xs-2">
+								<div class="mui-media-object">
+									<img src="~$project/assets/img/03.jpg">	
+								</div>
+								<p class='mui-ellipsis'>员工</p>
+							</div>
+							<div class="mui-media-body mui-col-xs-10">
+								湖北荆鹏软件集团有限公司
+								<p class='mui-ellipsis'>信息工程中心</p>
 							</div>
 						</a>
 					</li>
-					<li class="mui-table-view-cell mui-media vongi-choose-yl">
-						<a class="mui-navigate-right">
-							<img class="mui-media-object mui-pull-left" src="~$project/assets/img/icon02.png">
-							<div class="mui-media-body">
-								养老院
-								<p class='mui-ellipsis'>适用于养老机构</p>
+					<li class="mui-table-view-cell">
+						<a>
+							<div class="mui-pull-left mui-col-xs-2">
+								<div class="mui-media-object">
+									<img src="~$project/assets/img/03.jpg">	
+								</div>
+								<p class='mui-ellipsis'>员工</p>
+							</div>
+							<div class="mui-media-body mui-col-xs-10">
+								湖北荆鹏软件集团有限公司
+								<p class='mui-ellipsis'>信息工程中心</p>
+							</div>
+						</a>
+					</li>
+					<li class="mui-table-view-cell">
+						<a>
+							<div class="mui-pull-left mui-col-xs-2">
+								<div class="mui-media-object">
+									<img src="~$project/assets/img/03.jpg">	
+								</div>
+								<p class='mui-ellipsis'>管理人员</p>
+							</div>
+							<div class="mui-media-body mui-col-xs-10">
+								湖北荆鹏软件集团有限公司
+								<p class='mui-ellipsis'>信息工程中心</p>
 							</div>
 						</a>
 					</li>
-				</ul>
+				</ul>				
 			</div>
 		</div>
 		<div class="fyy-footer">
-			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-outlined">我是访客</button></div>
+			<div class="bindfyy-btn"><button type="submit" class="mui-btn mui-btn-primary">确认选择</button></div>
 		</div>
 	</div>
 </template>