布局

src/App.vue

@@ -24,5 +24,8 @@ body,
   -moz-osx-font-smoothing: grayscale;
   background: url("./assets/img/bg.png") no-repeat left top;
   background-size: cover;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 </style>

src/components/content.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- 下方内容区 -->
+  <div class="flex-1 content">
+    <!-- 左区 -->
+    <div class="content-side content-left">
+      <slot name="left"></slot>
+    </div>
+    <!-- 中间模型区域 -->
+    <div class="content-center">
+      <slot name="center"></slot>
+    </div>
+    <!-- 右区 -->
+    <div class="content-side content-right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  padding: 10rem 10rem 4rem;
+  display: flex;
+  position: relative;
+}
+.content-side {
+  width: 560rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 3;
+}
+.content-left {
+  background: url("../assets/img/arc-left.png") no-repeat right center;
+  background-size: 600rem 100%;
+  padding-right: 64rem;
+}
+.content-center {
+  flex: 1;
+  min-width: 700rem;
+  margin: 0 -63rem;
+  position: relative;
+  z-index: 1;
+}
+.content-right {
+  padding-left: 64rem;
+  background: url("../assets/img/arc-right.png") no-repeat left center;
+  background-size: 600rem 100%;
+}
+</style>

src/components/footer-bar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="wrap">
+    <div class="btn-wrap">
+      <div class="btn active">晋恒通园区</div>
+      <div class="btn">现海园区</div>
+      <div class="btn">应急仓库</div>
+      <div class="mr-0 btn">5号仓库</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wrap {
+  z-index: 4;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate3d(-50%, 0, 0);
+  width: 1200rem;
+  height: 530rem;
+  background: url("../assets/img/footer-bg.png") no-repeat center bottom;
+  background-size: contain;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 18rem;
+}
+.btn-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 500rem;
+  position: relative;
+  z-index: 23;
+}
+.btn {
+  padding: 6rem 16rem;
+  color: #fff;
+  font-size: 18rem;
+  margin-right: 10rem;
+  font-weight: 600;
+}
+.btn.active {
+  padding: 6rem 16rem;
+  background: #040a35;
+  border: 2rem solid #21e0ff;
+  border-radius: 13rem;
+  color: #fff;
+  font-size: 18rem;
+  margin-right: 10rem;
+  box-shadow: 0 0 20rem rgba(33, 224, 255, 0.7) inset,
+    0 0 20rem rgba(255, 255, 255, 0.13);
+}
+</style>

src/components/side-item.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex flex-col items-center flex-1 pb-24">
+    <div class="head">{{ title }}</div>
+    <div class="flex-1 bg-yellow-50 opacity-10" style="width: 100%">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: { title: { type: String, default: "" } },
+});
+</script>
+
+<style scoped>
+.head {
+  width: 390rem;
+  height: 40rem;
+  background: url("../assets/img/chart-head.png") no-repeat center top;
+  background-size: contain;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18rem;
+}
+</style>

src/components/top-bar.vue

@@ -51,6 +51,7 @@ export default defineComponent({
   background: url("../assets/img/bg-top.png") no-repeat left top;
   background-size: 100%;
   position: relative;
+  z-index: 4;
   color: #fff;
 }
 .top-wrap:after {
@@ -58,7 +59,7 @@ export default defineComponent({
   display: block;
   position: absolute;
   left: 0;
-  bottom: 0;
+  bottom: 4rem;
   transform: translate3d(0, 100%, 0);
   height: 10rem;
   width: 100%;

src/views/repo-5.vue

@@ -1,13 +1,55 @@
 <template>
-  <top-bar></top-bar>
+  <!-- 顶栏 -->
+  <top-bar />
+
+  <container>
+    <template v-slot:left>
+      <side-item title="大事记"></side-item>
+      <side-item title="仪表盘"></side-item>
+      <side-item title="仓库吞吐量对比图"></side-item>
+    </template>
+
+    <template v-slot:center>
+      <iframe
+        src="https://www.tall.wiki/wl/0"
+        frameborder="0"
+        class="block frame"
+      ></iframe>
+    </template>
+
+    <template v-slot:right>
+      <side-item title="货物吞吐量曲线"></side-item>
+      <side-item title="进出车次统计"></side-item>
+      <side-item title="园区财务统计表"></side-item>
+    </template>
+  </container>
+
+  <!-- 底部区域 -->
+  <footer-bar></footer-bar>
 </template>
 
 <script lang="ts">
-import TopBar from "comp/top-bar.vue";
 import { defineComponent } from "vue";
+import TopBar from "comp/top-bar.vue";
+import Container from "comp/content.vue";
+import SideItem from "comp/side-item.vue";
+import FooterBar from "comp/footer-bar.vue";
 
 export default defineComponent({
-  components: { TopBar },
+  components: { TopBar, Container, SideItem, FooterBar },
   setup() {},
 });
 </script>
+
+<style scoped>
+.frame {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+</style>