shanxia2.0/miniprogram/styles/mp-biz.scss

// 业务列表 / 详情 Pattern（对齐 mobile-ui/shanxia-mp-base.css）

.mp-page--sub {
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom, 0px));
}

.mp-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
}

.mp-subpage-back {
  color: #fff;
  font-size: 26rpx;
  opacity: 0.95;
  min-height: 44rpx;
  line-height: 44rpx;
}

.mp-header__action {
  min-height: 64rpx;
  padding: 0 24rpx;
  border-radius: 999rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.38);
  display: inline-flex;
  align-items: center;
  font-size: 24rpx;
  color: #fff;
  background: transparent;
}

.mp-header__search {
  margin-top: 20rpx;
  min-height: 72rpx;
  background: #fff;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  padding: 0 28rpx;
  gap: 16rpx;
}

.mp-header__search-dot {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  border: 4rpx solid #c5d5cd;
  flex-shrink: 0;
}

.mp-header__search-input {
  flex: 1;
  font-size: 26rpx;
  color: var(--mp-text);
  height: 72rpx;
}

.mp-tabs {
  display: flex;
  gap: 16rpx;
  white-space: nowrap;
}

.mp-tab {
  flex-shrink: 0;
  min-height: 64rpx;
  padding: 0 28rpx;
  border-radius: 999rpx;
  border: 1rpx solid var(--mp-border);
  background: var(--mp-surface);
  color: var(--mp-muted);
  font-size: 24rpx;
  display: inline-flex;
  align-items: center;
}

.mp-tab--active {
  background: var(--mp-brand-green-soft);
  border-color: #b7e6d0;
  color: var(--mp-brand-green-dark);
  font-weight: 600;
}

.mp-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.mp-card {
  background: var(--mp-surface);
  border: 1rpx solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 28rpx;
  box-shadow: 0 8rpx 24rpx rgba(10, 159, 109, 0.06);
}

.mp-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.mp-card__title {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--mp-text);
  line-height: 1.35;
}

.mp-card__sub {
  font-size: 24rpx;
  color: var(--mp-muted);
  margin-top: 4rpx;
}

.mp-card__row {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
  font-size: 24rpx;
  color: var(--mp-muted);
  margin-bottom: 12rpx;
}

.mp-card__row-val {
  color: var(--mp-text);
  text-align: right;
  flex: 1;
  min-width: 0;
}

.mp-card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16rpx;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid var(--mp-border-light);
}

