Newer
Older
urbanLifeline_YanAn / src / views / oneMap / FloodStuationReview / xqhgLeftBox.vue
@鲁yixuan 鲁yixuan on 5 Oct 3 KB updata
  1. <template>
  2. <!--调度回顾 -->
  3. <div class="Scheduling">
  4. <div class="ListBoxHeader">
  5. <div class="ListBoxHeader_font">调度回顾</div>
  6. </div>
  7. <div class="topDispatch">
  8. <div class="personnel flex">
  9. <div class="icon"></div>
  10. <div class="text">人员调度</div>
  11. </div>
  12. <div class="ScheduEcharts">图例</div>
  13. </div>
  14. </div>
  15. <!--车辆调度 -->
  16. <div class="VehiclDispatch">
  17. <div class="topVehicl flex">
  18. <div class="icon"></div>
  19. <div class="text">车辆调度</div>
  20. </div>
  21. <div class="VehiclEcharts">图例</div>
  22. </div>
  23. <!-- 物资调度 -->
  24. <div class="MaterialScheduling">
  25. <div class="topMaterial flex">
  26. <div class="icon"></div>
  27. <div class="text">物资调度</div>
  28. </div>
  29. <div class="MaterialEcharts">图例</div>
  30. </div>
  31. </template>
  32.  
  33. <script setup name="ZHPS">
  34. import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
  35. </script>
  36.  
  37. <style lang="scss" scoped>
  38. .Scheduling {
  39. width: 450px;
  40. height: 37%;
  41. .topDispatch {
  42. margin: 5px auto;
  43. width: 445px;
  44. height: calc(100% - 50px);
  45. .personnel {
  46. height: 26px;
  47. .icon {
  48. width: 25px;
  49. height: 25px;
  50. background: url('@/assets/newImgs/xtb_img.png') no-repeat;
  51. }
  52. .text {
  53. font-family: Source Han Sans CN;
  54. font-weight: bold;
  55. font-size: 14px;
  56. color: #ebfeff;
  57. line-height: 25px;
  58. padding-left: 5px;
  59. box-shadow: inset 0px -7px 10px -5px #47eef38a;
  60. }
  61. }
  62. .ScheduEcharts {
  63. margin: 5px auto;
  64. width: 445px;
  65. height: calc(100% - 35px);
  66. }
  67. }
  68. }
  69. .VehiclDispatch {
  70. margin-top: 5px;
  71. width: 450px;
  72. height: 30%;
  73. // background: yellowgreen;
  74. .topVehicl {
  75. height: 26px;
  76. // background: red;
  77. .icon {
  78. width: 25px;
  79. height: 25px;
  80. background: url('@/assets/newImgs/xtb_img.png') no-repeat;
  81. }
  82. .text {
  83. font-family: Source Han Sans CN;
  84. font-weight: bold;
  85. font-size: 14px;
  86. color: #ebfeff;
  87. line-height: 25px;
  88. padding-left: 5px;
  89. box-shadow: inset 0px -7px 10px -5px #47eef38a;
  90. }
  91. }
  92. .VehiclEcharts {
  93. margin: 5px auto;
  94. width: 445px;
  95. height: calc(100% - 35px);
  96. // background: red;
  97. }
  98. }
  99. .MaterialScheduling {
  100. margin-top: 5px;
  101. width: 450px;
  102. height: 30%;
  103. // background: rgb(233, 201, 24);
  104. .topMaterial {
  105. height: 26px;
  106. // background: red;
  107. .icon {
  108. width: 25px;
  109. height: 25px;
  110. background: url('@/assets/newImgs/xtb_img.png') no-repeat;
  111. }
  112. .text {
  113. font-family: Source Han Sans CN;
  114. font-weight: bold;
  115. font-size: 14px;
  116. color: #ebfeff;
  117. line-height: 25px;
  118. padding-left: 5px;
  119. box-shadow: inset 0px -7px 10px -5px #47eef38a;
  120. }
  121. }
  122. .MaterialEcharts {
  123. margin: 5px auto;
  124. width: 445px;
  125. height: calc(100% - 35px);
  126. // background: red;
  127. }
  128. }
  129.  
  130. .ListBoxHeader {
  131. height: 44px;
  132. line-height: 50px;
  133. width: 98%;
  134. background: url('@/assets/newImgs/partBg.png') no-repeat;
  135. background-size: 100% 100%;
  136. display: flex;
  137. align-items: center;
  138. justify-content: space-between;
  139. margin: 7px 0px 0px 8px;
  140. .ListBoxHeader_font {
  141. font-family: PangMenZhengDao;
  142. font-weight: 400;
  143. font-size: 23px;
  144. color: #ebfeff;
  145. padding-left: 34px;
  146. }
  147. }
  148. </style>