yml/hfb_show
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
移动端详情改为双列、强化价格层级；桌面与移动端客服入口均跳转企业微信。
This commit is contained in:
yml2213
2026-07-16 23:46:36 +08:00
parent 51991071e7
commit f856473d0d
2 changed files with 466 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+54 -21
View File
@@ -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>
<Button type="primary">24h在线客服</Button>
<span className="nav-trust">已实名认证 · 安全交易</span>
<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>
<strong>{item.title || `纯币${formatCoin(item)}资源号`}</strong>
<Tag color="orange">{code}</Tag>
<Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopyCode(item)}>
{codeCopied ? "已复制" : "复制"}
</Button>
<div className="listing-head-main">
<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>
</div>
<Tag color={item.is_accelerated_sale ? "orange" : "gold"}>{item.is_accelerated_sale ? "爆卖" : item.rank_level || "展示"}</Tag>
<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>
租金(包含额外物品) <strong>￥{formatMoney(price)}</strong>
<span className="price-item price-rent">
<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">
额外消耗品 <strong>￥{formatMoney(consumable)}</strong>
<span className="price-item price-hint">
<em>额外消耗品</em>
<strong>￥{formatMoney(consumable)}</strong>
</span>
</Tooltip>
<span>
租期 <strong className="rental-days">{rentalDuration}</strong>
<span className="price-item">
<em>租期</em>
<strong className="rental-days">{rentalDuration}</strong>
</span>
<span>
押金 <strong>￥{formatMoney(deposit)}</strong>
<span className="price-item">
<em>押金</em>
<strong>￥{formatMoney(deposit)}</strong>
</span>
<span>
合计 <strong>￥{formatMoney(totalPrice)}</strong>
<span className="price-item price-total">
<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
+412 -23
View File
@@ -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;
margin-right: 12px;
width: calc(100% - 24px);
width: calc(100% - 20px);
}
.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 {
grid-template-columns: 1fr;
.listing-main {
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 {
gap: 10px 18px;
.listing-title {
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;
}
}