弹框问题

components/asset-confirm-popup.vue

@@ -20,15 +20,18 @@
         </view>
       </view>
 
+      <view class="popup-panel__content">
         <view v-if="showStatusBlock" class="popup-panel__status">
           <image
             class="popup-panel__status-image"
             :src="statusIcon"
             mode="aspectFit"
           ></image>
-        <text v-if="message" class="popup-panel__status-text asset-number-font">{{
-          message
-        }}</text>
+          <text
+            v-if="message"
+            class="popup-panel__status-text asset-number-font"
+            >{{ message }}</text
+          >
         </view>
         <text v-else-if="message" class="popup-panel__message asset-number-font">{{
           message
@@ -41,6 +44,7 @@
         <view v-if="$slots.default" class="popup-panel__body">
           <slot />
         </view>
+      </view>
 
       <view
         class="popup-panel__footer"
@@ -151,7 +155,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24rpx;
+  padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
 }
 
 .popup-mask__backdrop {
@@ -164,11 +169,16 @@ export default {
   position: relative;
   width: 100%;
   max-width: 600rpx;
+  max-height: calc(100vh - 48rpx - env(safe-area-inset-bottom));
   padding: 30rpx 28rpx 32rpx;
   border-radius: 28rpx;
   border: 1px solid rgba(142, 157, 206, 0.14);
   background: #2a2f4d;
   box-shadow: 0 30rpx 70rpx rgba(0, 0, 0, 0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .popup-panel__head {
@@ -206,6 +216,13 @@ export default {
   height: 28rpx;
 }
 
+.popup-panel__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .popup-panel__message {
   display: block;
   margin-top: 34rpx;

unpackage/dist/build/web/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>白马交易所</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/bmt/static/index.883130ca.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/bmt/static/js/chunk-vendors.a58c62f3.js></script><script src=/bmt/static/js/index.75c16dcc.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/bmt/static/index.883130ca.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/bmt/static/js/chunk-vendors.a58c62f3.js></script><script src=/bmt/static/js/index.3308b635.js></script></body></html>