first commot

Web/src/styles/common.css

@@ -0,0 +1,109 @@
+/* 通用页面容器样式 */
+.page-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page-container {
+    background-color: #1a1a1a;
+  }
+}
+
+/* 下拉刷新包装器 */
+.refresh-wrapper {
+  min-height: calc(100vh - 46px);
+}
+
+/* 增加卡片组的对比度 */
+: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;
+}