componentName:FileUploadSection cls_div,uploadArea

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;
+}

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;

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;
+}

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;