Merge branch 'master' of http://git.ringzle.com:3000/liwei2496/wit-uniapp

components/t-table/t-table.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="t-table" :style="{ 'border-width': border + 'px', 'border-color': borderColor }">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			border: {
+				type: String,
+				default: '1'
+			},
+			borderColor: {
+				type: String,
+				default: '#d0dee5'
+			},
+			isCheck: {
+				type: Boolean,
+				default: false
+			}
+		},
+		provide() {
+			return {
+				table: this
+			};
+		},
+		data() {
+			return {};
+		},
+		created() {
+			this.childrens = [];
+			this.index = 0;
+		},
+		methods: {
+			fire(e, index, len) {
+				let childrens = this.childrens;
+				console.log(childrens);
+				// 全选
+				if (index === 0) {
+					childrens.map((vm, index) => {
+						vm.checkboxData.checked = e;
+						return vm;
+					});
+				} else {
+					let isAll = childrens.find((n, ids) => ids !== 0 && !n.checkboxData.checked);
+					childrens[0].checkboxData.checked = isAll ? false : true;
+				}
+
+				let fireArr = [];
+				for (let i = 0; i < childrens.length; i++) {
+					if (childrens[i].checkboxData.checked && i !== 0) {
+						fireArr.push(childrens[i].checkboxData.value - 1);
+					}
+				}
+				this.$emit('change', {
+					detail: fireArr
+				});
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.t-table {
+		width: 100%;
+		border: 1px #d0dee5 solid;
+		border-left: none;
+		border-top: none;
+		box-sizing: border-box;
+	}
+
+	.t-table>>>t-tr {
+		display: flex;
+	}
+
+	.t-table>>>t-tr:nth-child(2n) {
+		background: #f5f5f5;
+	}
+
+	/* #ifdef H5 */
+	.t-table>>>.t-tr:nth-child(2n) {
+		background: #f5f5f5;
+	}
+	/* #endif */
+</style>

components/t-table/t-td.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="t-td" :style="{ 'border-width': thBorder + 'px','border-color':borderColor ,'font-size':fontSize+'px' ,'color':color,'justify-content':tdAlignCpd}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			align: String
+		},
+		data() {
+			return {
+				thBorder: '1',
+				borderColor: '#d0dee5',
+				fontSize: '14',
+				color: '#555c60',
+				tdAlign: 'center'
+			};
+		},
+		inject: ['table', 'tr'],
+
+		created() {
+			this.thBorder = this.table.border;
+			this.borderColor = this.table.borderColor;
+			this.fontSize = this.tr.fontSize;
+			this.color = this.tr.color;
+			if (this.align) {
+				this.tdAlign = this.align;
+			} else {
+				this.tdAlign = this.tr.align
+			}
+		},
+		computed: {
+			tdAlignCpd() {
+				let nameAlign = '';
+				switch (this.tdAlign) {
+					case 'left':
+						nameAlign = 'flex-start'
+						break;
+					case 'center':
+						nameAlign = 'center'
+						break;
+					case 'right':
+						nameAlign = 'flex-end'
+						break;
+					default:
+						nameAlign = 'center'
+						break;
+				}
+				return nameAlign
+			}
+		}
+	};
+</script>
+
+<style>
+	.t-td {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 14upx;
+		border-top: 1px #d0dee5 solid;
+		border-left: 1px #d0dee5 solid;
+		text-align: center;
+		color: #555c60;
+		font-size: 28upx;
+
+	}
+</style>

components/t-table/t-th.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="t-th" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor,'font-size':fontSize+'px' ,'color':color,'justify-content':thAlignCpd}">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			align: String,
+		},
+		data() {
+			return {
+				thBorder: '1',
+				borderColor: '#d0dee5',
+				fontSize: '15',
+				color: '#3b4246',
+				thAlign: 'center'
+			};
+		},
+		inject: ['table', 'tr'],
+
+		created() {
+			this.thBorder = this.table.border;
+			this.borderColor = this.table.borderColor;
+			this.fontSize = this.tr.fontSize;
+			this.color = this.tr.color;
+			if (this.align) {
+				this.thAlign = this.align;
+			} else {
+				this.thAlign = this.tr.align
+			}
+		},
+
+		computed: {
+			thAlignCpd() {
+				let nameAlign = '';
+				switch (this.thAlign) {
+					case 'left':
+						nameAlign = 'flex-start'
+						break;
+					case 'center':
+						nameAlign = 'center'
+						break;
+					case 'right':
+						nameAlign = 'flex-end'
+						break;
+					default:
+						nameAlign = 'center'
+						break;
+				}
+				return nameAlign
+			}
+		}
+	};
+</script>
+
+<style>
+	.t-th {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		font-size: 30upx;
+		font-weight: bold;
+		text-align: center;
+		color: #3b4246;
+		border-left: 1px #d0dee5 solid;
+		border-top: 1px #d0dee5 solid;
+		padding: 15upx;
+	}
+</style>

