yunzer_go/mobile/static/css/style.scss

// 蓝白亮色主题 (Light Theme)
:root,
.theme-light {
  --primary-color: #2B7CE9;
  --primary-dark: #1E5F99;
  --primary-light: #5A9EF0;
  --primary-gradient: linear-gradient(135deg, #2B7CE9 0%, #5A9EF0 100%);
  --background: #F8FAFC;
  --background-light: #FFFFFF;
  --surface: #fff;
  --surface-hover: #F8FAFC;
  --border: #E2E8F0;
  --border-light: #F1F5F9;
  --accent: #3498db;
  --text-color: #1A202C;
  --text-secondary: #718096;
  --text-muted: #A0AEC0;
  --title-color: #1A202C;
  --subtitle-color: #718096;
  --icon-color: #2B7CE9;
  --gray: #E2E8F0;
  --gray-dark: #A0AEC0;
  --gray-light: #F7FAFC;
  --gray-lighter: #F8FAFC;
  --shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);

  /* 功能色 */
  --blue: #3182CE;
  --blue-light: #63B3ED;
  --red: #E53E3E;
  --red-light: #FC8181;
  --green: #38A169;
  --green-light: #68D391;
  --yellow: #D69E2E;
  --yellow-light: #F6E05E;
  --purple: #805AD5;
  --purple-light: #B794F6;
  --orange: #DD6B20;
  --orange-light: #FBD38D;
  --pink: #D53F8C;
  --pink-light: #F687B3;
  --cyan: #319795;
  --cyan-light: #4FD1C7;
  
  /* 状态色 */
  --success: #38A169;
  --success-light: #C6F6D5;
  --warning: #D69E2E;
  --warning-light: #FEFCBF;
  --error: #E53E3E;
  --error-light: #FED7D7;
  --info: #3182CE;
  --info-light: #BEE3F8;
  
  /* 组件色 */
  --white: #fff;
  --black: #000;
  --badge-bg: #E53E3E;
  --badge-text: #fff;
  --tab-active: #2B7CE9;
  --tab-inactive: #A0AEC0;
  --button-primary: #2B7CE9;
  --button-primary-hover: #1E5F99;
  --button-secondary: #E2E8F0;
  --button-secondary-hover: #CBD5E0;
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #2B7CE9 0%, #5A9EF0 100%);
  --gradient-success: linear-gradient(135deg, #38A169 0%, #68D391 100%);
  --gradient-warning: linear-gradient(135deg, #D69E2E 0%, #F6E05E 100%);
  --gradient-error: linear-gradient(135deg, #E53E3E 0%, #FC8181 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

// 黑暗主题 (Dark Theme)
.theme-dark {
  --primary-color: #2B7CE9;
  --primary-dark: #113358;
  --background: #171B26;
  --surface: #23273A;
  --border: #283044;
  --accent: #317CD9;
  --text-color: #ececec;
  --text-secondary: #8D93A4;
  --title-color: #fff;
  --subtitle-color: #8D93A4;
  --icon-color: #5DA6FF;
  --gray: #232b3a;
  --shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.35);

  /* 功能色 */
  --blue: #4FC3F7;
  --red: #FF648A;
  --green: #44D7B6;
  --yellow: #FFD76F;
  --gray-light: #202537;
  --white: #23273A;
  --badge-bg: #FF648A;
  --badge-text: #fff;
  --tab-active: #5DA6FF;
  --tab-inactive: #5f6a86;
}

:root{
  --fa-width:1.25em;
}

.fas{
  width: 1.25em !important;
}

.top_bar{
  height: 176rpx !important;
  width: 100%;
}

.underline{
  border-bottom: 1rpx solid #efefef;
}
/* 统一的顶部导航样式 */
.unified-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
  height: calc(var(--status-bar-height) + 88rpx);
}

.unified-header .header-content {
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

.unified-header .header-title {
  flex: 1;
  text-align: center;
  color: var(--white);
  font-size: 32rpx;
  font-weight: 600;
  margin: 0 20rpx;
}

.unified-header .header-left,
.unified-header .header-right {
  display: flex;
  align-items: center;
  min-width: 80rpx;
}

.unified-header .header-right {
  justify-content: flex-end;
}

.unified-header .header-icon {
  color: var(--white);
  font-size: 36rpx;
  padding: 10rpx;
  // border-radius: 50%;
  transition: all 0.3s ease;
}

.unified-header .header-icon:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}

.unified-header .badge {
  position: absolute;
  top: 5rpx !important;
  right: 30rpx !important;
  background-color: var(--error);
  color: var(--white);
  font-size: .3rem !important;
  padding: 6rpx 9rpx !important;
  // padding: 10rpx !important;
  border-radius: 50%;
  // min-width: 24rpx;
  text-align: center;
  line-height: 1.2;
}

/* 支持安全区域的设备 */
@supports (padding: max(0px)) {
  .unified-header {
    height: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
  
  .unified-header .header-content {
    padding-top: calc(var(--status-bar-height) + 20rpx + env(safe-area-inset-top));
  }
}

/* 页面容器适配 */
.page-container {
  padding-top: calc(var(--status-bar-height) + 88rpx);
  min-height: 100vh;
  background: var(--background);
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .page-container {
    padding-top: calc(var(--status-bar-height) + 88rpx + env(safe-area-inset-top));
  }
}

/* 统一的内容区域样式 */
.unified-content {
  padding: 30rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  min-height: calc(100vh - 120rpx);
  box-sizing: border-box;
}

/* 顶部导航栏 */
.items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--status-bar-height, 0rpx) + 88rpx);
  background-color: var(--surface);
  border-bottom: 1rpx solid var(--border);
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: var(--shadow);
}

/* 浏览器环境下的固定定位 */
.attendance-container .chat-header:not(.top_bar .chat-header) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: calc(var(--status-bar-height) + 88rpx);
  padding-top: var(--status-bar-height);
}

/* 移动设备下的导航栏样式 */
.top_bar .chat-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}