wip

src/components/PracticeLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {useSettingStore} from "@/stores/setting.ts";
+import { useSettingStore } from '@/stores/setting.ts'
 
 const settingStore = useSettingStore()
 defineProps<{
@@ -8,12 +8,16 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex justify-center relative h-screen"
-       :class="!settingStore.showToolbar && 'footer-hide'">
+  <div class="flex justify-center relative" :class="!settingStore.showToolbar && 'footer-hide'">
     <div class="wrap">
       <slot name="practice"></slot>
     </div>
-    <div class="panel-wrap" :style="{left:panelLeft}" :class="{'has-panel': settingStore.showPanel}" @click.self="settingStore.showPanel = false">
+    <div
+      class="panel-wrap"
+      :style="{ left: panelLeft }"
+      :class="{ 'has-panel': settingStore.showPanel }"
+      @click.self="settingStore.showPanel = false"
+    >
       <slot name="panel"></slot>
     </div>
     <div class="footer-wrap">
@@ -23,17 +27,11 @@ defineProps<{
 </template>
 
 <style scoped lang="scss">
-
 .wrap {
   transition: all var(--anim-time);
-  height: calc(100vh - 8rem);
 }
 
 .footer-hide {
-  .wrap {
-    height: calc(100vh - 3rem) !important;
-  }
-
   .footer-wrap {
     bottom: -6rem;
   }
@@ -41,14 +39,14 @@ defineProps<{
 
 .footer-wrap {
   position: fixed;
-  bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
+  bottom: calc(env(safe-area-inset-bottom, 0px));
   transition: all var(--anim-time);
   z-index: 999;
 }
 
 .panel-wrap {
-  position: absolute;
-  top: .8rem;
+  position: fixed;
+  top: 0.8rem;
   z-index: 1;
   height: calc(100vh - 1.8rem);
 }
@@ -61,24 +59,24 @@ defineProps<{
     padding: 0 1rem;
     box-sizing: border-box;
   }
-  
+
   .footer-hide {
     .wrap {
       height: calc(100vh - 2rem) !important;
     }
-    
+
     .footer-wrap {
       bottom: calc(-10rem + env(safe-area-inset-bottom, 0px));
     }
   }
-  
+
   .footer-wrap {
     bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
     left: 0.5rem;
     right: 0.5rem;
     width: auto;
   }
-  
+
   .panel-wrap {
     position: fixed;
     top: 0;
@@ -92,10 +90,10 @@ defineProps<{
     justify-content: center;
     padding: 1rem;
     box-sizing: border-box;
-    
+
     // 当面板未显示时，禁用指针事件
     pointer-events: none;
-    
+
     // 只有当面板显示时才添加背景蒙版并启用指针事件
     &.has-panel {
       background: rgba(0, 0, 0, 0.5);
@@ -110,19 +108,19 @@ defineProps<{
     height: calc(100vh - 5rem);
     padding: 0 0.5rem;
   }
-  
+
   .footer-hide {
     .wrap {
       height: calc(100vh - 1.5rem) !important;
     }
   }
-  
+
   .footer-wrap {
     bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
     left: 0.3rem;
     right: 0.3rem;
   }
-  
+
   .panel-wrap {
     padding: 0.5rem;
     left: 0 !important;