feat: 开发练习纸

2026-08-25 15:40:38 +08:00
parent c0b8666257
commit f82ac4d89d
13 changed files with 1238 additions and 1 deletions
@@ -0,0 +1,133 @@
+@import '../../style/theme.less';
+
+page {
+    background-color: @bg-page;
+}
+
+.ps-page {
+    min-height: 100vh;
+    padding: 0 @page-padding-x;
+    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+
+.ps-main {
+    padding-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.ps-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+}
+
+.ps-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.ps-section-title {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #6d3b00;
+    padding-left: 8rpx;
+}
+
+// ─────────── 纸张类型 ───────────
+.ps-type-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24rpx;
+}
+
+.ps-type-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    padding: 28rpx 12rpx;
+    border-radius: @radius-lg;
+    background: rgba(255, 255, 255, 0.6);
+    border: 4rpx solid rgba(179, 172, 159, 0.1);
+    box-shadow: @shadow;
+    transition:
+        transform 0.12s,
+        box-shadow 0.12s,
+        border-color 0.12s,
+        background 0.12s;
+}
+
+.ps-type-card--active {
+    background: #ffffff;
+    border-color: @brand;
+    box-shadow: @shadow;
+}
+
+.ps-type-card--pressed {
+    transform: scale(0.95);
+}
+
+.ps-type-card__name {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: @text-title;
+    line-height: 1.3;
+}
+
+.ps-type-card__desc {
+    font-size: 20rpx;
+    color: @text-secondary;
+    text-align: center;
+    line-height: 1.3;
+}
+
+// ─────────── 颜色 ───────────
+.ps-color-list {
+    display: flex;
+    gap: 24rpx;
+}
+
+.ps-color-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 14rpx;
+    padding: 24rpx 12rpx;
+    border-radius: @radius-lg;
+    background: rgba(255, 255, 255, 0.6);
+    border: 4rpx solid rgba(179, 172, 159, 0.1);
+    box-shadow: @shadow;
+    transition:
+        transform 0.12s,
+        border-color 0.12s,
+        background 0.12s;
+}
+
+.ps-color-item--active {
+    background: #ffffff;
+    border-color: @brand;
+}
+
+.ps-color-item--pressed {
+    transform: scale(0.95);
+}
+
+.ps-color-dot {
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2rpx rgba(0, 0, 0, 0.08);
+}
+
+.ps-color-item__name {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: @text-title;
+}