浏览代码

底部弹窗修复

sunshibo 1 月之前
父节点
当前提交
d032a2d20d
共有 5 个文件被更改,包括 42 次插入8 次删除
  1. 9 1
      components/Modal/BasicModal.vue
  2. 1 1
      pages/components/LoginModal.vue
  3. 10 3
      pages/index/index.vue
  4. 21 2
      pages/personal/index.vue
  5. 1 1
      settings/siteSetting.js

+ 9 - 1
components/Modal/BasicModal.vue

@@ -30,7 +30,15 @@
 </script>
 
 <style scoped lang="scss">
+/* 高于 TabBar(z-index:99),弹窗盖住底部导航 */
 :deep(.uni-popup) {
-	z-index: 1000 !important;
+	z-index: 99999 !important;
+	top: 0 !important;
+	left: 0 !important;
+	right: 0 !important;
+	bottom: 0 !important;
+}
+:deep(.uni-popup__wrapper) {
+	z-index: 99999 !important;
 }
 </style>

+ 1 - 1
pages/components/LoginModal.vue

@@ -181,7 +181,7 @@ const handleUserAgreement = () => {
   width: 100%;
   background: #FFFFFF;
   border-radius: 24rpx;
-  padding: 60rpx 40rpx 50rpx;
+  padding: 60rpx 40rpx calc(50rpx + env(safe-area-inset-bottom) + 120rpx);
   position: relative;
   box-sizing: border-box;
 

+ 10 - 3
pages/index/index.vue

@@ -275,13 +275,20 @@ onLoad(async (options) => {
     }
   }
 
-  // 登录弹窗层级设置
+  // 登录弹窗层级设置(盖住底部 tabbar)
   .login-modal-wrapper {
     position: relative;
-    z-index: 100;
+    z-index: 99999;
 
     :deep(.uni-popup) {
-      z-index: 100 !important;
+      z-index: 99999 !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+    }
+    :deep(.uni-popup__wrapper) {
+      z-index: 99999 !important;
     }
   }
 

+ 21 - 2
pages/personal/index.vue

@@ -73,8 +73,10 @@
 				</view>
 			</view>
 		</view>
-		<!-- 登录弹窗组件 -->
-		<LoginModal v-model:open="showLoginModal" @success="handleLoginSuccess" @cancel="handleLoginCancel" />
+		<!-- 登录弹窗组件(与 index 同结构,盖住底部 tabbar) -->
+		<view class="login-modal-wrapper">
+			<LoginModal v-model:open="showLoginModal" @success="handleLoginSuccess" @cancel="handleLoginCancel" />
+		</view>
 		<!-- 底部导航 -->
 		<TabBar />
 	</view>
@@ -262,4 +264,21 @@ const handleLoginCancel = () => {
 		}
 	}
 }
+
+/* 登录弹窗层级设置(与 index 一致,盖住底部 tabbar) */
+.login-modal-wrapper {
+	position: relative;
+	z-index: 99999;
+
+	:deep(.uni-popup) {
+		z-index: 99999 !important;
+		top: 0 !important;
+		left: 0 !important;
+		right: 0 !important;
+		bottom: 0 !important;
+	}
+	:deep(.uni-popup__wrapper) {
+		z-index: 99999 !important;
+	}
+}
 </style>

+ 1 - 1
settings/siteSetting.js

@@ -5,7 +5,7 @@ export const DEFAULT_CDN_URL = 'https://alien-volume.oss-cn-beijing.aliyuncs.com
 export const UPLOAD = 'https://alien-volume.oss-cn-beijing.aliyuncs.com/';
 
 // 请求地址  development 开发 | production 正式
-export const BASE_API_URL = process.env.NODE_ENV === 'development' ? 'http://192.168.10.84:30014' : 'http://192.168.1.91:8000';
+export const BASE_API_URL = process.env.NODE_ENV === 'development' ? 'http://192.168.10.84:30014' : 'https://uat.ailien.shop';
 
 /** 文件上传 请求地址 */
 export const UPLOAD_URL = 'https://api.xxxxxx.cn/File/UploadImg';