diff --git a/src/uni_modules/uview-plus/components/up-overlay/overlay.uts b/src/uni_modules/uview-plus/components/up-overlay/overlay.uts
new file mode 100644
index 000000000..5862cfb40
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-overlay/overlay.uts
@@ -0,0 +1,18 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-09-12 01:06:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 01:06:21
+ * @FilePath     : /uview-plus/libs/config/props/overlay
+ */
+export default {
+    // overlay组件
+    overlay: {
+        show: false,
+        zIndex: 10070,
+        duration: 300,
+        opacity: 0.5
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-overlay/props.uts b/src/uni_modules/uview-plus/components/up-overlay/props.uts
new file mode 100644
index 000000000..cac5a2d74
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-overlay/props.uts
@@ -0,0 +1,28 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './overlay'
+let crtProp = defProps['overlay'] as UTSJSONObject
+
+export const propsOverlay = defineMixin({
+    props: {
+        // 是否显示遮罩
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 层级z-index
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 遮罩的过渡时间，单位为ms
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 不透明度值，当做rgba的第四个参数
+        opacity: {
+            type: [String, Number],
+            default: crtProp['opacity']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-overlay/up-overlay.uvue b/src/uni_modules/uview-plus/components/up-overlay/up-overlay.uvue
new file mode 100644
index 000000000..da6710934
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-overlay/up-overlay.uvue
@@ -0,0 +1,71 @@
+<template>
+	<up-transition
+	    :show="show"
+	    custom-class="up-overlay"
+	    :duration="duration"
+	    :custom-style="overlayStyle"
+	    @click="clickHandler"
+	>
+		<slot />
+	</up-transition>
+</template>
+
+<script>
+	import { propsOverlay } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * overlay 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://ijry.github.io/uview-plus/components/overlay.html
+	 * @property {Boolean}			show		是否显示遮罩（默认 false ）
+	 * @property {String | Number}	zIndex		zIndex 层级（默认 10070 ）
+	 * @property {String | Number}	duration	动画时长，单位毫秒（默认 300 ）
+	 * @property {String | Number}	opacity		不透明度值，当做rgba的第四个参数 （默认 0.5 ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击遮罩发送事件
+	 * @example <up-overlay :show="show" @click="show = false"></up-overlay>
+	 */
+	export default {
+		name: "up-overlay",
+		mixins: [mpMixin, mixin, propsOverlay],
+		computed: {
+			overlayStyle(): any {
+				const style = {
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: this.zIndex,
+					bottom: 0,
+					'background-color': `rgba(0, 0, 0, ${this.opacity})`
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		emits: ["click"],
+		methods: {
+			clickHandler(): void {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+     $up-overlay-top:0 !default;
+     $up-overlay-left:0 !default;
+     $up-overlay-width:100% !default;
+     $up-overlay-height:100% !default;
+     $up-overlay-background-color:rgba(0, 0, 0, .7) !default;
+	.up-overlay {
+		position: fixed;
+		top:$up-overlay-top;
+		left:$up-overlay-left;
+		width: $up-overlay-width;
+		height:$up-overlay-height;
+		background-color:$up-overlay-background-color;
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-overlay/up-overlay.vue b/src/uni_modules/uview-plus/components/up-overlay/up-overlay.vue
index 7ad1dfe91..13c61c765 100644
--- a/src/uni_modules/uview-plus/components/up-overlay/up-overlay.vue
+++ b/src/uni_modules/uview-plus/components/up-overlay/up-overlay.vue
@@ -29,7 +29,7 @@
 	 */
 	export default {
 		name: "up-overlay",
-		mixins: [mpMixin, mixin,props],
+		mixins: [mpMixin, mixin, props],
 		computed: {
 			overlayStyle() {
 				const style = {
diff --git a/src/uni_modules/uview-plus/components/up-popup/popup.uts b/src/uni_modules/uview-plus/components/up-popup/popup.uts
new file mode 100644
index 000000000..35d335e43
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-popup/popup.uts
@@ -0,0 +1,28 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-00-12 00:47:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 00:47:21
+ */
+export default {
+    // popup组件
+    popup: {
+        show: false,
+        overlay: true,
+        mode: 'bottom',
+        duration: 300,
+        closeable: false,
+        overlayStyle: {},
+        closeOnClickOverlay: true,
+        zIndex: 10075,
+        safeAreaInsetBottom: true,
+        safeAreaInsetTop: false,
+        closeIconPos: 'top-right',
+        round: 0,
+        zoom: true,
+        bgColor: '',
+        overlayOpacity: 0.5
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-popup/props.uts b/src/uni_modules/uview-plus/components/up-popup/props.uts
new file mode 100644
index 000000000..8935aa565
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-popup/props.uts
@@ -0,0 +1,91 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-00-12 00:47:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-09-12 00:47:21
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './popup'
+let crtProp = defProps['popup'] as UTSJSONObject
+
+export const propsPopup = defineMixin({
+    props: {
+        // 是否展示弹窗
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 是否显示遮罩
+        overlay: {
+            type: Boolean,
+            default: crtProp['overlay']
+        },
+        // 弹出的方向，可选值为 top bottom right left center
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 动画时长，单位ms
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // 是否显示关闭图标
+        closeable: {
+            type: Boolean,
+            default: crtProp['closeable']
+        },
+        // 自定义遮罩的样式
+        overlayStyle: {
+            type: [Object, String],
+            default: crtProp['overlayStyle']
+        },
+        // 点击遮罩是否关闭弹窗
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: crtProp['closeOnClickOverlay']
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: crtProp['zIndex']
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: crtProp['safeAreaInsetBottom']
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: crtProp['safeAreaInsetTop']
+        },
+        // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+        closeIconPos: {
+            type: String,
+            default: crtProp['closeIconPos']
+        },
+        // 是否显示圆角
+        round: {
+            type: [Boolean, String, Number],
+            default: crtProp['round']
+        },
+        // mode=center，也即中部弹出时，是否使用缩放模式
+        zoom: {
+            type: Boolean,
+            default: crtProp['zoom']
+        },
+        // 弹窗背景色，设置为transparent可去除白色背景
+        bgColor: {
+            type: String,
+            default: crtProp['bgColor']
+        },
+        // 遮罩的透明度，0-1之间
+        overlayOpacity: {
+            type: [Number, String],
+            default: crtProp['overlayOpacity']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue b/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue
new file mode 100644
index 000000000..1a8f6faac
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-popup/up-popup.uvue
@@ -0,0 +1,313 @@
+<template>
+	<view class="up-popup"  :class="[customClass]">
+		<up-overlay
+			:show="show"
+			@click="overlayClick"
+			v-if="overlay"
+			:zIndex="zIndex"
+			:duration="overlayDuration"
+			:customStyle="overlayStyle"
+			:opacity="overlayOpacity"
+		></up-overlay>
+		<up-transition
+			:show="show"
+			:customStyle="transitionStyle"
+			:mode="position"
+			:duration="duration"
+			@afterEnter="afterEnter"
+			@click="clickHandler"
+		>
+			<view
+				class="up-popup__content"
+				:style="[contentStyle]"
+				@tap.stop="noop"
+			>
+				<up-status-bar v-if="safeAreaInsetTop"></up-status-bar>
+				<slot></slot>
+				<view
+					v-if="closeable"
+					@tap.stop="close"
+					class="up-popup__content__close"
+					:class="['up-popup__content__close--' + closeIconPos]"
+					hover-class="up-popup__content__close--hover"
+					hover-stay-time="150"
+				>
+					<up-icon
+						name="close"
+						color="#909399"
+						size="18"
+						bold
+					></up-icon>
+				</view>
+				<up-safe-bottom v-if="safeAreaInsetBottom"></up-safe-bottom>
+			</view>
+		</up-transition>
+	</view>
+</template>
+
+<script>
+	import { propsPopup } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge, sleep } from '../../libs/function/index';
+	/**
+	 * popup 弹窗
+	 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+	 * @tutorial https://ijry.github.io/uview-plus/components/popup.html
+	 * @property {Boolean}			show				是否展示弹窗 (默认 false )
+	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
+	 * @property {String}			mode				弹出方向（默认 'bottom' ）
+	 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
+	 * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
+	 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
+	 * @property {Object | String}	overlayStyle		自定义遮罩的样式
+	 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）
+	 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否关闭弹窗 （默认  true ）
+	 * @property {String | Number}	zIndex				层级 （默认 10075 ）
+	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离 （默认 true ）
+	 * @property {Boolean}			safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） （默认 false ）
+	 * @property {String}			closeIconPos		自定义关闭图标位置（默认 'top-right' ）
+	 * @property {String | Number}	round				圆角值（默认 0）
+	 * @property {Boolean}			zoom				当mode=center时 是否开启缩放（默认 true ）
+	 * @property {Object}			customStyle			组件的样式，对象形式
+	 * @event {Function} open 弹出层打开
+	 * @event {Function} close 弹出层收起
+	 * @example <up-popup v-model="show"><text>出淤泥而不染，濯清涟而不妖</text></up-popup>
+	 */
+	export default {
+		name: 'up-popup',
+		mixins: [mpMixin, mixin, propsPopup],
+		data() {
+			return {
+				overlayDuration: parseInt(this.duration.toString()) + 50
+			}
+		},
+		watch: {
+			show(newValue, oldValue) {
+				if (newValue === true) {
+					// #ifdef MP-WEIXIN
+					// const children = this.$children
+					// this.retryComputedComponentRect(children)
+					// #endif
+				}
+			}
+		},
+		computed: {
+			transitionStyle():any {
+				const style = {
+					zIndex: parseInt(this.zIndex),
+					position: 'fixed',
+					display: 'flex',
+				}
+				style[this.mode] = 0
+				if (this.mode === 'left') {
+					return deepMerge(style, {
+						bottom: 0,
+						top: 0,
+					})
+				} else if (this.mode === 'right') {
+					return deepMerge(style, {
+						bottom: 0,
+						top: 0,
+					})
+				} else if (this.mode === 'top') {
+					return deepMerge(style, {
+						left: 0,
+						right: 0
+					})
+				} else if (this.mode === 'bottom') {
+					return deepMerge(style, {
+						left: 0,
+						right: 0,
+					})
+				} else if (this.mode === 'center') {
+					return deepMerge(style, {
+						alignItems: 'center',
+						'justify-content': 'center',
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0
+					})
+				}
+				return {}
+			},
+			contentStyle(): any {
+				const style = {}
+				// 通过设备信息的safeAreaInsets值来判断是否需要预留顶部状态栏和底部安全局的位置
+				// 不使用css方案，是因为nvue不支持css的iPhoneX安全区查询属性
+				const {
+					safeAreaInsets
+				} = uni.getWindowInfo()
+				
+				if (this.mode !== 'center') {
+					style['flex'] = 1
+				}
+				// 背景色，一般用于设置为transparent，去除默认的白色背景
+				if (this.bgColor != '') {
+					style['backgroundColor'] = this.bgColor
+				}
+				if(this.round != '') {
+					const value = addUnit(this.round)
+					if(this.mode === 'top') {
+						style['borderBottomLeftRadius'] = value
+						style['borderBottomRightRadius'] = value
+					} else if(this.mode === 'bottom') {
+						style['borderTopLeftRadius'] = value
+						style['borderTopRightRadius'] = value
+					} else if(this.mode === 'center') {
+						style['borderRadius'] = value
+					} 
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			},
+			position(): string {
+				if (this.mode === 'center') {
+					return this.zoom ? 'fade-zoom' : 'fade'
+				}
+				if (this.mode === 'left') {
+					return 'slide-left'
+				}
+				if (this.mode === 'right') {
+					return 'slide-right'
+				}
+				if (this.mode === 'bottom') {
+					return 'slide-up'
+				}
+				if (this.mode === 'top') {
+					return 'slide-down'
+				}
+				return ''
+			},
+		},
+		emits: ["open", "close", "click", "update:show"],
+		methods: {
+			// 点击遮罩
+			overlayClick(): void {
+				if (this.closeOnClickOverlay) {
+					this.$emit('update:show', false)
+					this.$emit('close')
+				}
+			},
+			close(e: any): void {
+				this.$emit('update:show', false)
+				this.$emit('close')
+			},
+			afterEnter(): void {
+				this.$emit('open')
+			},
+			clickHandler(): void {
+				// 由于中部弹出时，其up-transition占据了整个页面相当于遮罩，此时需要发出遮罩点击事件，是否无法通过点击遮罩关闭弹窗
+				if(this.mode === 'center') {
+					this.overlayClick()
+				}
+				this.$emit('click')
+			},
+			// #ifdef MP-WEIXIN
+			// retryComputedComponentRect(children: any): void {
+			// 	// 组件内部需要计算节点的组件
+			// 	const names = ['up-calendar-month', 'up-album', 'up-collapse-item', 'up-dropdown', 'up-index-item', 'up-index-list',
+			// 		'up-line-progress', 'up-list-item', 'up-rate', 'up-read-more', 'up-row', 'up-row-notice', 'up-scroll-list',
+			// 		'up-skeleton', 'up-slider', 'up-steps-item', 'up-sticky', 'up-subsection', 'up-swipe-action-item', 'up-tabbar',
+			// 		'up-tabs', 'up-tooltip'
+			// 	]
+			// 	// 历遍所有的子组件节点
+			// 	for (let i = 0; i < children.length; i++) {
+			// 		const child = children[i]
+			// 		// 拿到子组件的子组件
+			// 		const grandChild = child.$children
+			// 		// 判断如果在需要重新初始化的组件数组中名中，并且存在init方法的话，则执行
+			// 		if (names.includes(child.$options.name) && typeof child?.init === 'function') {
+			// 			// 需要进行一定的延时，因为初始化页面需要时间
+			// 			sleep(50).then(() => {
+			// 				child.init()
+			// 			})
+			// 		}
+			// 		// 如果子组件还有孙组件，进行递归历遍
+			// 		if (grandChild.length) {
+			// 			this.retryComputedComponentRect(grandChild)
+			// 		}
+			// 	}
+			// }
+			// #endif
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-popup-flex:1 !default;
+	$up-popup-content-background-color: #fff !default;
+
+	.up-popup {
+		flex: $up-popup-flex;
+
+		&__content {
+			background-color: $up-popup-content-background-color;
+			position: relative;
+
+			&--round-top {
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 10px;
+			}
+
+			&--round-left {
+				border-top-left-radius: 0;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 10px;
+			}
+
+			&--round-right {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 0;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 0;
+			}
+
+			&--round-bottom {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&--round-center {
+				border-top-left-radius: 10px;
+				border-top-right-radius: 10px;
+				border-bottom-left-radius: 10px;
+				border-bottom-right-radius: 10px;
+			}
+
+			&__close {
+				position: absolute;
+
+				&--hover {
+					opacity: 0.4;
+				}
+			}
+
+			&__close--top-left {
+				top: 15px;
+				left: 15px;
+			}
+
+			&__close--top-right {
+				top: 15px;
+				right: 15px;
+			}
+
+			&__close--bottom-left {
+				bottom: 15px;
+				left: 15px;
+			}
+
+			&__close--bottom-right {
+				right: 15px;
+				bottom: 15px;
+			}
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-radio/props.uts b/src/uni_modules/uview-plus/components/up-radio/props.uts
index 600fee606..6a54f7eee 100644
--- a/src/uni_modules/uview-plus/components/up-radio/props.uts
+++ b/src/uni_modules/uview-plus/components/up-radio/props.uts
@@ -6,7 +6,7 @@
  * @LastAuthor   : jry
  * @lastTime     : 2024-08-30 23:17:20
  */
- import { defineMixin } from '../../libs/vue'
+import { defineMixin } from '../../libs/vue'
 import defProps from './radio'
 let crtProp = defProps['radio'] as UTSJSONObject
 
diff --git a/src/uni_modules/uview-plus/components/up-safe-bottom/props.uts b/src/uni_modules/uview-plus/components/up-safe-bottom/props.uts
new file mode 100644
index 000000000..ee2c5f77a
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-safe-bottom/props.uts
@@ -0,0 +1,6 @@
+import { defineMixin } from '../../libs/vue'
+
+export const propsSafeBottom = defineMixin({
+    props: {
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-safe-bottom/up-safe-bottom.uvue b/src/uni_modules/uview-plus/components/up-safe-bottom/up-safe-bottom.uvue
new file mode 100644
index 000000000..d2269507c
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-safe-bottom/up-safe-bottom.uvue
@@ -0,0 +1,59 @@
+<template>
+	<view
+		class="up-safe-bottom"
+		:style="[style]"
+		:class="[!isNvue ? 'up-safe-area-inset-bottom': '']"
+	>
+	</view>
+</template>
+
+<script>
+	import { propsSafeBottom } from "./props";
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, deepMerge, addUnit, sys } from '../../libs/function/index';
+	/**
+	 * SafeBottom 底部安全区
+	 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+	 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+	 * @property {type}		prop_name
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 *
+	 * @event {Function()}
+	 * @example <up-safe-bottom></up-safe-bottom>
+	 */
+	export default {
+		name: "up-safe-bottom",
+		mixins: [mpMixin, mixin, propsSafeBottom],
+		data() {
+			return {
+				safeAreaBottomHeight: 0,
+				isNvue: false,
+			};
+		},
+		computed: {
+			style(): any {
+				const style = {};
+				// #ifdef APP-NVUE || MP-TOUTIAO
+				// nvue下，高度使用js计算填充
+				style['height'] = addUnit(uni.getWindowInfo().safeAreaInsets.bottom, 'px');
+				// #endif
+				return deepMerge(style, addStyle(this.customStyle));
+			},
+		},
+		mounted() {
+			// #ifdef APP-NVUE
+			// 标识为是否nvue
+			this.isNvue = true;
+			// #endif
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.up-safe-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>
diff --git a/uni-app-x/pages.json b/uni-app-x/pages.json
index 9e13221db..729fa3ebf 100644
--- a/uni-app-x/pages.json
+++ b/uni-app-x/pages.json
@@ -72,13 +72,13 @@
 					"navigationBarTitleText": "加载中图标"
 				}
 			}
-			// ,{
-			// 	"path": "overlay/overlay",
-			// 	"style": {
-			// 		"navigationBarTitleText": "遮罩层",
-			// 		"navigationStyle": "custom"
-			// 	}
-			// },
+			,{
+				"path": "overlay/overlay",
+				"style": {
+					"navigationBarTitleText": "遮罩层",
+					"navigationStyle": "custom"
+				}
+			}
 			,{
 				"path": "loading-page/loading-page",
 				"style": {
@@ -86,14 +86,14 @@
 					"navigationStyle": "custom"
 				}
 			}
+			,{
+				"path": "popup/popup",
+				"style": {
+					"navigationBarTitleText": "弹窗",
+					"navigationStyle": "custom"
+				}
+			}
 			// ,{
-			// 	"path": "popup/popup",
-			// 	"style": {
-			// 		"navigationBarTitleText": "弹窗",
-			// 		"navigationStyle": "custom"
-			// 	}
-			// },
-			// {
 			// 	"path": "swipeAction/swipeAction",
 			// 	"style": {
 			// 		"navigationBarTitleText": "滑动单元格"
diff --git a/uni-app-x/pages/componentsA/overlay/overlay.nvue b/uni-app-x/pages/componentsA/overlay/overlay.uvue
similarity index 88%
rename from uni-app-x/pages/componentsA/overlay/overlay.nvue
rename to uni-app-x/pages/componentsA/overlay/overlay.uvue
index d735c6b9a..3b1eec4c7 100644
--- a/uni-app-x/pages/componentsA/overlay/overlay.nvue
+++ b/uni-app-x/pages/componentsA/overlay/overlay.uvue
@@ -1,4 +1,7 @@
 <template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
 	<view class="u-page">
 		<up-navbar
 			title="遮罩层"
@@ -10,7 +13,7 @@
 		<up-cell
 			:titleStyle="{fontWeight: 500}"
 			@click="openMask(index)"
-			:title="item.title"
+			:title="item['title']"
 			v-for="(item, index) in list"
 			:key="index"
 			isLink
@@ -18,7 +21,7 @@
 			<template #icon>
 				<image
 					class="u-cell-icon"
-					:src="item.iconUrl"
+					:src="item['iconUrl']"
 					mode="widthFix"
 				></image>
 			</template>
@@ -43,6 +46,9 @@
 		>
 		</up-overlay>
 	</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script>
@@ -68,7 +74,7 @@
 			}
 		},
 		methods: {
-			openMask(indexNum) {
+			openMask(indexNum: number): void {
 				if (indexNum == 0) {
 					this.show = !this.show;
 				} else if (indexNum == 1) {
@@ -77,7 +83,7 @@
 					this.showOpcatiy = !this.showOpcatiy
 				}
 			},
-			navigateBack() {
+			navigateBack(): void {
 				uni.navigateBack()
 			}
 		}
diff --git a/uni-app-x/pages/componentsA/popup/popup.nvue b/uni-app-x/pages/componentsA/popup/popup.uvue
similarity index 71%
rename from uni-app-x/pages/componentsA/popup/popup.nvue
rename to uni-app-x/pages/componentsA/popup/popup.uvue
index 494d4d9e1..642a43f58 100644
--- a/uni-app-x/pages/componentsA/popup/popup.nvue
+++ b/uni-app-x/pages/componentsA/popup/popup.uvue
@@ -1,4 +1,7 @@
 <template>
+	<!-- #ifdef APP -->
+	<scroll-view>
+	<!-- #endif -->
 	<view>
 		<up-navbar
 			title="弹窗"
@@ -14,8 +17,8 @@
 		<up-cell-group>
 			<up-cell
 				:titleStyle="{fontWeight: 500}"
-				@click="openPopup(item.popupData)"
-				:title="item.title"
+				@click="openPopup(item['popupData'] as UTSJSONObject)"
+				:title="item['title']"
 				v-for="(item, index) in list"
 				:key="index"
 				isLink
@@ -24,7 +27,7 @@
 					<image
 						slot="icon"
 						class="u-cell-icon"
-						:src="item.iconUrl"
+						:src="item['iconUrl']"
 						mode="widthFix"
 					></image>
 				</template>
@@ -33,21 +36,21 @@
 		<up-popup
 			:safeAreaInsetBottom="true"
 			:safeAreaInsetTop="true"
-			:mode="popupData.mode"
+			:mode="popupData?.['mode']"
 			:show="show"
-			:round="popupData.round"
-			:overlay="popupData.overlay"
-			:borderRadius="popupData.borderRadius"
-			:closeable="popupData.closeable"
-			:closeOnClickOverlay="popupData.closeOnClickOverlay"
+			:round="popupData?.['round']"
+			:overlay="popupData?.['overlay']"
+			:borderRadius="popupData?.['borderRadius']"
+			:closeable="popupData?.['closeable']"
+			:closeOnClickOverlay="popupData?.['closeOnClickOverlay']"
 			@close="close"
 			@open="open"
 		>
 			<view
 				class="u-popup-slot"
 				:style="{
-					width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
-					marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
+					width: ['bottom', 'top'].includes(getMode(popupData)) ? '750rpx' : '200px',
+					marginTop: ['left', 'right'].includes(getMode(popupData)) ? '480rpx' : '0',
 				}"
 			>
 				<up-button
@@ -59,6 +62,9 @@
 			</view>
 		</up-popup>
 	</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script>
@@ -72,13 +78,13 @@
 					borderRadius: '',
 					closeable: true,
 					closeOnClickOverlay: true
-				},
+				} as UTSJSONObject | null,
 				list: [{
 						popupData: {
 							overlay: true,
 							mode: 'top',
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '顶部弹出',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
 					},
@@ -87,7 +93,7 @@
 							overlay: true,
 							mode: 'right',
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '右侧弹出',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
 					},
@@ -96,7 +102,7 @@
 							overlay: true,
 							mode: 'bottom',
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '底部弹出',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
 					},
@@ -105,7 +111,7 @@
 							overlay: true,
 							mode: 'left',
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '左侧弹出',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
 					},
@@ -115,7 +121,7 @@
 							mode: 'center',
 							round: 10,
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '居中弹出',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
 					},
@@ -125,7 +131,7 @@
 							mode: 'bottom',
 							round: 10,
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '显示圆角',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
 					},
@@ -135,7 +141,7 @@
 							mode: 'bottom',
 							closeable: false,
 							closeOnClickOverlay: false
-						},
+						} as UTSJSONObject,
 						title: '禁止点击遮罩关闭',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
 					},
@@ -145,7 +151,7 @@
 							mode: 'bottom',
 							closeable: true,
 							closeOnClickOverlay: true
-						},
+						} as UTSJSONObject,
 						title: '显示关闭按钮',
 						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
 					}
@@ -153,19 +159,26 @@
 			}
 		},
 		methods: {
-			openPopup(popupData) {
-				this.popupData = popupData
-				uni.$u.sleep().then(() => {
-					this.show = !this.show
-				})
+			openPopup(popupData?: UTSJSONObject): void {
+				this.popupData = popupData as UTSJSONObject
+				// sleep().then(() => {
+				// 	this.show = !this.show
+				// })
 			},
-			navigateBack() {
+			navigateBack(): void {
 				uni.navigateBack()
 			},
-			open() {
+			getMode(data?: UTSJSONObject): string {
+				let str = data!!.getString('mode')
+				if (str == null) {
+					str = ''
+				}
+				return str
+			},
+			open(): void {
 				// console.log('open');
 			},
-			close() {
+			close(): void {
 				this.show = false
 				// console.log('close');
 			}