components/t-table/t-tr.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="t-tr">
+		<view v-if="isCheck" class="t-check-box" :style="{ 'border-width': thBorder + 'px' ,'border-color':borderColor}">
+			<checkbox-group @change="checkboxChange">
+				<checkbox :value="checkboxData.value + ''" :checked="checkboxData.checked" />
+			</checkbox-group>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			fontSize: String,
+			color: String,
+			align: String
+		},
+		inject: ['table'],
+		provide() {
+			return {
+				tr: this
+			};
+		},
+		data() {
+			return {
+				isCheck: false,
+				checkboxData: {
+					value: 0,
+					checked: false
+				},
+				checked: false,
+				thBorder: '1',
+				borderColor: '#d0dee5'
+			};
+		},
+		created() {
+			this.thBorder = this.table.border;
+			this.borderColor = this.table.borderColor;
+			this.table.childrens.push(this);
+			this.checkboxData.value = this.table.index++;
+			this.isCheck = this.table.isCheck;
+
+		},
+		methods: {
+			checkboxChange(e) {
+				this.checkboxData.checked = !this.checkboxData.checked;
+				this.table.childrens[this.checkboxData.value] = this;
+				this.table.fire(e.detail.value[0] ? true : false, this.checkboxData.value, this.table.index);
+			}
+		}
+	};
+</script>
+
+<style>
+	.t-tr {
+		width: 100%;
+		display: flex;
+	}
+
+	.t-tr t-th,
+	.t-tr t-td {
+		display: flex;
+		flex: 1;
+	}
+
+	.t-tr .t-check-box {
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 80upx;
+		color: #3b4246;
+		border-left: 1px #d0dee5 solid;
+		border-top: 1px #d0dee5 solid;
+	}
+
+	.t-tr .t-check-box checkbox {
+		transform: scale(0.8);
+	}
+</style>

http/index.js

