feat: 添加控笔页

2026-05-28 16:46:30 +08:00
parent 824e83c887
commit 2f0c4ab591
21 changed files with 1406 additions and 169 deletions
@@ -0,0 +1,123 @@
+@import '../../style/theme.less';
+
+page {
+    background-color: @bg-page;
+}
+
+.pc-page {
+    min-height: 100vh;
+    padding: 0 @page-padding-x;
+    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
+    box-sizing: border-box;
+}
+
+.pc-main {
+    padding-top: 24rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+}
+
+.pc-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+}
+
+.pc-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.pc-section-title {
+    font-size: 30rpx;
+    font-weight: 700;
+    color: #6d3b00;
+    padding-left: 8rpx;
+}
+
+.pc-pattern-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24rpx;
+}
+
+.pc-pattern-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;
+}
+
+.pc-pattern-card--active {
+    background: #ffffff;
+    border-color: @brand;
+    box-shadow: @shadow;
+}
+
+.pc-pattern-card--pressed {
+    transform: scale(0.95);
+}
+
+.pc-pattern-card__name {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: @text-title;
+    line-height: 1.3;
+}
+
+.pc-pattern-card__cat {
+    font-size: 20rpx;
+    color: @text-secondary;
+    text-align: center;
+    line-height: 1.3;
+    text-transform: capitalize;
+}
+
+.pc-pattern-card--active .pc-pattern-card__name {
+    color: @text-title;
+}
+
+.pc-pattern-card__check {
+    position: absolute;
+    top: 50%;
+    left: 18rpx;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    background-color: #9cd343;
+}
+
+.pc-shuffle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    padding: 24rpx;
+    border-radius: 24rpx;
+    background: #f8f0e0;
+}
+
+.pc-shuffle-btn--hover {
+    opacity: 0.85;
+}
+
+.pc-shuffle-btn__text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: @text-secondary;
+}