@ruixinkeji/prism-ui 1.0.16 → 1.0.17

package/dist/styles/card.scss

@@ -1,306 +0,0 @@
-/**
- * Prism UI - 卡片和容器组件样式
- *
- * 基础样式 .prism-card-base 定义在 @/theme/colors.scss
- */
-
-/* ============================================================
-   prism-card - 卡片容器（带背景）
-
-   结构：
-   .prism-card
-     .card-title    - 卡片标题（带左侧色块）
-     .card-desc     - 卡片描述
-     内容
-   ============================================================ */
-
-.prism-card {
-  position: relative;
-  border-radius: 20rpx;
-  padding: 32rpx;
-  transition: all 0.2s ease;
-  background: var(--prism-bg-color-card, #FFFFFF);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
-
-  .dark-mode & {
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-  }
-
-  // 卡片标题（带左侧色块）
-  .card-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: $prism-section-spacing;
-    padding-left: 16rpx;
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6rpx;
-      height: 32rpx;
-      background: var(--prism-primary-color, #3478F6);
-      border-radius: 3rpx;
-    }
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  // 卡片描述
-  .card-desc {
-    display: block;
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // 子区块（复用 prism-section 的 subsection 结构）
-  .subsection {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .subsection-title {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  .subsection-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    padding: 16rpx 24rpx;
-    margin-bottom: 16rpx;
-    background: var(--prism-bg-color, #F7F8FA);
-    border-radius: 8rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      background: rgba(255, 255, 255, 0.06);
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-}
-
-
-/* ============================================================
-   prism-section - 区块容器（透明背景）
-
-   结构：
-   .prism-section
-     .section-title     - 区块标题
-     .section-desc      - 区块描述
-     .subsection        - 子区块
-       .subsection-title  - 子区块标题
-       .subsection-desc   - 子区块描述
-       内容
-   ============================================================ */
-
-.prism-section {
-  padding: $prism-section-spacing $prism-page-spacing;
-
-  // 相邻 section 之间的间距（减半避免叠加过大）
-  & + & {
-    padding-bottom: calc($prism-section-spacing / 2);
-  }
-
-  // 区块标题
-  .section-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: var(--prism-text-primary, #1D2129);
-    margin-bottom: $prism-section-spacing;
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  // 区块描述
-  .section-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // prism-section 内的卡片间距（排除 glass 形态）
-  .prism-card:not(.glass) {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // 子区块
-  .subsection {
-    margin-bottom: $prism-section-spacing;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  // 子区块标题
-  .subsection-title {
-    font-size: 26rpx;
-    color: var(--prism-text-secondary, #86909C);
-    margin-bottom: 16rpx;
-
-    .dark-mode & {
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-
-  // 子区块描述
-  .subsection-desc {
-    font-size: 24rpx;
-    color: var(--prism-text-secondary, #86909C);
-    padding: 16rpx 24rpx;
-    margin-bottom: 16rpx;
-    background: var(--prism-bg-color, #F7F8FA);
-    border-radius: 8rpx;
-    line-height: 1.5;
-
-    .dark-mode & {
-      background: rgba(255, 255, 255, 0.06);
-      color: var(--prism-text-secondary, #A9AEB8);
-    }
-  }
-}
-
-/* ============================================================
-   区块头部
-   ============================================================ */
-
-.prism-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16rpx;
-}
-
-.prism-section-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  padding: 24rpx 0;
-  color: var(--prism-text-primary, #1D2129);
-
-  .dark-mode & {
-    color: var(--prism-text-primary, #E5E6EB);
-  }
-}
-
-.prism-more-link {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-
-  .more-text,
-  .more-icon {
-    font-size: 24rpx;
-    color: var(--prism-primary-color, #3478F6);
-  }
-}
-
-/* ============================================================
-   prism-grid - 通用宫格布局
-
-   用法：
-   .prism-grid.col-{3|4|5}   - 指定列数（默认4列）
-
-   结构：
-   .prism-grid.col-4
-     .grid-item
-       .prism-icon.{color}
-       .grid-label
-   ============================================================ */
-
-.prism-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16rpx;
-
-  &.col-3 { grid-template-columns: repeat(3, 1fr); }
-  &.col-4 { grid-template-columns: repeat(4, 1fr); }
-  &.col-5 { grid-template-columns: repeat(5, 1fr); }
-
-  // glass 形态
-  &.glass {
-    padding: 24rpx 16rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 16rpx;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-
-    .dark-mode & {
-      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  .grid-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-
-    &:active {
-      opacity: 0.8;
-    }
-
-    // 图标下边距
-    .prism-icon {
-      margin-bottom: 12rpx;
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 20rpx;
-
-      .fa, .fa-solid, .iconfont {
-        font-size: 32rpx;
-      }
-    }
-
-    .prism-badge {
-      top: -4rpx;
-      right: 16rpx;
-    }
-
-    .prism-number-badge {
-      top: -4rpx;
-      right: 12rpx;
-    }
-  }
-
-  .grid-label {
-    font-size: 22rpx;
-    color: var(--prism-text-primary, #1D2129);
-
-    .dark-mode & {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-}