Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabContent2.vue
@zhangdeliang zhangdeliang on 23 May 4 KB 初始化项目
  1. <template>
  2. <div :class="['zksqImg', ifExpand ? 'leftZk' : 'leftSq']" @click="changeifExpand" title="展开收起"></div>
  3. <div :class="['tabRightContent', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  4. <tabRightPS></tabRightPS>
  5. </div>
  6. </template>
  7. <script setup name="tabRightContent">
  8. import bus from '@/bus';
  9. import tabRightPS from './tabRightPS.vue'; //排水设施
  10. const ifExpand = ref(true);
  11.  
  12. const changeifExpand = val => {
  13. ifExpand.value = !ifExpand.value;
  14. bus.emit('tabconten2vlaue', ifExpand.value);
  15. };
  16.  
  17. onMounted(() => {
  18. bus.on('ifexpandValue', e => {
  19. ifExpand.value = e;
  20. });
  21. }),
  22. onBeforeUnmount(() => {
  23. bus.off('ifexpandValue');
  24. });
  25. </script>
  26. <style lang="scss" scoped>
  27. .zksqImg {
  28. border-radius: 10px 10px 0px 0px;
  29. width: 13px;
  30. height: 147px;
  31. background: url('@/assets/newImgs/down.png');
  32. background-size: 100% 100%;
  33. transform: rotate(180deg);
  34. position: absolute;
  35. top: 340px;
  36. z-index: 115;
  37. cursor: pointer;
  38. transition: 0.5s ease-in-out;
  39. }
  40. .leftZk {
  41. right: 275px;
  42. }
  43. .leftSq {
  44. right: 2px;
  45. }
  46. .tabRightContent {
  47. width: 270px;
  48. height: 750px;
  49. top: 8%;
  50. right: 5px;
  51. position: absolute;
  52. z-index: 115;
  53. }
  54. .echartDatas {
  55. width: 100% !important;
  56. height: 380px !important;
  57. margin: 10px auto;
  58. }
  59. .echartDatas1 {
  60. width: 100% !important;
  61. height: 180px !important;
  62. margin: 10px auto;
  63. }
  64. .supervisePopupPKs {
  65. position: fixed;
  66. -webkit-transform: translate(-112%, 0%);
  67. -ms-transform: translate(-112%, 0%);
  68. transform: translate(-112%, 0%);
  69. background: #021534;
  70. border: 0.00521rem solid #114f89;
  71. z-index: 2000;
  72. padding: 10px;
  73. animation: slideUp 1s ease-in-out forwards;
  74. .title {
  75. display: flex;
  76. justify-content: space-between;
  77. }
  78. .closePopup {
  79. display: flex;
  80. }
  81. .screenfull {
  82. margin-right: 20px;
  83. }
  84. .allContent {
  85. display: flex;
  86. flex-direction: column;
  87. }
  88. }
  89. @keyframes slideUp {
  90. from {
  91. transform: translateY(200%);
  92. opacity: 0;
  93. }
  94. to {
  95. transform: translateY(0);
  96. opacity: 1;
  97. }
  98. }
  99. .supervisePopupPK2 {
  100. top: 75%;
  101. right: 0%;
  102. -webkit-transform: translate(-112%, 0%);
  103. -ms-transform: translate(-112%, 0%);
  104. transform: translate(-112%, 0%);
  105. width: 100%;
  106. height: 230px;
  107. background: #021534;
  108. border: 0.00521rem solid #114f89;
  109. z-index: 2000;
  110. padding: 10px;
  111. }
  112. .supervisePopupPK3 {
  113. position: fixed;
  114. top: 2%;
  115. right: 0%;
  116. -webkit-transform: translate(-112%, 0%);
  117. -ms-transform: translate(-112%, 0%);
  118. transform: translate(-112%, 0%);
  119. width: 100%;
  120. height: 100vh;
  121. background: #021534;
  122. border: 0.00521rem solid #114f89;
  123. z-index: 2000;
  124. padding: 10px;
  125. animation: slideUp 1s ease-in-out forwards;
  126. }
  127. #pop-up {
  128. position: fixed;
  129. left: 50%;
  130. top: 50%;
  131. transform: translate(-50%, -50%);
  132. width: 590px;
  133. height: 560px;
  134. background: #021534;
  135. border: 1px solid #114f89;
  136. z-index: 2000;
  137.  
  138. .weather-head {
  139. position: relative;
  140. height: 36px;
  141. background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
  142.  
  143. .head-bg {
  144. position: absolute;
  145. width: 290px;
  146. line-height: 34px;
  147. height: 36px;
  148. left: 0;
  149. bottom: 0;
  150. background-size: 100% 100%;
  151. font-size: 18px;
  152. font-family: Source Han Sans CN;
  153. font-weight: 550;
  154. color: #ffffff;
  155. padding-left: 20px;
  156. }
  157.  
  158. .Bubbleframe-bg {
  159. position: absolute;
  160. width: 226px;
  161. line-height: 36px;
  162. height: 36px;
  163. left: 0;
  164. bottom: 0;
  165. background-size: 100% 100%;
  166. font-size: 18px;
  167. font-family: Source Han Sans CN;
  168. font-weight: 550;
  169. color: #ffffff;
  170. padding-left: 20px;
  171. }
  172.  
  173. .weather-icon {
  174. cursor: pointer;
  175. position: absolute;
  176. right: 12px;
  177. top: 50%;
  178. transform: translateY(-50%);
  179. color: #1096db;
  180. }
  181. }
  182.  
  183. .weather-body {
  184. padding: 11px;
  185. height: calc(100% - 36px);
  186. background: #021534;
  187. border: 1px solid #114f89;
  188. border-top: 1px solid #1096db;
  189. }
  190. }
  191. .weather-icon {
  192. cursor: pointer;
  193. position: absolute;
  194. right: 12px;
  195. top: 50%;
  196. transform: translateY(-50%);
  197. color: #1096db;
  198. font-size: 24px;
  199. }
  200. </style>