diff --git a/pages/settlement/index.wxss b/pages/settlement/index.wxss index a1e1351..8aa26db 100644 --- a/pages/settlement/index.wxss +++ b/pages/settlement/index.wxss @@ -172,7 +172,19 @@ input, textarea { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* 防止iOS输入框背景变黄 */ -webkit-autofill: none; - background-color: #fff !important; + background-color: #fff; +} + +/* 深色模式下的输入框样式 */ +@media (prefers-color-scheme: dark) { + input, textarea { + background-color: #2c2c2e !important; + color: #fff !important; + } + + input::placeholder, textarea::placeholder { + color: #8e8e93 !important; + } } /* 按钮全局优化 */ @@ -605,6 +617,36 @@ picker { opacity: 0.7; } +/* 深色模式下的表单输入框样式 */ +@media (prefers-color-scheme: dark) { + .form-input { + background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%); + border-color: #48484a; + color: #fff; + } + + .form-input::placeholder { + color: #8e8e93; + } + + .form-input:focus { + background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%); + border-color: #07C160; + box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.3); + } + + .form-input.error { + background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%); + border-color: #FA5151; + box-shadow: 0 4rpx 16rpx rgba(250, 81, 81, 0.3); + } + + .form-input:focus::placeholder { + color: #636366; + opacity: 0.7; + } +} + /* placeholder样式优化 */ .form-input::placeholder { color: #999; @@ -750,6 +792,34 @@ picker { font-weight: 500; } +/* 深色模式下的地址选择器样式 */ +@media (prefers-color-scheme: dark) { + .region-picker { + background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%); + border-color: #48484a; + color: #fff; + } + + .region-picker .picker-content text { + color: #fff; + } + + .region-picker:focus { + background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%); + border-color: #07C160; + box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.3); + } + + .region-picker.placeholder { + color: #8e8e93; + } + + .region-picker:not(.placeholder) { + border-color: #07C160; + color: #fff; + } +} + /* 微信风格的合作模式选择 - 针对真机优化 */ .cooperation-options { display: grid;