diff --git a/web-admin/src/views/m/crm/product/product.scss b/web-admin/src/views/m/crm/product/product.scss new file mode 100644 index 000000000..4f3c670db --- /dev/null +++ b/web-admin/src/views/m/crm/product/product.scss @@ -0,0 +1,390 @@ +:root { + --van-primary-color: #0a9f6d; + --van-success-color: #0a9f6d; + --van-danger-color: #dc2626; + --van-warning-color: #d97706; + --van-button-primary-background: #0a9f6d; + --van-button-primary-border-color: #0a9f6d; + --van-dropdown-menu-title-active-text-color: #0a9f6d; + --van-dropdown-menu-option-active-color: #0a9f6d; + --van-tabs-bottom-bar-color: #0a9f6d; + --van-tab-active-text-color: #0a9f6d; +} + +.mp-product-page { + --van-primary-color: #0a9f6d; + --van-success-color: #0a9f6d; + --van-button-primary-background: #0a9f6d; + --van-button-primary-border-color: #0a9f6d; + min-height: 100%; + background: #f5f8f7; +} + +.mp-product-list .mp-wv-header { + padding-bottom: 10px; +} + +.mp-product-list .mp-wv-header .mp-wv-search { + margin-bottom: 0; +} + +.mp-product-list .mp-wv-header .mp-product-dd { + margin-top: 4px; +} + +.mp-product-loading { + display: flex; + justify-content: center; + padding: 48px 16px; +} + +.mp-product-error { + display: flex; + gap: 10px; + align-items: center; + justify-content: space-between; + margin: 0 10px 10px; + padding: 10px 12px; + font-size: 13px; + color: #b91c1c; + background: #fff7f7; + border: 1px solid #fecaca; + border-radius: 10px; +} + +.mp-product-tag-row { + display: flex; + flex-wrap: wrap; + gap: 6px; + justify-content: flex-end; +} + +/* ── 产品管理按钮:对齐列表卡片 .mp-wv-btn(高 30px)── */ +@mixin mp-product-card-btn { + box-sizing: border-box; + height: 30px !important; + min-height: 30px !important; + padding: 0 10px !important; + font-size: 13px !important; + font-weight: 500; + line-height: 1 !important; + border-radius: 8px !important; + + &.van-button--round { + border-radius: 8px !important; + } + + &.van-button--default { + color: #1f2a26 !important; + background: #fff !important; + border: 1px solid #dcebe4 !important; + } + + &.van-button--primary:not(.van-button--plain) { + color: #fff !important; + font-weight: 600; + background: #0a9f6d !important; + border: 1px solid #0a9f6d !important; + } + + &.van-button--disabled, + &[disabled] { + opacity: 0.45; + } +} + +.mp-product-page .mp-wv-fab-bar { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 40; + display: flex; + flex-wrap: nowrap; + gap: 8px; + width: 100%; + max-width: min(480px, 100%); + margin: 0 auto; + padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); + background: #fff; + border-top: 1px solid #dcebe4; + box-shadow: 0 -8px 24px rgb(34 64 52 / 12%); + + .van-button { + flex: 1 1 0; + min-width: 0; + @include mp-product-card-btn; + } +} + +.mp-product-detail-tabs { + position: sticky; + z-index: 40; + display: flex; + margin: 0 0 12px; + overflow-x: auto; + background: #f5f8f7; + border-bottom: 1px solid #dcebe4; + -webkit-overflow-scrolling: touch; +} + +.mp-product-detail-tab { + position: relative; + flex: 1 0 auto; + min-width: 96px; + height: 44px; + padding: 0 10px; + font-size: 13px; + font-weight: 600; + color: #6b7b74; + background: transparent; + border: 0; + + &.is-active { + color: #087f57; + + &::after { + position: absolute; + right: 22%; + bottom: 0; + left: 22%; + height: 2px; + content: ''; + background: #0a9f6d; + border-radius: 2px; + } + } +} + +.mp-product-detail-body { + padding: 0 10px 88px; +} + +.mp-product-anchor + .mp-product-anchor { + margin-top: 0; +} + +/* 更多筛选:头/底固定,中间可滚(popup teleport 到 body) */ +.mp-customer-vant-popup .mp-customer-filter-vant { + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100%; + min-height: 0; + background: #f7faf8; +} + +.mp-customer-vant-popup .mp-customer-filter-vant > .van-nav-bar { + flex-shrink: 0; +} + +.mp-product-filter-vant__body { + flex: 1 1 auto; + min-height: 0; + padding: 8px 0 16px; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.mp-product-filter-vant__foot { + display: flex; + flex-shrink: 0; + gap: 8px; + padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); + background: #fff; + border-top: 1px solid #e8f0ec; + box-shadow: 0 -8px 24px rgb(34 64 52 / 12%); + + .van-button { + flex: 1 1 0; + min-width: 0; + @include mp-product-card-btn; + } +} + +.mp-product-form-popup.van-popup, +.mp-customer-vant-popup.van-popup { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.mp-product-form-popup, +.mp-customer-vant-popup { + --van-primary-color: #0a9f6d; + --van-button-primary-background: #0a9f6d; + --van-button-primary-border-color: #0a9f6d; + --van-nav-bar-icon-color: #0a9f6d; + --van-nav-bar-text-color: #0a9f6d; + --van-picker-confirm-action-color: #0a9f6d; +} + +.mp-product-page .mp-customer-pool-vant, +.mp-product-form-popup .mp-customer-pool-vant { + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100%; + min-height: 0; + background: #f7faf8; +} + +.mp-product-page .mp-customer-pool-vant__body, +.mp-product-form-popup .mp-customer-pool-vant__body { + flex: 1 1 auto; + min-height: 0; + padding: 8px 0 16px; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.mp-product-form-popup .mp-wv-section { + margin: 0 12px 10px; +} + +.mp-product-form-popup .mp-customer-fields-vant { + margin: 0; + overflow: hidden; + background: #fff !important; + border-radius: 12px; + + .van-cell { + background: #fff !important; + } +} + +.mp-product-page .van-button:not(.mp-wv-speed-main), +.mp-product-form-popup .van-button, +.mp-product-filter-vant .van-button { + @include mp-product-card-btn; +} + +/* FAB 圆形主按钮保持圆形 */ +.mp-product-page .mp-wv-speed-main.van-button { + width: 52px !important; + height: 52px !important; + min-width: 52px !important; + min-height: 52px !important; + padding: 0 !important; + border-radius: 50% !important; +} + +.mp-product-page .mp-customer-pool-vant__foot, +.mp-product-form-popup .mp-customer-pool-vant__foot, +.mp-product-form-popup__foot { + display: flex; + flex-shrink: 0; + gap: 8px; + padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); + background: #fff; + border-top: 1px solid #dcebe4; + box-shadow: 0 -8px 24px rgb(34 64 52 / 12%); + + .van-button { + flex: 1 1 0; + min-width: 0; + @include mp-product-card-btn; + } +} + +body > .van-dropdown-item { + z-index: 3000 !important; +} + +/* ── 确认弹窗:方案 A / B(挂到 body,须用 className 限定)── */ +body .van-dialog.mp-product-dialog { + overflow: hidden; + border-radius: 16px; + box-shadow: 0 16px 40px rgb(15 40 30 / 22%); +} + +body .van-dialog.mp-product-dialog .van-dialog__header { + padding-top: 20px; + font-size: 16px; + font-weight: 700; + color: #1f2a26; + line-height: 1.4; +} + +body .van-dialog.mp-product-dialog .van-dialog__content { + padding: 0; +} + +body .van-dialog.mp-product-dialog .van-dialog__message { + padding: 10px 20px 4px; + font-size: 14px; + line-height: 1.55; + color: #6b7b74; + text-align: center; +} + +body .van-dialog.mp-product-dialog .mp-product-dialog__warn { + display: flex; + justify-content: center; + margin: 4px 0 10px; +} + +body .van-dialog.mp-product-dialog .mp-product-dialog__warn-icon { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + font-size: 22px; + font-weight: 700; + color: #dc2626; + background: #fef2f2; + border-radius: 50%; +} + +body .van-dialog.mp-product-dialog .mp-product-dialog__msg { + color: #6b7b74; + text-align: center; +} + +body .van-dialog.mp-product-dialog .van-dialog__footer { + display: flex; + gap: 10px; + padding: 16px; + border-top: none !important; +} + +body .van-dialog.mp-product-dialog .van-dialog__footer::after, +body .van-dialog.mp-product-dialog .van-hairline--left::after, +body .van-dialog.mp-product-dialog .van-hairline--top::after { + display: none !important; +} + +body .van-dialog.mp-product-dialog .van-dialog__cancel, +body .van-dialog.mp-product-dialog .van-dialog__confirm { + flex: 1; + height: 40px !important; + min-height: 40px !important; + margin: 0 !important; + padding: 0 10px !important; + font-size: 14px !important; + font-weight: 600 !important; + line-height: 40px !important; + border-radius: 10px !important; + border: 1px solid #dcebe4 !important; +} + +body .van-dialog.mp-product-dialog .van-dialog__cancel { + color: #1f2a26 !important; + background: #fff !important; +} + +body .van-dialog.mp-product-dialog .van-dialog__confirm { + color: #fff !important; + background: #0a9f6d !important; + border-color: #0a9f6d !important; +} + +body .van-dialog.mp-product-dialog.mp-product-dialog--danger .van-dialog__confirm { + background: #dc2626 !important; + border-color: #dc2626 !important; +} + +body .van-dialog.mp-product-dialog.mp-product-dialog--danger .van-dialog__header { + padding-top: 12px; +}