.mp-tag {
  flex-shrink: 0;
  min-height: 44rpx;
  padding: 0 20rpx;
  border-radius: 999rpx;
  font-size: 22rpx;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.mp-tag--success {
  background: #e9f9f2;
  color: #189b65;
}
.mp-tag--warning {
  background: #fff4dd;
  color: #cf8a19;
}
.mp-tag--danger {
  background: #fef2f2;
  color: #d14343;
}
.mp-tag--info {
  background: #eff6ff;
  color: #3b82f6;
}
.mp-tag--muted {
  background: #f1f5f3;
  color: var(--mp-muted);
}

.mp-btn {
  min-height: 64rpx;
  padding: 0 28rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mp-btn--primary {
  background: var(--mp-brand-green);
  color: #fff;
  border: none;
}

.mp-btn--ghost {
  background: #fff;
  color: var(--mp-brand-green-dark);
  border: 1rpx solid #b7e6d0;
}

.mp-btn--danger {
  background: #fef2f2;
  color: #d14343;
  border: 1rpx solid #fecaca;
}

.mp-btn--sm {
  min-height: 56rpx;
  padding: 0 22rpx;
  font-size: 22rpx;
}

.mp-list-end,
.mp-list-loading {
  text-align: center;
  font-size: 22rpx;
  color: var(--mp-muted);
  padding: 24rpx 0 8rpx;
}

/* 全局空态 · 方案 B 插画文件夹（组件 mp-empty；类名可复用） */
.mp-empty {
  padding: 80rpx 40rpx 64rpx;
  text-align: center;
}

.mp-empty--compact {
  padding: 40rpx 24rpx 32rpx;
}

.mp-empty__art {
  position: relative;
  width: 296rpx;
  height: 224rpx;
  margin: 0 auto 36rpx;
}

.mp-empty--compact .mp-empty__art {
  width: 220rpx;
  height: 168rpx;
  margin-bottom: 24rpx;
  transform: scale(0.92);
  transform-origin: center top;
}

.mp-empty__shadow {
  position: absolute;
  left: 48rpx;
  right: 48rpx;
  bottom: 12rpx;
  height: 24rpx;
  border-radius: 50%;
  background: rgba(15, 30, 25, 0.08);
}

.mp-empty__folder {
  position: absolute;
  left: 50%;
  top: 20rpx;
  transform: translateX(-50%);
  width: 216rpx;
  height: 156rpx;
}

.mp-empty__folder-tab {
  position: absolute;
  left: 20rpx;
  top: -20rpx;
  width: 76rpx;
  height: 32rpx;
  border-radius: 16rpx 16rpx 0 0;
  background: #87d4b0;
}

.mp-empty__folder-back {
  position: absolute;
  inset: 0;
  border-radius: 24rpx 24rpx 28rpx 28rpx;
  background: linear-gradient(160deg, #b7e6d2, #7dcea0);
}

.mp-empty__folder-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 116rpx;
  border-radius: 20rpx 28rpx 28rpx 28rpx;
  background: linear-gradient(180deg, #ecfdf5, #dff7ec);
  border: 2rpx solid rgba(8, 127, 87, 0.18);
  box-shadow: 0 16rpx 36rpx rgba(10, 159, 109, 0.12);
}

.mp-empty__lines {
  position: absolute;
  left: 36rpx;
  right: 36rpx;
  top: 36rpx;
}

.mp-empty__line {
  display: block;
  height: 12rpx;
  border-radius: 999rpx;
  background: #cfe9dc;
  margin-bottom: 16rpx;
}

.mp-empty__line--mid {
  width: 70%;
}

.mp-empty__line--short {
  width: 48%;
  margin-bottom: 0;
}

.mp-empty__title {
  display: block;
  font-size: 30rpx;
  font-weight: 650;
  color: var(--mp-text);
  line-height: 1.4;
}

.mp-empty__desc {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  color: var(--mp-muted);
  line-height: 1.55;
}

.mp-empty__actions {
  margin-top: 32rpx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16rpx;
}

.mp-empty__actions .mp-btn {
  min-width: 200rpx;
}

/* 兼容旧写法：仅圆点 icon 时也渲染为文件夹插画占位（无内部结构则显示浅绿底） */
.mp-empty__icon {
  width: 140rpx;
  height: 140rpx;
  margin: 0 auto 24rpx;
  border-radius: 28rpx;
  background: linear-gradient(160deg, #b7e6d2, #7dcea0);
  position: relative;
  box-shadow: 0 12rpx 28rpx rgba(10, 159, 109, 0.12);
}

.mp-empty__icon::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: -12rpx;
  width: 48rpx;
  height: 20rpx;
  border-radius: 10rpx 10rpx 0 0;
  background: #87d4b0;
}

.mp-empty__icon::after {
  content: '';
  position: absolute;
  left: 12rpx;
  right: 12rpx;
  bottom: 16rpx;
  height: 72rpx;
  border-radius: 14rpx 18rpx 18rpx 18rpx;
  background: linear-gradient(180deg, #ecfdf5, #dff7ec);
  border: 2rpx solid rgba(8, 127, 87, 0.16);
}

.mp-empty__text {
  display: block;
  font-size: 28rpx;
  color: var(--mp-muted);
}

.mp-detail-hero {
  margin: 24rpx 32rpx 0;
  background: var(--mp-surface);
  border: 1rpx solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  padding: 28rpx;
  box-shadow: 0 8rpx 24rpx rgba(10, 159, 109, 0.06);
}

.mp-detail-hero__top {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
  align-items: flex-start;
}

.mp-detail-hero__title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--mp-text);
}

.mp-detail-hero__sub {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: var(--mp-muted);
}

.mp-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 20rpx;
}

.mp-detail-hero__chip {
  font-size: 22rpx;
  color: var(--mp-brand-green-dark);
  background: var(--mp-brand-green-soft);
  padding: 6rpx 16rpx;
  border-radius: 999rpx;
}

.mp-block {
  margin: 24rpx 32rpx 0;
}

.mp-block__title {
  font-size: 28rpx;
  font-weight: 700;
  color: var(--mp-text);
  margin-bottom: 16rpx;
}

.mp-block__panel {
  background: var(--mp-surface);
  border: 1rpx solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
}

.mp-kv {
  display: flex;
  justify-content: space-between;
  gap: 24rpx;
  padding: 24rpx 28rpx;
  border-bottom: 1rpx solid var(--mp-border-light);
  font-size: 26rpx;
}

.mp-kv:last-child {
  border-bottom: none;
}

.mp-kv__label {
  color: var(--mp-muted);
  flex-shrink: 0;
}

.mp-kv__value {
  color: var(--mp-text);
  text-align: right;
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

.mp-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 16rpx;
  padding: 16rpx 32rpx calc(16rpx + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1rpx solid var(--mp-border);
  z-index: 50;
}

.mp-bottom-bar .mp-btn {
  flex: 1;
}

.mp-page--with-bottom {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom, 0px));
}

.mp-form-panel {
  margin: 24rpx 32rpx;
  background: var(--mp-surface);
  border: 1rpx solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
}

.mp-form-row {
  padding: 24rpx 28rpx;
  border-bottom: 1rpx solid var(--mp-border-light);
}

