Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8f323c28 by 任超
Options

style:进度查询

1 parent 8a88482a
Inline Side-by-side
Showing 7 changed files with 65 additions and 119 deletions
1 <template> 1 <template>
2 <transition name="fade" mode="out-in" v-if="isShow"> 2 <transition name="fade" mode="out-in" v-if="isShow">
3 <div class="ls-mask" v-loading="loading"> 3 <div class="ls-mask" v-loading="loading">
4 <div class="ls-mask-window" :style="{'width':width,'height':height}"> 4 <div class="ls-mask-window" :style="{ 'width': width, 'height': height }">
5 <div class="ls-head"> 5 <div class="ls-head">
6 <div class="ls-title" :style="{'text-align':titleStyle}"> 6 <div class="ls-title" :style="{ 'text-align': titleStyle }">
7 <svg-icon v-if="iconClass!=''" :icon-class='iconClass' /> 7 <svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
8 <b>{{title}}</b> 8 <b>{{ title }}</b>
9 </div> 9 </div>
10 <svg-icon icon-class='close' class="closeStyle" @click="onCancel" /> 10 <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
11 </div> 11 </div>
12 12
13 <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight}"> 13 <div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
14 <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' /> 14 <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' />
15 </div> 15 </div>
16 <div class="ls-mask-footer" v-if='btnShow'> 16 <div class="ls-mask-footer" v-if='btnShow'>
17 <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button> 17 <el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button>
18 <el-button @click="onCancel">{{cancelText}}</el-button> 18 <el-button @click="onCancel">{{ cancelText }}</el-button>
19 </div> 19 </div>
20 </div> 20 </div>
21 </div> 21 </div>
...@@ -51,7 +51,8 @@ export default { ...@@ -51,7 +51,8 @@ export default {
51 isShow (a, b) { 51 isShow (a, b) {
52 this.key++ 52 this.key++
53 this.editItem = this.loadViewFn(this.editItem) 53 this.editItem = this.loadViewFn(this.editItem)
54 }, 54 document.body.appendChild(this.$el);
55 }
55 }, 56 },
56 mounted () { 57 mounted () {
57 // 计算滚动条高度 58 // 计算滚动条高度
......
...@@ -2,34 +2,24 @@ ...@@ -2,34 +2,24 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="80px"> 5 <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="70px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="查询编号"> 8 <el-form-item label="查询编号">
9 <el-input 9 <el-input placeholder="请输入编号" v-model="queryForm.cxbh" class="width100" clearable @clear="queryClick()">
10 placeholder="请输入编号"
11 v-model="queryForm.cxbh"
12 class="width200px"
13 clearable
14 >
15 </el-input> 10 </el-input>
16 </el-form-item> 11 </el-form-item>
17 </el-col> 12 </el-col>
18 <el-col :span="5"> 13 <el-col :span="5">
19 <el-form-item label="申请人"> 14 <el-form-item label="申请人">
20 <el-input 15 <el-input placeholder="请输入申请人" v-model="queryForm.sqr" class="width100" @clear="queryClick()" clearable>
21 placeholder="请输入申请人"
22 v-model="queryForm.sqr"
23 class="width200px"
24 clearable
25 >
26 </el-input> 16 </el-input>
27 </el-form-item> 17 </el-form-item>
28 </el-col> 18 </el-col>
29 19
30 <el-col :span="14" class="btnColRight"> 20 <el-col :span="14" class="btnColRight">
31 <el-form-item> 21 <el-form-item>
32 <el-button type="primary" @click="queryClick()">查询</el-button> 22 <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
33 <el-button @click="moreQueryClick()">高级查询</el-button> 23 <el-button @click="moreQueryClick()">高级查询</el-button>
34 </el-form-item> 24 </el-form-item>
35 </el-col> 25 </el-col>
...@@ -38,17 +28,9 @@ ...@@ -38,17 +28,9 @@
38 </div> 28 </div>
39 <!-- 表格 --> 29 <!-- 表格 -->
40 <div class="from-clues-content"> 30 <div class="from-clues-content">
41 <lb-table 31 <lb-table :page-size="pageData.size" border @sort-change="handleSort" :current-page.sync="pageData.current"
42 :page-size="pageData.size" 32 :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
43 border 33 :column="tableData.columns" :data="tableData.data">
44 @sort-change="handleSort"
45 :current-page.sync="pageData.current"
46 :total="tableData.total"
47 @size-change="handleSizeChange"
48 @p-current-change="handleCurrentChange"
49 :column="tableData.columns"
50 :data="tableData.data"
51 >
52 </lb-table> 34 </lb-table>
53 </div> 35 </div>
54 </div> 36 </div>
...@@ -62,13 +44,13 @@ import { getJtfcPage } from "@/api/jtfc"; ...@@ -62,13 +44,13 @@ import { getJtfcPage } from "@/api/jtfc";
62 export default { 44 export default {
63 name: "dydjb", 45 name: "dydjb",
64 mixins: [table], 46 mixins: [table],
65 mounted() { 47 mounted () {
66 sendThis(this); 48 sendThis(this);
67 }, 49 },
68 computed: { 50 computed: {
69 ...mapGetters(["dictData"]), 51 ...mapGetters(["dictData"]),
70 }, 52 },
71 data() { 53 data () {
72 return { 54 return {
73 queryForm: { 55 queryForm: {
74 cxbh: "", 56 cxbh: "",
...@@ -83,18 +65,18 @@ export default { ...@@ -83,18 +65,18 @@ export default {
83 }, 65 },
84 methods: { 66 methods: {
85 // 初始化数据 67 // 初始化数据
86 fetchData() { 68 fetchData () {
87 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => { 69 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
88 let { records, total } = res.result; 70 let { records, total } = res.result;
89 this.tableData.data = records; 71 this.tableData.data = records;
90 this.tableData.total = total; 72 this.tableData.total = total;
91 }); 73 });
92 }, 74 },
93 handleSort(name, sort) { 75 handleSort (name, sort) {
94 console.log(name, sort); 76 console.log(name, sort);
95 }, 77 },
96 78
97 dydjbClick(scope) { 79 dydjbClick (scope) {
98 // var sqcxBsm = scope.row.bsmSqcx; 80 // var sqcxBsm = scope.row.bsmSqcx;
99 this.$popup({ 81 this.$popup({
100 title: "打印登记薄", 82 title: "打印登记薄",
...@@ -105,14 +87,14 @@ export default { ...@@ -105,14 +87,14 @@ export default {
105 formData: { 87 formData: {
106 sqcxdata: scope.row, 88 sqcxdata: scope.row,
107 }, 89 },
108 cancel: function () {}, //取消事件的回调 90 cancel: function () { }, //取消事件的回调
109 confirm: function () { 91 confirm: function () {
110 // that.loadBdcdylist(); 92 // that.loadBdcdylist();
111 }, //确认事件的回调 93 }, //确认事件的回调
112 }); 94 });
113 }, 95 },
114 96
115 queryClick() { 97 queryClick () {
116 this.fetchData(); 98 this.fetchData();
117 }, 99 },
118 }, 100 },
......
...@@ -2,53 +2,32 @@ ...@@ -2,53 +2,32 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 家庭房产 --> 3 <!-- 家庭房产 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="70px"> 5 <el-form :model="queryForm" @submit.native.prevent ref="queryForm" label-width="70px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="查询编号"> 8 <el-form-item label="查询编号">
9 <el-input 9 <el-input placeholder="请输入查询编号" @clear="queryClick()" v-model="queryForm.cxbh" clearable class="width100">
10 placeholder="请输入查询编号"
11 v-model="queryForm.cxbh"
12 clearable
13 class="width200px"
14 >
15 </el-input> 10 </el-input>
16 </el-form-item> 11 </el-form-item>
17 </el-col> 12 </el-col>
18 <el-col :span="5"> 13 <el-col :span="5">
19 <el-form-item label="申请人"> 14 <el-form-item label="申请人">
20 <el-input 15 <el-input placeholder="请输入申请人" @clear="queryClick()" v-model="queryForm.sqr" clearable class="width100">
21 placeholder="请输入申请人"
22 v-model="queryForm.sqr"
23 clearable
24 class="width200px"
25 >
26 </el-input> 16 </el-input>
27 </el-form-item> 17 </el-form-item>
28 </el-col> 18 </el-col>
29 <el-col :span="14" class="btnColRight"> 19 <el-col :span="14" class="btnColRight">
30 <el-button type="primary" @click="queryClick()" 20 <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
31 >查询</el-button 21 <el-button type="primary" @click="handleAdd">新增</el-button>
32 >
33 <el-button type="primary" @click="handleAdd"
34 >新增</el-button
35 >
36 </el-col> 22 </el-col>
37 </el-row> 23 </el-row>
38 </el-form> 24 </el-form>
39 </div> 25 </div>
40 <!-- 表格 --> 26 <!-- 表格 -->
41 <div class="from-clues-content"> 27 <div class="from-clues-content">
42 <lb-table 28 <lb-table :page-size="pageData.size" border :current-page.sync="pageData.current" :total="tableData.total"
43 :page-size="pageData.size" 29 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
44 border 30 :data="tableData.data">
45 :current-page.sync="pageData.current"
46 :total="tableData.total"
47 @size-change="handleSizeChange"
48 @p-current-change="handleCurrentChange"
49 :column="tableData.columns"
50 :data="tableData.data"
51 >
52 </lb-table> 31 </lb-table>
53 </div> 32 </div>
54 <addjtfc v-model="isDialog" /> 33 <addjtfc v-model="isDialog" />
...@@ -63,10 +42,10 @@ export default { ...@@ -63,10 +42,10 @@ export default {
63 name: "jtfc", 42 name: "jtfc",
64 components: { addjtfc }, 43 components: { addjtfc },
65 mixins: [table], 44 mixins: [table],
66 mounted() { 45 mounted () {
67 sendThis(this); 46 sendThis(this);
68 }, 47 },
69 data() { 48 data () {
70 return { 49 return {
71 isDialog: false, 50 isDialog: false,
72 sqrOption: [], 51 sqrOption: [],
...@@ -84,22 +63,22 @@ export default { ...@@ -84,22 +63,22 @@ export default {
84 }; 63 };
85 }, 64 },
86 methods: { 65 methods: {
87 queryClick(){ 66 queryClick () {
88 this.fetchData(); 67 this.fetchData();
89 }, 68 },
90 69
91 // 初始化数据 70 // 初始化数据
92 fetchData() { 71 fetchData () {
93 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => { 72 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
94 let { records, total } = res.result; 73 let { records, total } = res.result;
95 this.tableData.data = records; 74 this.tableData.data = records;
96 this.tableData.total = total; 75 this.tableData.total = total;
97 }); 76 });
98 }, 77 },
99 handleSort(name, sort) { 78 handleSort (name, sort) {
100 console.log(name, sort); 79 console.log(name, sort);
101 }, 80 },
102 handleAdd() { 81 handleAdd () {
103 this.isDialog = true; 82 this.isDialog = true;
104 }, 83 },
105 }, 84 },
......
...@@ -2,33 +2,23 @@ ...@@ -2,33 +2,23 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="80px"> 5 <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="70px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="查询编号"> 8 <el-form-item label="查询编号">
9 <el-input 9 <el-input placeholder="请输入编号" @clear="queryClick()" v-model="queryForm.cxbh" class="width100" clearable>
10 placeholder="请输入编号"
11 v-model="queryForm.cxbh"
12 class="width200px"
13 clearable
14 >
15 </el-input> 10 </el-input>
16 </el-form-item> 11 </el-form-item>
17 </el-col> 12 </el-col>
18 <el-col :span="5"> 13 <el-col :span="5">
19 <el-form-item label="申请人"> 14 <el-form-item label="申请人">
20 <el-input 15 <el-input placeholder="请输入申请人" @clear="queryClick()" v-model="queryForm.sqr" class="width100" clearable>
21 placeholder="请输入申请人"
22 v-model="queryForm.sqr"
23 class="width200px"
24 clearable
25 >
26 </el-input> 16 </el-input>
27 </el-form-item> 17 </el-form-item>
28 </el-col> 18 </el-col>
29 <el-col :span="14" class="btnColRight"> 19 <el-col :span="14" class="btnColRight">
30 <el-form-item> 20 <el-form-item>
31 <el-button type="primary" @click="queryClick()">查询</el-button> 21 <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
32 <el-button @click="moreQueryClick()">高级查询</el-button> 22 <el-button @click="moreQueryClick()">高级查询</el-button>
33 </el-form-item> 23 </el-form-item>
34 </el-col> 24 </el-col>
...@@ -37,17 +27,9 @@ ...@@ -37,17 +27,9 @@
37 </div> 27 </div>
38 <!-- 表格 --> 28 <!-- 表格 -->
39 <div class="from-clues-content"> 29 <div class="from-clues-content">
40 <lb-table 30 <lb-table :page-size="pageData.size" border @sort-change="handleSort" :current-page.sync="pageData.current"
41 :page-size="pageData.size" 31 :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
42 border 32 :column="tableData.columns" :data="tableData.data">
43 @sort-change="handleSort"
44 :current-page.sync="pageData.current"
45 :total="tableData.total"
46 @size-change="handleSizeChange"
47 @p-current-change="handleCurrentChange"
48 :column="tableData.columns"
49 :data="tableData.data"
50 >
51 </lb-table> 33 </lb-table>
52 </div> 34 </div>
53 </div> 35 </div>
...@@ -59,10 +41,10 @@ import { getJtfcPage } from "@/api/jtfc"; ...@@ -59,10 +41,10 @@ import { getJtfcPage } from "@/api/jtfc";
59 export default { 41 export default {
60 name: "sqcxjl", 42 name: "sqcxjl",
61 mixins: [table], 43 mixins: [table],
62 mounted() { 44 mounted () {
63 sendThis(this); 45 sendThis(this);
64 }, 46 },
65 data() { 47 data () {
66 return { 48 return {
67 queryForm: { 49 queryForm: {
68 cxbh: "", 50 cxbh: "",
...@@ -76,12 +58,12 @@ export default { ...@@ -76,12 +58,12 @@ export default {
76 }; 58 };
77 }, 59 },
78 methods: { 60 methods: {
79 queryClick() { 61 queryClick () {
80 this.fetchData(); 62 this.fetchData();
81 }, 63 },
82 64
83 // 初始化数据 65 // 初始化数据
84 fetchData() { 66 fetchData () {
85 67
86 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => { 68 getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
87 let { records, total } = res.result; 69 let { records, total } = res.result;
...@@ -89,12 +71,12 @@ export default { ...@@ -89,12 +71,12 @@ export default {
89 this.tableData.total = total; 71 this.tableData.total = total;
90 }); 72 });
91 }, 73 },
92 handleSort(name, sort) { 74 handleSort (name, sort) {
93 console.log(name, sort); 75 console.log(name, sort);
94 }, 76 },
95 77
96 // 查看 78 // 查看
97 handleViewClick(scope) { 79 handleViewClick (scope) {
98 var sqcxBsm = scope.row.bsmSqcx; 80 var sqcxBsm = scope.row.bsmSqcx;
99 this.$popup({ 81 this.$popup({
100 title: "申请查询记录", 82 title: "申请查询记录",
...@@ -105,7 +87,7 @@ export default { ...@@ -105,7 +87,7 @@ export default {
105 formData: { 87 formData: {
106 sqcxBsm: sqcxBsm, 88 sqcxBsm: sqcxBsm,
107 }, 89 },
108 cancel: function () {}, //取消事件的回调 90 cancel: function () { }, //取消事件的回调
109 confirm: function () { 91 confirm: function () {
110 // that.loadBdcdylist(); 92 // that.loadBdcdylist();
111 }, //确认事件的回调 93 }, //确认事件的回调
...@@ -116,5 +98,4 @@ export default { ...@@ -116,5 +98,4 @@ export default {
116 </script> 98 </script>
117 <style scoped lang="scss"> 99 <style scoped lang="scss">
118 @import "~@/styles/public.scss"; 100 @import "~@/styles/public.scss";
119
120 </style> 101 </style>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="80px"> 5 <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="业务来源"> 8 <el-form-item label="业务来源">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="80px"> 5 <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="业务来源"> 8 <el-form-item label="业务来源">
......
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
2 <div class="from-clues"> 2 <div class="from-clues">
3 <!-- 表单部分 --> 3 <!-- 表单部分 -->
4 <div class="from-clues-header"> 4 <div class="from-clues-header">
5 <el-form :model="queryForm" ref="queryForm" label-width="70px"> 5 <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="业务来源"> 8 <el-form-item label="业务来源">
9 <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源"> 9 <el-select v-model="queryForm.ywly" class="width100" @change="fetchData()" filterable clearable
10 placeholder="请选择业务来源">
10 <el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode"> 11 <el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode">
11 </el-option> 12 </el-option>
12 </el-select> 13 </el-select>
...@@ -14,7 +15,8 @@ ...@@ -14,7 +15,8 @@
14 </el-col> 15 </el-col>
15 <el-col :span="5"> 16 <el-col :span="5">
16 <el-form-item label="权利类型"> 17 <el-form-item label="权利类型">
17 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型"> 18 <el-select v-model="queryForm.qllx" class="width100" @change="fetchData()" filterable clearable
19 placeholder="请选择权利类型">
18 <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode"> 20 <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode">
19 </el-option> 21 </el-option>
20 </el-select> 22 </el-select>
...@@ -22,7 +24,8 @@ ...@@ -22,7 +24,8 @@
22 </el-col> 24 </el-col>
23 <el-col :span="5"> 25 <el-col :span="5">
24 <el-form-item label="登记类型"> 26 <el-form-item label="登记类型">
25 <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型"> 27 <el-select v-model="queryForm.djlx" class="width100" @change="fetchData()" filterable clearable
28 placeholder="请选择登记类型">
26 <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode"> 29 <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
27 </el-option> 30 </el-option>
28 </el-select> 31 </el-select>
...@@ -30,14 +33,14 @@ ...@@ -30,14 +33,14 @@
30 </el-col> 33 </el-col>
31 <el-col :span="5"> 34 <el-col :span="5">
32 <el-form-item label="业务号"> 35 <el-form-item label="业务号">
33 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px"> 36 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" @clear="fetchData()" clearable class="width200px">
34 </el-input> 37 </el-input>
35 </el-form-item> 38 </el-form-item>
36 </el-col> 39 </el-col>
37 40
38 <el-col :span="4" class="btnColRight"> 41 <el-col :span="4" class="btnColRight">
39 <el-form-item> 42 <el-form-item>
40 <el-button type="primary" @click="queryClick()">查询</el-button> 43 <el-button type="primary" native-type="submit" @click="fetchData()">查询</el-button>
41 <el-button @click="moreQueryClick()">高级查询</el-button> 44 <el-button @click="moreQueryClick()">高级查询</el-button>
42 </el-form-item> 45 </el-form-item>
43 </el-col> 46 </el-col>
...@@ -46,9 +49,9 @@ ...@@ -46,9 +49,9 @@
46 </div> 49 </div>
47 <!-- 表格 --> 50 <!-- 表格 -->
48 <div class="from-clues-content"> 51 <div class="from-clues-content">
49 <lb-table border :page-size="pageData.pageSize" @sort-change="handleSort" :current-page.sync="pageData.currentPage" 52 <lb-table border :page-size="pageData.pageSize" @sort-change="handleSort"
50 :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" 53 :current-page.sync="pageData.currentPage" :total="pageData.total" @size-change="handleSizeChange"
51 :column="tableData.columns" :data="tableData.data"> 54 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
52 </lb-table> 55 </lb-table>
53 </div> 56 </div>
54 </div> 57 </div>
......