page { min-height: 100vh; background: radial-gradient(circle at 12% 18%, rgba(74, 85, 99, 0.09) 0, rgba(74, 85, 99, 0.09) 10rpx, transparent 11rpx), radial-gradient(circle at 82% 22%, rgba(74, 85, 99, 0.08) 0, rgba(74, 85, 99, 0.08) 12rpx, transparent 13rpx), radial-gradient(circle at 22% 78%, rgba(74, 85, 99, 0.07) 0, rgba(74, 85, 99, 0.07) 11rpx, transparent 12rpx), repeating-linear-gradient(135deg, rgba(108, 122, 140, 0.035) 0, rgba(108, 122, 140, 0.035) 2rpx, transparent 2rpx, transparent 18rpx), #f2f5f9; color: #1f2933; font-size: 28rpx; } page::before { content: "⚙"; position: fixed; right: -28rpx; top: 190rpx; z-index: 0; color: rgba(71, 84, 103, 0.045); font-size: 260rpx; font-weight: 700; line-height: 1; pointer-events: none; transform: rotate(18deg); } page::after { content: "JH"; position: fixed; left: -8rpx; bottom: 160rpx; z-index: 0; width: auto; height: auto; color: rgba(71, 84, 103, 0.14); font-size: 150rpx; font-weight: 900; line-height: 1; letter-spacing: 0; pointer-events: none; opacity: 1; background: transparent; -webkit-text-fill-color: currentColor; text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.42), 0 3rpx 0 rgba(78, 89, 105, 0.12), 0 10rpx 14rpx rgba(15, 23, 42, 0.06); transform: rotate(-18deg); } .page { position: relative; z-index: 1; min-height: 100vh; padding: 28rpx 24rpx 56rpx; box-sizing: border-box; } scroll-view.page { height: 100vh; min-height: 0; overflow: hidden; } .header { position: relative; overflow: hidden; padding: 18rpx 4rpx 28rpx; } .header::after { content: ""; position: absolute; right: 2rpx; top: 18rpx; width: 168rpx; height: 54rpx; opacity: 0.12; transform: rotate(-26deg); pointer-events: none; background: radial-gradient(circle at 18% 50%, transparent 0rpx, transparent 13rpx, #4b5563 14rpx, #4b5563 22rpx, transparent 23rpx), radial-gradient(circle at 86% 50%, #4b5563 0rpx, #4b5563 18rpx, transparent 19rpx), linear-gradient(90deg, transparent 0rpx, transparent 32rpx, #4b5563 33rpx, #4b5563 134rpx, transparent 135rpx); filter: drop-shadow(0 5rpx 4rpx rgba(15, 23, 42, 0.18)); } .title { display: block; color: #162232; font-size: 44rpx; font-weight: 700; line-height: 1.22; } .subtitle { display: block; margin-top: 10rpx; color: #6b778c; line-height: 1.5; } .section-title { display: flex; align-items: center; gap: 12rpx; margin: 34rpx 4rpx 18rpx; color: #162232; font-size: 30rpx; font-weight: 700; } .section-title::before { content: ""; width: 26rpx; height: 26rpx; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(90deg, transparent 42%, rgba(47, 55, 65, 0.86) 43%, rgba(47, 55, 65, 0.86) 57%, transparent 58%), radial-gradient(circle at 32% 28%, #ffffff 0, #dfe6ec 18%, #8c98a5 54%, #4a5563 100%); box-shadow: 0 4rpx 0 rgba(72, 83, 97, 0.42), 0 6rpx 10rpx rgba(22, 34, 50, 0.16), inset 0 2rpx 0 rgba(255, 255, 255, 0.9); transform: rotate(45deg); } .card { position: relative; overflow: hidden; margin-bottom: 30rpx; padding: 26rpx; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border: 3rpx solid #aebbd0; border-radius: 16rpx; box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.9), 0 13rpx 0 rgba(147, 163, 185, 0.82), 0 24rpx 36rpx rgba(22, 34, 50, 0.18), inset 0 0 0 1rpx rgba(174, 187, 208, 0.48), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); box-sizing: border-box; } .card::before, .stat::before, .list-empty::before, .modal-panel::before { content: ""; position: absolute; right: 16rpx; top: 16rpx; width: 22rpx; height: 22rpx; border-radius: 50%; opacity: 0.5; pointer-events: none; background: linear-gradient(90deg, transparent 42%, rgba(47, 55, 65, 0.78) 43%, rgba(47, 55, 65, 0.78) 57%, transparent 58%), radial-gradient(circle at 32% 28%, #ffffff 0, #dfe6ec 19%, #97a3af 58%, #475467 100%); box-shadow: 0 3rpx 0 rgba(72, 83, 97, 0.38), 0 6rpx 10rpx rgba(22, 34, 50, 0.14), inset 0 2rpx 0 rgba(255, 255, 255, 0.85); transform: rotate(-22deg); } .modal-panel { position: relative; } .card:active { border-color: #9eacc2; transform: translateY(3rpx); box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.82), 0 8rpx 0 rgba(147, 163, 185, 0.86), 0 16rpx 26rpx rgba(22, 34, 50, 0.15), inset 0 0 0 1rpx rgba(174, 187, 208, 0.42), inset 0 2rpx 0 rgba(255, 255, 255, 0.9); } .tap-card { border-color: #d9e5f7; } .tap-card::after { content: "进入审核"; position: absolute; right: 24rpx; bottom: 18rpx; color: #1463ff; font-size: 22rpx; font-weight: 700; pointer-events: none; } .row { display: flex; align-items: center; justify-content: space-between; gap: 18rpx; } .row-left { min-width: 0; flex: 1; } .label { display: block; margin-bottom: 8rpx; color: #6b778c; font-size: 24rpx; font-weight: 600; } .value { display: block; color: #162232; font-weight: 600; line-height: 1.4; } .muted { color: #6b778c; } .pill { display: inline-flex; align-items: center; min-height: 44rpx; padding: 0 16rpx; border-radius: 999rpx; background: #eef2f7; color: #475467; font-size: 24rpx; font-weight: 600; white-space: nowrap; } .pill.primary { background: #e9f1ff; color: #1456c2; } .pill.warn { background: #fff3df; color: #b25e09; } .pill.success { background: #e7f7ef; color: #087443; } .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rpx; } .stat { position: relative; overflow: hidden; min-height: 142rpx; padding: 24rpx; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); border: 1rpx solid #dce4ef; border-left: 6rpx solid #1463ff; border-radius: 16rpx; box-shadow: 0 12rpx 0 rgba(205, 216, 229, 0.62), 0 18rpx 28rpx rgba(22, 34, 50, 0.1), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); box-sizing: border-box; } .stat-number { display: block; margin-top: 8rpx; color: #162232; font-size: 42rpx; font-weight: 700; line-height: 1.18; } .button-row { display: flex; gap: 16rpx; margin-top: 18rpx; } .pager-row { align-items: center; } .pager-row .pager-nav { flex: 1 1 0; min-width: 0; } .page-jump-control { flex: 0 0 218rpx; display: flex; align-items: center; justify-content: center; gap: 6rpx; height: 80rpx; padding: 0 10rpx; border: 1rpx solid #ccd8e6; border-radius: 14rpx; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); box-sizing: border-box; box-shadow: inset 0 4rpx 8rpx rgba(22, 34, 50, 0.05), 0 6rpx 0 rgba(205, 216, 229, 0.48), 0 10rpx 18rpx rgba(22, 34, 50, 0.06); } .page-jump-input { flex: 0 0 64rpx; min-width: 0; height: 64rpx; line-height: 64rpx; padding: 0; border: 0; background: transparent; color: #162232; font-size: 28rpx; font-weight: 800; text-align: center; } .page-total-label { flex: 0 0 auto; min-width: 74rpx; color: #667085; font-size: 24rpx; font-weight: 800; white-space: nowrap; } .page-jump-action { flex: 0 0 auto; width: 40rpx; height: 48rpx; line-height: 48rpx; border-radius: 50%; color: #1463ff; background: rgba(20, 99, 255, 0.1); font-size: 20rpx; font-weight: 800; text-align: center; } .page-jump-control.mini { flex-basis: 160rpx; height: 64rpx; padding: 0 6rpx; } .page-jump-control.mini .page-jump-input { flex-basis: 50rpx; height: 52rpx; line-height: 52rpx; font-size: 24rpx; } .page-jump-control.mini .page-total-label { min-width: 58rpx; font-size: 22rpx; } .page-jump-control.mini .page-jump-action { width: 30rpx; height: 44rpx; line-height: 44rpx; font-size: 18rpx; } .btn { position: relative; overflow: hidden; height: 80rpx; line-height: 80rpx; margin: 0; border-radius: 14rpx; font-size: 28rpx; font-weight: 600; box-shadow: 0 8rpx 0 rgba(121, 137, 160, 0.34), 0 12rpx 20rpx rgba(22, 34, 50, 0.12), inset 0 2rpx 0 rgba(255, 255, 255, 0.62); } .btn::before { content: ""; position: absolute; left: 18rpx; top: 50%; width: 14rpx; height: 14rpx; margin-top: -7rpx; border-radius: 50%; opacity: 0.5; pointer-events: none; background: linear-gradient(90deg, transparent 41%, rgba(47, 55, 65, 0.72) 42%, rgba(47, 55, 65, 0.72) 58%, transparent 59%), radial-gradient(circle at 32% 28%, #ffffff 0, #dce3eb 20%, #8b97a4 62%, #46515f 100%); box-shadow: 0 2rpx 0 rgba(72, 83, 97, 0.34), 0 4rpx 7rpx rgba(22, 34, 50, 0.12); transform: rotate(34deg); } .btn::after { border: 0; } .btn:active { transform: translateY(4rpx); box-shadow: 0 4rpx 0 rgba(121, 137, 160, 0.38), 0 8rpx 14rpx rgba(22, 34, 50, 0.1), inset 0 2rpx 0 rgba(255, 255, 255, 0.48); } .btn.primary { color: #ffffff; background: linear-gradient(180deg, #2876ff 0%, #1456c2 100%); box-shadow: 0 8rpx 0 #0d3f93, 0 14rpx 22rpx rgba(20, 99, 255, 0.24), inset 0 2rpx 0 rgba(255, 255, 255, 0.26); } .btn.secondary { color: #223044; background: linear-gradient(180deg, #f7faff 0%, #e2e9f3 100%); } .btn.danger { color: #ffffff; background: linear-gradient(180deg, #e04444 0%, #b91c1c 100%); box-shadow: 0 8rpx 0 #861313, 0 14rpx 22rpx rgba(198, 40, 40, 0.24), inset 0 2rpx 0 rgba(255, 255, 255, 0.24); } .btn.primary:active { box-shadow: 0 4rpx 0 #0d3f93, 0 8rpx 14rpx rgba(20, 99, 255, 0.18), inset 0 2rpx 0 rgba(255, 255, 255, 0.18); } .btn.secondary:active { box-shadow: 0 4rpx 0 rgba(121, 137, 160, 0.4), 0 8rpx 14rpx rgba(22, 34, 50, 0.1), inset 0 2rpx 0 rgba(255, 255, 255, 0.5); } .btn.danger:active { box-shadow: 0 4rpx 0 #861313, 0 8rpx 14rpx rgba(198, 40, 40, 0.18), inset 0 2rpx 0 rgba(255, 255, 255, 0.18); } .btn[disabled] { opacity: 0.72; box-shadow: 0 6rpx 0 rgba(121, 137, 160, 0.24), 0 10rpx 18rpx rgba(22, 34, 50, 0.08), inset 0 2rpx 0 rgba(255, 255, 255, 0.5); } .btn.mini { height: 60rpx; line-height: 60rpx; padding: 0 22rpx; font-size: 24rpx; border-radius: 12rpx; } .form-item { margin-bottom: 22rpx; } .temp-worker-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 34rpx; background: rgba(15, 23, 42, 0.48); box-sizing: border-box; } .temp-worker-panel { position: relative; width: 100%; max-width: 680rpx; padding: 34rpx 30rpx 30rpx; border: 3rpx solid #aebbd0; border-radius: 18rpx; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.86), 0 14rpx 0 rgba(147, 163, 185, 0.72), 0 28rpx 58rpx rgba(15, 23, 42, 0.26), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); box-sizing: border-box; } .temp-worker-title { display: block; color: #162232; font-size: 34rpx; font-weight: 800; line-height: 1.3; } .temp-worker-tip { display: block; margin-top: 16rpx; color: #475467; font-size: 26rpx; font-weight: 600; line-height: 1.55; } .temp-worker-field { display: flex; align-items: center; gap: 16rpx; margin-top: 28rpx; } .temp-worker-label { flex: 0 0 auto; color: #162232; font-size: 28rpx; font-weight: 800; white-space: nowrap; } .temp-worker-input { flex: 1 1 0; min-width: 0; } .temp-worker-actions { margin-top: 30rpx; } .input, .textarea, .picker { min-height: 78rpx; padding: 0 20rpx; border: 1rpx solid #ccd8e6; border-radius: 14rpx; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); box-shadow: inset 0 4rpx 8rpx rgba(22, 34, 50, 0.05), 0 6rpx 0 rgba(205, 216, 229, 0.48), 0 10rpx 18rpx rgba(22, 34, 50, 0.06); box-sizing: border-box; } .input { line-height: 78rpx; } .input:focus, .textarea:focus, .picker:active { border-color: #1463ff; background: #ffffff; box-shadow: inset 0 4rpx 8rpx rgba(20, 99, 255, 0.06), 0 5rpx 0 rgba(144, 178, 235, 0.58), 0 10rpx 18rpx rgba(20, 99, 255, 0.08); } .textarea { width: 100%; min-height: 132rpx; padding-top: 18rpx; } .picker { display: flex; align-items: center; } .list-empty { position: relative; overflow: hidden; padding: 78rpx 24rpx; border: 1rpx dashed #cfd9e6; border-radius: 16rpx; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); color: #6b778c; text-align: center; box-shadow: 0 10rpx 0 rgba(205, 216, 229, 0.45), 0 16rpx 24rpx rgba(22, 34, 50, 0.08), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); } .divider { height: 1rpx; margin: 22rpx 0; background: #edf1f6; } .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } .nowrap { white-space: nowrap; } .text-right { text-align: right; } .number-input { text-align: right; } .metric-danger { color: #c5221f; font-weight: 800; } .metric-success { color: #087443; font-weight: 800; } .metric-reason { display: inline-block; margin-left: 4rpx; color: #c5221f; font-size: 18rpx; font-weight: 900; line-height: 1; vertical-align: super; } .misc-watermark { position: absolute; right: 28rpx; top: 18rpx; z-index: 1; padding: 8rpx 18rpx; border: 2rpx solid rgba(217, 119, 6, 0.55); border-radius: 12rpx; color: rgba(154, 74, 5, 0.82); background: rgba(255, 247, 232, 0.88); font-size: 30rpx; font-weight: 900; transform: rotate(10deg); pointer-events: none; } .multi-person-watermark { position: absolute; right: 28rpx; top: 18rpx; z-index: 1; padding: 8rpx 18rpx; border: 2rpx solid rgba(217, 119, 6, 0.58); border-radius: 12rpx; color: rgba(154, 74, 5, 0.86); background: rgba(255, 247, 232, 0.9); font-size: 30rpx; font-weight: 900; transform: rotate(10deg); pointer-events: none; } .continuous-die-watermark { position: absolute; right: 28rpx; top: 18rpx; z-index: 1; padding: 8rpx 18rpx; border: 2rpx solid rgba(217, 119, 6, 0.58); border-radius: 12rpx; color: rgba(154, 74, 5, 0.86); background: rgba(255, 247, 232, 0.9); font-size: 30rpx; font-weight: 900; transform: rotate(10deg); pointer-events: none; } .over-limit-watermark { position: absolute; right: 28rpx; top: 18rpx; z-index: 4; padding: 8rpx 18rpx; border: 2rpx solid rgba(197, 34, 31, 0.72); border-radius: 12rpx; color: rgba(148, 27, 23, 0.92); background: rgba(255, 238, 238, 0.94); font-size: 30rpx; font-weight: 900; line-height: 1.2; transform: rotate(10deg); pointer-events: none; } .lower-watermark, .misc-watermark.lower-watermark, .cleaning-watermark.lower-watermark, .multi-person-watermark.lower-watermark, .continuous-die-watermark.lower-watermark, .timeout-watermark.lower-watermark, .voided-watermark.lower-watermark, .modified-watermark.lower-watermark, .over-limit-watermark.lower-watermark { top: 78rpx; } .third-watermark, .misc-watermark.third-watermark, .cleaning-watermark.third-watermark, .multi-person-watermark.third-watermark, .continuous-die-watermark.third-watermark, .timeout-watermark.third-watermark, .voided-watermark.third-watermark, .modified-watermark.third-watermark, .over-limit-watermark.third-watermark { top: 138rpx; } .fourth-watermark, .misc-watermark.fourth-watermark, .cleaning-watermark.fourth-watermark, .multi-person-watermark.fourth-watermark, .continuous-die-watermark.fourth-watermark, .timeout-watermark.fourth-watermark, .voided-watermark.fourth-watermark, .modified-watermark.fourth-watermark, .over-limit-watermark.fourth-watermark { top: 198rpx; } .fifth-watermark, .misc-watermark.fifth-watermark, .cleaning-watermark.fifth-watermark, .multi-person-watermark.fifth-watermark, .continuous-die-watermark.fifth-watermark, .timeout-watermark.fifth-watermark, .voided-watermark.fifth-watermark, .modified-watermark.fifth-watermark, .over-limit-watermark.fifth-watermark { top: 258rpx; } .sixth-watermark, .misc-watermark.sixth-watermark, .cleaning-watermark.sixth-watermark, .multi-person-watermark.sixth-watermark, .continuous-die-watermark.sixth-watermark, .timeout-watermark.sixth-watermark, .voided-watermark.sixth-watermark, .modified-watermark.sixth-watermark, .over-limit-watermark.sixth-watermark { top: 318rpx; } .timeout-watermark { position: absolute; right: 24rpx; top: 18rpx; z-index: 2; max-width: 360rpx; padding: 8rpx 16rpx; border: 2rpx solid rgba(197, 34, 31, 0.72); border-radius: 12rpx; color: rgba(148, 27, 23, 0.92); background: rgba(255, 238, 238, 0.92); font-size: 26rpx; font-weight: 900; line-height: 1.25; text-align: center; transform: rotate(8deg); pointer-events: none; } .card.system-auto { border-color: #d92d20; box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.9), 0 13rpx 0 rgba(217, 45, 32, 0.42), 0 24rpx 36rpx rgba(197, 34, 31, 0.18), inset 0 0 0 1rpx rgba(217, 45, 32, 0.32), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); } .card.system-auto.expanded { border-color: #d92d20; box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.9), 0 13rpx 0 rgba(217, 45, 32, 0.52), 0 24rpx 38rpx rgba(197, 34, 31, 0.22), inset 0 0 0 1rpx rgba(217, 45, 32, 0.36), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); } .card.voided { border-color: #98a2b3; background: linear-gradient(180deg, #f0f2f5 0%, #e5e8ed 100%); color: #667085; box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.72), 0 13rpx 0 rgba(118, 130, 148, 0.56), 0 22rpx 32rpx rgba(22, 34, 50, 0.13), inset 0 0 0 1rpx rgba(152, 162, 179, 0.35), inset 0 2rpx 0 rgba(255, 255, 255, 0.8); } .card.voided .value, .card.voided .detail-product, .card.voided .detail-title { color: #667085; } .voided-watermark, .modified-watermark { position: absolute; right: 24rpx; top: 18rpx; z-index: 3; padding: 8rpx 18rpx; border-radius: 12rpx; font-size: 30rpx; font-weight: 900; line-height: 1.2; transform: rotate(10deg); pointer-events: none; } .voided-watermark { border: 2rpx solid rgba(102, 112, 133, 0.7); color: rgba(71, 84, 103, 0.88); background: rgba(242, 244, 247, 0.94); } .modified-watermark { border: 2rpx solid rgba(20, 99, 255, 0.62); color: rgba(20, 86, 194, 0.82); background: rgba(233, 241, 255, 0.92); } .old-value { color: #8a97a8; text-decoration: line-through; } .correction-list { display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 10rpx; } .correction-pair { padding: 5rpx 10rpx; border: 1rpx solid rgba(197, 34, 31, 0.28); border-radius: 10rpx; background: rgba(255, 239, 239, 0.72); color: #9f1c19; font-size: 21rpx; font-weight: 800; line-height: 1.35; } .over-limit-panel { margin-top: 16rpx; padding: 16rpx; border-radius: 14rpx; display: flex; flex-direction: column; gap: 8rpx; box-sizing: border-box; } .over-limit-panel.danger { border: 2rpx solid rgba(197, 34, 31, 0.28); background: rgba(255, 239, 239, 0.78); } .over-limit-panel.warn { border: 2rpx solid rgba(217, 119, 6, 0.28); background: rgba(255, 247, 232, 0.78); } .over-limit-title { color: #9f1c19; font-size: 24rpx; font-weight: 900; line-height: 1.35; } .over-limit-panel.warn .over-limit-title { color: #9a4a05; } .over-limit-text { color: #7a271a; font-size: 23rpx; font-weight: 700; line-height: 1.45; word-break: break-all; } .over-limit-panel.warn .over-limit-text { color: #7a4a12; } .over-limit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rpx 14rpx; color: #7a271a; font-size: 22rpx; font-weight: 700; line-height: 1.4; } .over-limit-panel.warn .over-limit-grid { color: #7a4a12; } .filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14rpx; margin-bottom: 20rpx; } .date-filter-bar { align-items: end; } .date-filter-cell { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; } .date-filter-cell.end .date-step-btn { align-self: flex-end; } .date-filter-cell .picker { width: 100%; box-sizing: border-box; } .date-step-btn { width: 84rpx; height: 60rpx; line-height: 56rpx; margin: 0; padding: 0; border: 2rpx solid #b8c7dd; border-radius: 14rpx; background: #ffffff; color: #1456c2; font-size: 42rpx; font-weight: 900; box-shadow: 0 6rpx 0 rgba(184, 199, 221, 0.72), 0 10rpx 16rpx rgba(22, 34, 50, 0.08), inset 0 2rpx 0 rgba(255, 255, 255, 0.96); } .date-step-btn::after { border: 0; } .date-step-btn:active { transform: translateY(4rpx); box-shadow: 0 2rpx 0 rgba(184, 199, 221, 0.82), 0 6rpx 12rpx rgba(22, 34, 50, 0.08); } .top-action-group { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12rpx; } .void-filter-btn { display: flex; align-items: center; justify-content: center; width: 112rpx; height: 112rpx; min-width: 112rpx; min-height: 112rpx; line-height: 1.15; margin: 0; padding: 0 18rpx; border-radius: 50%; color: #475467; font-size: 22rpx; font-weight: 900; white-space: normal; text-align: center; box-sizing: border-box; } .void-filter-btn::before { display: none; } .void-filter-btn.active { color: #ffffff; background: linear-gradient(180deg, #2876ff 0%, #1456c2 100%); box-shadow: 0 8rpx 0 #0d3f93, 0 14rpx 22rpx rgba(20, 99, 255, 0.24), inset 0 2rpx 0 rgba(255, 255, 255, 0.26); } .void-filter-switch { display: flex; align-items: center; justify-content: space-between; min-height: 68rpx; padding: 0 16rpx; border: 1rpx solid #ccd8e6; border-radius: 14rpx; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); color: #223044; font-size: 24rpx; font-weight: 800; box-shadow: inset 0 4rpx 8rpx rgba(22, 34, 50, 0.05), 0 6rpx 0 rgba(205, 216, 229, 0.48), 0 10rpx 18rpx rgba(22, 34, 50, 0.06); box-sizing: border-box; } .void-filter-switch switch { transform: scale(0.78); transform-origin: right center; } .full { width: 100%; box-sizing: border-box; }