4f07a267 by 蔡俊立
2 parents 67be1b4e af89f13a
...@@ -36,19 +36,19 @@ ...@@ -36,19 +36,19 @@
36 import { getDjbfm } from "@/api/registerBook.js"; 36 import { getDjbfm } from "@/api/registerBook.js";
37 37
38 export default { 38 export default {
39 data() { 39 data () {
40 return { 40 return {
41 //传递参数 41 //传递参数
42 propsParam: this.$attrs, 42 propsParam: this.$attrs,
43 info: {}, 43 info: {},
44 }; 44 };
45 }, 45 },
46 mounted() { 46 mounted () {
47 this.loadData(); 47 this.loadData();
48 }, 48 },
49 methods: { 49 methods: {
50 loadData() { 50 loadData () {
51 getDjbfm({ bdcdyid: this.propsParam.bdcdyid}).then((res) => { 51 getDjbfm({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
52 if (res.code === 200) { 52 if (res.code === 200) {
53 this.info = res.result; 53 this.info = res.result;
54 } 54 }
...@@ -69,12 +69,14 @@ export default { ...@@ -69,12 +69,14 @@ export default {
69 font-size: 18px; 69 font-size: 18px;
70 font-family: serif; 70 font-family: serif;
71 position: relative; 71 position: relative;
72
72 font { 73 font {
73 border-bottom: 1px solid #000; 74 border-bottom: 1px solid #000;
74 display: inline-block; 75 display: inline-block;
75 padding: 0 15px; 76 padding: 0 15px;
76 line-height: 16px; 77 line-height: 16px;
77 } 78 }
79
78 .title { 80 .title {
79 height: 40%; 81 height: 40%;
80 display: flex; 82 display: flex;
...@@ -83,6 +85,7 @@ export default { ...@@ -83,6 +85,7 @@ export default {
83 justify-content: center; 85 justify-content: center;
84 align-items: center; 86 align-items: center;
85 } 87 }
88
86 .bottom { 89 .bottom {
87 position: absolute; 90 position: absolute;
88 bottom: 0px; 91 bottom: 0px;
...@@ -91,9 +94,11 @@ export default { ...@@ -91,9 +94,11 @@ export default {
91 left: 0; 94 left: 0;
92 height: 100px; 95 height: 100px;
93 line-height: 100px; 96 line-height: 100px;
97
94 p { 98 p {
95 font-size: 28px; 99 font-size: 28px;
96 } 100 }
101
97 font { 102 font {
98 font-size: 24px; 103 font-size: 24px;
99 line-height: 24px; 104 line-height: 24px;
......
...@@ -9,33 +9,10 @@ ...@@ -9,33 +9,10 @@
9 </el-checkbox-group> 9 </el-checkbox-group>
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="xxTableBox"> 12 <div class="xxTableBox rollTable">
13 <!-- 固定前三个 --> 13 <!-- 固定前三个 -->
14 <table class="xxTable"> 14 <table class="xxTable">
15 <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex"> 15 <tr v-for="(item, colindex) in columns" :key="colindex">
16 <td>
17 {{ item.label }}
18 </td>
19 <td v-for="(row, index) in tableData" :key="index" :class="[
20 row.qszt == '2' ? 'lishi' : '',
21 row.qszt == '0' ? 'linshi' : '',
22 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
23 ]">
24 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
25 正在办理
26 </div>
27 <span v-if="item.prop == 'qszt'">
28 {{ getQsztName(row[item.prop]) }}
29 </span>
30
31 <span v-else> {{ row[item.prop] }}</span>
32 </td>
33 <td v-for="count in emptycolNum" :key="~count"></td>
34 </tr>
35 </table>
36
37 <table class="xxTable rollTable">
38 <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
39 <td> 16 <td>
40 {{ item.label }} 17 {{ item.label }}
41 </td> 18 </td>
......
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
9 </el-checkbox-group> 9 </el-checkbox-group>
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="xxTableBox"> 12 <div class="xxTableBox rollTable">
13 <!-- 固定前三个 --> 13 <!-- 固定前三个 -->
14 <table class="xxTable"> 14 <table class="xxTable">
15 <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex"> 15 <tr v-for="(item, colindex) in columns" :key="colindex">
16 <td> 16 <td>
17 {{ item.label }} 17 {{ item.label }}
18 </td> 18 </td>
...@@ -33,30 +33,6 @@ ...@@ -33,30 +33,6 @@
33 <td v-for="count in emptycolNum" :key="~count"></td> 33 <td v-for="count in emptycolNum" :key="~count"></td>
34 </tr> 34 </tr>
35 </table> 35 </table>
36
37 <table class="xxTable rollTable">
38 <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
39 <td>
40 {{ item.label }}
41 </td>
42 <td v-for="(row, index) in tableData" :key="index" :class="[
43 row.qszt == '2' ? 'lishi' : '',
44 row.qszt == '0' ? 'linshi' : '',
45 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
46 ]">
47 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
48 正在办理
49 </div>
50 <span v-if="item.prop == 'qszt'">
51 {{ getQsztName(row[item.prop]) }}
52 </span>
53
54 <span v-else> {{ row[item.prop] }}</span>
55 </td>
56 <td v-for="count in emptycolNum" :key="~count"></td>
57 </tr>
58 </table>
59
60 </div> 36 </div>
61 </div> 37 </div>
62 </div> 38 </div>
......
...@@ -9,33 +9,10 @@ ...@@ -9,33 +9,10 @@
9 </el-checkbox-group> 9 </el-checkbox-group>
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="xxTableBox"> 12 <div class="xxTableBox rollTable">
13 <!-- 固定前三个 --> 13 <!-- 固定前三个 -->
14 <table class="xxTable"> 14 <table class="xxTable">
15 <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex"> 15 <tr v-for="(item, colindex) in columns" :key="colindex">
16 <td>
17 {{ item.label }}
18 </td>
19 <td v-for="(row, index) in tableData" :key="index" :class="[
20 row.qszt == '2' ? 'lishi' : '',
21 row.qszt == '0' ? 'linshi' : '',
22 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
23 ]">
24 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
25 正在办理
26 </div>
27 <span v-if="item.prop == 'qszt'">
28 {{ getQsztName(row[item.prop]) }}
29 </span>
30
31 <span v-else> {{ row[item.prop] }}</span>
32 </td>
33 <td v-for="count in emptycolNum" :key="~count"></td>
34 </tr>
35 </table>
36
37 <table class="xxTable rollTable">
38 <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
39 <td> 16 <td>
40 {{ item.label }} 17 {{ item.label }}
41 </td> 18 </td>
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 height: 62px; 18 height: 62px;
19 line-height: 62px; 19 line-height: 62px;
20 position: relative; 20 position: relative;
21 margin: 1px 0; 21 margin: 0 3px;
22 22
23 .checkbox { 23 .checkbox {
24 position: absolute; 24 position: absolute;
...@@ -29,9 +29,8 @@ ...@@ -29,9 +29,8 @@
29 } 29 }
30 30
31 .xxTableBox { 31 .xxTableBox {
32 overflow-x: scroll; 32 overflow: scroll;
33 width: 100%; 33 width: 100%;
34 padding-bottom: 35px;
35 } 34 }
36 35
37 .xxTable>tr:first-child th { 36 .xxTable>tr:first-child th {
...@@ -41,6 +40,11 @@ ...@@ -41,6 +40,11 @@
41 .xxTable { 40 .xxTable {
42 //border-spacing: 1px; 41 //border-spacing: 1px;
43 width: 100%; 42 width: 100%;
43 table-layout: fixed;
44
45 tr {
46 box-sizing: border-box;
47 }
44 48
45 tr>th { 49 tr>th {
46 border: 1px solid #ccc; 50 border: 1px solid #ccc;
...@@ -50,6 +54,31 @@ ...@@ -50,6 +54,31 @@
50 height: 40px; 54 height: 40px;
51 } 55 }
52 56
57 tr:nth-child(1) {
58 position: sticky;
59 top: 0px;
60 z-index: 3;
61 margin-top: -2px;
62 }
63
64 tr:nth-child(2) {
65 position: sticky;
66 top: 40px;
67 z-index: 3;
68 }
69
70 tr:nth-child(3) {
71 position: sticky;
72 top: 80px;
73 z-index: 3;
74 }
75
76 tr>td:first-child {
77 position: sticky;
78 left: 0;
79 z-index: 2;
80 }
81
53 th.linshi, 82 th.linshi,
54 th.xianshi { 83 th.xianshi {
55 background: #464c5b; 84 background: #464c5b;
...@@ -96,8 +125,8 @@ ...@@ -96,8 +125,8 @@
96 125
97 .icon { 126 .icon {
98 position: absolute; 127 position: absolute;
99 top: 13px; 128 top: 12px;
100 right: -4px; 129 right: -5px;
101 transform: rotate(45deg); 130 transform: rotate(45deg);
102 color: #fff; 131 color: #fff;
103 font-size: 12px; 132 font-size: 12px;
...@@ -119,6 +148,8 @@ ...@@ -119,6 +148,8 @@
119 display: flex; 148 display: flex;
120 align-items: center; 149 align-items: center;
121 justify-content: center; 150 justify-content: center;
151 min-width: 344px;
152 z-index: 1;
122 } 153 }
123 154
124 >tr:nth-child(odd) td { 155 >tr:nth-child(odd) td {
...@@ -141,7 +172,7 @@ ...@@ -141,7 +172,7 @@
141 .rollTable { 172 .rollTable {
142 margin-top: -2px; 173 margin-top: -2px;
143 display: block; 174 display: block;
144 height: calc(100vh - 300px); 175 height: calc(100vh - 185px);
145 overflow-y: scroll; 176 overflow-y: scroll;
146 margin-left: 2px; 177 margin-left: 2px;
147 } 178 }
......
...@@ -10,30 +10,8 @@ ...@@ -10,30 +10,8 @@
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="xxTableBox"> 12 <div class="xxTableBox">
13 <table class="xxTable">
14 <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
15 <td>
16 {{ item.label }}
17 </td>
18 <td v-for="(row, index) in tableData" :key="index" :class="[
19 row.qszt == '2' ? 'lishi' : '',
20 row.qszt == '0' ? 'linshi' : '',
21 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
22 ]">
23 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
24 正在办理
25 </div>
26 <span v-if="item.prop == 'qszt'">
27 {{ getQsztName(row[item.prop]) }}
28 </span>
29
30 <span v-else> {{ row[item.prop] }}</span>
31 </td>
32 <td v-for="count in emptycolNum" :key="~count"></td>
33 </tr>
34 </table>
35 <table class="xxTable rollTable"> 13 <table class="xxTable rollTable">
36 <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex"> 14 <tr v-for="(item, colindex) in columns" :key="colindex">
37 <td> 15 <td>
38 {{ item.label }} 16 {{ item.label }}
39 </td> 17 </td>
......
...@@ -10,30 +10,8 @@ ...@@ -10,30 +10,8 @@
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="xxTableBox"> 12 <div class="xxTableBox">
13 <table class="xxTable">
14 <tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
15 <td>
16 {{ item.label }}
17 </td>
18 <td v-for="(row, index) in tableData" :key="index" :class="[
19 row.qszt == '2' ? 'lishi' : '',
20 row.qszt == '0' ? 'linshi' : '',
21 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
22 ]">
23 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
24 正在办理
25 </div>
26 <span v-if="item.prop == 'qszt'">
27 {{ getQsztName(row[item.prop]) }}
28 </span>
29
30 <span v-else> {{ row[item.prop] }}</span>
31 </td>
32 <td v-for="count in emptycolNum" :key="~count"></td>
33 </tr>
34 </table>
35 <table class="xxTable rollTable"> 13 <table class="xxTable rollTable">
36 <tr v-for="(item, colindex) in columns.slice(3)" :key="colindex"> 14 <tr v-for="(item, colindex) in columns" :key="colindex">
37 <td> 15 <td>
38 {{ item.label }} 16 {{ item.label }}
39 </td> 17 </td>
......