yanghongwei
/
lg_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

【add】中间地图完成

This commit is contained in:
DESKTOP-VMMLSOQ\wangzg 2024-02-27 23:03:44 +08:00
parent 264617edf2
commit 03c1301cf1
3 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/peakCoalImages/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

BIN
assets/peakCoalImages/left/left-content-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 MiB

After

Width:  |  Height:  |  Size: 3.7 MiB

19
pages/visual/PeakCoalView.vue
View File

@ -33,6 +33,7 @@
<!-- 中间内容--> <!-- 中间内容-->
<div class="center-content"> <div class="center-content">
<Map /> <Map />
<div class="container"></div>
<img class="center-bg" :src="centerBg" /> <img class="center-bg" :src="centerBg" />
</div> </div>
<!-- 右侧内容--> <!-- 右侧内容-->
@ -212,6 +213,7 @@ body, html, #__nuxt, #__layout {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
user-select: none; user-select: none;
.point-none { .point-none {
pointer-events: none; pointer-events: none;
} }
@ -277,6 +279,7 @@ body, html, #__nuxt, #__layout {
.bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px); .bg("~/assets/peakCoalImages/left/left-content-bg.png", center, 60px);
padding: 300px 476px 100px 412px; padding: 300px 476px 100px 412px;
perspective: 1000px; perspective: 1000px;
z-index: 2;
.left-data-panel { .left-data-panel {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -294,6 +297,7 @@ body, html, #__nuxt, #__layout {
.bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px); .bg("~/assets/peakCoalImages/right/right-content-bg.png", center, 60px);
padding: 300px 476px 100px 480px; padding: 300px 476px 100px 480px;
perspective: 1000px; perspective: 1000px;
z-index: 2;
.right-data-panel { .right-data-panel {
height: 100%; height: 100%;
@ -310,6 +314,19 @@ body, html, #__nuxt, #__layout {
transform: translateX(-50%); transform: translateX(-50%);
width: 4383px; width: 4383px;
height: 2628px; 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 { .center-bg {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -318,7 +335,7 @@ body, html, #__nuxt, #__layout {
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 3;
pointer-events: none; pointer-events: none;
} }
} }