diff --git a/assets/peakCoalImages/bg.png b/assets/peakCoalImages/bg.png new file mode 100644 index 0000000..35abec0 Binary files /dev/null and b/assets/peakCoalImages/bg.png differ diff --git a/assets/peakCoalImages/left/left-content-bg.png b/assets/peakCoalImages/left/left-content-bg.png index cb2713e..7afe6b6 100644 Binary files a/assets/peakCoalImages/left/left-content-bg.png and b/assets/peakCoalImages/left/left-content-bg.png differ diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue index f284c54..7b79815 100644 --- a/pages/visual/PeakCoalView.vue +++ b/pages/visual/PeakCoalView.vue @@ -33,6 +33,7 @@
+
@@ -212,6 +213,7 @@ body, html, #__nuxt, #__layout { overflow: hidden; position: relative; user-select: none; + .point-none { pointer-events: none; } @@ -277,6 +279,7 @@ body, html, #__nuxt, #__layout { .bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px); padding: 300px 476px 100px 412px; perspective: 1000px; + z-index: 2; .left-data-panel { height: 100%; width: 100%; @@ -294,6 +297,7 @@ body, html, #__nuxt, #__layout { .bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px); padding: 300px 476px 100px 480px; perspective: 1000px; + z-index: 2; .right-data-panel { height: 100%; @@ -310,6 +314,19 @@ body, html, #__nuxt, #__layout { transform: translateX(-50%); width: 4383px; height: 2628px; + z-index: 1; + .container { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: -384px; + height: 3000px; + width: 9450px; + .bg("~/assets/peakCoalImages/bg.png"); + z-index: 2; + pointer-events: none; + + } .center-bg { position: absolute; width: 100%; @@ -318,7 +335,7 @@ body, html, #__nuxt, #__layout { top: 0; right: 0; bottom: 0; - z-index: 2; + z-index: 3; pointer-events: none; } }