Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
c4e6187f by xiaomiao
Options

样式调整

1 parent 79cbd3d9
Expand all
Inline Side-by-side
Showing 3 changed files with 130 additions and 102 deletions
.tablebox {
overflow-x: auto;
width: 100%;
height: 95%;
background: #fff;
text-align: center;
padding: 4px;
overflow-y: scroll;
padding-top: 20px;
padding: 20px 40px;
.Table {
width: 100%;
color: #333;
tr {
td:nth-child(1) {
width: 140px;
text-align: right;
padding-right: 15px;
background-color: #f8f8fa;
color: #6b6b6b;
}
td:nth-child(3) {
width: 140px;
padding-right: 15px;
text-align: right;
background-color: #f8f8fa;
color: #6b6b6b;
}
td:nth-child(2) {
text-align: left;
padding-left: 15px;
color: #4a4a4a;
}
td:nth-child(4) {
text-align: left;
padding-left: 15px;
color: #4a4a4a;
}
}
td {
border: 1px solid #e8e8e8;
line-height: 42px;
padding: 0 4px;
font-size: 14px;
}
.title {
line-height: 68px;
font-size: 22px !important;
color: #4a4a4a !important;
background-color: #eceef2 !important;
text-align: center !important;
}
.unit {
text-align: right;
}
.title3 {
width: 140px !important;
}
.bhqk {
width: 140px;
padding: 0 !important;
.box {
width: 745px;
overflow: auto;
}
.test {
}
table {
.bhqkTh {
width: 110px;
line-height: 38px;
background-color: #f8f8fa;
border: 1px solid #e8e8e8;
font-weight: bold;
text-align: left;
}
td {
width: 180px;
}
}
}
}
}
<template>
<div class="zdxx">
<div class="tablebox">
<table cellpadding="0" cellspacing="0" class="zdxxTable">
<table cellpadding="0" cellspacing="0" class="Table">
<col width="80" />
<col width="60" />
<col width="90" />
<col width="235" />
<col width="150" />
<tr>
<td colspan="6" class="title">宗地基本信息</td>
<td colspan="12" class="title">宗地基本信息</td>
</tr>
<tr>
<td colspan="2">不动产类型：</td>
<td colspan="2">{{ bdclxList[zdjbxx.bdclx] }}</td>
<td>单位：</td>
<td>{{ zdjbxx.mjdw }}</td>
<td colspan="2">不动产类型</td>
<td colspan="3">{{ bdclxList[zdjbxx.bdclx] }}</td>
<td>单位</td>
<td colspan="4">{{ zdjbxx.mjdw }}</td>
</tr>
<tr>
<td colspan="2">坐落</td>
<td colspan="4">{{ zdjbxx.zl }}</td>
<td colspan="10">{{ zdjbxx.zl }}</td>
</tr>
<tr>
<td rowspan="8" class="title2">土地状况</td>
<td rowspan="8" colspan="2" class="title2">土地状况</td>
</tr>
<tr>
<td colspan="2">宗地面积</td>
<td>{{ zdjbxx.zdmj }}</td>
<td>宗地面积</td>
<td colspan="4">{{ zdjbxx.zdmj }}</td>
<td>用途</td>
<td>{{ zdjbxx.ghytmc }}</td>
</tr>
<tr>
<td colspan="2">等级</td>
<td>{{ zdjbxx.djmc }}</td>
<td>等级</td>
<td colspan="4">{{ zdjbxx.djmc }}</td>
<td>价格</td>
<td>{{ zdjbxx.jg }}</td>
<td colspan="3">{{ zdjbxx.jg }}</td>
</tr>
<tr>
<td colspan="2">权利类型</td>
<td>{{ zdjbxx.qllxmc }}</td>
<td>权利类型</td>
<td colspan="4">{{ zdjbxx.qllxmc }}</td>
<td>权利性质</td>
<td>{{ zdjbxx.qlxzmc }}</td>
</tr>
<tr>
<td colspan="2">权利设定方式</td>
<td>{{ zdjbxx.qlsdfs }}</td>
<td>权利设定方式</td>
<td colspan="4">{{ zdjbxx.qlsdfs }}</td>
<td>容积率</td>
<td>{{ zdjbxx.rjl }}</td>
</tr>
<tr>
<td colspan="2">建筑密度</td>
<td>{{ zdjbxx.jzmd }}</td>
<td>建筑密度</td>
<td colspan="4">{{ zdjbxx.jzmd }}</td>
<td>建筑限高</td>
<td>{{ zdjbxx.jzxg }}</td>
</tr>
<tr>
<td colspan="2">图幅号</td>
<td>{{ zdjbxx.tfh }}</td>
<td>图幅号</td>
<td colspan="4">{{ zdjbxx.tfh }}</td>
<td>地籍号</td>
<td>{{ zdjbxx.djh }}</td>
<td colspan="3">{{ zdjbxx.djh }}</td>
</tr>
<tr>
<td colspan="2">档案号</td>
<td>{{ zdjbxx.dah }}</td>
<td>档案号</td>
<td colspan="4">{{ zdjbxx.dah }}</td>
<td>地块代码</td>
<td>{{ zdjbxx.dkdm }}</td>
<td colspan="3">{{ zdjbxx.dkdm }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-东</td>
<td colspan="4">{{ zdjbxx.zdszd }}</td>
<td colspan="8">{{ zdjbxx.zdszd }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-南</td>
<td colspan="4">{{ zdjbxx.zdszn }}</td>
<td colspan="8">{{ zdjbxx.zdszn }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-西</td>
<td colspan="4">{{ zdjbxx.zdszx }}</td>
<td colspan="8">{{ zdjbxx.zdszx }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-北</td>
<td colspan="4">{{ zdjbxx.zdszb }}</td>
<td colspan="8">{{ zdjbxx.zdszb }}</td>
</tr>
<tr>
<td class="title2" height="96">备注</td>
<td colspan="5">{{ zdjbxx.bz }}</td>
<td class="title2" colspan="2" height="50">备注</td>
<td colspan="8">{{ zdjbxx.bz }}</td>
</tr>
<tr>
<td class="title2" height="96">附记</td>
<td colspan="5">{{ zdjbxx.fj }}</td>
<td class="title2" colspan="2" height="50">附记</td>
<td colspan="8">{{ zdjbxx.fj }}</td>
</tr>
<tr>
<td colspan="2">状态</td>
<td colspan="2">{{ zdjbxx.zt }}</td>
<td>区县代码</td>
<td>{{ zdjbxx.qxdm }}</td>
<td colspan="4">{{ zdjbxx.qxdm }}</td>
</tr>
<tr v-show="showGroup">
<td class="title2">变化情况</td>
<td colspan="5" class="bhqk">
<tr v-if="showGroup">
<td colspan="2" class="title3">变化情况</td>
<td colspan="4" class="bhqk">
<div class="box">
<table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
<tr v-for="(item, index) in bhqkColumns" :key="index">
<td class="bhqkTh">{{ item.label }}</td>
<!-- <td v-for="(item2, index2) in zdbhqks" :key="index2">
{{ item2[item.prop] }}
</td> -->
</tr>
</table>
</div>
......@@ -159,7 +156,7 @@
zdjbxx: {},
zdbhqks: [],
propsParam: this.$attrs,
showGroup: false,
showGroup: true,
bdclxList: ['', '宗地', '宗海', '自然幢', '多幢', '构筑物', '林权', '户']
};
},
......@@ -183,71 +180,11 @@
</script>
<style lang="scss" scoped>
@import "./tablestyle.scss";
.zdxx {
width: 100%;
height: 100%;
background-color: #f5f5f5;
padding: 5px;
}
.tablebox {
overflow-x: auto;
width: 100%;
height: 100%;
background: #fff;
border: 1px solid rgb(228, 228, 228);
text-align: center;
padding: 4px;
overflow-y: scroll;
.zdxxTable {
width: 100%;
color: #333;
td {
border: 1px solid rgb(228, 228, 228);
line-height: 30px;
padding: 0 4px;
}
.title {
line-height: 68px;
font-size: 20px;
}
.unit {
text-align: right;
}
.title2 {
writing-mode: vertical-lr;
letter-spacing: 6px;
}
.bhqk {
padding: 0;
.box {
width: 745px;
overflow: auto;
}
.test {
}
table {
.bhqkTh {
width: 110px;
line-height: 40px;
background-color: #f5f5f5;
border: 1px solid rgb(228, 228, 228);
font-weight: bold;
}
td {
width: 180px;
}
}
}
}
}
</style>
......