首页开发

pages/index/index.vue

@@ -1,9 +1,129 @@
 <template>
 	<view class="content">
-
-
-		
-
+		<view class="Homepage_header">
+			<view class="Homepage_suspension">
+					<view class="Suspension">
+						<view class="online">
+							<view><img src="@/static/index/repair-online.svg" alt="" style="margin-left: 5rpx;"></view>
+							<view style="font-size: 20rpx;">线上保修</view>
+						</view>
+						<view class="record">
+							<view><img src="@/static/index/check-review.svg" alt="" style="margin-left: 5rpx;"></view>
+							<view style="font-size: 20rpx;">巡检记录</view>
+						</view>
+						<view class="withholding">
+							<view><img src="@/static/index/reduce-record.svg" alt="" style="margin-left: 5rpx;"></view>
+							<view style="font-size: 20rpx;">扣缴记录</view>
+						</view>
+					</view>
+			</view>
+		</view>
+		<view class="pending">
+			<view class="pending_middle">
+				<view class="all">
+					<view class="work">
+						<span style="font-size: 30rpx;">工单待办</span>
+					</view>
+					<view class="processing">
+						<view class="immediately">
+							<span style="font-size: 25rpx; color: #5c8fff; ">立即处理</span>
+							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
+						</view>
+						
+					</view>
+				</view>
+				<view class="wait">
+					<view>
+						<view style="font-size: 30rpx;">待指派</view>
+						<view style="text-align: center;">1</view>
+					</view>
+					<view>
+						<view style="font-size: 30rpx;">待维修</view>
+						<view style="text-align: center;">1</view>
+					</view>
+					<view>
+						<view style="font-size: 30rpx;">已维修</view>
+						<view style="text-align: center;">1</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="equipment">
+			<view class="pending_middle">
+				<view class="all">
+					<view class="work">
+						<span style="font-size: 30rpx;">设备异常</span>
+					</view>
+					<view class="processing">
+						<view class="immediately">
+							<span style="font-size: 25rpx; color: #5c8fff; ">立即查看</span>
+							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
+						</view>
+						
+					</view>
+				</view>
+				<view class="wait">
+					<view>
+						<view style="font-size: 30rpx;">异常总数</view>
+						<view style="text-align: center;">0</view>
+					</view>
+					<view>
+						<view style="font-size: 30rpx;">空调异常</view>
+						<view style="text-align: center;">0</view>
+					</view>
+					<view>
+						<view style="font-size: 30rpx;">水表异常</view>
+						<view style="text-align: center;">0</view>
+					</view>
+					<view>
+						<view style="font-size: 30rpx;">电表异常</view>
+						<view style="text-align: center;">0</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="arrears">
+			<view class="pending_middle">
+				<view class="all">
+					<view class="work">
+						<span style="font-size: 30rpx;">欠费待收</span>
+					</view>
+					<view class="processing">
+						<view class="immediately">
+							<span style="font-size: 25rpx; color: #5c8fff; ">立即催收</span>
+							<u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
+						</view>
+					</view>
+				</view>
+				<view class="type">
+					 <table class="tr" style="width: 100%; border-color: #ccc; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0">
+					          <tr>
+					             <td>欠费类型</td>
+					             <td>欠费租户数</td>
+					             <td>累计欠费（元)</td>
+					            
+					          </tr>
+					          <tr>
+					             <td>水费</td>
+					             <td>1.00</td>
+					             <td>0.00</td>
+					            
+					          </tr>
+							  <tr>
+							     <td>电费</td>
+							     <td>1.00</td>
+							     <td>0.00</td>
+							    
+							</tr>
+							<tr>
+							     <td>物业费</td>
+							     <td>1.00</td>
+							     <td>77796.00</td>
+							</tr>
+					  </table>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -11,8 +131,8 @@
 	export default {
 		data() {
 			return {
-			tabbardata: 0,	
-			
+				tabbardata: 0,	
+				
 			}
 		},
 		onLoad() {
@@ -21,15 +141,113 @@
 		},
 		methods: {
 			
-				
-				
-		
-			
 		}
 	}
 </script>
 
-<style>
-	
-	
+<style lang="scss">
+	*{
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		text-decoration: none;
+	}
+	.Homepage_header{
+		width: 750rpx;
+		height: 200rpx;
+		background-color: #5c8fff;
+		border-radius: 0px 0px 16px 16px;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.Homepage_suspension{
+		width: 650rpx;
+		height: 200rpx;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		position: absolute;
+		top: 100rpx;
+	}
+	.Suspension{
+		width: 650rpx;
+		// height: 200rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+	}
+	.pending{
+		width: 750rpx;
+		height: 350rpx;
+		// background-color: #ccc;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		top: 50rpx;
+	}
+	.pending_middle{
+		width: 650rpx;
+		// height: 100px;
+		// background-color: #fff;
+	}
+	.all{
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.work{
+		// padding-left: 20rpx;
+		// padding-top: 2rpx;
+	}
+	.wait{
+		width: 650rpx;
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		justify-content: space-around;
+		padding-top: 30rpx;
+		text-align: center;
+		line-height: 60rpx;
+		margin-top: 10rpx;
+	}
+	.immediately{
+		display: flex;
+		// padding-top: 2rpx;
+	}
+	.equipment{
+		width: 750rpx;
+		// height: 200rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		top: 20rpx;
+	}
+	.arrears{
+		// width: 750rpx;
+		// height: 350rpx;
+		display: flex;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		top: 50rpx;
+	}
+	.type{
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		text-align: center;
+		flex: 1;
+		margin-top: 10rpx;
+		font-size: 30rpx;
+	}
+	tr{
+		background-color: #fff;
+	}
 </style>