From db6e4795c6676165f0e9c79ff9ffc3df33f70556 Mon Sep 17 00:00:00 2001
From: Zency <2659255665@qq.com>
Date: Sun, 29 Oct 2023 20:03:04 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=E5=9B=BE=E5=AE=8C=E6=88=90=E4=BA=86=E5=95=86=E5=9F=8E=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/market/index.css | 177 ++++++++++++++++++++++++++++++++++++
 src/routes/market/page.tsx  | 172 +++++++++++++++++++++++++++++++++++
 2 files changed, 349 insertions(+)
 create mode 100644 src/routes/market/index.css
 create mode 100644 src/routes/market/page.tsx

diff --git a/src/routes/market/index.css b/src/routes/market/index.css
new file mode 100644
index 0000000..c7a988b
--- /dev/null
+++ b/src/routes/market/index.css
@@ -0,0 +1,177 @@
+.marketPage {
+  padding: 23px;
+  background-color: #f7f8fa;
+}
+
+.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;
+}
+
+.pageTitle {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 24px;
+}
+
+.functionArea {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.kindSelect {
+  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;
+}
+
+.kind:hover {
+  color: #101010;
+  background-color: #bbbbbb5b;
+}
+
+.search {
+  padding-left: 12px;
+  padding-right: 12px;
+  display: flex;
+  background-color: #bbbbbb5b;
+  width: 288px;
+  height: 38px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 3px;
+}
+
+.searchInput {
+  background-color: transparent;
+  width: 86%;
+}
+
+.subTitle {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  margin-top: 22px;
+}
+
+.product {
+  background-color: aliceblue;
+  padding: 10px;
+  color: black;
+}
+
+.img {
+  width: 100%;
+  width: 150px;
+  object-fit: cover;
+}
+
+.intro {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+* {
+  margin: 0;
+}
+.sellBox {
+  width: 100%;
+  display: grid;
+  row-gap: 24px;
+  column-gap: 24px;
+  grid-template-columns: repeat(4, minmax(150px, 1fr));
+}
+.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;
+}
+.itemTitle {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  margin-left: 24px;
+  margin-top: 24px;
+}
+.date {
+  font-size: 14px;
+  color: #86909c;
+  margin-left: 24px;
+}
+
+.itemBottom {
+  display: flex;
+  justify-content: right;
+  margin-bottom: 20px;
+}
+
+.detail {
+  background-color: #1f63ff;
+  color: white;
+  width: 72px;
+  line-height: 38px;
+  height: 38px;
+  text-align: center;
+  border-radius: 4px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.buy {
+  background-color: #bbbbbb5b;
+  cursor: pointer;
+  width: 72px;
+  text-align: center;
+  border-radius: 4px;
+  line-height: 38px;
+  height: 38px;
+  color: #4e5969;
+  margin-right: 20px;
+}
+
+@media (max-width: 1268px) {
+  .sellBox {
+    grid-template-columns: repeat(3, minmax(240px, 1fr));
+  }
+}
+@media (min-width: 1920px) {
+  .sellBox {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+}
diff --git a/src/routes/market/page.tsx b/src/routes/market/page.tsx
new file mode 100644
index 0000000..6db8e7b
--- /dev/null
+++ b/src/routes/market/page.tsx
@@ -0,0 +1,172 @@
+import './index.css';
+
+// Title:标题 string
+// date:日期 string
+// price:价格 number
+// detaillink:详情页链接地址 string
+// buylink:购买页面链接地址 string
+// tipType:提示类型,0:即将上线,1:进行中,2:已结束 number
+const products = [
+  {
+    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,
+  },
+];
+// tip的类型
+const tipType = ['future', 'now', 'past'];
+const tipText = ['即将上线', '进行中', '已结束'];
+export default function Market() {
+  return (
+    <div className="marketPage">
+      <div className="pageTitle">商城主页</div>
+      <div className="functionArea">
+        <div className="kindSelect">
+          <div className="kind">资源类型1</div>
+          <div className="kind">资源类型2</div>
+        </div>
+        <div className="search">
+          <input className="searchInput" type="text" placeholder="搜索商品" />
+          <button className="searchButton">搜索</button>
+        </div>
+      </div>
+      <div className="subTitle">商品</div>
+      <div className="sellBox">
+        {products.map((product, index) => (
+          <div className="sellitem" key={index}>
+            <div className={`tip ${tipType[product.tipType]}`}>
+              {tipText[product.tipType]}
+            </div>
+            <div className="itemTop">
+              <div className="itemTitle">{product.Title}</div>
+              <div className="date">{product.Title}</div>
+            </div>
+            <div className="itemBottom">
+              <a className="detail" href={product.detailLink}>
+                详情
+              </a>
+              <a className="buy" href={product.buyLink}>
+                购买
+              </a>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

From bd378a48e33c17307665f6fe26b3beb1e597d22e Mon Sep 17 00:00:00 2001
From: Zency <2659255665@qq.com>
Date: Thu, 2 Nov 2023 20:21:07 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=A0=B9=E6=8D=AEpr=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E4=BF=AE=E6=94=B9=E4=BA=86=E5=95=86=E5=9F=8E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/market/index.css | 264 +++++++++++++-----------------------
 src/routes/market/page.tsx  |  72 ++++++----
 2 files changed, 138 insertions(+), 198 deletions(-)

diff --git a/src/routes/market/index.css b/src/routes/market/index.css
index c7a988b..fa59a15 100644
--- a/src/routes/market/index.css
+++ b/src/routes/market/index.css
@@ -1,177 +1,105 @@
-.marketPage {
-  padding: 23px;
-  background-color: #f7f8fa;
-}
-
-.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;
-}
-
-.pageTitle {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 24px;
-}
-
-.functionArea {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-
-.kindSelect {
-  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;
-}
-
-.kind:hover {
-  color: #101010;
-  background-color: #bbbbbb5b;
-}
-
-.search {
-  padding-left: 12px;
-  padding-right: 12px;
-  display: flex;
-  background-color: #bbbbbb5b;
-  width: 288px;
-  height: 38px;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 3px;
-}
-
-.searchInput {
-  background-color: transparent;
-  width: 86%;
-}
-
-.subTitle {
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 16px;
-  margin-top: 22px;
-}
-
-.product {
-  background-color: aliceblue;
-  padding: 10px;
-  color: black;
-}
-
-.img {
-  width: 100%;
-  width: 150px;
-  object-fit: cover;
-}
-
-.intro {
-  font-size: 20px;
-  font-weight: bold;
-}
-
 * {
   margin: 0;
 }
-.sellBox {
-  width: 100%;
-  display: grid;
-  row-gap: 24px;
-  column-gap: 24px;
-  grid-template-columns: repeat(4, minmax(150px, 1fr));
-}
-.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;
-}
-.itemTitle {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  margin-left: 24px;
-  margin-top: 24px;
-}
-.date {
-  font-size: 14px;
-  color: #86909c;
-  margin-left: 24px;
-}
 
-.itemBottom {
-  display: flex;
-  justify-content: right;
-  margin-bottom: 20px;
-}
+.market_page {
+  padding: 24px;
+  background-color: #f7f8fa;
 
-.detail {
-  background-color: #1f63ff;
-  color: white;
-  width: 72px;
-  line-height: 38px;
-  height: 38px;
-  text-align: center;
-  border-radius: 4px;
-  margin-right: 20px;
-  cursor: pointer;
-}
-.buy {
-  background-color: #bbbbbb5b;
-  cursor: pointer;
-  width: 72px;
-  text-align: center;
-  border-radius: 4px;
-  line-height: 38px;
-  height: 38px;
-  color: #4e5969;
-  margin-right: 20px;
-}
+  .page-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 24px;
+  }
 
-@media (max-width: 1268px) {
-  .sellBox {
-    grid-template-columns: repeat(3, minmax(240px, 1fr));
+  .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;
+        }
+      }
+    }
   }
-}
-@media (min-width: 1920px) {
-  .sellBox {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+
+  .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;
+    }
   }
 }
diff --git a/src/routes/market/page.tsx b/src/routes/market/page.tsx
index 6db8e7b..e2320de 100644
--- a/src/routes/market/page.tsx
+++ b/src/routes/market/page.tsx
@@ -1,12 +1,24 @@
+// 展示商城主页
 import './index.css';
+import { Button, Grid, Input } from '@arco-design/web-react';
 
-// Title:标题 string
-// date:日期 string
-// price:价格 number
-// detaillink:详情页链接地址 string
-// buylink:购买页面链接地址 string
-// tipType:提示类型,0:即将上线,1:进行中,2:已结束 number
-const products = [
+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',
@@ -128,45 +140,45 @@ const products = [
     tipType: 2,
   },
 ];
-// tip的类型
-const tipType = ['future', 'now', 'past'];
+const tipClass = ['future', 'now', 'past'];
 const tipText = ['即将上线', '进行中', '已结束'];
 export default function Market() {
   return (
-    <div className="marketPage">
-      <div className="pageTitle">商城主页</div>
-      <div className="functionArea">
-        <div className="kindSelect">
+    <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>
-        <div className="search">
-          <input className="searchInput" type="text" placeholder="搜索商品" />
-          <button className="searchButton">搜索</button>
-        </div>
+        <InputSearch allowClear placeholder="搜索" style={{ width: 288 }} />
       </div>
-      <div className="subTitle">商品</div>
-      <div className="sellBox">
+      <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) => (
-          <div className="sellitem" key={index}>
-            <div className={`tip ${tipType[product.tipType]}`}>
+          <GridItem className="sellitem" key={index}>
+            <div className={`tip ${tipClass[product.tipType]}`}>
               {tipText[product.tipType]}
             </div>
-            <div className="itemTop">
-              <div className="itemTitle">{product.Title}</div>
+            <div className="item-top">
+              <div className="item-title">{product.Title}</div>
               <div className="date">{product.Title}</div>
             </div>
-            <div className="itemBottom">
-              <a className="detail" href={product.detailLink}>
+            <div className="item-bottom">
+              <Button style={{ marginRight: 20 }} type="primary">
                 详情
-              </a>
-              <a className="buy" href={product.buyLink}>
+              </Button>
+              <Button style={{ marginRight: 20 }} type="secondary">
                 购买
-              </a>
+              </Button>
             </div>
-          </div>
+          </GridItem>
         ))}
-      </div>
+      </Grid>
     </div>
   );
 }