@ruixinkeji/prism-ui 1.0.16 → 1.0.17

package/dist/styles/data.scss

@@ -1,1229 +0,0 @@
-/**
- * Prism UI - 数据展示组件样式
- * 统计卡片、徽章、头像、进度条等
- */
-
-/* ============================================================
-   数据统计卡片
-   ============================================================ */
-
-/* 统计卡片网格 */
-.prism-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16rpx;
-}
-
-/* 统计卡片 */
-.prism-stat-card {
-  padding: 20rpx;
-  position: relative;
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  .stat-icon {
-    position: absolute;
-    right: 12rpx;
-    bottom: 12rpx;
-    width: 56rpx;
-    height: 56rpx;
-    border-radius: 14rpx;
-  }
-
-  .stat-info {
-    margin-bottom: 4rpx;
-  }
-
-  .stat-value {
-    display: block;
-    font-size: 36rpx;
-    font-weight: 700;
-    color: var(--prism-text-primary, #1D2129);
-    line-height: 1.2;
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  .stat-label {
-    display: block;
-    font-size: 22rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-top: 4rpx;
-  }
-
-  .stat-trend {
-    position: absolute;
-    top: 12rpx;
-    right: 12rpx;
-    display: flex;
-    align-items: center;
-    font-size: 20rpx;
-    gap: 6rpx;
-
-    &.up {
-      color: var(--prism-success-color, #00B42A);
-    }
-
-    &.down {
-      color: var(--prism-danger-color, #F53F3F);
-    }
-
-    .fa, .fa-solid {
-      font-size: 18rpx;
-    }
-  }
-}
-
-
-/* ============================================================
-   徽章组件
-   ============================================================ */
-
-/* 红点徽章 */
-.prism-badge {
-  position: absolute;
-  width: 16rpx;
-  height: 16rpx;
-  padding: 0;
-  background: var(--prism-danger-color, #ff4d4f);
-  border-radius: 50%;
-  border: 2rpx solid #fff;
-  box-sizing: border-box;
-  top: 8rpx;
-  right: 8rpx;
-
-  &.top-left {
-    top: 8rpx;
-    left: 8rpx;
-    right: auto;
-  }
-
-  &.bottom-right {
-    top: auto;
-    bottom: 8rpx;
-    right: 8rpx;
-  }
-}
-
-/* 数字徽章 */
-.prism-number-badge {
-  position: absolute;
-  min-width: 32rpx;
-  height: 32rpx;
-  background: var(--prism-danger-color, #F53F3F);
-  border-radius: 16rpx;
-  font-size: 20rpx;
-  color: #fff;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: 0 8rpx;
-  padding-bottom: 2rpx;
-  line-height: 1;
-  text-align: center;
-  box-sizing: border-box;
-  top: -4rpx;
-  right: -4rpx;
-
-  &.top-left {
-    top: -4rpx;
-    left: -4rpx;
-    right: auto;
-  }
-
-  &.bottom-right {
-    top: auto;
-    bottom: -4rpx;
-    right: -4rpx;
-  }
-}
-
-/* ============================================================
-   头像组件
-   ============================================================ */
-
-.prism-avatar {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-
-  /* 默认尺寸 (md) */
-  width: 80rpx;
-  height: 80rpx;
-
-  /* 默认背景色（仅用于图片头像和图标头像） */
-  &:not(.blue):not(.green):not(.orange):not(.purple):not(.red):not(.cyan):not(.pink):not(.indigo) {
-    background: var(--prism-bg-color, #F7F8FA);
-  }
-
-  .avatar-img,
-  .avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: top;
-    border-radius: inherit;
-  }
-
-  .avatar-icon {
-    font-size: 40rpx;
-    color: var(--prism-text-placeholder, #C9CDD4);
-  }
-
-  .avatar-text {
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #FFFFFF;
-    line-height: 1;
-    user-select: none;
-  }
-
-  /* 尺寸修饰符 */
-  &.xs {
-    width: 48rpx;
-    height: 48rpx;
-    .avatar-icon { font-size: 24rpx; }
-    .avatar-text { font-size: 20rpx; }
-  }
-
-  &.sm {
-    width: 64rpx;
-    height: 64rpx;
-    .avatar-icon { font-size: 32rpx; }
-    .avatar-text { font-size: 26rpx; }
-  }
-
-  &.md {
-    width: 80rpx;
-    height: 80rpx;
-    .avatar-icon { font-size: 40rpx; }
-    .avatar-text { font-size: 32rpx; }
-  }
-
-  &.lg {
-    width: 96rpx;
-    height: 96rpx;
-    .avatar-icon { font-size: 48rpx; }
-    .avatar-text { font-size: 40rpx; }
-  }
-
-  &.xl {
-    width: 128rpx;
-    height: 128rpx;
-    .avatar-icon { font-size: 64rpx; }
-    .avatar-text { font-size: 52rpx; }
-  }
-
-  /* 方形头像 */
-  &.square {
-    border-radius: 12rpx;
-  }
-
-  /* 带边框 */
-  &.bordered {
-    border: 4rpx solid #FFFFFF;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
-  }
-
-  /* 文字头像颜色修饰符 */
-  &.blue {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  }
-
-  &.green {
-    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-  }
-
-  &.orange {
-    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  }
-
-  &.purple {
-    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
-  }
-
-  &.red {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  }
-
-  &.cyan {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  }
-
-  &.pink {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
-  }
-
-  &.indigo {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  }
-
-  /* 在线状态指示器 - 圆点形式 */
-  .avatar-status {
-    position: absolute;
-    bottom: -2rpx;
-    right: -2rpx;
-    width: 24rpx;
-    height: 24rpx;
-    border-radius: 50%;
-    border: 3rpx solid var(--prism-bg-color-card, #FFFFFF);
-
-    &.online {
-      background: var(--prism-success-color, #00B42A);
-    }
-
-    &.offline {
-      background: var(--prism-text-disabled, #C9CDD4);
-    }
-
-    &.busy {
-      background: var(--prism-warning-color, #FF7D00);
-    }
-  }
-
-  .dark-mode & {
-    // 只有没有颜色修饰符的头像才使用深色背景
-    &:not(.blue):not(.green):not(.orange):not(.purple):not(.red):not(.cyan):not(.pink):not(.indigo) {
-      background: var(--prism-bg-color-card, #242424);
-    }
-
-    .avatar-icon {
-      color: var(--prism-text-secondary, #86909C);
-    }
-
-    &.bordered {
-      border-color: #FFFFFF;
-      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
-    }
-
-    .avatar-status {
-      border-color: var(--prism-bg-color-card, #242424);
-    }
-  }
-}
-
-/* 头像组 */
-.prism-avatar-group {
-  display: flex;
-  align-items: center;
-
-  .prism-avatar {
-    margin-left: -24rpx;
-    border: 3rpx solid var(--prism-bg-color-card, #FFFFFF);
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .avatar-more {
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: 50%;
-    background: rgba(247, 248, 250, 0.75);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 22rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-left: -24rpx;
-    border: 3rpx solid var(--prism-bg-color-card, #FFFFFF);
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-    z-index: 100;
-  }
-
-  .dark-mode & {
-    .prism-avatar {
-      border-color: #FFFFFF;
-    }
-
-    .avatar-more {
-      background: rgba(255, 255, 255, 0.75);
-      border-color: #FFFFFF;
-      color: var(--prism-primary-color, #3478F6);
-    }
-  }
-}
-
-/* ============================================================
-   进度条
-   ============================================================ */
-
-.prism-progress {
-  width: 100%;
-  height: 12rpx;
-  background: var(--prism-bg-color, #F7F8FA);
-  border-radius: 6rpx;
-  overflow: hidden;
-
-  .progress-bar {
-    height: 100%;
-    background: var(--prism-primary-color, #3478F6);
-    border-radius: 6rpx;
-    transition: width 0.3s ease;
-  }
-
-  &--success .progress-bar {
-    background: var(--prism-success-color, #00B42A);
-  }
-
-  &--warning .progress-bar {
-    background: var(--prism-warning-color, #FF7D00);
-  }
-
-  &--danger .progress-bar {
-    background: var(--prism-danger-color, #F53F3F);
-  }
-
-  &--lg {
-    height: 20rpx;
-    border-radius: 10rpx;
-
-    .progress-bar {
-      border-radius: 10rpx;
-    }
-  }
-
-  .dark-mode & {
-    background: rgba(255, 255, 255, 0.1);
-  }
-}
-
-/* ============================================================
-   图片组件
-   ============================================================ */
-
-.prism-img {
-  display: block;
-  object-fit: cover;
-
-  /* 尺寸修饰符 */
-  &.img-xs { width: 48rpx; height: 48rpx; }
-  &.img-sm { width: 64rpx; height: 64rpx; }
-  &.img-md { width: 96rpx; height: 96rpx; }
-  &.img-lg { width: 128rpx; height: 128rpx; }
-  &.img-xl { width: 160rpx; height: 160rpx; }
-
-  /* 圆角修饰符 */
-  &.img-rounded { border-radius: 8rpx; }
-  &.img-rounded-md { border-radius: 12rpx; }
-  &.img-rounded-lg { border-radius: 16rpx; }
-  &.img-circle { border-radius: 50%; }
-}
-
-/* ============================================================
-   空状态占位
-   ============================================================ */
-
-.prism-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100rpx 0;
-
-  .placeholder-icon {
-    font-size: 80rpx;
-    color: var(--prism-text-placeholder, #C9CDD4);
-    margin-bottom: 24rpx;
-  }
-
-  .placeholder-text {
-    font-size: 28rpx;
-    color: var(--prism-text-placeholder, #999);
-  }
-
-  .placeholder-action {
-    margin-top: 32rpx;
-  }
-}
-
-/* ============================================================
-   Skeleton 骨架屏
-   ============================================================ */
-
-.prism-skeleton {
-  &__item {
-    background: linear-gradient(90deg,
-      var(--prism-bg-color, #F7F8FA) 25%,
-      #E8E8E8 50%,
-      var(--prism-bg-color, #F7F8FA) 75%
-    );
-    background-size: 400% 100%;
-    animation: prism-skeleton-loading 1.5s ease infinite;
-    border-radius: 8rpx;
-  }
-
-  &__avatar {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 50%;
-  }
-
-  &__title {
-    height: 32rpx;
-    width: 40%;
-    margin-bottom: 24rpx;
-  }
-
-  &__text {
-    height: 28rpx;
-    margin-bottom: 16rpx;
-
-    &:last-child {
-      width: 60%;
-    }
-  }
-
-  &__image {
-    width: 100%;
-    height: 200rpx;
-    border-radius: 12rpx;
-  }
-
-  .dark-mode & {
-    &__item {
-      background: linear-gradient(90deg,
-        rgba(255, 255, 255, 0.06) 25%,
-        rgba(255, 255, 255, 0.12) 50%,
-        rgba(255, 255, 255, 0.06) 75%
-      );
-      background-size: 400% 100%;
-    }
-  }
-}
-
-@keyframes prism-skeleton-loading {
-  0% { background-position: 100% 50%; }
-  100% { background-position: 0 50%; }
-}
-
-/* ============================================================
-   NoticeBar 通知栏
-   ============================================================ */
-
-.prism-notice {
-  display: flex;
-  align-items: center;
-  padding: 16rpx 24rpx;
-  background: #FFFBE6;
-  font-size: 26rpx;
-  color: #FAAD14;
-  overflow: hidden;
-  border-radius: 12rpx;
-
-  &__icon {
-    font-size: 28rpx;
-    margin-right: 12rpx;
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &__text {
-    white-space: nowrap;
-
-    &--scroll {
-      display: inline-block;
-      animation: prism-notice-scroll 10s linear infinite;
-    }
-  }
-
-  &__close {
-    font-size: 24rpx;
-    margin-left: 12rpx;
-    flex-shrink: 0;
-    padding: 8rpx;
-  }
-}
-
-// 原子化颜色修饰类
-.info.prism-notice {
-  background: #E6F7FF;
-  color: #1890FF;
-}
-
-.success.prism-notice {
-  background: #F6FFED;
-  color: #52C41A;
-}
-
-.error.prism-notice {
-  background: #FFF2F0;
-  color: #FF4D4F;
-}
-
-// 深色模式 - 原子化方式
-.dark-mode .prism-notice {
-  background: rgba(250, 173, 20, 0.15);
-}
-
-.dark-mode .info.prism-notice {
-  background: rgba(24, 144, 255, 0.15);
-}
-
-.dark-mode .success.prism-notice {
-  background: rgba(82, 196, 26, 0.15);
-}
-
-.dark-mode .error.prism-notice {
-  background: rgba(255, 77, 79, 0.15);
-}
-
-@keyframes prism-notice-scroll {
-  0% { transform: translateX(100%); }
-  100% { transform: translateX(-100%); }
-}
-
-/* ============================================================
-   Collapse 折叠面板
-   ============================================================ */
-
-.prism-collapse {
-  background: var(--prism-bg-color-card, #fff);
-  border-radius: 12rpx;
-  overflow: hidden;
-
-  .dark-mode & {
-    background: var(--prism-bg-color-card, #242424);
-  }
-}
-
-.prism-collapse-item {
-  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  .dark-mode & {
-    border-bottom-color: rgba(255, 255, 255, 0.08);
-  }
-}
-
-.prism-collapse-item__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24rpx 32rpx;
-  font-size: 28rpx;
-  color: var(--prism-text-primary, #1D2129);
-  transition: all 0.3s ease;
-
-  &:active {
-    background: var(--prism-bg-color, #F7F8FA);
-  }
-
-  .dark-mode & {
-    color: var(--prism-text-primary, #E5E6EB);
-
-    &:active {
-      background: rgba(255, 255, 255, 0.05);
-    }
-  }
-}
-
-.prism-collapse-item__arrow {
-  font-size: 24rpx;
-  color: var(--prism-text-placeholder, #C9CDD4);
-  transition: transform 0.3s ease;
-
-  &--active {
-    transform: rotate(180deg);
-  }
-}
-
-.prism-collapse-item__content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-
-  &--show {
-    max-height: 1000rpx;
-  }
-}
-
-.prism-collapse-item__body {
-  padding: 0 32rpx 24rpx;
-  font-size: 26rpx;
-  color: var(--prism-text-secondary, #86909C);
-  line-height: 1.6;
-}
-
-/* ============================================================
-   CountDown 倒计时
-   ============================================================ */
-
-.prism-countdown {
-  display: inline-flex;
-  align-items: center;
-  gap: 8rpx;
-  font-size: 28rpx;
-  color: var(--prism-text-primary, #1D2129);
-
-  .dark-mode & {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-}
-
-.prism-countdown__block {
-  min-width: 44rpx;
-  height: 44rpx;
-  background: var(--prism-primary-color, #3478F6);
-  border-radius: 8rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #fff;
-}
-
-.prism-countdown__colon {
-  font-weight: 600;
-  color: var(--prism-text-primary, #1D2129);
-
-  .dark-mode & {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-}
-
-/* ============================================================
-   Swiper 轮播图
-   ============================================================ */
-
-.prism-swiper {
-  width: 100%;
-
-  &__container {
-    width: 100%;
-  }
-
-  &__item {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &__image {
-    width: 100%;
-    height: 100%;
-  }
-
-  &__color {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__text {
-    color: #fff;
-    font-size: 32rpx;
-    font-weight: 500;
-  }
-}
-
-/* ============================================================
-   Milestone 里程碑
-   ============================================================ */
-
-.prism-milestone {
-  padding: 24rpx 0;
-}
-
-.prism-milestone-item {
-  display: flex;
-  align-items: flex-start;
-  padding-bottom: 40rpx;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 16rpx;
-    top: 32rpx;
-    bottom: 0;
-    width: 2rpx;
-    background: var(--prism-border-color-light, #E5E6EB);
-  }
-
-  &:last-child {
-    padding-bottom: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  .milestone-dot {
-    width: 32rpx;
-    height: 32rpx;
-    border-radius: 50%;
-    background: var(--prism-bg-color-container, #F7F8FA);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-    margin-top: 2rpx;
-
-    .fa {
-      font-size: 16rpx;
-      color: var(--prism-text-disabled, #C9CDD4);
-    }
-  }
-
-  .milestone-content {
-    flex: 1;
-    margin-left: 24rpx;
-  }
-
-  .milestone-title {
-    font-size: 30rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: 8rpx;
-    line-height: 1.2;
-  }
-
-  .milestone-time {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 12rpx;
-  }
-
-  .milestone-desc {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    line-height: 1.6;
-  }
-
-  // 已完成状态
-  &.completed {
-    .milestone-dot {
-      background: var(--prism-success-color, #00B42A);
-
-      .fa {
-        color: #FFFFFF;
-      }
-    }
-
-    &::before {
-      background: var(--prism-success-color, #00B42A);
-    }
-  }
-
-  // 激活状态
-  &.active {
-    .milestone-dot {
-      background: var(--prism-primary-color, #3478F6);
-      box-shadow: 0 0 0 8rpx rgba(52, 120, 246, 0.15);
-
-      .fa {
-        color: #FFFFFF;
-      }
-    }
-
-    .milestone-title {
-      color: var(--prism-primary-color, #3478F6);
-    }
-  }
-}
-
-.dark-mode {
-  .prism-milestone-item {
-    &::before {
-      background: var(--prism-border-color-base, #3A3A3A);
-    }
-
-    .milestone-dot {
-      background: var(--prism-bg-color-container, #2A2A2A);
-    }
-
-    .milestone-title {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-
-    &.completed {
-      .milestone-dot {
-        background: var(--prism-success-color, #00B42A);
-
-        .fa {
-          color: #FFFFFF;
-        }
-      }
-
-      &::before {
-        background: var(--prism-success-color, #00B42A);
-      }
-    }
-
-    &.active {
-      .milestone-dot {
-        background: var(--prism-primary-color, #3478F6);
-
-        .fa {
-          color: #FFFFFF;
-        }
-      }
-
-      .milestone-title {
-        color: var(--prism-primary-color, #3478F6);
-      }
-    }
-  }
-}
-
-/* ============================================================
-   Steps 快递进展
-   ============================================================ */
-
-.prism-steps {
-  padding: 24rpx 0;
-}
-
-.prism-step-item {
-  position: relative;
-  padding-left: 36rpx;
-  padding-bottom: 36rpx;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 8rpx;
-    top: 20rpx;
-    bottom: 0;
-    width: 1rpx;
-    background: var(--prism-border-color-light, #E5E6EB);
-  }
-
-  &:last-child {
-    padding-bottom: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  .step-dot {
-    position: absolute;
-    left: 0;
-    top: 4rpx;
-    width: 16rpx;
-    height: 16rpx;
-    border-radius: 50%;
-    background: var(--prism-border-color-light, #E5E6EB);
-  }
-
-  .step-content {
-    /* 内容自然流动 */
-  }
-
-  .step-title {
-    font-size: 28rpx;
-    font-weight: 400;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: 8rpx;
-    line-height: 1.5;
-  }
-
-  .step-time {
-    font-size: 22rpx;
-    color: var(--prism-text-placeholder, #C9CDD4);
-    margin-bottom: 8rpx;
-  }
-
-  .step-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    line-height: 1.6;
-  }
-
-  // 已完成状态
-  &.completed {
-    .step-dot {
-      background: var(--prism-primary-color, #3478F6);
-    }
-
-    &::before {
-      background: var(--prism-primary-color, #3478F6);
-    }
-  }
-
-  // 激活状态（最新一条）
-  &.active {
-    .step-dot {
-      width: 24rpx;
-      height: 24rpx;
-      left: -4rpx;
-      top: 0;
-      background: var(--prism-success-color, #00B42A);
-      border: 4rpx solid rgba(0, 180, 42, 0.2);
-      box-sizing: border-box;
-    }
-
-    &::before {
-      left: 12rpx;
-      background: var(--prism-success-color, #00B42A);
-    }
-
-    .step-title {
-      font-weight: 600;
-      color: var(--prism-success-color, #00B42A);
-    }
-  }
-}
-
-.dark-mode {
-  .prism-step-item {
-    &::before {
-      background: var(--prism-border-color-base, #3A3A3A);
-    }
-
-    .step-dot {
-      background: var(--prism-border-color-base, #3A3A3A);
-    }
-
-    .step-title {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-
-    &.completed {
-      .step-dot {
-        background: var(--prism-primary-color, #3478F6);
-      }
-
-      &::before {
-        background: var(--prism-primary-color, #3478F6);
-      }
-    }
-
-    &.active {
-      .step-dot {
-        background: var(--prism-success-color, #00B42A);
-        border-color: rgba(0, 180, 42, 0.3);
-      }
-
-      &::before {
-        background: var(--prism-success-color, #00B42A);
-      }
-
-      .step-title {
-        color: var(--prism-success-color, #00B42A);
-      }
-    }
-  }
-}
-
-/* ============================================================
-   核心指标卡片
-   ============================================================ */
-
-/* 核心指标网格 */
-.prism-metric-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16rpx;
-}
-
-/* 核心指标卡片 */
-.prism-metric-card {
-  padding: 20rpx;
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-
-  &:active {
-    opacity: 0.9;
-  }
-
-  .metric-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .metric-icon-wrapper {
-    width: 56rpx;
-    height: 56rpx;
-    border-radius: 14rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28rpx;
-
-    /* 图标背景色 */
-    &.icon-bg-sleep {
-      background: rgba(124, 58, 237, 0.1);
-      color: #7C3AED;
-    }
-    &.icon-bg-oxygen {
-      background: rgba(16, 185, 129, 0.1);
-      color: #10B981;
-    }
-    &.icon-bg-pressure {
-      background: rgba(59, 130, 246, 0.1);
-      color: #3B82F6;
-    }
-    &.icon-bg-heart {
-      background: rgba(239, 68, 68, 0.1);
-      color: #EF4444;
-    }
-    &.icon-bg-hrv {
-      background: rgba(245, 158, 11, 0.1);
-      color: #F59E0B;
-    }
-    &.icon-bg-temp {
-      background: rgba(236, 72, 153, 0.1);
-      color: #EC4899;
-    }
-    &.icon-bg-steps {
-      background: rgba(6, 182, 212, 0.1);
-      color: #06B6D4;
-    }
-    &.icon-bg-calories {
-      background: rgba(249, 115, 22, 0.1);
-      color: #F97316;
-    }
-  }
-
-  .metric-body {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .metric-value {
-    font-size: 40rpx;
-    font-weight: 700;
-    line-height: 1.2;
-    display: flex;
-    align-items: baseline;
-    gap: 4rpx;
-    color: var(--prism-text-primary, #1D2129);
-
-    &.text-success {
-      color: var(--prism-success-color, #00B42A);
-    }
-    &.text-warning {
-      color: var(--prism-warning-color, #FF7D00);
-    }
-    &.text-danger {
-      color: var(--prism-danger-color, #F53F3F);
-    }
-  }
-
-  .metric-unit {
-    font-size: 24rpx;
-    font-weight: 500;
-    color: var(--prism-text-secondary, #86909C);
-    margin-left: 4rpx;
-  }
-
-  .metric-label {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-top: 4rpx;
-  }
-
-  /* uCharts 趋势图 */
-  .metric-sparkline {
-    width: 100%;
-    height: 100rpx;
-    margin-top: 12rpx;
-  }
-
-  .trend-canvas {
-    width: 100%;
-    height: 100rpx;
-  }
-}
-
-/* 状态徽章 - 用于核心指标 */
-.prism-badge.success,
-.prism-badge.warning,
-.prism-badge.danger {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 6rpx 14rpx;
-  border-radius: 16rpx;
-  font-size: 22rpx;
-  font-weight: 600;
-  border: none;
-}
-
-.success.prism-badge {
-  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
-  color: #FFFFFF;
-}
-
-.warning.prism-badge {
-  background: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
-  color: #FFFFFF;
-}
-
-.danger.prism-badge {
-  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
-  color: #FFFFFF;
-}
-
-/* 深色模式 */
-.dark-mode {
-  .prism-metric-card {
-    .metric-value {
-      color: var(--prism-text-primary, #E5E6EB);
-
-      &.text-success {
-        color: #34D399;
-      }
-      &.text-warning {
-        color: #FBBF24;
-      }
-      &.text-danger {
-        color: #F87171;
-      }
-    }
-
-    .metric-icon-wrapper {
-      &.icon-bg-sleep {
-        background: rgba(124, 58, 237, 0.2);
-      }
-      &.icon-bg-oxygen {
-        background: rgba(16, 185, 129, 0.2);
-      }
-      &.icon-bg-pressure {
-        background: rgba(59, 130, 246, 0.2);
-      }
-      &.icon-bg-heart {
-        background: rgba(239, 68, 68, 0.2);
-      }
-      &.icon-bg-hrv {
-        background: rgba(245, 158, 11, 0.2);
-      }
-      &.icon-bg-temp {
-        background: rgba(236, 72, 153, 0.2);
-      }
-      &.icon-bg-steps {
-        background: rgba(6, 182, 212, 0.2);
-      }
-      &.icon-bg-calories {
-        background: rgba(249, 115, 22, 0.2);
-      }
-    }
-  }
-}
-