【图斑调整】外层UI修改
Zhufu
parent
2d9cdddbca
commit
da6074f083
|
|
@ -41,12 +41,49 @@
|
|||
@click="emits('showInfo', true, item)"
|
||||
v-if="dataList.length > 0"
|
||||
>
|
||||
<div class="name-div">
|
||||
<div class="name-div">
|
||||
<div class="item-mark"></div>
|
||||
<div class="item-label">{{ item.areaname }}</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label progress-color">进度</div>
|
||||
<div class="progress-data" style="width:97px">
|
||||
<span style="color: #086DEC;">{{item.verificatedtask}}</span>/{{item.totaltask}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label extended-color">超期</div>
|
||||
<div class="progress-data" style="width:50px">
|
||||
<span style="color: #D03542">{{item.overduetask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-div">
|
||||
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
|
||||
<div class="progress-data" style="width:50px">
|
||||
<span style="color: #EC7908;">{{item.verifytask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-div">
|
||||
<span>{{ item.count }}</span>
|
||||
<div class="info-data-div">
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">合法</div>
|
||||
<div class="info-data-data">{{item.legalcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">其他</div>
|
||||
<div class="info-data-data">{{item.ilegalcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">非粮化</div>
|
||||
<div class="info-data-data">{{item.nonfoodcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">复耕</div>
|
||||
<div class="info-data-data">{{item.rehabilitationcase}}</div>
|
||||
</div>
|
||||
<div class="info-data-item">
|
||||
<div class="info-data-label">补手续</div>
|
||||
<div class="info-data-data">{{item.makeupcase}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
|
|
@ -58,10 +95,10 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
||||
import { batchOptions, yearOptions } from '@/views/demo/tiankongdi/curbspotcity/util.ts';
|
||||
import { batchOptions, yearOptions,patchSourceOptions } from '@/views/demo/tiankongdi/curbspotcity/util.ts';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps(['year', 'batch', 'dataList']);
|
||||
const props = defineProps(['year', 'batch', 'dataList','patchSource']);
|
||||
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
||||
</script>
|
||||
|
|
@ -73,23 +110,27 @@
|
|||
.screen-row {
|
||||
display: flex;
|
||||
.screen-item {
|
||||
flex: 1;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
color: #000000;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
.screen-item-label {
|
||||
width: 55px;
|
||||
width: 56px;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-list {
|
||||
height: calc(100% - 52px);
|
||||
background: @component-background;
|
||||
margin-top: 10px;
|
||||
height: calc(100% - 62px);
|
||||
// background: darkgoldenrod;
|
||||
// background: @component-background;
|
||||
margin-top: 10px;
|
||||
padding: 0px 10px;
|
||||
.data-title {
|
||||
height: 40px;
|
||||
background: #bab9b7;
|
||||
|
|
@ -102,17 +143,58 @@
|
|||
}
|
||||
.show-data-list-content {
|
||||
.data-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
.name-div {
|
||||
display: flex;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ececec;
|
||||
cursor: pointer;
|
||||
.name-div {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
padding: 10px 0px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
.info-data-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.info-data-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #EDEDED;
|
||||
.info-data-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #959494;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
flex: 1;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.info-data-data{
|
||||
font-family: HarmonyOS Sans;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
.info-data-item:nth-last-child(1){
|
||||
border-right: 0px;
|
||||
}
|
||||
}
|
||||
.data-div {
|
||||
font-weight: 500;
|
||||
|
|
@ -126,17 +208,52 @@
|
|||
margin-right: 7px;
|
||||
}
|
||||
.item-label {
|
||||
width: 100px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.progress-div{
|
||||
display:flex;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-right: 17px;
|
||||
.progress-label{
|
||||
font-family: Alibaba PuHuiTi;
|
||||
color: #FFFFFF;
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
border-radius: 13px 0px 0px 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.progress-data{
|
||||
background: #EFEFEF;
|
||||
height: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0px 0px 11px 0px;
|
||||
}
|
||||
.progress-color{
|
||||
background: #086DEC;
|
||||
}
|
||||
.extended-color{
|
||||
background: #D03542
|
||||
}
|
||||
.reviewed-color{
|
||||
background: #EC7908
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-item:hover {
|
||||
background-color: rgba(8, 109, 236, 0.08);
|
||||
}
|
||||
.data-item:nth-child(2n) {
|
||||
background: #ececec;
|
||||
}
|
||||
// .data-item:nth-child(2n) {
|
||||
// background: #ececec;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.no-data {
|
||||
|
|
|
|||
Loading…
Reference in New Issue