优化移动端列表卡片布局，并接入企微客服跳转

移动端详情改为双列、强化价格层级；桌面与移动端客服入口均跳转企业微信。

src/App.tsx

@@ -1,4 +1,5 @@
 import CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined";
+import CustomerServiceOutlined from "@ant-design/icons/es/icons/CustomerServiceOutlined";
 import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
 import ReloadOutlined from "@ant-design/icons/es/icons/ReloadOutlined";
 import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
@@ -41,6 +42,7 @@ import {
 } from "./listingDisplay";
 
 const pageSize = 10;
+const CUSTOMER_SERVICE_URL = "https://work.weixin.qq.com/kfid/kfced643ecb2ef43432";
 
 const initialOptions: ListingPublishOptions = {
   server_options: [],
@@ -327,8 +329,18 @@ function Showcase() {
             <a className="active">资源号租赁</a>
           </nav>
           <div className="nav-actions">
-            <span>已实名认证 · 安全交易</span>
+            <span className="nav-trust">已实名认证 · 安全交易</span>
-            <Button type="primary">24h在线客服</Button>
+            <Button
+              className="cs-btn"
+              type="primary"
+              href={CUSTOMER_SERVICE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<CustomerServiceOutlined />}
+              aria-label="24h在线客服"
+            >
+              <span className="cs-btn-label">24h在线客服</span>
+            </Button>
           </div>
         </div>
         <div className="warning-line" role="note">
@@ -336,6 +348,17 @@ function Showcase() {
         </div>
       </header>
 
+      <a
+        className="cs-float"
+        href={CUSTOMER_SERVICE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="24h在线客服"
+      >
+        <CustomerServiceOutlined />
+        <span>客服</span>
+      </a>
+
       <section className="search-stage">
         <Input.Search
           enterButton={<SearchOutlined />}
@@ -654,20 +677,24 @@ function ListingRow({ codeCopied, infoCopied, item, onCopyCode, onCopyInfo }: Li
       </div>
       <div className="listing-main">
         <div className="listing-head">
-          <div>
+          <div className="listing-head-main">
-            <strong>{item.title || `纯币${formatCoin(item)}资源号`}</strong>
+            <strong className="listing-title">{item.title || `纯币${formatCoin(item)}资源号`}</strong>
+            <div className="listing-head-actions">
               <Tag color="orange">{code}</Tag>
               <Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopyCode(item)}>
                 {codeCopied ? "已复制" : "复制"}
               </Button>
             </div>
-          <Tag color={item.is_accelerated_sale ? "orange" : "gold"}>{item.is_accelerated_sale ? "爆卖" : item.rank_level || "展示"}</Tag>
+          </div>
+          <Tag color={item.is_accelerated_sale ? "orange" : "gold"}>
+            {item.is_accelerated_sale ? "爆卖" : item.rank_level || "展示"}
+          </Tag>
         </div>
 
         <div className="detail-grid">
           {details.map(([label, value]) => (
             <div key={`${code}-${label}`} className="detail-item">
-              <span>{label}:</span>
+              <span>{label}</span>
               <strong>{value}</strong>
             </div>
           ))}
@@ -688,12 +715,14 @@ function ListingRow({ codeCopied, infoCopied, item, onCopyCode, onCopyInfo }: Li
         </div>
 
         <div className="price-line">
-          <span>
+          <span className="price-item price-rent">
-            租金(包含额外物品) <strong>￥{formatMoney(price)}</strong>
+            <em>租金(包含额外物品)</em>
+            <strong>￥{formatMoney(price)}</strong>
           </span>
           <Tooltip
             arrow={false}
             placement="top"
+            trigger={["hover", "click"]}
             rootClassName="resource-tooltip-root"
             styles={{
               container: {
@@ -706,20 +735,24 @@ function ListingRow({ codeCopied, infoCopied, item, onCopyCode, onCopyInfo }: Li
             }}
             title={resourceTooltip}
           >
-            <span className="price-hint">
+            <span className="price-item price-hint">
-              额外消耗品 <strong>￥{formatMoney(consumable)}</strong>
+              <em>额外消耗品</em>
+              <strong>￥{formatMoney(consumable)}</strong>
             </span>
           </Tooltip>
-          <span>
+          <span className="price-item">
-            租期 <strong className="rental-days">{rentalDuration}</strong>
+            <em>租期</em>
+            <strong className="rental-days">{rentalDuration}</strong>
           </span>
-          <span>
+          <span className="price-item">
-            押金 <strong>￥{formatMoney(deposit)}</strong>
+            <em>押金</em>
+            <strong>￥{formatMoney(deposit)}</strong>
           </span>
-          <span>
+          <span className="price-item price-total">
-            合计 <strong>￥{formatMoney(totalPrice)}</strong>
+            <em>合计</em>
+            <strong>￥{formatMoney(totalPrice)}</strong>
           </span>
-          <Button type="link" onClick={() => onCopyInfo(item)}>
+          <Button className="copy-info-btn" type="link" onClick={() => onCopyInfo(item)}>
             {infoCopied ? "已复制" : "复制信息"}
           </Button>
         </div>

src/styles.css

@@ -144,12 +144,55 @@ input {
   white-space: nowrap;
 }
 
-.nav-actions .ant-btn {
+.nav-actions .cs-btn {
   min-width: 112px;
   font-weight: 800;
   box-shadow: 0 8px 18px rgba(255, 107, 0, 0.18);
 }
 
+.cs-btn .cs-btn-label {
+  margin-left: 2px;
+}
+
+/* 移动端悬浮客服入口，桌面端隐藏 */
+.cs-float {
+  display: none;
+  position: fixed;
+  right: 16px;
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+  z-index: 40;
+  width: 56px;
+  height: 56px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  border-radius: 50%;
+  color: #fff;
+  background: linear-gradient(145deg, #ff8b2f, var(--brand));
+  box-shadow: 0 10px 24px rgba(255, 107, 0, 0.36);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.cs-float .anticon {
+  font-size: 20px;
+}
+
+.cs-float:active {
+  transform: scale(0.96);
+}
+
+.cs-float:hover {
+  color: #fff;
+  box-shadow: 0 12px 28px rgba(255, 107, 0, 0.42);
+}
+
 .warning-line {
   min-height: 28px;
   padding: 6px 16px;
@@ -578,14 +621,22 @@ input {
   gap: 16px;
 }
 
-.listing-head > div {
+.listing-head-main {
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
 }
 
-.listing-head strong {
+.listing-head-actions {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.listing-title {
   min-width: 0;
   color: #29383e;
   font-size: 18px;
@@ -620,6 +671,10 @@ input {
   white-space: nowrap;
 }
 
+.detail-item span::after {
+  content: ":";
+}
+
 .detail-item strong {
   min-width: 0;
   color: #202d33;
@@ -683,17 +738,26 @@ input {
 .price-line {
   min-width: 0;
   flex-wrap: wrap;
-  gap: 20px 36px;
+  align-items: center;
+  gap: 12px 28px;
   color: #526168;
   font-size: 14px;
 }
 
-.price-line span {
+.price-item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
   white-space: nowrap;
 }
 
+.price-item em {
+  font-style: normal;
+  font-weight: 600;
+  color: #667085;
+}
+
 .price-line strong {
-  margin-left: 7px;
   color: var(--brand);
   font-weight: 900;
 }
@@ -717,6 +781,10 @@ input {
   color: var(--brand-dark);
 }
 
+.copy-info-btn {
+  margin-left: auto;
+}
+
 /* 额外物品悬浮卡片 */
 .resource-tooltip-root .ant-tooltip-container,
 .resource-tooltip-root .ant-tooltip-inner {
@@ -862,10 +930,10 @@ input {
   white-space: nowrap;
 }
 
-.price-line .ant-btn {
+.price-line .ant-btn,
+.price-line .copy-info-btn {
   margin-left: auto;
   padding-right: 0;
-  color: #023f34;
   font-weight: 900;
 }
 
@@ -939,13 +1007,33 @@ input {
   }
 
   .nav-inner {
-    grid-template-columns: max-content 1fr;
+    grid-template-columns: max-content 1fr max-content;
   }
 
-  .nav-actions {
+  .nav-trust {
     display: none;
   }
 
+  .nav-actions .cs-btn {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .nav-actions .cs-btn .cs-btn-label {
+    display: none;
+  }
+
+  .nav-actions .cs-btn .anticon {
+    font-size: 18px;
+    margin-inline-end: 0 !important;
+  }
+
   .detail-grid {
     grid-template-columns: repeat(4, minmax(120px, 1fr));
   }
@@ -959,16 +1047,33 @@ input {
   .nav-inner {
     width: calc(100% - 28px);
     min-height: 78px;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "brand actions"
+      "links links";
     gap: 10px;
     padding: 12px 0;
   }
 
+  .brand {
+    grid-area: brand;
+  }
+
+  .nav-actions {
+    grid-area: actions;
+    justify-self: end;
+  }
+
   .nav-links {
+    grid-area: links;
     gap: 18px;
     overflow-x: auto;
   }
 
+  .cs-float {
+    display: flex;
+  }
+
   .search-stage,
   .filter-board,
   .result-area,
@@ -1000,19 +1105,69 @@ input {
     display: none;
   }
 
+  .brand-mark {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+
+  .brand strong {
+    font-size: 18px;
+  }
+
+  .nav-inner {
+    min-height: 64px;
+    padding: 10px 0;
+  }
+
+  .nav-links a {
+    min-height: 34px;
+    padding: 0 12px;
+    font-size: 14px;
+  }
+
+  .warning-line {
+    padding: 6px 12px;
+    font-size: 11px;
+  }
+
+  .search-stage {
+    padding: 12px 0 10px;
+  }
+
+  .search-stage,
+  .filter-board,
+  .result-area,
   .notice-line {
-    margin-left: 12px;
+    width: calc(100% - 20px);
-    margin-right: 12px;
+  }
-    width: calc(100% - 24px);
+
+  .notice-line {
+    margin-left: 10px;
+    margin-right: 10px;
+    width: calc(100% - 20px);
+    height: 32px;
+    font-size: 12px;
   }
 
   .notice-marquee .marquee-track {
     animation-duration: 16s;
   }
 
-  .filter-board,
+  .filter-board {
+    padding: 14px 14px 10px;
+    border-radius: 12px;
+  }
+
   .result-area {
-    border-radius: 0;
+    margin-top: 10px;
+    padding: 12px 10px 20px;
+    border-radius: 12px;
+  }
+
+  .section-title {
+    margin-bottom: 10px;
+    font-size: 14px;
   }
 
   .filter-row,
@@ -1021,12 +1176,33 @@ input {
     gap: 7px;
   }
 
+  .chip-list {
+    gap: 6px;
+  }
+
+  .chip-list button {
+    min-height: 32px;
+    height: 32px;
+    padding: 0 11px;
+  }
+
   .sort-segment {
     width: 100%;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .sort-segment::-webkit-scrollbar {
+    display: none;
   }
 
   .sort-segment button {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
+    height: 30px;
+    padding: 0 10px;
+    font-size: 12px;
   }
 
   .compact-select .ant-select {
@@ -1036,6 +1212,9 @@ input {
   .sort-toolbar {
     align-items: stretch;
     flex-direction: column;
+    gap: 10px;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
   }
 
   .toolbar-actions {
@@ -1046,27 +1225,237 @@ input {
     flex: 1;
   }
 
+  .listing-list {
+    gap: 10px;
+  }
+
   .listing-row {
     grid-template-columns: 1fr;
+    gap: 10px;
+    min-height: 0;
     padding: 12px;
+    border-radius: 12px;
+    box-shadow: 0 4px 14px rgba(21, 32, 43, 0.05);
   }
 
   .listing-cover {
     aspect-ratio: 16 / 9;
+    border-radius: 8px;
   }
 
-  .detail-grid {
+  .listing-main {
-    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .listing-head {
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .listing-head > .ant-tag {
+    flex: none;
+    margin-inline-end: 0;
+    margin-top: 2px;
+  }
+
+  .listing-head-main {
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
     gap: 6px;
   }
 
-  .price-line {
+  .listing-title {
-    gap: 10px 18px;
+    width: 100%;
+    font-size: 15px;
+    line-height: 1.35;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 
-  .price-line .ant-btn {
+  .listing-head-actions {
     width: 100%;
+  }
+
+  .listing-head-actions .ant-tag {
+    margin-inline-end: 0;
+  }
+
+  .listing-head-actions .ant-btn {
+    height: 28px;
+    padding-inline: 6px;
+    font-size: 12px;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    padding: 2px 10px;
+    border-radius: 10px;
+    background: #f7f9fb;
+    border: 1px solid #eef2f6;
+  }
+
+  .detail-item {
+    grid-template-columns: 44px minmax(0, 1fr);
+    gap: 4px;
+    align-items: baseline;
+    padding: 7px 4px;
+    font-size: 12px;
+    line-height: 1.35;
+    border-bottom: 1px solid #eef2f6;
+  }
+
+  .detail-item:nth-last-child(-n + 2) {
+    border-bottom: none;
+  }
+
+  .detail-item:nth-child(odd) {
+    padding-right: 8px;
+  }
+
+  .detail-item:nth-child(even) {
+    padding-left: 8px;
+    border-left: 1px solid #eef2f6;
+  }
+
+  .detail-item span {
+    font-size: 11px;
+    color: #98a2b3;
+  }
+
+  .detail-item strong {
+    font-size: 12px;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  .listing-meta {
+    gap: 5px;
+  }
+
+  .listing-meta .ant-tag {
+    margin: 0;
+    line-height: 20px;
+    font-size: 11px;
+  }
+
+  .remark {
+    width: 100%;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .price-line {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px 10px;
+    padding-top: 10px;
+    border-top: 1px solid #eef2f6;
+    font-size: 12px;
+  }
+
+  .price-item {
+    min-width: 0;
+    gap: 4px;
+  }
+
+  .price-item em {
+    font-size: 11px;
+    color: #98a2b3;
+  }
+
+  .price-rent {
+    grid-column: 1 / -1;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #fff8f1, #fff3e8);
+    border: 1px solid #ffe0c2;
+  }
+
+  .price-rent em {
+    font-size: 12px;
+    color: #9a5b24;
+    font-weight: 700;
+  }
+
+  .price-rent strong {
+    font-size: 18px;
+    letter-spacing: -0.02em;
+  }
+
+  .price-total strong {
+    font-size: 14px;
+  }
+
+  .price-line .ant-btn,
+  .price-line .copy-info-btn {
+    grid-column: 1 / -1;
+    width: 100%;
+    height: 40px;
     margin-left: 0;
-    justify-content: flex-start;
+    margin-top: 2px;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    background: var(--brand-soft);
+    border: 1px solid var(--brand-line);
+    color: var(--brand-dark);
+    font-size: 14px;
+  }
+
+  .price-line .ant-btn-link:hover {
+    background: #ffe8d4;
+    color: var(--brand);
+  }
+
+  .resource-tooltip-root .ant-tooltip-container,
+  .resource-tooltip-root .ant-tooltip-inner {
+    width: min(320px, calc(100vw - 24px)) !important;
+    max-width: min(320px, calc(100vw - 24px)) !important;
+  }
+
+  .pagination-bar {
+    margin-top: 16px;
+  }
+
+  .pagination-bar .ant-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .site-footer {
+    margin-top: 14px;
+    padding: 14px 12px;
+  }
+}
+
+@media (max-width: 360px) {
+  .detail-item {
+    grid-template-columns: 40px minmax(0, 1fr);
+    padding: 6px 2px;
+  }
+
+  .detail-item:nth-child(odd) {
+    padding-right: 6px;
+  }
+
+  .detail-item:nth-child(even) {
+    padding-left: 6px;
+  }
+
+  .price-rent strong {
+    font-size: 16px;
   }
 }