From b53df1bd5214caacf0c3c46e28e2e2f2e9f4d504 Mon Sep 17 00:00:00 2001
From: whychw <858544502@qq.com>
Date: 星期四, 07 一月 2021 10:54:38 +0800
Subject: [PATCH] UA 添加一系列转场特效 对部分背景图作css实现
---
src/pages/home/UPSStateMonitor.vue | 31 +++++++++----------------------
1 files changed, 9 insertions(+), 22 deletions(-)
diff --git a/src/pages/home/UPSStateMonitor.vue b/src/pages/home/UPSStateMonitor.vue
index 27a67ad..a4905a4 100644
--- a/src/pages/home/UPSStateMonitor.vue
+++ b/src/pages/home/UPSStateMonitor.vue
@@ -1,5 +1,5 @@
<template>
- <div class="contentBox">
+ <div class="contentBox page-container">
<div class="diagram-content">
<div class="diagram-stc" ref="static"></div>
<div class="diagram-flush" ref="flush"></div>
@@ -90,6 +90,7 @@
import GradientsRing from '@/components/smallModule/gradientsRing.vue';
import MarkProgress from '@/components/smallModule/markProgress.vue';
let diagram;
+ let handlerResiz;
export default {
components: {
DiagramPanel,
@@ -152,32 +153,18 @@
mounted() {
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
this.setPanelPos();
- window.addEventListener('resize', () => {
+ handlerResiz = () => {
this.setPanelPos();
- });
+ }
+ window.addEventListener('resize', handlerResiz);
},
+ destroyed () {
+ window.removeEventListener('resize', handlerResiz);
+ }
}
</script>
<style scoped>
- .diagram-content {
- position: relative;
- }
-
- .diagram-stc {
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
-
- .diagram-flush {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 9;
- overflow: hidden;
- }
+
.outputPanel.diagram-panel,
.inputPanel.diagram-panel {
--
Gitblit v1.9.1