diff --git a/src/components/modal/index.module.scss b/src/components/modal/index.module.scss
new file mode 100644
index 0000000..3aa7be3
--- /dev/null
+++ b/src/components/modal/index.module.scss
@@ -0,0 +1,23 @@
+// 项目 z-index 现状：内容层 ≤1、抽屉/遮罩 10~11；弹窗基座取 100/101
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $color-mask;
+  z-index: 100;
+}
+
+.panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: $color-bg-white;
+  border-radius: $radius-lg;
+  padding: 48px 32px;
+  min-width: 600px;
+  z-index: 101;
+  box-shadow: $shadow-popup;
+}
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
new file mode 100644
index 0000000..e6de8f7
--- /dev/null
+++ b/src/components/modal/index.tsx
@@ -0,0 +1,25 @@
+import { View } from '@tarojs/components'
+import type { CSSProperties, ReactNode } from 'react'
+import styles from './index.module.scss'
+
+interface Props {
+  visible: boolean
+  onClose: () => void
+  children: ReactNode
+  width?: string   // 默认 600px（编译为 600rpx）
+}
+
+export function Modal({ visible, onClose, children, width = '600px' }: Props) {
+  if (!visible) return null
+
+  const panelStyle: CSSProperties = { width }
+
+  return (
+    <>
+      <View className={styles.mask} onClick={onClose} />
+      <View className={styles.panel} style={panelStyle}>
+        {children}
+      </View>
+    </>
+  )
+}