@ruixinkeji/prism-ui 1.0.0

package/styles/data.scss

@@ -0,0 +1,1229 @@
+/**
+ * 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);
+      }
+    }
+  }
+}
+