city-life-line-mobile/src/styles/global.scss

$primary: #08264c;

*, *::before, *::after { box-sizing: border-box; }

// clip 限制横向溢出，同时保留页面纵向滚动，避免 H5 页面触底事件失效。
html, body, #app, uni-app, uni-page, uni-page-wrapper, uni-page-body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
}

page {
  min-height: 100%;
  background: #f3f6fa;
  color: #26364d;
  font-size: 28rpx;
}

view, text, input, textarea, button, scroll-view { box-sizing: border-box; }
button { border-radius: 999rpx; }
button::after { border: 0; }

.page { min-height: 100vh; background: #f3f6fa; }
.page-content { padding: 24rpx 24rpx calc(34rpx + env(safe-area-inset-bottom)); }
.page-content.with-tabs { padding-top: 0; }
.card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 22rpx rgba(37, 65, 96, 0.07);
}
.section-title {
  display: flex;
  align-items: center;
  margin: 30rpx 0 20rpx;
  font-size: 31rpx;
  font-weight: 650;
  color: #20324a;
}
.section-title::before {
  content: '';
  width: 7rpx;
  height: 30rpx;
  margin-right: 13rpx;
  border-radius: 7rpx;
  background: linear-gradient(180deg, #123f68, #08264c);
}
.muted { color: #8b99ab; }
.link { color: $primary; }
.primary-btn, .ghost-btn {
  height: 84rpx;
  border-radius: 999rpx;
  font-size: 30rpx;
  line-height: 84rpx;
}
.primary-btn { color: #fff; background: linear-gradient(135deg, #123f68, #08264c); box-shadow: 0 10rpx 24rpx rgba(8, 38, 76, .22); }
.ghost-btn { color: #4e6075; background: #fff; border: 1rpx solid #dbe3ec; }
.two-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; margin-top: 30rpx; }
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90rpx;
  padding: 7rpx 17rpx;
  border-radius: 999rpx;
  color: #0d4c7d;
  background: #e8eff6;
  font-size: 23rpx;
  white-space: nowrap;
}
.status-pill.red { color: #d9363e; background: #fff0f0; }
.status-pill.orange { color: #d66a06; background: #fff5e6; }
.status-pill.teal { color: #087f8c; background: #e6f7f8; }
.status-pill.green { color: #17875b; background: #e8f8ef; }
.status-pill.gray { color: #718096; background: #eef2f6; }
.status-pill.purple { color: #7057c7; background: #f0edff; }
.empty-safe { height: env(safe-area-inset-bottom); }