aiot-app/pages/hr/common-style.scss

/* HR 模块公共样式（原 kd-aiot-frontend-hr-H5/src/styles/global.scss 迁移）
   各 hr 页面通过 @import "@/pages/hr/common-style.scss"; 引入（scoped） */

view,
text,
input,
textarea,
button,
scroll-view {
  box-sizing: border-box;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: normal;
}
button::after {
  border: 0;
}

.page {
  min-height: 100vh;
  background: #f5f6f7;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.page-no-tab {
  min-height: 100vh;
  background: #f5f6f7;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}
.card {
  background: #fff;
  border-radius: 20rpx;
}
.section {
  margin: 24rpx;
}
/* ============ 模块标题（全 HR 统一） ============
   主题色竖条 + 加粗标题（+ 可选右侧补充信息 / 下方副说明）。
   注意：justify-content 必须是 flex-start —— 标题的子元素只有「竖条 + 文字」，
   若用 space-between 会把标题文字推到最右边；右侧的 .section-more 改用
   margin-left: auto 靠右，与左侧竖条互不影响。 */
.section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 36rpx 24rpx 18rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #1f2329;
  letter-spacing: 1rpx;
}
.section-title::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 8rpx;
  height: 32rpx;
  margin-right: 14rpx;
  border-radius: 4rpx;
  background: linear-gradient(180deg, #1aa53c, #157a2c);
}
.section-more {
  margin-left: auto;
  padding-left: 20rpx;
  color: #8b939f;
  font-size: 26rpx;
  font-weight: 400;
}
/* 卡片内的模块头：标题 + 副说明；副说明缩进 22rpx 与标题文字左对齐 */
.section-head {
  padding: 26rpx 28rpx 12rpx;
  border-bottom: 1rpx solid #f2f3f5;
}
.section-head .section-title {
  margin: 0;
}
.section-tip {
  display: block;
  margin: 10rpx 0 0 22rpx;
  font-size: 23rpx;
  line-height: 1.45;
  color: #9aa1ab;
}
/* 原生 <picker> 直接放在 .field 里时**不会撑开**（它不是 flex 子项的内容区），
   结果是「值 + ›」紧贴在标签后面，而不是右对齐。给 picker 加 class="field-picker"
   让它占满剩余宽度并把内容靠右，值区与箭头才会像其它行一样贴右边。 */
.field-picker {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.divider {
  height: 1rpx;
  background: #edf0f2;
  margin-left: 30rpx;
}
.muted {
  color: #8b939f;
}
.primary {
  color: #157a2c;
}
.success {
  color: #07c160;
}
.warning {
  color: #f59a23;
}
.danger {
  color: #ee4d4d;
}
.status-tag {
  display: inline-flex;
  padding: 6rpx 14rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
}
.status-pending {
  color: #d9780b;
  background: #fff5e7;
}
.status-processing {
  color: #4b7902;
  background: #f1f8e9;
}
.status-approved {
  color: #07893f;
  background: #eaf8ef;
}
.status-rejected {
  color: #d73a49;
  background: #fff0f0;
}
.primary-btn {
  height: 92rpx;
  border-radius: 12rpx;
  background: #157a2c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
}
.ghost-btn {
  height: 86rpx;
  border-radius: 12rpx;
  border: 1rpx solid #d8dce2;
  background: #fff;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12rpx;
  background: linear-gradient(145deg, #1b8c37, #157a2c);
  color: #fff;
  font-weight: 600;
}
.press:active {
  opacity: 0.7;
}