Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
7 changed files
with
54 additions
and
132 deletions
... | @@ -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> | ... | ... |
-
Please register or sign in to post a comment