- <template>
- <div :class="['zksqImg', ifExpand ? 'leftZk' : 'leftSq']" @click="changeifExpand" title="展开收起"></div>
- <div :class="['tabRightContent', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
- <tabRightPS></tabRightPS>
- </div>
- </template>
- <script setup name="tabRightContent">
- import bus from '@/bus';
- import tabRightPS from './tabRightPS.vue'; //排水设施
- const ifExpand = ref(true);
-
- const changeifExpand = val => {
- ifExpand.value = !ifExpand.value;
- bus.emit('tabconten2vlaue', ifExpand.value);
- };
-
- onMounted(() => {
- bus.on('ifexpandValue', e => {
- ifExpand.value = e;
- });
- }),
- onBeforeUnmount(() => {
- bus.off('ifexpandValue');
- });
- </script>
- <style lang="scss" scoped>
- .zksqImg {
- border-radius: 10px 10px 0px 0px;
- width: 13px;
- height: 147px;
- background: url('@/assets/newImgs/down.png');
- background-size: 100% 100%;
- transform: rotate(180deg);
- position: absolute;
- top: 340px;
- z-index: 115;
- cursor: pointer;
- transition: 0.5s ease-in-out;
- }
- .leftZk {
- right: 275px;
- }
- .leftSq {
- right: 2px;
- }
- .tabRightContent {
- width: 270px;
- height: 750px;
- top: 8%;
- right: 5px;
- position: absolute;
- z-index: 115;
- }
- .echartDatas {
- width: 100% !important;
- height: 380px !important;
- margin: 10px auto;
- }
- .echartDatas1 {
- width: 100% !important;
- height: 180px !important;
- margin: 10px auto;
- }
- .supervisePopupPKs {
- position: fixed;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- animation: slideUp 1s ease-in-out forwards;
- .title {
- display: flex;
- justify-content: space-between;
- }
- .closePopup {
- display: flex;
- }
- .screenfull {
- margin-right: 20px;
- }
- .allContent {
- display: flex;
- flex-direction: column;
- }
- }
- @keyframes slideUp {
- from {
- transform: translateY(200%);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
- .supervisePopupPK2 {
- top: 75%;
- right: 0%;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- width: 100%;
- height: 230px;
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- }
- .supervisePopupPK3 {
- position: fixed;
- top: 2%;
- right: 0%;
- -webkit-transform: translate(-112%, 0%);
- -ms-transform: translate(-112%, 0%);
- transform: translate(-112%, 0%);
- width: 100%;
- height: 100vh;
- background: #021534;
- border: 0.00521rem solid #114f89;
- z-index: 2000;
- padding: 10px;
- animation: slideUp 1s ease-in-out forwards;
- }
- #pop-up {
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 590px;
- height: 560px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
-
- .weather-head {
- position: relative;
- height: 36px;
- background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
-
- .head-bg {
- position: absolute;
- width: 290px;
- line-height: 34px;
- height: 36px;
- left: 0;
- bottom: 0;
- background-size: 100% 100%;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #ffffff;
- padding-left: 20px;
- }
-
- .Bubbleframe-bg {
- position: absolute;
- width: 226px;
- line-height: 36px;
- height: 36px;
- left: 0;
- bottom: 0;
- background-size: 100% 100%;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #ffffff;
- padding-left: 20px;
- }
-
- .weather-icon {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #1096db;
- }
- }
-
- .weather-body {
- padding: 11px;
- height: calc(100% - 36px);
- background: #021534;
- border: 1px solid #114f89;
- border-top: 1px solid #1096db;
- }
- }
- .weather-icon {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- color: #1096db;
- font-size: 24px;
- }
- </style>