空调管理、充值记录，消费记录 基本完成

src/router/index.js

@@ -88,16 +88,31 @@ export const constantRoutes = [{
 	},
 
 	{
-		path: '/counting',
+		path: '/consumptionRecord',
 		component: Layout,
-		redirect: '/counting',
+		redirect: '/consumptionRecord',
 		children: [{
-			path: 'counting',
-			name: 'Counting',
-			component: () => import('@/views/counting/index'),
+			path: 'consumptionRecord',
+			name: 'ConsumptionRecord',
+			component: () => import('@/views/consumptionRecord/index'),
 			meta: {
-				title: '财务对账',
-				icon: 'counting'
+				title: '消费记录',
+				icon: 'consumptionRecord'
+			}
+		}]
+	},
+	
+	{
+		path: '/rechargeRecord',
+		component: Layout,
+		redirect: '/rechargeRecord',
+		children: [{
+			path: 'rechargeRecord',
+			name: 'RechargeRecord',
+			component: () => import('@/views/rechargeRecord/index'),
+			meta: {
+				title: '充值记录',
+				icon: 'rechargeRecord'
 			}
 		}]
 	},

src/views/consumptionRecord/index.vue

@@ -0,0 +1,552 @@
+<template>
+	<div class="app-container">
+		<el-row>
+			<el-col :span="24">
+				<div class="cell">
+					<div class="cell-title">
+						<div class="title-left">
+							<div class="title">消费记录</div>
+							<div class="title-detail">总余额：{{total_balance}}元</div>
+							<div class="title-detail">总消费：{{total_consumption}}元</div>
+							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
+						</div>
+						<div class="title-right">
+							<el-button type="primary">导出表单</el-button>
+						</div>
+					</div>
+					<div class="cell-body">
+						<el-form :inline="true" :model="formInline" class="demo-form-inline">
+							<el-form-item label="关键字：">
+								<el-input v-model="formInline.user" placeholder="请输入姓名或身份证"></el-input>
+							</el-form-item>
+							<el-form-item>
+								<el-button type="warning" @click="btn_search">查询</el-button>
+							</el-form-item>
+							<el-form-item label="时间筛选：">
+								<el-date-picker v-model="search_datatime" type="datetimerange" align="right"
+									start-placeholder="开始日期" end-placeholder="结束日期"
+									:default-time="['12:00:00', '08:00:00']">
+								</el-date-picker>
+							</el-form-item>
+							<el-form-item label="">
+								<el-select v-model="formInline.category" placeholder="支付状态">
+									<el-option label="学生" value="shanghai"></el-option>
+									<el-option label="教工" value="beijing"></el-option>
+									<el-option label="员工" value="beijing"></el-option>
+								</el-select>
+							</el-form-item>
+						</el-form>
+						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style"
+							:header-cell-style="header_cell_style">
+							<el-table-column label="序号" align="center" width="90">
+								<template slot-scope="scope">
+									<span>{{(pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1}}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="姓名" align="center" width="100">
+								<template slot-scope="scope">
+									<span>{{ scope.row.name }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="手机" align="center" width="120">
+								<template slot-scope="scope">
+									<span>{{ scope.row.phone }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="楼栋" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.building }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="楼层" align="center" width="80">
+								<template slot-scope="scope">
+									<span>{{ scope.row.floor }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="房间号" align="center" width="90">
+								<template slot-scope="scope">
+									<span>{{ scope.row.room }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="操作状态" align="center" width="90">
+								<template slot-scope="scope">
+									<span>{{ scope.row.status }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="到账金额（元）" align="center" width="140">
+								<template slot-scope="scope">
+									<span>{{ scope.row.arrivalAmount }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="账户余额（元）" align="center" width="140">
+								<template slot-scope="scope">
+									<span>{{ scope.row.accountBalance }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="支付状态" align="center" width="150">
+								<template slot-scope="scope">
+									<span v-if="scope.row.payStatus == '支付成功'"
+										class="txt-cell-green">{{ scope.row.payStatus }}</span>
+									<span v-else class="txt-cell-red">{{ scope.row.payStatus }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="交易流水号" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.payNumber }}</span>
+								</template>
+							</el-table-column>
+							<el-table-column label="支付时间" align="center">
+								<template slot-scope="scope">
+									<span>{{ scope.row.payTime }}</span>
+								</template>
+							</el-table-column>
+						</el-table>
+						<div class="pagination-table">
+							<el-pagination @current-change="currentPageChange"
+								:current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
+								layout="prev, pager, next, jumper" :total="pagination.total">
+							</el-pagination>
+						</div>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+		<el-dialog :title="form.status + '详情'" :visible.sync="dialogFormVisible" @close="dialog_close">
+			<el-form :model="form">
+				<el-form-item label="姓　名：" :label-width="formLabelWidth">
+					<div>{{form.name}}</div>
+				</el-form-item>
+				<el-form-item label="楼　栋：" :label-width="formLabelWidth">
+					<div>{{form.building}}</div>
+				</el-form-item>
+				<el-form-item label="楼　层：" :label-width="formLabelWidth">
+					<div>{{form.floor}}</div>
+				</el-form-item>
+				<el-form-item label="房间号：" :label-width="formLabelWidth">
+					<div>{{form.room}}</div>
+				</el-form-item>
+				<el-form-item label="设　备：" :label-width="formLabelWidth">
+					<div>{{form.device}}</div>
+				</el-form-item>
+			</el-form>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				total_balance: 0.0.toFixed(2), // 总余额
+				total_consumption: 0.0.toFixed(2), // 总消费
+				total_number: 0, // 总交易笔数
+				search_datatime: '',
+				// 弹出对话框数据
+				dialogFormVisible: false,
+				form: {
+					status: '',
+					name: '',
+					building: '',
+					floor: '',
+					room: '',
+					device: ''
+				},
+				formLabelWidth: '120px',
+				// 表格单元格样式
+				cell_style: {
+					color: '#1A202B',
+					'font-size': '14px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表格头部样式
+				header_cell_style: {
+					background: '#E6ECFE',
+					color: '#1A202B',
+					'font-size': '16px',
+					'font-family': 'Microsoft YaHei-3970(82674968)'
+				},
+				// 表单数据
+				formInline: {
+					user: '',
+					category: ''
+				},
+				tableData: [{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				},{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				},{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				},{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				},{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				},{
+					name: '王小小小虎',
+					phone: '18988888888',
+					building: '科技楼',
+					floor: '5F',
+					room: '501',
+					device: '1.5P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付成功',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}, {
+					name: '王小小虎',
+					phone: '18988888888',
+					building: '学生活动中心',
+					floor: '2F',
+					room: '201',
+					device: '2P',
+					status: '消费',
+					arrivalAmount: 100.0.toFixed(2),
+					accountBalance: 100.01.toFixed(2),
+					payStatus: '支付失败',
+					payNumber: '2562656562695',
+					payTime: '2022-06-23 15:25:25'
+				}],
+				// 分页参数
+				pagination: {
+					pageSize: 10,
+					currentPage: 1,
+					total: 100
+				}
+			}
+		},
+		mounted() {
+			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
+		},
+		methods: {
+			btn_search() {
+				console.log('查询');
+			},
+			// 对话框关闭时清理数据
+			dialog_close() {
+				this.form = {}
+			},
+			// currentPage 改变时会触发
+			currentPageChange(val) {
+				console.log('当前页:' + val);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.app-container {
+		background-color: #EFF2F7;
+		padding: 10px;
+
+		.el-row {
+
+			.el-col {
+				padding: 10px;
+
+				.cell {
+					padding: 30px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
+
+					.cell-title {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 30px;
+						padding-bottom: 30px;
+						border-bottom: 1px solid #CCCCCC;
+
+						.title-left {
+							display: flex;
+							align-items: center;
+
+							.title {
+								font-size: 22px;
+								font-family: Microsoft YaHei-3970(82674968);
+								font-weight: bold;
+								color: #1A202B;
+							}
+
+							.title-detail {
+								margin-left: 50px;
+								font-size: 18px;
+								font-family: Microsoft YaHei-3970(82674968);
+								color: #1A202B;
+							}
+						}
+
+						.title-right {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+
+							.el-button {
+								width: 110px;
+								height: 46px;
+								background: #2B4CFE;
+								font-size: 18px;
+								color: #FFFFFF;
+								font-family: Microsoft YaHei-3970(82674968);
+								border-radius: 5px;
+							}
+
+							.el-button--warning {
+								background: #F88A64;
+							}
+						}
+					}
+
+					.cell-body {
+
+						.el-form {
+							display: flex;
+							flex-wrap: wrap;
+							align-items: center;
+
+							.el-button--warning {
+								background: #F88A64;
+							}
+
+							.el-date-editor--datetimerange {
+								padding: 3px 8px;
+								width: 370px;
+							}
+
+							.el-select {
+								width: 130px;
+							}
+						}
+
+						.txt-cell-green {
+							color: #67C23A;
+							font-size: 16px;
+						}
+
+						.txt-cell-red {
+							color: #F56C6C;
+							font-size: 16px;
+						}
+
+						.pagination-table {
+							display: flex;
+							justify-content: flex-end;
+							align-items: center;
+							height: 30px;
+							margin-top: 20px;
+							padding-right: 100px;
+
+							::v-deep .el-pagination {
+								display: flex;
+								justify-content: flex-end;
+								align-items: center;
+							}
+
+							::v-deep .el-pagination ul {
+								display: flex;
+
+							}
+
+							::v-deep .el-pagination button,
+							::v-deep .el-pagination li {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								border-radius: 3px;
+								font-size: 14px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination span {
+								margin-left: 10px;
+							}
+
+							::v-deep .el-pagination .el-pagination__jump {
+								font-size: 16px;
+							}
+
+							::v-deep .el-pagination .el-pagination__editor {
+								width: 50px;
+								height: 36px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination .el-input__inner {
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								margin: -4px 0 0 0;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		::v-deep .el-dialog {
+			margin: 0 !important;
+			width: 400px;
+			height: 320px;
+			background: #FFFFFF;
+			box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);
+			border-radius: 10px;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			.el-dialog__header {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 58px;
+				padding: 30px;
+				background: #E6EBFE;
+				border-radius: 10px 10px 0px 0px;
+				font-weight: bold;
+			}
+
+			.el-dialog__body {
+				padding-bottom: 0;
+
+				.el-form-item {
+					margin-bottom: 0;
+
+					.el-form-item__label,
+					.el-form-item__content {
+						font-size: 16px;
+						font-family: Microsoft YaHei-3970(82674968);
+						color: #53575A;
+					}
+
+					.el-input__inner {
+						width: 100px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/index/index.vue

@@ -419,134 +419,134 @@
 
 			.el-col {
 				padding: 10px;
-			}
-
-			.cell {
-				padding: 10px;
-				border-radius: 10px;
-				background-color: #FFFFFF;
-
-				.cell-title {
-					font-size: 28px;
-					font-family: Microsoft YaHei-3970(82674968);
-					font-weight: 400;
-					color: #292B34;
-				}
 
-				.cell-time {
-					margin-top: 10px;
-					font-size: 18px;
-					font-family: Microsoft YaHei-3970(82674968);
-					font-weight: 400;
-					color: #979797;
-				}
-
-				.cell-bottom {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					margin: 20px 0 0;
+				.cell {
+					padding: 10px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
 
-					.cell-bottom-amount {
-						font-size: 40px;
+					.cell-title {
+						font-size: 28px;
 						font-family: Microsoft YaHei-3970(82674968);
-						font-weight: bold;
+						font-weight: 400;
 						color: #292B34;
 					}
 
-					.rmb1 {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						width: 60px;
-						height: 60px;
-						border-radius: 30px;
-						font-size: 50px;
-						color: #FDFDFF;
-						background: linear-gradient(-45deg, #3965FF, #3055FE);
-						box-shadow: 0 0 8px #3660FF;
+					.cell-time {
+						margin-top: 10px;
+						font-size: 18px;
+						font-family: Microsoft YaHei-3970(82674968);
+						font-weight: 400;
+						color: #979797;
 					}
 
-					.rmb2 {
+					.cell-bottom {
 						display: flex;
-						justify-content: center;
+						justify-content: space-between;
 						align-items: center;
-						width: 60px;
-						height: 60px;
-						border-radius: 30px;
-						font-size: 50px;
-						color: #FDFDFF;
-						background: linear-gradient(-45deg, #FFB977, #FF5C5C);
-						box-shadow: 0 0 8px #3660FF;
-					}
+						margin: 20px 0 0;
 
-					.rmb3 {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						width: 60px;
-						height: 60px;
-						border-radius: 30px;
-						font-size: 50px;
-						color: #FDFDFF;
-						background: linear-gradient(-45deg, #9187F0, #7760F1);
-						box-shadow: 0 0 8px #3660FF;
-					}
-				}
+						.cell-bottom-amount {
+							font-size: 40px;
+							font-family: Microsoft YaHei-3970(82674968);
+							font-weight: bold;
+							color: #292B34;
+						}
 
-				.box-card {
-					border: none;
-					box-shadow: none;
-					color: #292B34;
+						.rmb1 {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 60px;
+							height: 60px;
+							border-radius: 30px;
+							font-size: 50px;
+							color: #FDFDFF;
+							background: linear-gradient(-45deg, #3965FF, #3055FE);
+							box-shadow: 0 0 8px #3660FF;
+						}
 
-					.clearfix {
-						display: flex;
-						align-items: center;
-						font-size: 20px;
-						font-family: Microsoft YaHei-3970(82674968);
+						.rmb2 {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 60px;
+							height: 60px;
+							border-radius: 30px;
+							font-size: 50px;
+							color: #FDFDFF;
+							background: linear-gradient(-45deg, #FFB977, #FF5C5C);
+							box-shadow: 0 0 8px #3660FF;
+						}
 
-						img {
-							width: 24px;
-							height: 24px;
-							margin-right: 8px;
+						.rmb3 {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 60px;
+							height: 60px;
+							border-radius: 30px;
+							font-size: 50px;
+							color: #FDFDFF;
+							background: linear-gradient(-45deg, #9187F0, #7760F1);
+							box-shadow: 0 0 8px #3660FF;
 						}
+					}
+
+					.box-card {
+						border: none;
+						box-shadow: none;
+						color: #292B34;
 
-						.card-header-between {
+						.clearfix {
 							display: flex;
-							justify-content: space-between;
 							align-items: center;
-							width: 100%;
+							font-size: 20px;
+							font-family: Microsoft YaHei-3970(82674968);
 
-							.card-title-left {
+							img {
+								width: 24px;
+								height: 24px;
+								margin-right: 8px;
+							}
+
+							.card-header-between {
 								display: flex;
+								justify-content: space-between;
 								align-items: center;
-							}
+								width: 100%;
 
-							.card-desc {
-								font-family: Microsoft YaHei-3970(82674968);
-								font-size: 16px;
-								margin-left: 20px;
+								.card-title-left {
+									display: flex;
+									align-items: center;
+								}
+
+								.card-desc {
+									font-family: Microsoft YaHei-3970(82674968);
+									font-size: 16px;
+									margin-left: 20px;
+								}
 							}
 						}
-					}
 
-					.select-year {
-						position: absolute;
-						right: 20px;
-						top: 68px;
-						width: 100px;
-						z-index: 9999;
-					}
+						.select-year {
+							position: absolute;
+							right: 20px;
+							top: 68px;
+							width: 100px;
+							z-index: 9999;
+						}
 
-					.line-echart {
-						width: 450px;
-						height: 350px;
+						.line-echart {
+							width: 450px;
+							height: 350px;
+						}
 					}
 				}
-			}
 
-			.cell-row1 {
-				padding: 30px;
+				.cell-row1 {
+					padding: 30px;
+				}
 			}
 		}
 	}

src/views/counting/index.vue

@@ -5,9 +5,8 @@
 				<div class="cell">
 					<div class="cell-title">
 						<div class="title-left">
-							<div class="title">财务对账</div>
+							<div class="title">充值记录</div>
 							<div class="title-detail">总余额：{{total_balance}}元</div>
-							<div class="title-detail">总消费：{{total_consumption}}元</div>
 							<div class="title-detail">总充值：{{total_recharge}}元</div>
 							<div class="title-detail">总交易笔数：{{total_number}}笔</div>
 						</div>
@@ -156,10 +155,9 @@
 	export default {
 		data() {
 			return {
-				total_balance: 0.0.toFixed(2),
-				total_consumption: 0.0.toFixed(2),
-				total_recharge: 0.0.toFixed(2),
-				total_number: 0,
+				total_balance: 0.0.toFixed(2), // 总余额
+				total_recharge: 0.0.toFixed(2), // 总充值
+				total_number: 0, // 总交易笔数
 				search_datatime: '',
 				// 弹出对话框数据
 				dialogFormVisible: false,
@@ -347,13 +345,13 @@
 				this.form.room = row.room
 				this.form.device = row.device
 			},
-			// currentPage 改变时会触发
-			currentPageChange(val) {
-				console.log('当前页:' + val);
-			},
 			// 对话框关闭时清理数据
 			dialog_close() {
 				this.form = {}
+			},
+			// currentPage 改变时会触发
+			currentPageChange(val) {
+				console.log('当前页:' + val);
 			}
 		}
 	}
@@ -368,159 +366,159 @@
 
 			.el-col {
 				padding: 10px;
-			}
-
-			.cell {
-				padding: 30px;
-				border-radius: 10px;
-				background-color: #FFFFFF;
-
-				.cell-title {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					margin-bottom: 30px;
-					padding-bottom: 30px;
-					border-bottom: 1px solid #CCCCCC;
-
-					.title-left {
-						display: flex;
-						align-items: center;
-
-						.title {
-							font-size: 22px;
-							font-family: Microsoft YaHei-3970(82674968);
-							font-weight: bold;
-							color: #1A202B;
-						}
 
-						.title-detail {
-							margin-left: 50px;
-							font-size: 18px;
-							font-family: Microsoft YaHei-3970(82674968);
-							color: #1A202B;
-						}
-					}
+				.cell {
+					padding: 30px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
 
-					.title-right {
+					.cell-title {
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
+						margin-bottom: 30px;
+						padding-bottom: 30px;
+						border-bottom: 1px solid #CCCCCC;
 
-						.el-button {
-							width: 110px;
-							height: 46px;
-							background: #2B4CFE;
-							font-size: 18px;
-							color: #FFFFFF;
-							font-family: Microsoft YaHei-3970(82674968);
-							border-radius: 5px;
-						}
-
-						.el-button--warning {
-							background: #F88A64;
-						}
-					}
-				}
-
-				.cell-body {
-
-					.el-form {
-						display: flex;
-						flex-wrap: wrap;
-						align-items: center;
+						.title-left {
+							display: flex;
+							align-items: center;
 
-						.el-button--warning {
-							background: #F88A64;
+							.title {
+								font-size: 22px;
+								font-family: Microsoft YaHei-3970(82674968);
+								font-weight: bold;
+								color: #1A202B;
+							}
+
+							.title-detail {
+								margin-left: 50px;
+								font-size: 18px;
+								font-family: Microsoft YaHei-3970(82674968);
+								color: #1A202B;
+							}
 						}
 
-						.el-date-editor--datetimerange {
-							padding: 3px 8px;
-							width: 370px;
-						}
+						.title-right {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
 
-						.el-select {
-							width: 130px;
+							.el-button {
+								width: 110px;
+								height: 46px;
+								background: #2B4CFE;
+								font-size: 18px;
+								color: #FFFFFF;
+								font-family: Microsoft YaHei-3970(82674968);
+								border-radius: 5px;
+							}
+
+							.el-button--warning {
+								background: #F88A64;
+							}
 						}
 					}
 
-					.btn-cell-blue {
-						color: #2B4CFE;
-						border: none;
-						font-size: 18px;
-					}
-
-					.btn-cell-black {
-						color: #53575A;
-						border: none;
-						font-size: 18px;
-					}
-
-					.txt-cell-green {
-						color: #67C23A;
-					}
-
-					.txt-cell-red {
-						margin: 0;
-						display: inline-block;
-						background: #F56C6C;
-						color: #FFFFFF;
-						padding: 5px 10px;
-						border-radius: 20px;
-						font-size: 16px;
-					}
-
-					.pagination-table {
-						display: flex;
-						justify-content: flex-end;
-						align-items: center;
-						height: 30px;
-						margin-top: 20px;
-						padding-right: 100px;
+					.cell-body {
 
-						::v-deep .el-pagination {
+						.el-form {
 							display: flex;
-							justify-content: flex-end;
+							flex-wrap: wrap;
 							align-items: center;
-						}
 
-						::v-deep .el-pagination ul {
-							display: flex;
+							.el-button--warning {
+								background: #F88A64;
+							}
 
+							.el-date-editor--datetimerange {
+								padding: 3px 8px;
+								width: 370px;
+							}
+
+							.el-select {
+								width: 130px;
+							}
 						}
 
-						::v-deep .el-pagination button,
-						::v-deep .el-pagination li {
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							width: 50px;
-							height: 36px;
-							border: 1px solid #626262;
-							border-radius: 3px;
-							font-size: 14px;
-							margin: 0 5px;
+						.btn-cell-blue {
+							color: #2B4CFE;
+							border: none;
+							font-size: 18px;
 						}
 
-						::v-deep .el-pagination span {
-							margin-left: 10px;
+						.btn-cell-black {
+							color: #53575A;
+							border: none;
+							font-size: 18px;
 						}
 
-						::v-deep .el-pagination .el-pagination__jump {
-							font-size: 16px;
+						.txt-cell-green {
+							color: #67C23A;
 						}
 
-						::v-deep .el-pagination .el-pagination__editor {
-							width: 50px;
-							height: 36px;
-							margin: 0 5px;
+						.txt-cell-red {
+							margin: 0;
+							display: inline-block;
+							background: #F56C6C;
+							color: #FFFFFF;
+							padding: 5px 10px;
+							border-radius: 20px;
+							font-size: 16px;
 						}
 
-						::v-deep .el-pagination .el-input__inner {
-							width: 50px;
-							height: 36px;
-							border: 1px solid #626262;
-							margin: -4px 0 0 0;
+						.pagination-table {
+							display: flex;
+							justify-content: flex-end;
+							align-items: center;
+							height: 30px;
+							margin-top: 20px;
+							padding-right: 100px;
+
+							::v-deep .el-pagination {
+								display: flex;
+								justify-content: flex-end;
+								align-items: center;
+							}
+
+							::v-deep .el-pagination ul {
+								display: flex;
+
+							}
+
+							::v-deep .el-pagination button,
+							::v-deep .el-pagination li {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								border-radius: 3px;
+								font-size: 14px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination span {
+								margin-left: 10px;
+							}
+
+							::v-deep .el-pagination .el-pagination__jump {
+								font-size: 16px;
+							}
+
+							::v-deep .el-pagination .el-pagination__editor {
+								width: 50px;
+								height: 36px;
+								margin: 0 5px;
+							}
+
+							::v-deep .el-pagination .el-input__inner {
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								margin: -4px 0 0 0;
+							}
 						}
 					}
 				}

src/views/user/index.vue

@@ -273,112 +273,112 @@
 
 			.el-col {
 				padding: 10px;
-			}
-
-			.cell {
-				padding: 30px;
-				border-radius: 10px;
-				background-color: #FFFFFF;
-
-				.cell-title {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					margin-bottom: 30px;
-					padding-bottom: 30px;
-					border-bottom: 1px solid #CCCCCC;
 
-					.title {
-						font-size: 22px;
-						font-family: Microsoft YaHei-3970(82674968);
-						font-weight: bold;
-						color: #1A202B;
-					}
+				.cell {
+					padding: 30px;
+					border-radius: 10px;
+					background-color: #FFFFFF;
 
-					.title-right {
+					.cell-title {
 						display: flex;
 						justify-content: space-between;
 						align-items: center;
+						margin-bottom: 30px;
+						padding-bottom: 30px;
+						border-bottom: 1px solid #CCCCCC;
 
-						.el-button {
-							width: 110px;
-							height: 46px;
-							background: #2B4CFE;
-							font-size: 18px;
-							color: #FFFFFF;
+						.title {
+							font-size: 22px;
 							font-family: Microsoft YaHei-3970(82674968);
-							border-radius: 5px;
+							font-weight: bold;
+							color: #1A202B;
 						}
 
-						.el-button--warning {
-							background: #F88A64;
-						}
-					}
-				}
+						.title-right {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
 
-				.cell-body {
+							.el-button {
+								width: 110px;
+								height: 46px;
+								background: #2B4CFE;
+								font-size: 18px;
+								color: #FFFFFF;
+								font-family: Microsoft YaHei-3970(82674968);
+								border-radius: 5px;
+							}
 
-					.el-button--warning {
-						background: #F88A64;
+							.el-button--warning {
+								background: #F88A64;
+							}
+						}
 					}
 
-					.btn-table {
-						border-radius: 15px !important;
-						border-color: #5488FE;
-						color: #5488FE;
-					}
+					.cell-body {
 
-					.pagination-table {
-						display: flex;
-						justify-content: flex-end;
-						align-items: center;
-						height: 30px;
-						margin-top: 20px;
-						padding-right: 100px;
+						.el-button--warning {
+							background: #F88A64;
+						}
+
+						.btn-table {
+							border-radius: 15px !important;
+							border-color: #5488FE;
+							color: #5488FE;
+						}
 
-						::v-deep .el-pagination {
+						.pagination-table {
 							display: flex;
 							justify-content: flex-end;
 							align-items: center;
-						}
+							height: 30px;
+							margin-top: 20px;
+							padding-right: 100px;
 
-						::v-deep .el-pagination ul {
-							display: flex;
+							::v-deep .el-pagination {
+								display: flex;
+								justify-content: flex-end;
+								align-items: center;
+							}
 
-						}
+							::v-deep .el-pagination ul {
+								display: flex;
 
-						::v-deep .el-pagination button,
-						::v-deep .el-pagination li {
-							display: flex;
-							justify-content: center;
-							align-items: center;
-							width: 50px;
-							height: 36px;
-							border: 1px solid #626262;
-							border-radius: 3px;
-							font-size: 14px;
-							margin: 0 5px;
-						}
+							}
 
-						::v-deep .el-pagination span {
-							margin-left: 10px;
-						}
+							::v-deep .el-pagination button,
+							::v-deep .el-pagination li {
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								border-radius: 3px;
+								font-size: 14px;
+								margin: 0 5px;
+							}
 
-						::v-deep .el-pagination .el-pagination__jump {
-							font-size: 16px;
-						}
+							::v-deep .el-pagination span {
+								margin-left: 10px;
+							}
 
-						::v-deep .el-pagination .el-pagination__editor {
-							width: 50px;
-							height: 36px;
-							margin: 0 5px;
-						}
+							::v-deep .el-pagination .el-pagination__jump {
+								font-size: 16px;
+							}
+
+							::v-deep .el-pagination .el-pagination__editor {
+								width: 50px;
+								height: 36px;
+								margin: 0 5px;
+							}
 
-						::v-deep .el-pagination .el-input__inner {
-							width: 50px;
-							height: 36px;
-							border: 1px solid #626262;
-							margin: -4px 0 0 0;
+							::v-deep .el-pagination .el-input__inner {
+								width: 50px;
+								height: 36px;
+								border: 1px solid #626262;
+								margin: -4px 0 0 0;
+							}
 						}
 					}
 				}