componentName:FileUploadSection cls_div,uploadArea

component/components/MyComponent1/index.module.less

@@ -0,0 +1,124 @@
+@color-1: #393939;
+@color-2: #fff;
+@color-3: #dc5e35;
+@color-4: #363636;
+@font-size-base: 14px;
+@font-size-lg: 16px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@padding-xs: 8px;
+
+.clsDiv {
+  width: 222px;
+  padding: 2px @padding-xs 2px 2px;
+  background-color: @color-2;
+}
+
+.clsDiv2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.clsImage {
+  flex-shrink: 0;
+  align-self: center;
+  width: 62px;
+  height: 62px;
+  border-radius: 24px;
+}
+
+.clsSpan {
+  align-self: center;
+  margin-top: @margin-xs;
+  white-space: nowrap;
+  color: @color-1;
+  font-size: @font-size-base;
+  font-weight: bold;
+}
+
+.clsDiv3 {
+  display: flex;
+  align-items: center;
+  margin-top: 2px;
+}
+
+.clsDiv4 {
+  position: relative;
+  width: 146px;
+  height: 48px;
+}
+
+.clsImage2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex-shrink: 0;
+  width: 76px;
+  height: 48px;
+  border-radius: 18px;
+}
+
+.clsImage3 {
+  position: absolute;
+  top: 5px;
+  left: 74px;
+  flex-shrink: 0;
+  width: 72px;
+  height: 42px;
+  border-radius: 18px;
+}
+
+.clsButton {
+  min-width: 66px;
+  height: 34px;
+  margin-left: 2px;
+  background-color: @color-2;
+  color: @color-3;
+}
+
+.clsDiv5 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 14px;
+  margin-right: @margin-sm;
+  margin-left: 15px;
+  gap: 30px;
+}
+
+.clsIcon {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  color: @color-4;
+  font-size: @font-size-lg;
+}
+
+.clsImage4 {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 8px;
+}
+
+.clsImage5 {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+}
+
+.clsDiv6 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 6px;
+  margin-left: 5px;
+  gap: 16px;
+}
+
+.clsSpan2 {
+  white-space: nowrap;
+  color: @color-1;
+  font-size: 10px;
+}

component/components/MyComponent1/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button } from 'antd';
+import { StarOutlined, ClockCircleOutlined } from '@ant-design/icons';
+
+import styles from './index.module.less';
+
+const MyComponent1: React.FC = () => {
+  const onButtonClick = () => {};
+
+  return (
+    <div className={styles.clsDiv}>
+      <div className={styles.clsDiv2}>
+        <img
+          alt=""
+          src="https://lark-app.oss-cn-beijing.aliyuncs.com/fecodex/fallback-images/04.jpeg"
+          className={styles.clsImage}
+        />
+        <span className={styles.clsSpan}>Hi!你好</span>
+        <div className={styles.clsDiv3}>
+          <div className={styles.clsDiv4}>
+            <img
+              alt=""
+              src="https://lark-app.oss-cn-beijing.aliyuncs.com/fecodex/fallback-images/04.jpeg"
+              className={styles.clsImage2}
+            />
+            <img
+              alt=""
+              src="https://lark-app.oss-cn-beijing.aliyuncs.com/fecodex/fallback-images/04.jpeg"
+              className={styles.clsImage3}
+            />
+          </div>
+          <Button
+            shape="round"
+            onClick={onButtonClick}
+            className={styles.clsButton}
+          >
+            开店
+          </Button>
+        </div>
+        <div className={styles.clsDiv5}>
+          <StarOutlined className={styles.clsIcon} />
+          <img
+            alt=""
+            src="https://lark-app.oss-cn-beijing.aliyuncs.com/fecodex/fallback-images/04.jpeg"
+            className={styles.clsImage4}
+          />
+          <img
+            alt=""
+            src="https://lark-app.oss-cn-beijing.aliyuncs.com/fecodex/fallback-images/04.jpeg"
+            className={styles.clsImage5}
+          />
+          <ClockCircleOutlined className={styles.clsIcon} />
+        </div>
+        <div className={styles.clsDiv6}>
+          <span className={styles.clsSpan2}>宝贝收藏</span>
+          <span className={styles.clsSpan2}>买过的店</span>
+          <span className={styles.clsSpan2}>收藏的店</span>
+          <span className={styles.clsSpan2}>我的足迹</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MyComponent1;

component/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import MyComponent1 from './components/MyComponent1';
+
+const MyPageComponent: React.FC = () => {
+  return <MyComponent1 />;
+};
+
+export default MyPageComponent;