shanxia2.0/miniprogram/styles/index.scss

// ============================================
// 山峡化工小程序 - 全局样式
// ============================================

@import './variables.scss';

// ============================================
// Reset
// ============================================
page {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: $font-size-base;
  color: $text-primary;
  background-color: $bg-gray-100;
  box-sizing: border-box;
}

view, text {
  box-sizing: border-box;
}

image {
  width: 100%;
  height: 100%;
}

/* uni-app 默认 button 带有边框/伪元素描边，这里统一去除 */
button {
  border: none;
}

button::after {
  border: none;
}

// ============================================
// 布局工具
// ============================================
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

// ============================================
// 文字工具
// ============================================
.text-primary {
  color: $text-primary;
}

.text-regular {
  color: $text-regular;
}

.text-secondary {
  color: $text-secondary;
}

.text-placeholder {
  color: $text-placeholder;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

// ============================================
// 间距工具
// ============================================
.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }
.mt-xl { margin-top: $spacing-xl; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }
.mb-xl { margin-bottom: $spacing-xl; }

.ml-xs { margin-left: $spacing-xs; }
.ml-sm { margin-left: $spacing-sm; }
.ml-md { margin-left: $spacing-md; }
.ml-lg { margin-left: $spacing-lg; }
.ml-xl { margin-left: $spacing-xl; }

.mr-xs { margin-right: $spacing-xs; }
.mr-sm { margin-right: $spacing-sm; }
.mr-md { margin-right: $spacing-md; }
.mr-lg { margin-right: $spacing-lg; }
.mr-xl { margin-right: $spacing-xl; }

.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }
.p-xl { padding: $spacing-xl; }

// ============================================
// 按钮样式
// ============================================
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  padding: 0 40rpx;
  font-size: $font-size-base;
  border-radius: $radius-round;
  transition: all $transition-fast;

  &.btn-primary {
    background: $client-primary;
    color: #ffffff;
  }

  &.btn-warning {
    background: $supplier-primary;
    color: #ffffff;
  }

  &.btn-danger {
    background: $deliverer-primary;
    color: #ffffff;
  }

  &.btn-outline {
    background: transparent;
    border: 2rpx solid currentColor;
  }

  &.btn-block {
    width: 100%;
  }

  &.btn-small {
    height: 60rpx;
    padding: 0 24rpx;
    font-size: $font-size-sm;
  }

  &.btn-large {
    height: 96rpx;
    padding: 0 48rpx;
    font-size: $font-size-md;
  }

  &.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

// ============================================
// 卡片样式
// ============================================
.card {
  background: $bg-white;
  border-radius: $radius-medium;
  box-shadow: $shadow-light;
  overflow: hidden;

  .card-header {
    padding: $spacing-md;
    border-bottom: 1rpx solid $border-light;
  }

  .card-body {
    padding: $spacing-md;
  }

  .card-footer {
    padding: $spacing-md;
    border-top: 1rpx solid $border-light;
  }
}

// ============================================
// 状态标签
// ============================================
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 16rpx;
  font-size: $font-size-xs;
  border-radius: 4rpx;

  &.status-primary {
    background: $client-light;
    color: $client-primary;
  }

  &.status-success {
    background: #f0f9eb;
    color: $success-color;
  }

  &.status-warning {
    background: $supplier-light;
    color: $supplier-primary;
  }

  &.status-danger {
    background: $deliverer-light;
    color: $deliverer-primary;
  }

  &.status-info {
    background: #f4f4f5;
    color: $info-color;
  }
}

// ============================================
// 安全区域
// ============================================
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

// ============================================
// 空状态
// ============================================
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: $spacing-lg;
    opacity: 0.5;
  }

  .empty-text {
    color: $text-placeholder;
    font-size: $font-size-base;
  }

  .empty-action {
    margin-top: $spacing-lg;
  }
}

// ============================================
// 加载状态
// ============================================
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: $z-index-modal;
}

// ============================================
// 分割线
// ============================================
.divider {
  height: 1rpx;
  background: $divider-color;
}

// ============================================
// 按钮执行中/禁用态文字颜色修正
// uni-app 默认 button 在 disabled/loading 时可能把文字置灰，
// 这里仅对项目内主操作按钮类保持白字，避免“登录中”发灰。
// ============================================
button.btn-login[disabled],
button.btn-login[loading],
button.save-btn[disabled],
button.save-btn[loading],
button.submit-btn[disabled],
button.submit-btn[loading],
button.btn[disabled],
button.btn[loading] {
  color: #ffffff !important;
}

