查询页面样式修改

@@ -68,4 +68,14 @@
   .el-message{
     min-width: 200px!important;
     top: 50px!important;
+  }
+  .el-pager li{
+    background-color: #FFFFFF!important;
+  }
+  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #409EFF!important;
+    color: #FFF;
+  }
+  .el-pagination{
+    margin-left: -8px;
   }
\ No newline at end of file

 <template>
-	<el-row>
-		<el-col :span="24" style="margin-left: -10px;">
+	<el-row class="box">
+		<el-col :span="24">
 			<el-row>
 				<el-col :span="24">
 					<el-form :inline="true" class="demo-form-inline" label-width="106px">
-						<el-form-item label="不动产单元号">
+						<el-form-item label="宗地编码">
 							<el-input
-								maxlength="28"
-								v-model="queryData.bdcdyh"
-								placeholder="输入不动产单元号"
+								v-model="queryData.zddm"
+								placeholder="输入宗地编码"
 								@change="query"
 							></el-input>
 						</el-form-item>
@@ -19,10 +18,11 @@
 									@change="query"
 							></el-input>
 						</el-form-item>
-						<el-form-item label="宗地编码">
+						<el-form-item label="不动产单元号">
 							<el-input
-								v-model="queryData.zddm"
-								placeholder="输入宗地编码"
+								maxlength="28"
+								v-model="queryData.bdcdyh"
+								placeholder="输入不动产单元号"
 								@change="query"
 							></el-input>
 						</el-form-item>
@@ -30,7 +30,6 @@
 					<el-button type="warning" @click="reset">重置</el-button>
 					<el-button
 						type="primary"
-						class="moreSearchBtn"
 						@click="moreSearch"
 						>更多查询
 					</el-button>
@@ -41,13 +40,6 @@
 			<el-row class="row3"  v-if="ismore">
 				<el-col :span="22">
 					<el-form :inline="true" class="demo-form-inline" label-width="106px">
-						<el-form-item label="不动产权证号">
-							<el-input
-								placeholder="输入不动产权证号"
-								v-model="queryData.bdcqzh"
-								@change="query"
-							></el-input>
-						</el-form-item>
 						<el-form-item label="权利人名称">
 							<el-input
 								placeholder="输入权利人名称"
@@ -62,6 +54,13 @@
 									@change="query"
 							></el-input>
 						</el-form-item>
+						<el-form-item label="不动产权证号">
+							<el-input
+								placeholder="输入不动产权证号"
+								v-model="queryData.bdcqzh"
+								@change="query"
+							></el-input>
+						</el-form-item>
 					</el-form>
 				</el-col>
 				<el-col :span="2" :offset="offset">
@@ -155,8 +154,10 @@ export default {
         moreSearch(){
 			if(this.ismore === true){
 				this.ismore = false;
+				this.$parent.tableHeight+=55;
 			}else {
 				this.ismore = true;
+				this.$parent.tableHeight-=55;
 			}
 
             // this.$message('待开发');
@@ -178,8 +179,17 @@ export default {
 };
 </script>
 <style scoped lang="less">
-.el-row{
-    background-color: #EAEDF5;
+.box{
+	background-color: #FFFFFF;
+	box-sizing: border-box;
+	padding: 18px 0 0 0;
+	border: 1px solid #E6E6E6;
+	.el-col{
+		.el-row{
+			margin-left: -10px;
+		}
+	}
+	margin-bottom: 18px;
 }
 .el-button {
 	width: 100px;

 <template>
     <div class="main">
+        <p class="tips">查询条件</p>
         <SearchHead @getSearchCondition="geQuerytData" :type="type"></SearchHead>
+        <p class="tips">查询列表</p>
         <div class="dataGrid" ref="dataGrid">
             <el-table
                     :data="tableData"
@@ -82,7 +84,7 @@
             this.queryData.pageSize=this.pageSize
             this.getData(this.queryData);
             this.$nextTick(() => {
-                this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 255;
+                this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
             });
         },
         methods: {
@@ -163,6 +165,11 @@
         display: flex;
         flex-direction: column;
         background-color: #EAEDF5;
+        .tips{
+            color: #9B9B9B;
+            margin-left: 2px;
+            margin-bottom: 10px;
+        }
         .demo-form-inline {
             margin-top: 18px;
             .moreSearchBtn {

@@ -93,7 +93,7 @@ export default {
 		this.$nextTick(() => {
 			this.tableHeight =
 				(document.documentElement.clientHeight || document.body.clientHeight) -
-				304;
+				340;
 		});
 	},
 	methods: {

 <template>
     <div class="main">
+        <p class="tips">查询条件</p>
         <SearchHead @getSearchCondition="geQuerytData" :type="type"></SearchHead>
+        <p class="tips">查询列表</p>
         <div class="dataGrid" ref="dataGrid">
             <el-table
                     :data="tableData"
@@ -90,7 +92,7 @@
             this.queryData.pageSize=this.pageSize
             this.getData(this.queryData)
             this.$nextTick(() => {
-			    this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 255;
+                this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
 		    });
         },
         methods: {
@@ -232,6 +234,11 @@
         display: flex;
         flex-direction: column;
         background-color: #EAEDF5;
+        .tips{
+            color: #9B9B9B;
+            margin-left: 2px;
+            margin-bottom: 10px;
+        }
         .demo-form-inline {
             margin-top: 18px;
             .moreSearchBtn {

 <template>
     <div class="main">
+        <p class="tips">查询条件</p>
         <SearchHead @getSearchCondition="geQuerytData" :type="type"></SearchHead>
+        <p class="tips">查询列表</p>
         <div class="dataGrid" ref="dataGrid">
             <el-table
                     :data="tableData"
@@ -188,6 +190,11 @@
         display: flex;
         flex-direction: column;
         background-color: #EAEDF5;
+        .tips{
+            color: #9B9B9B;
+            margin-left: 2px;
+            margin-bottom: 10px;
+        }
         .demo-form-inline {
             margin-top: 18px;
             .moreSearchBtn {