Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
04c25788 by 任超
Options

style:登记信息界面样式重构

1 parent 58714585
Inline Side-by-side
Showing 7 changed files with 55 additions and 133 deletions
......@@ -36,19 +36,19 @@
import { getDjbfm } from "@/api/registerBook.js";
export default {
data() {
data () {
return {
//传递参数
propsParam: this.$attrs,
info: {},
};
},
mounted() {
mounted () {
this.loadData();
},
methods: {
loadData() {
getDjbfm({ bdcdyid: this.propsParam.bdcdyid}).then((res) => {
loadData () {
getDjbfm({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
if (res.code === 200) {
this.info = res.result;
}
......@@ -69,12 +69,14 @@ export default {
font-size: 18px;
font-family: serif;
position: relative;
font {
border-bottom: 1px solid #000;
display: inline-block;
padding: 0 15px;
line-height: 16px;
}
.title {
height: 40%;
display: flex;
......@@ -83,6 +85,7 @@ export default {
justify-content: center;
align-items: center;
}
.bottom {
position: absolute;
bottom: 0px;
......@@ -91,9 +94,11 @@ export default {
left: 0;
height: 100px;
line-height: 100px;
p {
font-size: 28px;
}
font {
font-size: 24px;
line-height: 24px;
......
......@@ -9,33 +9,10 @@
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<div class="xxTableBox rollTable">
<!-- 固定前三个 -->
<table class="xxTable">
<tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
<table class="xxTable rollTable">
<tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
......
......@@ -9,10 +9,10 @@
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<div class="xxTableBox rollTable">
<!-- 固定前三个 -->
<table class="xxTable">
<tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
......@@ -33,30 +33,6 @@
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
<table class="xxTable rollTable">
<tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
</div>
</div>
</div>
......
......@@ -9,33 +9,10 @@
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<div class="xxTableBox rollTable">
<!-- 固定前三个 -->
<table class="xxTable">
<tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
<table class="xxTable rollTable">
<tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
......
......@@ -18,7 +18,7 @@
height: 62px;
line-height: 62px;
position: relative;
margin: 1px 0;
margin: 0 3px;
.checkbox {
position: absolute;
......@@ -29,9 +29,8 @@
}
.xxTableBox {
overflow-x: scroll;
overflow: scroll;
width: 100%;
padding-bottom: 35px;
}
.xxTable>tr:first-child th {
......@@ -41,6 +40,11 @@
.xxTable {
//border-spacing: 1px;
width: 100%;
table-layout: fixed;
tr {
box-sizing: border-box;
}
tr>th {
border: 1px solid #ccc;
......@@ -50,6 +54,31 @@
height: 40px;
}
tr:nth-child(1) {
position: sticky;
top: 0px;
z-index: 3;
margin-top: -2px;
}
tr:nth-child(2) {
position: sticky;
top: 40px;
z-index: 3;
}
tr:nth-child(3) {
position: sticky;
top: 80px;
z-index: 3;
}
tr>td:first-child {
position: sticky;
left: 0;
z-index: 2;
}
th.linshi,
th.xianshi {
background: #464c5b;
......@@ -96,8 +125,8 @@
.icon {
position: absolute;
top: 13px;
right: -4px;
top: 12px;
right: -5px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
......@@ -119,6 +148,8 @@
display: flex;
align-items: center;
justify-content: center;
min-width: 344px;
z-index: 1;
}
>tr:nth-child(odd) td {
......@@ -141,9 +172,9 @@
.rollTable {
margin-top: -2px;
display: block;
height: calc(100vh - 300px);
height: calc(100vh - 185px);
overflow-y: scroll;
margin-left: 2px;
}
}
}
}
\ No newline at end of file
......
......@@ -10,30 +10,8 @@
</div>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
<table class="xxTable rollTable">
<tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
......
......@@ -10,30 +10,8 @@
</div>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr v-for="(item, colindex) in columns.slice(0, 3)" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
<table class="xxTable rollTable">
<tr v-for="(item, colindex) in columns.slice(3)" :key="colindex">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
......