From e4ec917a031b5fe6775dabb7c96ff08f06a11385 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Wed, 14 Oct 2026 10:55:55 +0800 Subject: [PATCH] style(mobile-oa-h5): JD-style left status dropdown on presign list Co-authored-by: Cursor --- mobile-oa-h5/src/styles/market.css | 270 ++++++++++++++++++++++++++++- 1 file changed, 265 insertions(+), 5 deletions(-) diff --git a/mobile-oa-h5/src/styles/market.css b/mobile-oa-h5/src/styles/market.css index a30017b2..e902e47a 100644 --- a/mobile-oa-h5/src/styles/market.css +++ b/mobile-oa-h5/src/styles/market.css @@ -80,10 +80,104 @@ } .market-list__filters .van-search { + min-width: 0; + flex: 1; padding: 0; background: #fff; } +.market-list__search-row { + display: flex; + align-items: center; + gap: 8px; +} + +.market-list__filter-button { + position: relative; + display: inline-flex; + min-width: 68px; + min-height: 44px; + flex: 0 0 auto; + align-items: center; + justify-content: center; + gap: 4px; + padding: 0 10px; + border: 1px solid var(--market-border); + border-radius: 22px; + background: #fff; + color: var(--market-primary-dark); + font-size: 14px; +} + +.market-list__filter-count { + display: inline-flex; + min-width: 18px; + height: 18px; + align-items: center; + justify-content: center; + padding: 0 4px; + border-radius: 9px; + background: var(--market-primary); + color: #fff; + font-size: 11px; + line-height: 18px; +} + +.market-filter-sheet { + box-sizing: border-box; + max-height: min(78vh, 680px); + padding-bottom: env(safe-area-inset-bottom); + overflow: hidden; +} + +.market-filter-sheet__header { + padding: 18px 48px 12px; + color: var(--market-text, #18332a); + font-size: 17px; + font-weight: 700; + text-align: center; +} + +.market-filter-sheet__body { + max-height: calc(min(78vh, 680px) - 136px); + padding: 0 16px; + overflow-y: auto; +} + +.market-filter-sheet__range { + padding: 10px 0; + border-bottom: 1px solid #f0f4f2; +} + +.market-filter-sheet__range-label { + padding: 0 16px 6px; + color: var(--market-text, #18332a); + font-size: 14px; + font-weight: 600; +} + +.market-filter-sheet__range-fields { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +.market-filter-sheet__range-fields .van-cell { + padding-top: 8px; + padding-bottom: 8px; + border-radius: 10px; + background: #f6faf8; +} + +.market-filter-sheet__actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + padding: 12px 16px 16px; + border-top: 1px solid var(--market-border, #dce9e4); + background: #fff; +} + /* 与 MarketFormField tabs 同结构:原生 button,微信 web-view 可点 */ .market-source-tabs { display: flex; @@ -95,7 +189,7 @@ .market-source-tabs__btn { flex: 0 0 auto; - min-height: 38px; + min-height: 44px; padding: 0 14px; border: 1px solid var(--market-border); border-radius: 8px; @@ -173,6 +267,50 @@ body.van-toast--unclickable .presign-order-page * { font-weight: 600; } +.market-list__batch-toolbar { + display: flex; + min-height: 48px; + align-items: center; + gap: 8px; + margin-bottom: 12px; + padding: 8px 10px; + border: 1px solid var(--market-border); + border-radius: 12px; + background: #fff; + color: var(--market-muted); + font-size: 13px; +} + +.market-list__batch-toolbar span { + margin-right: auto; +} + +.market-list__batch-toolbar button { + min-width: 44px; + min-height: 44px; + padding: 0 10px; + border: 1px solid var(--market-border); + border-radius: 9px; + background: #fff; + color: var(--market-primary-dark); +} + +.market-list__batch-toolbar button.is-danger { + border-color: #fecaca; + color: #dc2626; +} + +.market-list__batch-toolbar button:disabled { + opacity: 0.45; +} + +.market-list__batch-toolbar .market-list__batch-start { + display: inline-flex; + align-items: center; + gap: 5px; + margin-left: auto; +} + .market-list-card { box-sizing: border-box; width: 100%; @@ -194,6 +332,23 @@ body.van-toast--unclickable .presign-order-page * { border-bottom: 1px solid #eef4f1; } +.market-list-card__selector { + display: grid; + width: 44px; + height: 44px; + flex: 0 0 44px; + place-items: center; + padding: 0; + border: 0; + background: transparent; + color: #94a3b8; + font-size: 24px; +} + +.market-list-card__selector.is-selected { + color: var(--market-primary); +} + .market-list-card__index { display: grid; width: 30px; @@ -310,7 +465,7 @@ body.van-toast--unclickable .presign-order-page * { .market-list-card__actions .van-button { min-width: 76px; - min-height: 36px; + min-height: 44px; border-radius: 9px; } @@ -340,6 +495,11 @@ body.van-toast--unclickable .presign-order-page * { font-size: 13px; } +.market-state .van-button { + min-width: 44px; + min-height: 44px; +} + .market-detail__summary { display: flex; align-items: center; @@ -461,6 +621,35 @@ body.van-toast--unclickable .presign-order-page * { font-size: 15px; } +.market-protocol-total-sync { + margin: 0 0 8px; + color: var(--market-muted); + font-size: 13px; + line-height: 1.5; +} + +.market-protocol-total-sync.is-warn { + color: #d97706; +} + +.market-deposit-transfer { + display: flex; + flex-wrap: wrap; + gap: 8px 12px; + align-items: center; + margin-top: 10px; + padding: 10px 12px; + border: 1px solid var(--market-border); + border-radius: 10px; + background: #fff; + color: #18332a; + font-size: 13px; +} + +.market-deposit-transfer strong { + font-weight: 600; +} + .market-form-field { display: grid; gap: 7px; @@ -570,6 +759,32 @@ body.van-toast--unclickable .presign-order-page * { padding-top: 10px; } +.market-sample-option { + box-sizing: border-box; + min-width: 0; + min-height: 44px; + align-items: flex-start; + padding: 10px; + border: 1px solid var(--market-border); + border-radius: 10px; +} + +.market-sample-option .van-checkbox__label { + display: grid; + min-width: 0; + gap: 3px; + overflow-wrap: anywhere; +} + +.market-sample-option span { + color: var(--market-muted); + font-size: 12px; +} + +.market-sample-option__linked { + color: #b45309 !important; +} + .market-bottom-bar { position: fixed; z-index: 20; @@ -668,6 +883,50 @@ body.van-toast--unclickable .presign-order-page * { background: transparent; } +.presign-order-page__filter-row { + display: flex; + align-items: center; + margin-top: 2px; + margin-left: -4px; +} + +.presign-order-page__filter-row .van-dropdown-menu { + width: auto; + height: 40px; + background: transparent; +} + +.presign-order-page__filter-row .van-dropdown-menu__bar { + height: 40px; + box-shadow: none; + background: transparent; +} + +.presign-order-page__filter-row .van-dropdown-menu__item { + flex: none; + justify-content: flex-start; + padding: 0 10px; +} + +.presign-order-page__filter-row .van-dropdown-menu__title { + padding: 0; + font-size: 13px; + font-weight: 500; + color: var(--presign-text); +} + +.presign-order-page__filter-row .van-dropdown-menu__title::after { + margin-top: -2px; + border-color: transparent transparent currentColor currentColor; + opacity: 0.7; +} + +.presign-order-page__filter-row .van-dropdown-menu__title--active, +.presign-order-page__filter-row .van-dropdown-menu__title--down { + color: var(--presign-primary); + font-weight: 600; +} + .presign-order-page__content { box-sizing: border-box; min-height: 100vh; @@ -789,7 +1048,7 @@ body.van-toast--unclickable .presign-order-page * { .presign-order-card__actions .van-button { min-width: 82px; - min-height: 36px; + min-height: 44px; border-radius: 9px; } @@ -827,7 +1086,7 @@ body.van-toast--unclickable .presign-order-page * { .presign-order-list__error .van-button { min-width: 72px; - min-height: 36px; + min-height: 44px; } @media (min-width: 414px) { @@ -882,7 +1141,8 @@ body.van-toast--unclickable .presign-order-page * { } .presign-form-section__heading .van-button { - min-height: 36px; + min-width: 44px; + min-height: 44px; flex: 0 0 auto; border-color: var(--presign-primary); color: var(--presign-primary-dark);