/* 通用页面容器样式 - 统一风格(灰色背景) */ .page-container { min-height: 100vh; background: #f7f8fa; padding-bottom: env(safe-area-inset-bottom, 0px); } @media (prefers-color-scheme: dark) { .page-container { background: #141414; } } /* 页面内容区域 */ .page-content { padding: 16px 0 0 0; } /* 下拉刷新包装器 */ .refresh-wrapper { min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px)); } /* 统一卡片样式 */ .common-card { background: #ffffff; margin: 0 12px 16px; padding: 16px; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid #ebedf0; } @media (prefers-color-scheme: dark) { .common-card { background: #1f1f1f; border-color: #2c2c2c; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } } /* 卡片头部 */ .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 16px; font-weight: 600; color: var(--van-text-color); margin: 0; } /* 增加卡片组的对比度 */ :deep(.van-cell-group--inset) { margin: 10px 16px; background: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid #ebedf0; border-radius: 16px; } @media (prefers-color-scheme: dark) { :deep(.van-cell-group--inset) { background: #1f1f1f; border-color: #2c2c2c; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } } /* 单元格样式 */ :deep(.van-cell) { background: #ffffff; border-bottom: 1px solid #ebedf0; } @media (prefers-color-scheme: dark) { :deep(.van-cell) { background: #1f1f1f; border-bottom: 1px solid #2c2c2c; } } :deep(.van-cell:last-child) { border-bottom: none; } /* 详情弹出层样式 */ .detail-popup { padding: 16px; height: 100%; overflow-y: auto; background: #f7f8fa; } @media (prefers-color-scheme: dark) { .detail-popup { background: #141414; } } /* 弹出层内的卡片组样式 */ .detail-popup :deep(.van-cell-group--inset) { background: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid #ebedf0; border-radius: 16px; } @media (prefers-color-scheme: dark) { .detail-popup :deep(.van-cell-group--inset) { background: #1f1f1f; border-color: #2c2c2c; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } } /* 详情头部样式 */ .detail-header { margin-bottom: 16px; } .detail-header h3 { margin: 0; font-size: 18px; font-weight: bold; word-break: break-word; } .detail-header p { margin: 0; font-size: 14px; color: #969799; font-weight: normal; } /* 导航栏透明背景 */ :deep(.van-nav-bar) { background-color: transparent; } /* 修复表单字段过长时的换行显示 */ :deep(.van-field__control) { word-break: break-all; white-space: normal; } :deep(.van-field__value) { word-break: break-all; white-space: normal; }