// 微信 button[disabled] 会覆盖背景为浅色/白色，登录主按钮加载中需保持品牌渐变
button.btn-login[disabled],
button.btn-login[loading] {
  background: linear-gradient(135deg, var(--theme-color, #07c160) 0%, #07c160 100%) !important;
  opacity: 1;
}

button.btn-login[disabled] text,
button.btn-login[loading] text,
button.save-btn[disabled] text,
button.save-btn[loading] text,
button.submit-btn[disabled] text,
button.submit-btn[loading] text,
button.btn[disabled] text,
button.btn[loading] text {
  color: inherit !important;
}

// ============================================
// Radio Size Override
// ============================================
// uni-app 内置 radio 组件默认尺寸可能偏大，这里统一覆盖为 16px。
.uni-radio-input {
  width: 16px !important;
  height: 16px !important;
}

// ============================================
// Client theme (对齐 mobile-ui demo)
// 仅在页面根节点加 `.client-theme` 时生效，避免影响供应商/配送员端。
// ============================================
.client-theme {
  --c-brand-green: #0a9f6d;
  --c-brand-green-2: #11b37a;
  --c-brand-green-soft: #e9f9f2;
  --c-barley-yellow: #d6a343;
  --c-bg: #f5f8f7;
  --c-card: #ffffff;
  --c-text: #1f2a26;
  --c-muted: #6b7b74;
  --c-border: #dcebe4;
  --c-danger: #d14343;
  /* 详情/购物车「加入购物车」等辅按钮（对齐 product-detail demo .btn-cart） */
  --c-accent-orange: #f3a43b;
  --c-shadow: 0 8px 20px rgba(10, 159, 109, 0.12);
  --c-shadow-soft: 0 8px 18px rgba(10, 159, 109, 0.12);
  --c-radius-card: 28rpx; // ≈ 14px
  --c-radius-lg: 32rpx; // ≈ 16px
  --c-radius-md: 24rpx; // ≈ 12px
  --c-radius-sm: 16rpx; // ≈ 8px
}

.client-theme .c-card {
  background: var(--c-card);
  border: 1rpx solid var(--c-border);
  border-radius: var(--c-radius-card);
}

.client-theme .c-pill {
  border-radius: 999rpx;
}

.client-theme .c-btn-primary {
  background: var(--c-brand-green);
  color: #ffffff;
}

.client-theme .c-btn-accent {
  background: linear-gradient(145deg, var(--c-barley-yellow), #e4b458);
  color: #ffffff;
}

.client-theme .c-tag {
  min-height: 48rpx;
  padding: 0 20rpx;
  border-radius: 999rpx;
  background: var(--c-brand-green-soft);
  color: var(--c-brand-green);
  font-size: 22rpx;
  display: inline-flex;
  align-items: center;
}

/* 客户端二级页：通顶栏 + 内容区边距（对齐 cart/order/profile demo） */
.client-theme.client-subpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  box-sizing: border-box;
}

.client-theme .client-subpage-hero {
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--c-brand-green), var(--c-brand-green-2));
  color: #ffffff;
  padding: calc(24rpx + constant(safe-area-inset-top)) 32rpx 28rpx;
  padding: calc(24rpx + env(safe-area-inset-top, 0px)) 32rpx 28rpx;
  border-bottom-left-radius: 36rpx;
  border-bottom-right-radius: 36rpx;
  box-shadow: var(--c-shadow);
  box-sizing: border-box;
}

.client-theme .client-subpage-hero__title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  line-height: 1.25;
}

.client-theme .client-subpage-hero__sub {
  display: block;
  margin-top: 12rpx;
  font-size: 24rpx;
  opacity: 0.9;
  line-height: 1.35;
}

.client-theme .client-subpage-scroll {
  flex: 1;
  min-height: 0;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

.client-theme .client-subpage-body {
  padding: 24rpx 32rpx;
  padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

// ============================================
// 商品图统一规范（列表/购物车/订单等缩略图）
// - 容器固定尺寸，避免不同原图比例撑坏卡片
// - 图片统一裁切填充，保证列表视觉一致
// ============================================
.sq-product-thumb {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 20rpx;
  background: linear-gradient(145deg, #f4fbf8, #e4f6ef);
}

.sq-product-thumb--md {
  width: 168rpx;
  height: 168rpx;
}

.sq-product-thumb--sm {
  width: 160rpx;
  height: 160rpx;
}

.sq-product-thumb image,
.sq-product-thumb .uni-image {
  display: block;
  width: 100%;
  height: 100%;
}

// ============================================
// 金额/单价全局视觉统一
// 规则：涉及 price/amount/money/total/fee 的展示文本统一红色 + 小一档字号
// ============================================
$sq-amount-color: #d32f2f;
$sq-amount-font-size: 24rpx;

text[class*='price'],
text[class*='amount'],
text[class*='money'],
text[class*='total'],
text[class*='subtotal'],
text[class*='fee'],
view[class*='price'],
view[class*='amount'],
view[class*='money'],
view[class*='total'],
view[class*='subtotal'],
view[class*='fee'],
.price,
.amount,
.money,
.total,
.subtotal,
.fee {
  color: $sq-amount-color !important;
  font-size: $sq-amount-font-size !important;
}

// ============================================
// 统一大背景头部规范（适配刘海/胶囊）
// - 顶部纯背景留白：safeTop + 统一额外间距
// - 右侧永远预留胶囊安全区，不放业务按钮
// ============================================
.sq-hero-header {
  background: linear-gradient(145deg, var(--c-brand-green), var(--c-brand-green-2));
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  box-shadow: var(--c-shadow);
  padding: calc(88rpx + var(--sq-safe-top, env(safe-area-inset-top, 0px)))
    calc(32rpx + var(--sq-capsule-right-safe, 96px))
    32rpx
    32rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.sq-hero-header--supplier {
  background: linear-gradient(145deg, #087f57, #0a9f6d);
}

.sq-hero-header--deliverer {
  background: linear-gradient(145deg, #087f57, #0a9f6d);
}

.sq-hero-header--compact {
  padding-top: calc(72rpx + var(--sq-safe-top, env(safe-area-inset-top, 0px)));
}

/* 客户端 tab 页面头部：不占胶囊右侧安全位，避免右侧内容被额外挤压 */
.sq-hero-header--client {
  padding-right: 32rpx;
}

.sq-hero-back-row {
  display: flex;
  align-items: center;
  min-height: 64rpx;
  margin-bottom: 14rpx;
}

.sq-hero-back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(255, 255, 255, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sq-hero-back-btn text {
  color: #ffffff;
  font-size: 42rpx;
  line-height: 1;
  transform: translateX(-2rpx);
}

.sq-hero-back-title {
  margin-left: 16rpx;
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 700;
}