@ruixinkeji/prism-ui 1.0.0

package/styles/card.scss

@@ -0,0 +1,306 @@
+/**
+ * Prism UI - 卡片和容器组件样式
+ *
+ * 基础样式 .prism-card-base 定义在 @/styles/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);
+    }
+  }
+}