init

src/pages/Portfolio/index.css

@@ -0,0 +1,100 @@
+.user-portfolio-page {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+
+  .user-portfolio-wrapper {
+    width: 1120px;
+    height: 790px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 20px;
+    overflow: hidden;
+
+    .user-portfolio-search-area {
+      width: 100%;
+      height: 36px;
+
+      .ser-portfolio-searc {
+        width: 100%;
+        height: 36px;
+        border: 1px solid #2c7aff;
+
+        span {
+          background-color: #fff;
+        }
+        input {
+          background-color: #fff;
+        }
+      }
+    }
+
+    .user-portfolio-list {
+      width: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      padding: 20px 0;
+
+      .user-portfolio-item:nth-child(3n) {
+        margin-right: 0;
+      }
+
+      .user-portfolio-item {
+        flex-shrink: 0;
+        width: 340px;
+        height: 82px;
+        box-sizing: border-box;
+        padding: 15px 20px;
+        border-radius: 8px;
+        background-color: #f7f8fa;
+        border: 1px solid #e5e6eb;
+        margin-right: 20px;
+        margin-bottom: 20px;
+
+        > span {
+          border: 1px solid #2c7aff;
+          background-color: #e8f3ff;
+          height: 20px;
+          border-radius: 2px;
+          padding: 0 8px;
+          box-sizing: border-box;
+          color: #2c7aff;
+          font-size: 12px;
+          font-weight: 600;
+        }
+        > div {
+          width: 100%;
+          height: 24px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 5px;
+
+          > p {
+            width: 80%;
+            height: 100%;
+            font-size: 16px;
+            font-weight: 600;
+            color: #1d2129;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          > span {
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 400;
+            color: #2c7aff;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Portfolio/index.jsx

@@ -0,0 +1,43 @@
+import { Input } from "@arco-design/web-react";
+import { mockData } from "@/data/mockData";
+import "./index.css";
+
+const InputSearch = Input.Search;
+const { projectLibrary } = mockData;
+
+const Portfolio = () => {
+  const onSearch = (value) => {
+    console.log(value);
+  };
+
+  const handleClickBtn = () => {
+    console.log("点击了详情按钮");
+  };
+
+  return (
+    <div className="user-portfolio-page">
+      <div className="user-portfolio-wrapper">
+        <div className="user-portfolio-search-area">
+          <InputSearch
+            className="ser-portfolio-search"
+            onSearch={onSearch}
+            searchButton="搜索"
+          />
+        </div>
+        <ul className="user-portfolio-list">
+          {projectLibrary?.projects?.map((item) => (
+            <li className="user-portfolio-item" key={item.id}>
+              <span>{item.subtitle}</span>
+              <div>
+                <p>{item.title}</p>
+                <span onClick={() => handleClickBtn()}>详情 &gt; </span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Portfolio;