diff --git a/src/components/ExpandItem/ExpandItem.config.ts b/src/components/ExpandItem/ExpandItem.config.ts
new file mode 100644
index 0000000..fd50080
--- /dev/null
+++ b/src/components/ExpandItem/ExpandItem.config.ts
@@ -0,0 +1,3 @@
+export default {
+  component: true,
+};
diff --git a/src/components/ExpandItem/ExpandItem.scss b/src/components/ExpandItem/ExpandItem.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ExpandItem/ExpandItem.tsx b/src/components/ExpandItem/ExpandItem.tsx
new file mode 100644
index 0000000..f0ab7b2
--- /dev/null
+++ b/src/components/ExpandItem/ExpandItem.tsx
@@ -0,0 +1,31 @@
+import { View } from '@tarojs/components';
+import { Component, ReactNode } from 'react';
+import { AtAccordion } from 'taro-ui';
+
+export class ExpandItem extends Component {
+  state = {
+    open: false,
+  };
+  props = {
+    title: '',
+    content: <View></View>,
+  };
+
+  handleClick(value: boolean) {
+    this.setState({ open: value });
+  }
+
+  render(): ReactNode {
+    return (
+      <View>
+        <AtAccordion
+          open={this.state.open}
+          onClick={this.handleClick.bind(this)}
+          title={this.props.title}
+        >
+          {this.props.content}
+        </AtAccordion>
+      </View>
+    );
+  }
+}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 3bb921e..68c870d 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -3,7 +3,6 @@ import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
 import {
   AtCard,
-  AtAccordion,
   AtInputNumber,
   AtButton,
   AtList,
@@ -23,6 +22,7 @@ import { getMemberDutyInfo } from '@/service/memberDutyInfo';
 import { getUncompletedTicketList } from '@/service/uncompletedTicket';
 import { changeDutyCnt } from '@/service/changeDutyCount';
 import { TicketListItem } from '@/components/TicketListItem/TicketListItem';
+import { ExpandItem } from '@/components/ExpandItem/ExpandItem';
 import './index.scss';
 import TitleCard from './TitleCard';
 import { DutyInfo, DutyData } from './DutyInfo';
@@ -47,34 +47,6 @@ function mainPageCard(c: CardContent): JSX.Element {
   );
 }
 
-class ExpandItem extends Component {
-  state = {
-    open: false,
-  };
-  props = {
-    title: '',
-    content: <View></View>,
-  };
-
-  handleClick(value: boolean) {
-    this.setState({ open: value });
-  }
-
-  render(): ReactNode {
-    return (
-      <View>
-        <AtAccordion
-          open={this.state.open}
-          onClick={this.handleClick.bind(this)}
-          title={this.props.title}
-        >
-          {this.props.content}
-        </AtAccordion>
-      </View>
-    );
-  }
-}
-
 interface MainPageState {
   fixList: Array<TicketListItem>;
   rs: RequestState;