Browse Source

修复结算页面夜间模式输入框文字不可见问题

1. 为输入框添加深色模式背景和文字颜色
2. 为地址选择器添加深色模式样式
3. 修复占位符文字在深色模式下的可见性
4. 优化焦点和错误状态在深色模式下的显示效果
pull/3/head
徐飞洋 2 months ago
parent
commit
7f67b4eb89
  1. 72
      pages/settlement/index.wxss

72
pages/settlement/index.wxss

@ -172,7 +172,19 @@ input, textarea {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
/* 防止iOS输入框背景变黄 */ /* 防止iOS输入框背景变黄 */
-webkit-autofill: none; -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; 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样式优化 */ /* placeholder样式优化 */
.form-input::placeholder { .form-input::placeholder {
color: #999; color: #999;
@ -750,6 +792,34 @@ picker {
font-weight: 500; 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 { .cooperation-options {
display: grid; display: grid;

Loading…
Cancel
Save