111 lines
2.1 KiB
CSS
111 lines
2.1 KiB
CSS
/* 通用页面容器样式 */
|
|
.page-container {
|
|
min-height: var(--vh, 100vh);
|
|
background-color: #f5f5f5;
|
|
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.page-container {
|
|
background-color: #1a1a1a;
|
|
}
|
|
}
|
|
|
|
/* 下拉刷新包装器 */
|
|
.refresh-wrapper {
|
|
min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
/* 增加卡片组的对比度 */
|
|
:deep(.van-cell-group--inset) {
|
|
margin: 10px 16px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:deep(.van-cell-group--inset) {
|
|
background-color: #2c2c2c;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
/* 单元格样式 */
|
|
:deep(.van-cell) {
|
|
background-color: #ffffff;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:deep(.van-cell) {
|
|
background-color: #2c2c2c;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
}
|
|
}
|
|
|
|
:deep(.van-cell:last-child) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 详情弹出层样式 */
|
|
.detail-popup {
|
|
padding: 16px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.detail-popup {
|
|
background-color: #1a1a1a;
|
|
}
|
|
}
|
|
|
|
/* 弹出层内的卡片组样式 */
|
|
.detail-popup :deep(.van-cell-group--inset) {
|
|
background-color: #ffffff;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.detail-popup :deep(.van-cell-group--inset) {
|
|
background-color: #2c2c2c;
|
|
box-shadow: 0 2px 8px 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;
|
|
}
|