hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

强制头部白色背景

Browse Source
This commit is contained in:
tianfeng 2025-08-22 18:03:58 +08:00
parent 8895de2bd0
commit 475837b404
1 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/MobileHeader.vue
View File

@ -91,7 +91,7 @@ onMounted(() => {
<style scoped> <style scoped>
.mobile-header { .mobile-header {
background: white; background: white !important;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
} }
@ -99,7 +99,7 @@ onMounted(() => {
/* 状态栏占位区域 - 固定30px */ /* 状态栏占位区域 - 固定30px */
.status-bar-spacer { .status-bar-spacer {
height: 30px; height: 30px;
background: white; background: white !important;
} }
/* header内容区域 - 固定60px */ /* header内容区域 - 固定60px */
@ -109,34 +109,34 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
height: 60px; height: 60px;
background: white; background: white !important;
} }
.back-btn, .help-btn { .back-btn, .help-btn {
width: 36px; width: 36px;
height: 36px; height: 36px;
border: none; border: none;
background: #f8f9fa; background: #f8f9fa !important;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #495057; color: #495057 !important;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
} }
.back-btn:hover, .help-btn:hover { .back-btn:hover, .help-btn:hover {
background: #e9ecef; background: #e9ecef !important;
color: #343a40; color: #343a40 !important;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.back-btn:active, .help-btn:active { .back-btn:active, .help-btn:active {
transform: scale(0.95); transform: scale(0.95);
background: #dee2e6; background: #dee2e6 !important;
} }
.back-icon, .help-icon { .back-icon, .help-icon {
@ -150,7 +150,7 @@ onMounted(() => {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
color: #212529; color: #212529 !important;
text-align: center; text-align: center;
flex: 1; flex: 1;
letter-spacing: 0.3px; letter-spacing: 0.3px;
@ -161,34 +161,72 @@ onMounted(() => {
height: 36px; height: 36px;
} }
/* 暗黑模式适配 */ /* 强制覆盖任何暗黑模式样式 */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.mobile-header { .mobile-header {
background: #1a1a1a; background: white !important;
border-bottom-color: #333; border-bottom-color: #f0f0f0 !important;
} }
.status-bar-spacer { .status-bar-spacer {
background: #1a1a1a; background: white !important;
} }
.header-content { .header-content {
background: #1a1a1a; background: white !important;
} }
.back-btn, .help-btn { .back-btn, .help-btn {
background: #2d2d2d; background: #f8f9fa !important;
border-color: #444; border-color: #e9ecef !important;
color: #e0e0e0; color: #495057 !important;
} }
.back-btn:hover, .help-btn:hover { .back-btn:hover, .help-btn:hover {
background: #404040; background: #e9ecef !important;
color: #fff; color: #343a40 !important;
} }
.title { .title {
color: #fff; color: #212529 !important;
}
}
/* 强制针对移动设备的样式 */
@media screen and (max-width: 768px) {
.mobile-header {
background: white !important;
color: #212529 !important;
}
.mobile-header * {
color: inherit !important;
}
.title {
color: #212529 !important;
}
.back-btn, .help-btn {
background: #f8f9fa !important;
color: #495057 !important;
border-color: #e9ecef !important;
}
}
/* 针对特定手机浏览器的修复 */
@supports (-webkit-touch-callout: none) {
.mobile-header {
background: white !important;
}
.title {
color: #212529 !important;
}
.back-btn, .help-btn {
background: #f8f9fa !important;
color: #495057 !important;
} }
} }
</style> </style>