Jelajahi Sumber

修复css样式问题

yuanmingze 3 minggu lalu
induk
melakukan
24d0417524
1 mengubah file dengan 22 tambahan dan 10 penghapusan
  1. 22 10
      src/views/invoice-information/detail.vue

+ 22 - 10
src/views/invoice-information/detail.vue

@@ -129,23 +129,30 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+/* ================= 页面根 ================= */
 .tax-page {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+
+  min-height: 100vh;
+  height: 100%;
   background: #f6f7fb;
   font-size: 3.6vw;
   color: #333;
-  overflow: hidden;
 
+  /* 给 fixed footer 预留空间 */
+  padding-bottom: calc(16vw + env(safe-area-inset-bottom));
+
+  /* 内容区 */
   .page-content {
     flex: 1;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     padding: 4vw;
   }
 }
 
-/* 顶部 */
+/* ================= 顶部 ================= */
 .van-nav-bar {
   background: #fff;
   border-bottom: 1px solid #f2f2f2;
@@ -157,7 +164,7 @@ onMounted(() => {
   font-size: 28px;
 }
 
-/* 卡片 */
+/* ================= 卡片 ================= */
 .card {
   background: #fff;
   border-radius: 3vw;
@@ -224,7 +231,7 @@ onMounted(() => {
   }
 }
 
-/* 展开动画 */
+/* ================= 展开动画 ================= */
 .expand-enter-active,
 .expand-leave-active {
   transition:
@@ -244,19 +251,24 @@ onMounted(() => {
   opacity: 1;
 }
 
-/* 底部 */
+/* ================= 底部汇总栏 ================= */
 .footer {
-  position: sticky;
+  position: fixed;
+  left: 0;
+  right: 0;
   bottom: 0;
-  z-index: 10;
+  z-index: 100;
+
   background: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding: 3vw 5vw;
+  padding-bottom: calc(3vw + env(safe-area-inset-bottom));
+
   font-size: 4vw;
   border-top: 0.3vw solid #eee;
-  padding-bottom: calc(3vw + env(safe-area-inset-bottom));
 
   .amount {
     color: #0072f8;
@@ -264,7 +276,7 @@ onMounted(() => {
   }
 }
 
-/* 空态 */
+/* ================= 空态 ================= */
 .empty {
   text-align: center;
   padding: 20vw 0;