Newer
Older
urbanLifeline_YanAn / src / views / oneMap / ConstructionEvaluation / CentralSection.vue
@鲁yixuan 鲁yixuan on 14 Oct 3 KB updata
  1. <template>
  2. <div class="ListBoxHeader">
  3. <div class="ListBoxHeader_font">管理绩效</div>
  4. </div>
  5. <div class="centerSuggest">
  6. <div class="flex">
  7. <div class="part">
  8. <div class="flex flex-align-center">
  9. <div class="left">
  10. <div>及时性</div>
  11. <div style="font-weight: bold">(2023)</div>
  12. </div>
  13. <div class="right flex flex-align-center">
  14. <div class="rightO">
  15. <div>拨付项目</div>
  16. <div class="underside">39</div>
  17. </div>
  18. <div class="rightT">
  19. <div>拨付资金</div>
  20. <div class="underside">2亿元</div>
  21. </div>
  22. <div class="rightS">
  23. <div>比例</div>
  24. <div class="underside">90.19%</div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="part">
  30. <div class="flex flex-align-center">
  31. <div class="left">
  32. <div>协同性</div>
  33. <div style="font-weight: bold">(2023)</div>
  34. </div>
  35. <div class="right flex flex-align-center">
  36. <div class="rightO">
  37. <div>海绵资金</div>
  38. <div class="underside">2.498亿元</div>
  39. </div>
  40. <div class="rightT">
  41. <div>央补资金</div>
  42. <div class="underside">2亿元</div>
  43. </div>
  44. <div class="rightS">
  45. <div>地方财政</div>
  46. <div class="underside">90.19%</div>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. <div class="part">
  52. <div class="flex flex-align-center">
  53. <div class="left">
  54. <div>有效性</div>
  55. <div style="font-weight: bold">(2023)</div>
  56. </div>
  57. <div class="right">
  58. <div class="flex flex-justcontent-spacearound">
  59. <div class="underside">39个</div>
  60. <div>海绵项目专款专用</div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68.  
  69. <style lang="scss" scoped>
  70. .ListBoxHeader {
  71. height: 44px;
  72. line-height: 50px;
  73. width: 98%;
  74. background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat;
  75. background-size: 60% 100%;
  76. display: flex;
  77. align-items: center;
  78. justify-content: space-between;
  79.  
  80. .ListBoxHeader_font {
  81. font-family: PangMenZhengDao;
  82. font-weight: 400;
  83. font-size: 23px;
  84. color: #ebfeff;
  85. padding-left: 34px;
  86. }
  87. }
  88. .centerSuggest {
  89. height: 100%;
  90. margin-top: 10px;
  91. // background: red;
  92. .part {
  93. font-family: Source Han Sans CN;
  94. font-weight: 400;
  95. font-size: 14px;
  96. color: #ffffff;
  97. width: 31.8%;
  98. margin-left: 10px;
  99. text-align: center;
  100. background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%);
  101. border-radius: 2px;
  102. border: 1px solid #74dde1;
  103. box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  104. padding: 6px 0px;
  105. line-height: 24px;
  106. .left {
  107. border-right: 1px solid #74dde1;
  108. width: 25%;
  109. }
  110. .right {
  111. margin-left: 5px;
  112. width: 75%;
  113.  
  114. .rightO {
  115. width: 33%;
  116. }
  117. .rightT {
  118. width: 32%;
  119. margin-left: 5px;
  120. }
  121. .rightS {
  122. width: 31%;
  123. margin-left: 3px;
  124. }
  125. .underside {
  126. font-family: Source Han Sans CN;
  127. font-weight: bold;
  128. font-size: 14px;
  129. color: #e8b65f;
  130. }
  131. }
  132. }
  133. }
  134. </style>