1

src/views/ueScreen/index.vue

@@ -2,18 +2,41 @@
   <div class="ueScreen">
     <Header />
   </div>
+  <div class="right">
+    <Right />
+  </div>
 </template>
 
 <script setup lang="ts">
 import Header from './components/header.vue';
+import Right from './components/right.vue';
 </script>
 
 <style scoped lang="scss">
-@import '@/views/ueScreen/gis.scss';
+$vm_base: 1920;
+$vh_base: 1080;
+// 计算vw
+@function vw($px) {
+  @return calc(($px / $vm_base) * 100vw);
+}
+
+// 计算vh
+@function vh($px) {
+  @return calc(($px / $vh_base) * 100vh);
+}
+
 .ueScreen {
   width: 100vw;
   height: 100vh;
   background-color: rgba(4, 7, 17, 0.8);
   color: #fff;
 }
+
+.right {
+  position: absolute;
+  top: vh(60);
+  right: vw(20);
+  width: 25vw;
+  height: calc(100vh - vh(80));
+}
 </style>