RunForge-Frontend/src/styles/store-theme.less

// RunForge 用户端 / 管理端统一设计令牌（绿色系）
@store-primary: #1b3022;
@store-primary-light: #2d4a38;
@store-accent: #52b878;
@store-accent-hover: #3fa866;
@store-bg: #f4faf6;
@store-card-bg: #ffffff;
@store-card-border: #e2efe6;
@store-text-muted: #4a5c52;
@store-radius: 16px;
@store-radius-sm: 12px;
@store-shadow: 0 4px 24px rgba(27, 48, 34, 0.06);
@store-shadow-hover: 0 12px 40px rgba(27, 48, 34, 0.12);
@store-price: #e85d04;
// 内容区宽度：相对父级 100%，窄栏用 rem 上限（非固定 px）
@store-content-narrow: min(100%, 42rem);
@store-page-padding-x: clamp(12px, 2.5vw, 40px);
@store-page-padding-bottom: clamp(20px, 3vh, 40px);

@app-breakpoint-sm: 576px;
@app-breakpoint-md: 768px;
@app-breakpoint-lg: 992px;
@app-breakpoint-xl: 1280px;

// —— 页面容器（兼容旧 .container）——
.container,
.store-page,
.app-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 @store-page-padding-x @store-page-padding-bottom;
  box-sizing: border-box;
}

.app-page--full,
.service-page,
.order-page,
.order-detail-page,
.power-page {
  width: 100%;
  max-width: none;
}

.app-page--wide {
  max-width: none;
}

.app-page__inner,
.service-page__inner,
.power-page__inner,
.order-page__inner,
.order-detail-page__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.app-page__inner--wide,
.service-page__inner--wide,
.power-page__inner--wide,
.order-page__inner,
.order-detail-page__inner {
  max-width: 100%;
  width: 100%;
}

.app-page__inner--narrow,
.service-page__inner:not(.service-page__inner--wide),
.power-page__inner:not(.power-page__inner--wide) {
  max-width: @store-content-narrow;
  width: 100%;
}

// —— 页头 / 工具栏 ——
.app-page-header,
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;

  @media (min-width: @app-breakpoint-md) {
    gap: 16px;
    margin-bottom: 20px;
  }

  &__text {
    flex: 1 1 200px;
    min-width: 0;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
  }
}

.store-section-title {
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  color: @store-primary;
  line-height: 1.3;
}

.store-section-desc {
  margin: 0;
  font-size: 0.9rem;
  color: @store-text-muted;
  line-height: 1.5;
}

.app-notice,
.notice {
  margin-bottom: 16px;
  border-radius: @store-radius-sm;
}

// —— 按钮 ——
.app-btn-primary,
.submit-btn,
.primary-btn {
  border-radius: 999px;
  background: @store-primary !important;
  border-color: @store-primary !important;

  &:hover:not(:disabled) {
    background: @store-primary-light !important;
    border-color: @store-primary-light !important;
  }
}

.buttonGroup,
.app-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;

  @media (min-width: @app-breakpoint-md) {
    gap: 10px;
  }
}

// —— 卡片 ——
.container .arco-card,
.store-page .arco-card,
.app-page .arco-card,
.app-card {
  max-width: 100%;
  overflow: visible;
  border-radius: @store-radius;
  border: 1px solid @store-card-border;
  box-shadow: @store-shadow;
  margin-bottom: 16px;

  .arco-card-header {
    border-bottom: 1px solid @store-card-border;
  }

  .arco-card-header-title {
    font-weight: 600;
    color: @store-primary;
  }

  .arco-card-body {
    overflow: visible;
  }
}

// —— 表格（移动端横向滚动）——
.app-table-wrap,
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;

  .arco-table {
    min-width: 640px;
  }
}

// —— 筛选表单响应式 ——
.app-query-form {
  .arco-form-item {
    margin-bottom: 12px;
  }
}

@media (max-width: @app-breakpoint-lg) {
  .app-query-form .arco-row > .arco-col,
  .queryForm .arco-row > .arco-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .app-query-form .arco-divider-vertical,
  .queryForm + .arco-divider,
  .queryForm .arco-divider-vertical {
    display: none;
  }

  .app-query-actions,
  .queryForm ~ .arco-col[style*='text-align: right'] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-top: 4px;
  }

  .arco-modal {
    max-width: calc(100vw - 32px);
  }

  .arco-drawer {
    max-width: 100vw;
  }
}

// —— Spin ——
.store-spin {
  display: block !important;
  width: 100% !important;

  .arco-spin-children {
    width: 100%;
  }
}

// —— 商品网格 ——
.goods-grid {
  @media (max-width: @app-breakpoint-md) {
    grid-template-columns: 1fr !important;
  }
}

// —— 搜索框 ——
.store-search.arco-input-wrapper {
  background-color: @store-card-bg !important;
  border: 1px solid #c5d9cc !important;
  border-radius: 999px !important;
  box-shadow: @store-shadow !important;
  transition: border-color 0.2s, box-shadow 0.2s;

  &:hover {
    border-color: @store-accent !important;
    background-color: @store-card-bg !important;
  }

  &.arco-input-focus {
    border-color: @store-accent !important;
    box-shadow: 0 0 0 3px fade(@store-accent, 22%) !important;
  }

  .arco-input {
    background: transparent !important;
    color: @store-primary;

    &::placeholder {
      color: @store-text-muted;
    }
  }

  .arco-input-suffix .arco-icon {
    color: @store-accent;
  }
}

// —— 弹窗（移动端宽度）——
@media (max-width: @app-breakpoint-md) {
  .arco-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  .arco-modal .arco-modal-body {
    max-height: 70vh;
    overflow-y: auto;
  }

  .arco-modal .arco-modal-header {
    padding: 14px 16px 10px;
  }

  .arco-modal .arco-modal-body,
  .arco-modal .arco-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .arco-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .arco-drawer .arco-drawer-body {
    padding: 14px 16px 16px;
  }

  .arco-drawer .arco-drawer-footer {
    padding: 10px 16px 14px;
  }

  .arco-drawer .arco-drawer-footer .arco-btn {
    width: 100%;
  }

  .arco-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .arco-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .arco-tabs-nav .arco-tabs-nav-type-line,
  .arco-tabs-nav .arco-tabs-nav-type-rounded,
  .arco-tabs-nav .arco-tabs-nav-type-card {
    min-width: max-content;
  }

  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item {
    width: 100%;
  }

  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-label,
  .arco-descriptions-layout-inline-horizontal .arco-descriptions-item-value {
    width: auto !important;
  }
}