huimv-baqing/ruoyi-ui-app/styles/tab-page.scss

/* 各 Tab 子页共用：rpx + flex，与《uni-app标准》一致 */
@import './morandi.scss';

.tp-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24rpx;
  padding-bottom: 16rpx;
  gap: 24rpx;
  box-sizing: border-box;
}

.tp-panel--pad {
  padding-top: 32rpx;
}

.tp-heading {
  text-align: center;
  color: $morandi-text;
}

.tp-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 32rpx 24rpx;
  min-width: 0;
  background: $morandi-bg-card-inner;
  border-radius: 16rpx;
  border: 1rpx solid $morandi-border-soft;
  gap: 16rpx;
}

.tp-hero-logo {
  display: block;
  align-self: center;
  min-width: 160rpx;
  max-width: 320rpx;
  width: 62%;
}

.tp-hero-title {
  text-align: center;
  color: $morandi-text;
}

.tp-hero-desc {
  text-align: center;
  color: $morandi-text-muted;
}

.tp-lang-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
  min-width: 0;
}

.tp-lang-chip {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 10rpx 18rpx;
  justify-content: center;
  align-items: center;
  border-radius: 999rpx;
  background: $morandi-chip;
  border-width: 1rpx;
  border-style: solid;
  border-color: $morandi-border-strong;
}

.tp-lang-chip--active {
  border-color: $morandi-chip-on-border;
  background: $morandi-chip-on-bg;
}

.tp-chip-label {
  text-align: center;
  color: $morandi-text-secondary;
  font-size: 24rpx;
}

.tp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24rpx;
  background: $morandi-bg-card;
  border-radius: 16rpx;
  border: 1rpx solid $morandi-border;
  gap: 16rpx;
  box-sizing: border-box;
}

.tp-card--muted {
  background: $morandi-bg-muted;
  border-color: $morandi-border-strong;
  color: $morandi-text-secondary;
}

.tp-card-label {
  font-weight: 600;
}

.tp-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tp-actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  min-width: 0;
}

.tp-actions-item {
  width: 100%;
}

/* Tab 路由页根容器：随内容增高，整页可滚动 */
.tab-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
}

/* 分包占位页等与消息页同一底衬 */
.pkg-entry {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 24rpx;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  background: $morandi-bg-page;
}

.pkg-entry .text-title {
  color: $morandi-text;
}

.pkg-entry .text-body {
  color: $morandi-text-muted;
}