diff --git a/src/pages/index/componments/IndexDetail/index.config.js b/src/pages/index/componments/IndexDetail/index.config.js
new file mode 100644
index 0000000..d4113e6
--- /dev/null
+++ b/src/pages/index/componments/IndexDetail/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '模版页面'
+}
diff --git a/src/pages/index/componments/IndexDetail/index.scss b/src/pages/index/componments/IndexDetail/index.scss
new file mode 100644
index 0000000..0cf4f63
--- /dev/null
+++ b/src/pages/index/componments/IndexDetail/index.scss
@@ -0,0 +1,17 @@
+.IndexDetail {
+  // padding: 40px;
+  // font-size: 16px;
+
+  .at-modal__container {
+    min-width: 1000px;
+    height: 500px;
+    background-color: yellow;
+    // .content-simple {
+    //   font-size: 16px;
+    // }
+
+    .cusomContent{
+        font-size: 16px;
+    }
+  }
+}
diff --git a/src/pages/index/componments/IndexDetail/index.tsx b/src/pages/index/componments/IndexDetail/index.tsx
new file mode 100644
index 0000000..a0126a1
--- /dev/null
+++ b/src/pages/index/componments/IndexDetail/index.tsx
@@ -0,0 +1,43 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui";
+
+// export default class Index extends Component {
+const IndexDetail = () => {
+  useEffect(() => {}, []);
+
+  const handleClick = (value) => {
+    // 跳转到目的页面，在当前页面打开
+    Taro.navigateTo({
+      url: "/pages/index/index",
+    });
+  };
+
+  const cusomContent = () => {
+    return <View className="cusomContent">111</View>;
+  };
+  return (
+    <View className="IndexDetail">
+      <AtModal isOpened>
+        {/* <AtModalHeader>标题</AtModalHeader> */}
+        <AtModalContent>{cusomContent()}</AtModalContent>
+        {/* <AtModalAction> <Button>取消</Button> <Button>确定</Button> </AtModalAction> */}
+      </AtModal>
+    </View>
+  );
+};
+
+export default IndexDetail;