diff --git a/src/pages/components/FileUploadSection/index.less b/src/pages/components/FileUploadSection/index.less
new file mode 100644
index 0000000..3ed8fa1
--- /dev/null
+++ b/src/pages/components/FileUploadSection/index.less
@@ -0,0 +1,44 @@
+@color-1: #fff;
+@color-2: #dc5e35;
+@color-3: #363636;
+@color-4: #393939;
+@font-size-sm: 12px;
+@padding-xs: 8px;
+
+.wrapper2 {
+  display: flex;
+  position: absolute;
+  top: 48px;
+  right: 0;
+  bottom: 32px;
+  left: 178px;
+  flex-direction: column;
+  width: 277.5px;
+  padding: 130px @padding-xs 10px 186px;
+  background-color: @color-1;
+}
+
+.clsButton {
+  align-self: flex-start;
+  min-width: 82px;
+  height: 42px;
+  margin-left: 2px;
+  background-color: @color-1;
+  color: @color-2;
+}
+
+.clsIcon {
+  width: 20px;
+  height: 20px;
+  margin-top: 30px;
+  margin-left: 45px;
+  color: @color-3;
+  font-size: 20px;
+}
+
+.clsSpan {
+  margin-top: 10px;
+  margin-left: 32px;
+  color: @color-4;
+  font-size: @font-size-sm;
+}
diff --git a/src/pages/components/FileUploadSection/index.tsx b/src/pages/components/FileUploadSection/index.tsx
new file mode 100644
index 0000000..bcbf823
--- /dev/null
+++ b/src/pages/components/FileUploadSection/index.tsx
@@ -0,0 +1,26 @@
+import React from '@alipay/bigfish/react';
+import { Button } from '@alipay/bigfish/antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+const FileUploadSection: React.FC = () => {
+  const onButtonClick = () => {};
+
+  return (
+    <div className={styles.wrapper2}>
+      <Button
+        shape="round"
+        size="large"
+        onClick={onButtonClick}
+        className={styles.clsButton}
+      >
+        开店
+      </Button>
+      <ClockCircleOutlined className={styles.clsIcon} />
+      <span className={styles.clsSpan}>我的足迹</span>
+    </div>
+  );
+};
+
+export default FileUploadSection;
diff --git a/src/pages/components/FileUploadSection_2/index.less b/src/pages/components/FileUploadSection_2/index.less
new file mode 100644
index 0000000..db9ae43
--- /dev/null
+++ b/src/pages/components/FileUploadSection_2/index.less
@@ -0,0 +1,141 @@
+@color-1: #393939;
+@color-2: #fff;
+@color-3: #dc5e35;
+@color-4: #363636;
+@font-size-lg: 16px;
+@font-size-sm: 12px;
+@margin-sm: 12px;
+@margin-xss: 4px;
+@padding-xs: 8px;
+@padding-xss: 4px;
+
+.wrapper3 {
+  display: flex;
+  position: absolute;
+  top: 86px;
+  right: 32px;
+  bottom: 0;
+  left: 142px;
+  flex-direction: column;
+  align-items: center;
+  width: 277.5px;
+  padding: 56px @padding-xs @padding-xss;
+  background-color: @color-2;
+}
+
+.clsDiv4 {
+  display: flex;
+  flex-direction: column;
+}
+
+.clsSpan2 {
+  margin-left: 124px;
+  color: @color-1;
+  font-size: @font-size-lg;
+  font-weight: bold;
+}
+
+.clsSpan3 {
+  align-self: center;
+  margin-top: @margin-sm;
+  color: @color-1;
+  font-size: @font-size-lg;
+  font-weight: bold;
+}
+
+.clsButton2 {
+  align-self: flex-start;
+  min-width: 82px;
+  height: 42px;
+  margin-top: @margin-sm;
+  margin-left: 166px;
+  background-color: @color-2;
+  color: @color-3;
+}
+
+.clsDiv5 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+  margin-top: 22px;
+  gap: 2px;
+}
+
+.clsIcon2 {
+  width: 22px;
+  height: 22px;
+  color: @color-4;
+  font-size: 22px;
+}
+
+.clsDiv6 {
+  position: relative;
+  min-width: 186px;
+  min-height: 34px;
+}
+
+.clsDiv7 {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 14px;
+  left: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+.componentCommonLzd9 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-sm;
+}
+
+.componentCommonLzd9:nth-child(1) {
+  flex: 1;
+}
+
+.componentSharedIst5 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-sm;
+}
+
+.clsDiv8 {
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 60px;
+  bottom: 0;
+  left: 70px;
+  flex-direction: row;
+  align-items: center;
+}
+
+.componentCommonGvh9 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-lg;
+  font-weight: bold;
+}
+
+.componentCommonGvh9:nth-child(2) {
+  margin-left: @margin-xss;
+}
+
+.clsIcon3 {
+  width: 20px;
+  height: 20px;
+  color: @color-4;
+  font-size: 20px;
+}
+
+.clsDiv9 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: @margin-xss;
+  gap: 20px;
+}
diff --git a/src/pages/components/FileUploadSection_2/index.tsx b/src/pages/components/FileUploadSection_2/index.tsx
new file mode 100644
index 0000000..3d22127
--- /dev/null
+++ b/src/pages/components/FileUploadSection_2/index.tsx
@@ -0,0 +1,49 @@
+import React from '@alipay/bigfish/react';
+import { Button } from '@alipay/bigfish/antd';
+import { StarOutlined, ClockCircleOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+const FileUploadSection_2: React.FC = () => {
+  const onButtonClick = () => {};
+
+  return (
+    <div className={styles.wrapper3}>
+      <div className={styles.clsDiv4}>
+        <span className={styles.clsSpan2}>Hi!你好</span>
+        <span className={styles.clsSpan3}>你好</span>
+        <Button
+          shape="round"
+          size="large"
+          onClick={onButtonClick}
+          className={styles.clsButton2}
+        >
+          开店
+        </Button>
+        <div className={styles.clsDiv5}>
+          <StarOutlined className={styles.clsIcon2} />
+          <div className={styles.clsDiv6}>
+            <div className={styles.clsDiv7}>
+              <span className={styles.componentCommonLzd9}>宝贝收藏</span>
+              <span className={styles.componentSharedIst5}>买过的店</span>
+              <span className={styles.componentSharedIst5}>收藏的店</span>
+            </div>
+            <div className={styles.clsDiv8}>
+              <span className={styles.componentCommonGvh9}>Hi!</span>
+              <span className={styles.componentCommonGvh9}>你好</span>
+            </div>
+          </div>
+          <ClockCircleOutlined className={styles.clsIcon3} />
+        </div>
+      </div>
+      <div className={styles.clsDiv9}>
+        <span className={styles.componentSharedIst5}>宝贝收藏</span>
+        <span className={styles.componentSharedIst5}>买过的店</span>
+        <span className={styles.componentSharedIst5}>收藏的店</span>
+        <span className={styles.componentSharedIst5}>我的足迹</span>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadSection_2;
diff --git a/src/pages/components/FileUploadSection_3/index.less b/src/pages/components/FileUploadSection_3/index.less
new file mode 100644
index 0000000..1a5814e
--- /dev/null
+++ b/src/pages/components/FileUploadSection_3/index.less
@@ -0,0 +1,192 @@
+@color-1: #393939;
+@color-2: #363636;
+@color-3: #dc5e35;
+@color-4: #fff;
+@font-size-lg: 16px;
+@font-size-sm: 12px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@padding-xs: 8px;
+@padding-xss: 4px;
+
+.wrapper4 {
+  display: flex;
+  position: absolute;
+  top: 36px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  flex-direction: column;
+  width: 277.5px;
+  padding: 56px 6px @padding-xss @padding-xs;
+  background-color: @color-4;
+}
+
+.clsDiv11 {
+  display: flex;
+  flex-direction: column;
+  margin-left: @margin-sm;
+}
+
+.clsDiv12 {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  margin-right: 10px;
+}
+
+.componentCommonZsr2 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-lg;
+  font-weight: bold;
+}
+
+.componentCommonZsr2:nth-child(2) {
+  margin-top: 10px;
+}
+
+.uploadArea {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.clsIcon4 {
+  align-self: flex-end;
+  width: 22px;
+  height: 22px;
+  color: @color-2;
+  font-size: 22px;
+}
+
+.clsDiv14 {
+  position: relative;
+  align-self: center;
+  min-width: 84px;
+  min-height: 94px;
+}
+
+.clsButton3 {
+  position: absolute;
+  top: 36px;
+  right: 0;
+  left: 0;
+  height: 42px;
+  background-color: @color-4;
+}
+
+.clsSpan15 {
+  white-space: nowrap;
+  color: @color-3;
+}
+
+.clsSpan16 {
+  white-space: nowrap;
+  color: @color-1;
+}
+
+.clsIcon5 {
+  position: absolute;
+  right: 18px;
+  bottom: 0;
+  width: 22px;
+  height: 22px;
+  color: @color-2;
+  font-size: 22px;
+}
+
+.clsButton4 {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 82px;
+  height: 42px;
+  background-color: @color-4;
+  color: @color-3;
+}
+
+.clsDiv15 {
+  position: relative;
+  min-width: 262px;
+  min-height: 55px;
+  margin-top: @margin-xs;
+}
+
+.clsDiv16 {
+  position: relative;
+  top: 0;
+  right: 2px;
+  bottom: 26px;
+  left: 0;
+  min-width: 260px;
+  min-height: 28px;
+}
+
+.clsDiv17 {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.componentSharedIst5 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-sm;
+}
+
+.clsIcon6 {
+  position: absolute;
+  top: 5px;
+  right: 16px;
+  width: 22px;
+  height: 22px;
+  color: @color-2;
+  font-size: 22px;
+}
+
+.clsIcon7 {
+  position: absolute;
+  top: 6px;
+  left: 12px;
+  width: 22px;
+  height: 22px;
+  color: @color-2;
+  font-size: 22px;
+}
+
+.clsIcon8 {
+  position: absolute;
+  top: 20px;
+  right: 50px;
+  width: 22px;
+  height: 22px;
+  color: @color-2;
+  font-size: 22px;
+}
+
+.clsDiv18 {
+  display: flex;
+  position: absolute;
+  top: 36px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.clsDiv19 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
diff --git a/src/pages/components/FileUploadSection_3/index.tsx b/src/pages/components/FileUploadSection_3/index.tsx
new file mode 100644
index 0000000..e0c941b
--- /dev/null
+++ b/src/pages/components/FileUploadSection_3/index.tsx
@@ -0,0 +1,68 @@
+import React from '@alipay/bigfish/react';
+import { StarOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { Button } from '@alipay/bigfish/antd';
+
+import styles from './index.less';
+
+const FileUploadSection_3: React.FC = () => {
+  const onButtonClick = () => {};
+
+  const onButton2Click = () => {};
+
+  return (
+    <div className={styles.wrapper4}>
+      <div className={styles.clsDiv11}>
+        <div className={styles.clsDiv12}>
+          <span className={styles.componentCommonZsr2}>Hi!你好</span>
+          <span className={styles.componentCommonZsr2}>Hi!你好</span>
+        </div>
+        <div className={styles.uploadArea}>
+          <StarOutlined className={styles.clsIcon4} />
+          <div className={styles.clsDiv14}>
+            <Button
+              shape="round"
+              size="large"
+              onClick={onButtonClick}
+              className={styles.clsButton3}
+            >
+              <span className={styles.clsSpan15}>开店</span>
+              <span className={styles.clsSpan16}>Hi!</span>
+            </Button>
+            <ClockCircleOutlined className={styles.clsIcon5} />
+            <Button
+              shape="round"
+              size="large"
+              onClick={onButton2Click}
+              className={styles.clsButton4}
+            >
+              开店
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className={styles.clsDiv15}>
+        <div className={styles.clsDiv16}>
+          <div className={styles.clsDiv17}>
+            <span className={styles.componentSharedIst5}>宝贝收藏</span>
+            <span className={styles.componentSharedIst5}>买过的店</span>
+            <span className={styles.componentSharedIst5}>收藏的店</span>
+            <span className={styles.componentSharedIst5}>我的足迹</span>
+          </div>
+          <ClockCircleOutlined className={styles.clsIcon6} />
+          <StarOutlined className={styles.clsIcon7} />
+        </div>
+        <StarOutlined className={styles.clsIcon8} />
+        <div className={styles.clsDiv18}>
+          <div className={styles.clsDiv19}>
+            <span className={styles.componentSharedIst5}>宝贝收藏</span>
+            <span className={styles.componentSharedIst5}>买过的店</span>
+            <span className={styles.componentSharedIst5}>收藏的店</span>
+          </div>
+          <span className={styles.componentSharedIst5}>我的足迹</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadSection_3;
diff --git a/src/pages/components/FileUploadSection_4/index.less b/src/pages/components/FileUploadSection_4/index.less
new file mode 100644
index 0000000..34513d1
--- /dev/null
+++ b/src/pages/components/FileUploadSection_4/index.less
@@ -0,0 +1,10 @@
+@color-1: #fff;
+
+.wrapper5 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 140px;
+  height: 260px;
+  background-color: @color-1;
+}
diff --git a/src/pages/components/FileUploadSection_4/index.tsx b/src/pages/components/FileUploadSection_4/index.tsx
new file mode 100644
index 0000000..59ab10f
--- /dev/null
+++ b/src/pages/components/FileUploadSection_4/index.tsx
@@ -0,0 +1,9 @@
+import React from '@alipay/bigfish/react';
+
+import styles from './index.less';
+
+const FileUploadSection_4: React.FC = () => {
+  return <div className={styles.wrapper5} />;
+};
+
+export default FileUploadSection_4;
diff --git a/src/pages/components/FileUploadSection_5/index.less b/src/pages/components/FileUploadSection_5/index.less
new file mode 100644
index 0000000..b055604
--- /dev/null
+++ b/src/pages/components/FileUploadSection_5/index.less
@@ -0,0 +1,68 @@
+@color-1: #fff;
+@color-2: #dc5e35;
+@color-3: #363636;
+@color-4: #393939;
+@font-size-sm: 12px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@padding-xs: 8px;
+
+.wrapper6 {
+  display: flex;
+  flex-direction: column;
+  width: 282px;
+  margin-top: 2px;
+  margin-left: 146px;
+  padding: 15px 2px 152px @padding-xs;
+  background-color: @color-1;
+}
+
+.clsDiv20 {
+  display: flex;
+  flex-direction: column;
+  margin-right: @margin-sm;
+  margin-left: @margin-sm;
+}
+
+.clsButton5 {
+  align-self: flex-end;
+  min-width: 82px;
+  height: 42px;
+  background-color: @color-1;
+  color: @color-2;
+}
+
+.clsDiv21 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 28px;
+  margin-right: 2px;
+}
+
+.componentSharedHjt7 {
+  width: 22px;
+  height: 22px;
+  color: @color-3;
+  font-size: 22px;
+}
+
+.clsDiv22 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.clsDiv23 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: @margin-xs;
+}
+
+.componentSharedYmm9 {
+  color: @color-4;
+  font-size: @font-size-sm;
+}
diff --git a/src/pages/components/FileUploadSection_5/index.tsx b/src/pages/components/FileUploadSection_5/index.tsx
new file mode 100644
index 0000000..ce00c36
--- /dev/null
+++ b/src/pages/components/FileUploadSection_5/index.tsx
@@ -0,0 +1,39 @@
+import React from '@alipay/bigfish/react';
+import { Button } from '@alipay/bigfish/antd';
+import { StarOutlined, ClockCircleOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+const FileUploadSection_5: React.FC = () => {
+  const onButtonClick = () => {};
+
+  return (
+    <div className={styles.wrapper6}>
+      <div className={styles.clsDiv20}>
+        <Button
+          shape="round"
+          size="large"
+          onClick={onButtonClick}
+          className={styles.clsButton5}
+        >
+          开店
+        </Button>
+        <div className={styles.clsDiv21}>
+          <StarOutlined className={styles.componentSharedHjt7} />
+          <div className={styles.clsDiv22}>
+            <ClockCircleOutlined className={styles.componentSharedHjt7} />
+            <StarOutlined className={styles.componentSharedHjt7} />
+          </div>
+        </div>
+      </div>
+      <div className={styles.clsDiv23}>
+        <span className={styles.componentSharedYmm9}>宝贝收藏</span>
+        <span className={styles.componentSharedYmm9}>买过的店</span>
+        <span className={styles.componentSharedYmm9}>收藏的店</span>
+        <span className={styles.componentSharedYmm9}>我的足迹宝贝收藏</span>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadSection_5;
diff --git a/src/pages/components/FileUploadSection_6/index.less b/src/pages/components/FileUploadSection_6/index.less
new file mode 100644
index 0000000..564ba6f
--- /dev/null
+++ b/src/pages/components/FileUploadSection_6/index.less
@@ -0,0 +1,61 @@
+@color-1: #393939;
+@color-2: #fff;
+@color-3: #dc5e35;
+@color-4: #363636;
+@font-size-lg: 16px;
+@font-size-sm: 12px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@padding-xs: 8px;
+@padding-xss: 4px;
+
+.wrapper7 {
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  width: 294px;
+  margin-bottom: 148px;
+  padding: 96px 110px @padding-xss @padding-xs;
+  background-color: @color-2;
+}
+
+.clsSpan29 {
+  margin-left: 14px;
+  color: @color-1;
+  font-size: @font-size-lg;
+  font-weight: bold;
+}
+
+.clsButton6 {
+  align-self: center;
+  min-width: 82px;
+  height: 42px;
+  margin-top: @margin-sm;
+  background-color: @color-2;
+  color: @color-3;
+}
+
+.clsIcon12 {
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 30px;
+  margin-left: @margin-xs;
+  color: @color-4;
+  font-size: 20px;
+}
+
+.clsDiv24 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+  margin-top: 10px;
+  gap: 20px;
+}
+
+.componentSharedIst5 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-sm;
+}
diff --git a/src/pages/components/FileUploadSection_6/index.tsx b/src/pages/components/FileUploadSection_6/index.tsx
new file mode 100644
index 0000000..1e1d5ef
--- /dev/null
+++ b/src/pages/components/FileUploadSection_6/index.tsx
@@ -0,0 +1,31 @@
+import React from '@alipay/bigfish/react';
+import { Button } from '@alipay/bigfish/antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
+
+import styles from './index.less';
+
+const FileUploadSection_6: React.FC = () => {
+  const onButtonClick = () => {};
+
+  return (
+    <div className={styles.wrapper7}>
+      <span className={styles.clsSpan29}>Hi!你好</span>
+      <Button
+        shape="round"
+        size="large"
+        onClick={onButtonClick}
+        className={styles.clsButton6}
+      >
+        开店
+      </Button>
+      <ClockCircleOutlined className={styles.clsIcon12} />
+      <div className={styles.clsDiv24}>
+        <span className={styles.componentSharedIst5}>买过的店</span>
+        <span className={styles.componentSharedIst5}>收藏的店</span>
+        <span className={styles.componentSharedIst5}>我的足迹</span>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploadSection_6;
diff --git a/src/pages/index.less b/src/pages/index.less
new file mode 100644
index 0000000..5ba0fc5
--- /dev/null
+++ b/src/pages/index.less
@@ -0,0 +1,31 @@
+.wrapper {
+  padding: 0 290px 354px 0;
+}
+
+.uploadArea {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.clsDiv2 {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
+
+.clsDiv3 {
+  position: relative;
+  min-width: 455px;
+  min-height: 340px;
+}
+
+.clsDiv10 {
+  position: relative;
+  top: 0;
+  right: 178px;
+  bottom: 50px;
+  left: 0;
+  min-width: 278px;
+  min-height: 290px;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..dc39f97
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,32 @@
+import React from '@alipay/bigfish/react';
+import FileUploadSection from './components/FileUploadSection';
+import FileUploadSection_2 from './components/FileUploadSection_2';
+import FileUploadSection_3 from './components/FileUploadSection_3';
+import FileUploadSection_4 from './components/FileUploadSection_4';
+import FileUploadSection_5 from './components/FileUploadSection_5';
+import FileUploadSection_6 from './components/FileUploadSection_6';
+
+import styles from './index.less';
+
+const MyPageComponent: React.FC = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.uploadArea}>
+        <div className={styles.clsDiv2}>
+          <div className={styles.clsDiv3}>
+            <FileUploadSection />
+            <FileUploadSection_2 />
+            <div className={styles.clsDiv10}>
+              <FileUploadSection_3 />
+              <FileUploadSection_4 />
+            </div>
+          </div>
+          <FileUploadSection_5 />
+        </div>
+        <FileUploadSection_6 />
+      </div>
+    </div>
+  );
+};
+
+export default MyPageComponent;