Browse Source

12345的样式更改

luckysheet_xiaowang
是小王呀\24601 6 months ago
parent
commit
05fc3d3294
  1. 42
      src/views/modules/shequzhili/analysis/css/index.scss
  2. 127
      src/views/modules/shequzhili/analysis/index.vue

42
src/views/modules/shequzhili/analysis/css/index.scss

@ -93,7 +93,8 @@ border-left: #777 solid 1px;
margin-left: 20px; margin-left: 20px;
margin-bottom: 10px; margin-bottom: 10px;
.item { .item {
width: 200px; width: 188px;
height: 280px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f3f9ff; background: #f3f9ff;
@ -110,27 +111,34 @@ border-left: #777 solid 1px;
padding: 8px; padding: 8px;
flex-direction: column; flex-direction: column;
>img { >img {
width: 66px; margin-top: 10px;
height: 66px; width: 50px;
height: 50px;
margin-bottom: 10px;
} }
.row_left { .row_left {
margin-top: 8px; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 18px;
color: #333333; color: #333333;
text-align: center; line-height: 32px;
margin-left: 5px;
white-space: nowrap;
font-size: 14px;
} }
.item_content { .item_content {
margin-left: 5px; margin-left: 5px;
width: 100%; width: 100%;
text-align: left; text-align: center;
display: flex; font-family: PingFang SC;
flex-direction: column; font-weight: 500;
justify-content: flex-start; font-size: 14px;
color: #aaadb1;
line-height: 32px;
.img_describe {
width: 10px;
height: 10px;
margin-left: 3px;
margin-bottom: 2px;
}
.item_count { .item_count {
font-size: 28px; font-size: 28px;
font-family: PingFang SC; font-family: PingFang SC;
@ -182,8 +190,7 @@ border-left: #777 solid 1px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 23px; height: 23px;
margin-top: 10px; margin-top: 5px;
.row_left { .row_left {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -271,6 +278,7 @@ border-left: #777 solid 1px;
position: relative; position: relative;
width: 280px; width: 280px;
img { img {
width: 100%; width: 100%;
} }

127
src/views/modules/shequzhili/analysis/index.vue

@ -23,7 +23,6 @@
<h1 style="font-size: 24px; font-weight: bold;"> 镇街办件情况总览 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 镇街办件情况总览 </h1>
</div> </div>
<div class="div_room"> <div class="div_room">
<div class="item2"> <div class="item2">
<img src="./img/responsivity.png" /> <img src="./img/responsivity.png" />
<div class="item2_div"> <div class="item2_div">
@ -39,10 +38,9 @@
<div class="item2_div"> <div class="item2_div">
<span class="div_span1">98%</span> <span class="div_span1">98%</span>
<div style="display: flex; align-items: center;justify-content:center;"> <div style="display: flex; align-items: center;justify-content:center;">
<span class="div_span2">按时办结率</span> <span class="div_span2">办结率</span>
<img style="width: 10px;height: 10px;margin-top: 10px;margin-left: 5px;" src="./img/describe.png"> <img style="width: 10px;height: 10px;margin-top: 10px;margin-left: 5px;" src="./img/describe.png">
</div> </div>
</div> </div>
</div> </div>
<div class="item2"> <div class="item2">
@ -68,90 +66,87 @@
</div> </div>
<div class="div_room"> <div class="div_room">
<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;"> <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<div>派件/派件</div> <div>派件/派件</div>
<div class="item" @click="onEventNum()"> <div class="item" @click="onEventNum()">
<div class="item_category"> <div class="item_category">
<img src="@/assets/images/category/perpon.png" alt /> <img src="./img/eventSumNum.png" alt />
<div class="row_left">{{ analysisList.total}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="row_left">收件数<img style="width: 10px;height: 10px;" src="./img/describe.png"></div> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{ analysisList.total}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="row_left">收件数<img style="width: 10px;height: 10px;" src="./img/describe.png"></div> <div class="item_content">派件数<img class="img_describe" src="./img/describe1.png"></div>
</div> </div>
</div> </div>
</div> </div>
<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;"> <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<div>派件/派件</div> <div>办理</div>
<div class="item"> <div class="item" @click="onEventNum()" style="background-color: #f2fffb;">
<div class="item_category" @click="onEventNum('resolve')" style="cursor: pointer;"> <div class="item_category">
<img src="./img//eventNum.png" /> <img src="./img/perp.png" alt />
<div class="row_left">{{analysisList.resolveTotal}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="row_left">已办结事件数</div> <div class="item_content">已联系当事人(初访)件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{analysisList.resolveTotal}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="row_left">已办结事件数</div> <div class="item_content">办理中件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{analysisList.resolveTotal}}</div>
<div class="row_left">已办结事件数</div> </div>
</div> </div>
</div> </div>
</div>
<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;"> <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<div>派件/派件</div> <div>办结</div>
<div class="item" @click="onEventNum('1')"> <div class="item" @click="onEventNum()" style="background-color: #f4fdff; width: 280px;">
<div class="item_category"> <div class="item_category">
<img src="./img/perp.png" alt /> <img src="@/assets/images/category/perpon.png" alt />
<div class="item_content"> <div style=" display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; ">
<div class="item_row1"> <div class="flex">
<div class="row_left">{{analysisList.illegalConnectTotal}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
</div>
<div class="flex">
<div class="row_left">{{ analysisList.total}}</div>
<div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
</div>
<div class="flex">
<div class="row_left">{{ analysisList.total}}</div>
<div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
</div>
<div class="flex">
<div class="row_left">{{ analysisList.total}}</div>
<div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
</div>
</div>
<div class="text1">{{analysisList.illegalConnectRate}}%</div>
</div>
<div class="item_row2">
<div class="row_left">联系当事人超期事件数</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;"> <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<div>派件/派件</div> <div>退件/不合规申请件</div>
<div class="item" @click="onEventNum('2')"> <div class="item" @click="onEventNum()" style="background-color:#fffdf0;">
<div class="item_category"> <div class="item_category">
<img src="@/assets/images/category/perpon.png" alt /> <img src="@/assets/images/category/perpon.png" alt />
<div class="item_content"> <div class="row_left">{{ analysisList.total}}</div>
<div class="item_row1"> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{analysisList.illegalResolveTotal}}</div> <div class="row_left">{{ analysisList.total}}</div>
<div class="text2">{{analysisList.illegalResolveRate}}%</div> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{ analysisList.total}}</div>
</div> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="item_row2">
<div class="row_left">办理超期事件数</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="display: flex; justify-content: center; flex-direction: column; align-items: center;"> <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<div>派件/</div> <div>退件/不合规申请</div>
<div class="item" @click="onEventNum('3')"> <div class="item" @click="onEventNum('3')">
<div class="item_category"> <div class="item_category">
<img src="./img/acttive.png" alt /> <img src="./img/acttive.png" alt />
<div class="item_content"> <div class="row_left">{{ analysisList.total }}</div>
<div class="item_row1"> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
<div class="row_left">{{ analysisList.tackleWarehouseTotal }}</div> <div class="row_left">{{ analysisList.total }}</div>
<div class="text2">{{ analysisList.tackleWarehouseRate }}%</div> <div class="item_content">收件数<img class="img_describe" src="./img/describe1.png"></div>
</div>
<div class="item_row2">
<div class="row_left">攻坚事件数</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div style="display: flex;justify-content: space-between;flex-direction:row;"> <div style="display: flex;justify-content: space-between;flex-direction:row;">
<h1 style="font-size: 24px; font-weight: bold;"> 事件类型统计 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 事件类型统计 </h1>
@ -1354,7 +1349,15 @@ thead {
width: 100px; /* 调整箭头容器的宽度 */ width: 100px; /* 调整箭头容器的宽度 */
height: 100px; /* 调整箭头容器的高度 */ height: 100px; /* 调整箭头容器的高度 */
} }
.flex-x{
}
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.arrow { .arrow {
width: 0; width: 0;
height: 0; height: 0;

Loading…
Cancel
Save