@@ -20,10 +20,11 @@ export const $http = (url, method, data, json) => {
 		uni.hideLoading()
 		// 请根据后端规定的状态码判定
 		//  console.log('111111111111111111',response)
-		if (response.data.data.code === 401) {//token失效
+		if (response.data.code === 300) {//token失效
+		
 		//	return response.data = await doRequest(response, url)//动态刷新token,并重新完成request请求
 		}else{
-			if(response.data.code!==200&&response.data.msg){
+			if(response.data.code==10021&&response.data.msg){
 				uni.showToast({
 					title:response.data.msg,
 					icon:'none',

pages.json

@@ -157,6 +157,33 @@
             }
             
         }
+        ,{
+            "path" : "pages/index/Onlinewarranty/Onlinewarranty",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "线上报修",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/Inspectionrecord/Inspectionrecord",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "巡检记录",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/index/Withholdingrecord/Withholdingrecord",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "扣缴记录",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/Workorder/Tenantbill/Tenantbill.vue

@@ -25,13 +25,69 @@
 				</view>
 			</view>
 		</view>
+		<!-- 列表 -->
+		<!-- <t-table>
+			<t-tr>
+				<t-th>序号</t-th>
+				<t-th>姓名</t-th>
+				<t-th>年龄</t-th>
+				<t-th>爱好</t-th>
+				<t-th>操作</t-th>
+			</t-tr>
+			<t-tr v-for="item in tableList" :key="item.id">
+				<t-td>{{ item.id + 1 }}</t-td>
+				<t-td>{{ item.name }}</t-td>
+				<t-td>{{ item.age }}</t-td>
+				<t-td>{{ item.hobby }}</t-td>
+				  <t-td align="left"> <u-button @click="edit(item)"  size="small" type="primary" :plain="true" text="编辑"></u-button></t-td>
+				
+			</t-tr>
+		</t-table> -->
+
+<view class="u-listdata">
+	
+	
+	<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
+		<u-list-item v-for="(item, index) in indexList" :key="index">
+			<!-- <u-cell :title="`列表长度-${index + 1}`">
+				<u-avatar slot="icon" shape="square" size="35" :src="item.url"
+					customStyle="margin: -3px 5px -3px 0"></u-avatar>
+			</u-cell> -->
+			<view class="companylist" @click="seedetail(item)">
+				<view class="settled" v-if="item.status==1">
+					已结清
+				</view>
+				<view class="outstanding" v-if="item.status==0">
+					未结清
+				</view>
+				<h3>{{item.name}}</h3>
+				<view class="Currentamount">
+					本期金额: <span>￥{{item.feeTotal}}</span>
+				</view>
+				<view class="Currentamount">
+					欠费天数: {{item.elecAmount}}
+				</view>
+				<view class="Currentamount">
+					账户余额:￥{{item.balance}}
+				</view>
+				<view class="Currentamount">
+					联系电话: {{item.tel}}
+				</view>
+				<view class="Callfee"  v-if="item.status==0"   @click.stop="handleClick(item.id)">
+					催费
+				</view>
+			</view>
+	
+		</u-list-item>
+	</u-list>
+	
+</view>
+
+
 
 
 		<u-picker :show="showtype" :columns="columnstype" keyName="label" @confirm="confirmtype" @cancel='canceltype'>
 		</u-picker>
-		<!-- 
-         <mx-date-picker :show="showPicker" type="range" :value="dayrange" :show-tips="true" :begin-text="'开始日期'" :end-text="'结束日期'" :show-seconds="true" @confirm="ed" @cancel="ec" /> -->
-
 		<u-picker :show="showfloor" ref="uPicker" :loading="loading" @confirm="confirmfloor" @cancel='cancelfloor'
 			:columns="columns" keyName="orgName" @change="changeHandler"></u-picker>
 		<u-notify ref="uNotify" :show="showdct" message="服务器请求失败"></u-notify>
@@ -39,17 +95,50 @@
 </template>
 
 <script>
-	// import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
-
+	// import tTable from '@/components/t-table/t-table.vue';
+	// import tTh from '@/components/t-table/t-th.vue';
+	// import tTr from '@/components/t-table/t-tr.vue';
+	// import tTd from '@/components/t-table/t-td.vue';
 	export default {
 		components: {
-			//    MxDatePicker
+			// tTable,
+			// tTh,
+			// tTr,
+			// tTd
 		},
 		data() {
 			const currentDate = this.getDate({
 				format: 'yyyy-mm'
 			})
 			return {
+				setyesno: true,
+				// tableList: [{
+				// 		id: 0,
+				// 		name: '张三',
+				// 		age: '19',
+				// 		hobby: '游泳'
+				// 	},
+				// 	{
+				// 		id: 1,
+				// 		name: '李四',
+				// 		age: '21',
+				// 		hobby: '绘画'
+				// 	},				
+				// ],
+				indexList: [],
+
+
+				dataList: [],
+				dataForm: {
+					projectId: "",
+					buildingId: "",
+					storeyId: "",
+					cycle: "",
+					status: "",
+					page: 1,
+					limit: 10,
+				},
+
 				showtype: false,
 				showdct: false,
 				mytitle: '',
@@ -77,14 +166,14 @@
 					]
 				],
 
-				//    dayrange: ['2019/01/01','2019/01/06'],
+
 
 			}
 		},
 		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
 		onLoad() {
 			this.getfloor();
-
+			//	this.loadmore();
 		},
 		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
 		onReady() {
@@ -103,19 +192,71 @@
 
 
 		methods: {
+			seedetail(e){
+				  console.log('222',e)
+			},
+			handleClick(e){
+				  console.log('111111111111111111',e)
+				  
+			},
+			scrolltolower() {
+				// this.loadmore()				 
+				this.dataForm.page = this.dataForm.page + 1;
+				console.log('111111111111111111', this.dataForm.page)
+				this.$api.get('/billinfo/paypage', this.dataForm)
+					.then(res => {
+						if (res.data.data.list.length != 0) {
+							this.indexList.push(...res.data.data.list);
+						} else {
+							uni.showToast({
+								title:'暂无更多数据了',
+								icon: 'none',
+								duration: 1500
+							})
+						}
+
+						console.log('111111111111111111', this.indexList)
+					})
+			},
+			loadmore() {
+				// for (let i = 0; i < 30; i++) {
+				// 	this.indexList.push({
+				// 		url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+				// 	})
+				// }
+			},
+
+
+			getalldata() {
+				this.$api.get('/billinfo/paypage', this.dataForm)
+					.then(res => {
+						this.indexList = [];
+						this.indexList = res.data.data.list;
+
+					})
+			},
+			// edit(item) {
+			// 	console.log('111111111111111111', item)
+			// },
 			canceltype() {
 				this.showtype = false;
 			},
 			confirmtype(e) {
- // console.log('111111111111111111',e.value[0])
-  this.showtype = false;
-				this.mytype=e.value[0].label
+			//	console.log('111111111111111111', e.value[0])
+				this.showtype = false;
+				this.mytype = e.value[0].label;
+				this.dataForm.cycle = e.value[0].id;
+				this.dataForm.page=1;
+				this.getalldata();
 			},
 			typechange() {
 				this.showtype = true;
 			},
 			dateChange(e) {
 				this.myday = e.target.value;
+				this.dataForm.cycle = e.target.value;
+				this.dataForm.page=1;
+				this.getalldata();
 			},
 			getDate(type) {
 				const date = new Date();
@@ -135,6 +276,8 @@
 					.then(res => {
 
 						if (res.data.code == 0) {
+							this.dataForm.projectId = res.data.data[0].orgId;
+
 							this.mytitle = res.data.data[0].orgName;
 							this.alldata = res.data.data[0].childrenList;
 							//console.log('111111111111111111',  res.data.data[0].childrenList)			
@@ -147,7 +290,9 @@
 								allfloor.push(res.data.data[0].childrenList[i].childrenList)
 							}
 							//  console.log('111111111111111111',allfloor)
-							this.columnData = allfloor
+							this.columnData = allfloor;
+							this.dataForm.page=1;
+							this.getalldata();
 						} else {
 							this.showdct = true
 						}
@@ -169,13 +314,15 @@
 					picker.setColumnValues(1, this.columnData[index])
 					this.loading = false
 				}
+				this.getalldata();
 			},
 			confirmfloor(e) {
 				console.log('222222', e.value)
-
 				this.mytitle = e.value[0].orgName + e.value[1].orgName;
-
+				this.dataForm.buildingId = e.value[0].orgId;
+				this.dataForm.storeyId = e.value[1].orgId;
 				this.showfloor = false;
+				this.getalldata();
 			},
 			cancelfloor() {
 				this.showfloor = false;
@@ -186,7 +333,77 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	.Currentamount {
+		padding-left: 30rpx;
+		height: 50rpx;
+		line-height: 50rpx;
+		color: #BCB3A7;
+
+		span {
+			color: #FA5555;
+			padding-left: 9rpx;
+		}
+	}
+.Callfee{
+	width: 100rpx;
+	height: 45rpx;
+	text-align: center;
+	line-height:45rpx;
+	color: #5C8FFF;
+	border: 1px solid #5C8FFF;
+	font-size: 22rpx;
+	position: absolute;
+	bottom: 10rpx;
+	right: 10px;
+	font-weight: bold;
+}
+	.companylist {
+		margin: 20rpx 30rpx;
+		background: #fff;
+		height: 280rpx;
+		border-radius: 10px;
+		position: relative;
+
+		h3 {
+			height: 70rpx;
+			line-height: 70rpx;
+			padding-left: 30rpx;
+		}
+	}
+
+	.settled {
+		background-color: #09C700;
+		width: 100rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		color: #fff;
+		font-size: 14rpx;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		border-top-right-radius: 10rpx;
+		border-bottom-left-radius: 10rpx;
+	}
+
+	.outstanding {
+		background-color: #FA5555;
+		width: 100rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		color: #fff;
+		font-size: 14rpx;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		border-top-right-radius: 10rpx;
+		border-bottom-left-radius: 10rpx;
+	}
+
+
+
 	.billall {}
 
 	.topbill {

pages/index/Inspectionrecord/Inspectionrecord.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/index/Onlinewarranty/Onlinewarranty.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/index/Withholdingrecord/Withholdingrecord.vue

@@ -0,0 +1,22 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/index/index.vue

@@ -1,9 +1,131 @@
 <template>
 	<view class="content">
+		<view class="Homepage_header">
+			<view class="Homepage_suspension">
+				<view class="Suspension">
+					<view class="online" @click="Onlinewarranty">
+						<view><img src="@/static/index/repair-online.svg" alt="" style="margin-left: 5rpx;"></view>
+						<view style="font-size: 20rpx;">线上报修</view>
+					</view>
+					<view class="record"  @click="Inspectionrecord">
+						<view><img src="@/static/index/check-review.svg" alt="" style="margin-left: 5rpx;"></view>
+						<view style="font-size: 20rpx;">巡检记录</view>
+					</view>
+					<view class="withholding" @click="Withholdingrecord">
+						<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,25 +133,153 @@
 	export default {
 		data() {
 			return {
-			tabbardata: 0,	
-			
+				tabbardata: 0,
+
 			}
 		},
 		onLoad() {
-			 
+
 
 		},
 		methods: {
-			
-				
-				
-		
-			
+Onlinewarranty(){
+	uni.navigateTo({
+		url: '/pages/index/Onlinewarranty/Onlinewarranty'
+	})
+},
+Inspectionrecord(){
+	uni.navigateTo({
+		url: '/pages/index/Inspectionrecord/Inspectionrecord'
+	})
+},
+Withholdingrecord(){
+	uni.navigateTo({
+		url: '/pages/index/Withholdingrecord/Withholdingrecord'
+	})
+},
+
+
+
 		}
 	}
 </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>