根据原型图完成了商城界面

src/routes/market/index.css

@@ -0,0 +1,105 @@
+* {
+  margin: 0;
+}
+
+.market_page {
+  padding: 24px;
+  background-color: #f7f8fa;
+
+  .page-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 24px;
+  }
+
+  .function-area {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24px;
+
+    .kind-select {
+      display: flex;
+      justify-content: left;
+
+      .kind {
+        color: #4e5969;
+        text-align: center;
+        height: 36px;
+        line-height: 36px;
+        width: 126px;
+        font-size: 14px;
+        border-radius: 32px;
+        cursor: pointer;
+
+        &:hover {
+          color: #101010;
+          background-color: #bbbbbb5b;
+        }
+      }
+    }
+  }
+
+  .sub-title {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 16px;
+    margin-top: 22px;
+  }
+
+  .sellitem {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 210px;
+    transition: all 0.2s ease;
+    position: relative;
+    border: 1px solid rgba(229, 232, 239, 1);
+    border-radius: 4px;
+
+    .item-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 8px;
+      margin-left: 24px;
+      margin-top: 24px;
+    }
+
+    .date {
+      font-size: 14px;
+      color: #86909c;
+      margin-left: 24px;
+    }
+
+    .tip {
+      position: absolute;
+      right: 18px;
+      top: 18px;
+      width: 94px;
+      height: 24px;
+      text-align: center;
+      line-height: 24px;
+      font-weight: bold;
+      border-radius: 6px;
+      font-size: 14px;
+
+      &.now {
+        color: white;
+        background-color: #a2ef4d;
+      }
+      &.future {
+        color: white;
+        background-color: #bd3124;
+      }
+      &.past {
+        background-color: #efefef;
+      }
+    }
+
+    .item-bottom {
+      display: flex;
+      justify-content: right;
+      margin-bottom: 20px;
+    }
+  }
+}

src/routes/market/page.tsx

@@ -0,0 +1,184 @@
+// 展示商城主页
+import './index.css';
+import { Button, Grid, Input } from '@arco-design/web-react';
+
+const { GridItem } = Grid;
+const InputSearch = Input.Search;
+// Title:标题
+// date:日期
+// price:价格
+// detaillink:详情页链接地址
+// buylink:购买页面链接地址
+// tipType:提示类型,0:即将上线,1:进行中,2:已结束
+interface Product {
+  Title: string;
+  date: string;
+  price: number;
+  detailLink: string;
+  buyLink: string;
+  tipType: number;
+}
+const products: Product[] = [
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 0,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 1,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 2,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 0,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 1,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 2,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 0,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 1,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 2,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 0,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 1,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 2,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 0,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 1,
+  },
+  {
+    Title: 'Product 1',
+    date: '2021-01-01 00:00:00',
+    price: 19.99,
+    detailLink: 'https://example.com/product1',
+    buyLink: 'https://example.com/product1',
+    tipType: 2,
+  },
+];
+const tipClass = ['future', 'now', 'past'];
+const tipText = ['即将上线', '进行中', '已结束'];
+export default function Market() {
+  return (
+    <div className="market_page">
+      <div className="page-title">商城主页</div>
+      <div className="function-area">
+        <div className="kind-select">
+          <div className="kind">资源类型1</div>
+          <div className="kind">资源类型2</div>
+        </div>
+        <InputSearch allowClear placeholder="搜索" style={{ width: 288 }} />
+      </div>
+      <div className="sub-title">商品</div>
+      <Grid
+        cols={{ xs: 1, sm: 2, lg: 3, xl: 4, xxl: 5 }}
+        colGap={24}
+        rowGap={24}
+      >
+        {products.map((product, index) => (
+          <GridItem className="sellitem" key={index}>
+            <div className={`tip ${tipClass[product.tipType]}`}>
+              {tipText[product.tipType]}
+            </div>
+            <div className="item-top">
+              <div className="item-title">{product.Title}</div>
+              <div className="date">{product.Title}</div>
+            </div>
+            <div className="item-bottom">
+              <Button style={{ marginRight: 20 }} type="primary">
+                详情
+              </Button>
+              <Button style={{ marginRight: 20 }} type="secondary">
+                购买
+              </Button>
+            </div>
+          </GridItem>
+        ))}
+      </Grid>
+    </div>
+  );
+}