.mp-form-row:last-child {
  border-bottom: none;
}

.mp-form-label {
  display: block;
  font-size: 24rpx;
  color: var(--mp-muted);
  margin-bottom: 12rpx;
}

.mp-form-label--req::after {
  content: ' *';
  color: #d14343;
}

.mp-form-input,
.mp-form-textarea,
.mp-form-picker {
  width: 100%;
  font-size: 28rpx;
  color: var(--mp-text);
  min-height: 48rpx;
}

.mp-form-picker {
  padding: 8rpx 0;
  color: var(--mp-text);
}

.mp-form-textarea {
  min-height: 160rpx;
}

.mp-load-more {
  text-align: center;
  padding: 24rpx;
  font-size: 24rpx;
  color: var(--mp-muted);
}

.mp-form-picker--link {
  color: var(--mp-brand-green-dark);
}

/* 底部选人 Sheet */
.mp-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 30, 25, 0.45);
  display: flex;
  align-items: flex-end;
}

.mp-sheet {
  width: 100%;
  max-height: 78vh;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
}

.mp-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 32rpx 16rpx;
  border-bottom: 1rpx solid var(--mp-border-light);
}

.mp-sheet__title {
  font-size: 30rpx;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-sheet__cancel {
  font-size: 28rpx;
  color: var(--mp-muted);
  min-width: 80rpx;
}

.mp-sheet__ok {
  font-size: 28rpx;
  color: var(--mp-brand-green-dark);
  font-weight: 600;
  min-width: 80rpx;
  text-align: right;
}

.mp-sheet__search {
  padding: 16rpx 32rpx;
}

.mp-sheet__search-input {
  background: var(--mp-bg);
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
}

.mp-sheet__body {
  flex: 1;
  max-height: 52vh;
  padding: 0 16rpx 16rpx;
}

.mp-sheet__hint {
  text-align: center;
  padding: 48rpx;
  color: var(--mp-muted);
  font-size: 26rpx;
}

.mp-sheet__row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 24rpx 16rpx;
  border-bottom: 1rpx solid var(--mp-border-light);
  min-height: 88rpx;
}

.mp-sheet__check {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid var(--mp-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

.mp-sheet__check--on {
  border-color: var(--mp-brand-green);
  background: var(--mp-brand-green);
  box-shadow: inset 0 0 0 6rpx #fff;
}

.mp-sheet__meta {
  flex: 1;
  min-width: 0;
}

.mp-sheet__name {
  display: block;
  font-size: 28rpx;
  color: var(--mp-text);
  font-weight: 500;
}

.mp-sheet__sub {
  display: block;
  margin-top: 4rpx;
  font-size: 22rpx;
  color: var(--mp-muted);
}

.mp-sheet__foot {
  padding: 16rpx 32rpx 24rpx;
  font-size: 24rpx;
  color: var(--mp-muted);
  border-top: 1rpx solid var(--mp-border-light);
}

/* 报销模块 Header：大麦黄主调（对齐 shanxia-mp-bx-demo） */
.mp-header--bx {
  background: linear-gradient(145deg, #a67c28 0%, #d6a343 72%, #0a9f6d 165%);
  box-shadow: 0 16rpx 40rpx rgba(166, 124, 40, 0.14);
}

.mp-card__amount {
  font-size: 30rpx;
  font-weight: 700;
  color: var(--mp-text);
}

.mp-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.mp-photo-item {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  background: var(--mp-border-light);
}

.mp-photo-item image {
  width: 100%;
  height: 100%;
}

.mp-photo-add {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  border: 2rpx dashed #b7e6d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-brand-green-dark);
  font-size: 24rpx;
  background: #f7fcf9;
}

.mp-photo-del {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 地磅模块 Header（对齐 shanxia-mp-db-demo） */
.mp-header--db {
  background: linear-gradient(145deg, #1d6b63 0%, #2b8a7e 72%, #0a9f6d 165%);
  box-shadow: 0 16rpx 40rpx rgba(29, 107, 99, 0.14);
}

/* 运输模块：默认品牌绿（对齐 shanxia-mp-pl-demo） */
.mp-header--pl {
  background: var(--mp-header-gradient);
  box-shadow: 0 16rpx 40rpx rgba(10, 159, 109, 0.12);
}

.mp-stats {
  margin: -24rpx 32rpx 24rpx;
  background: var(--mp-surface);
  border: 1rpx solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 28rpx 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(10, 159, 109, 0.06);
  position: relative;
  z-index: 2;
}

.mp-stats--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mp-stat {
  text-align: center;
  padding: 0 8rpx;
}

.mp-stat__num {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: var(--mp-brand-green-dark);
  line-height: 1.2;
}

.mp-stat__label {
  display: block;
  font-size: 22rpx;
  color: var(--mp-muted);
  margin-top: 8rpx;
}