feat: 首页跳转到分类页指定分类优化

2026-05-09 11:08:29 +08:00
parent c21ac9e935
commit debecd67c6
20 changed files with 1450 additions and 959 deletions
@@ -0,0 +1,196 @@
+@import '../../style/theme.less';
+
+.cb-page {
+    min-height: 100vh;
+    background: @bg-page;
+    box-sizing: border-box;
+}
+
+.cb-main {
+    padding: @page-padding-x;
+    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
+}
+
+.cb-section {
+    margin-top: @section-gap-sm;
+}
+
+.cb-section-title {
+    display: block;
+    font-size: 30rpx;
+    font-weight: 700;
+    color: @text-title;
+    letter-spacing: 0.02em;
+    margin-bottom: 20rpx;
+}
+
+.cb-content-panel {
+    background: rgba(240, 231, 214, 0.5);
+    border-radius: @radius-lg;
+    padding: 32rpx;
+}
+
+.cb-field {
+    margin-bottom: 32rpx;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.cb-field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 4rpx;
+    margin-bottom: 16rpx;
+}
+
+.cb-field-label {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: @text-secondary;
+}
+
+.cb-field-hint {
+    font-size: 20rpx;
+    font-weight: 500;
+    color: rgba(96, 91, 80, 0.6);
+}
+
+.cb-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.cb-text-input {
+    width: 100%;
+    height: 96rpx;
+    background: #ffffff;
+    border: 2rpx solid rgba(179, 172, 159, 0.3);
+    border-radius: @radius-lg;
+    padding: 0 88rpx 0 28rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: @text-title;
+    box-shadow: @shadow;
+}
+
+.cb-input-clear {
+    position: absolute;
+    right: 20rpx;
+    width: 48rpx;
+    height: 48rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.cb-word-scroll {
+    white-space: nowrap;
+    width: 100%;
+}
+
+.cb-word-list {
+    display: inline-flex;
+    gap: 20rpx;
+    padding-bottom: 12rpx;
+}
+
+.cb-word-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12rpx;
+    min-width: 88rpx;
+    height: 72rpx;
+    padding-left: 20rpx;
+    padding-right: 12rpx;
+    flex-shrink: 0;
+    background: #ffffff;
+    border: 2rpx solid rgba(179, 172, 159, 0.2);
+    border-radius: 36rpx;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+}
+
+.cb-word-chip__text {
+    font-size: 28rpx;
+    font-weight: 700;
+    color: @text-title;
+}
+
+.cb-word-chip__delete-hit {
+    width: 44rpx;
+    height: 44rpx;
+    margin-right: -6rpx;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.cb-word-add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cb-word-add-btn {
+    width: 72rpx;
+    height: 72rpx;
+    border-radius: 50%;
+    border: 2rpx dashed rgba(179, 172, 159, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.55);
+}
+
+.cb-category-scroll {
+    white-space: nowrap;
+    width: 100%;
+}
+
+.cb-category-list {
+    display: inline-flex;
+    gap: 16rpx;
+    padding-bottom: 8rpx;
+}
+
+.cb-category-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 10rpx;
+    flex-shrink: 0;
+    padding: 20rpx 28rpx;
+    background: #ffffff;
+    border: 2rpx solid rgba(179, 172, 159, 0.2);
+    border-radius: 36rpx;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+    transition: transform 0.12s;
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+.cb-category-tag-icon {
+    font-size: 28rpx;
+    line-height: 1;
+}
+
+.cb-category-tag-text {
+    font-size: 22rpx;
+    font-weight: 700;
+    color: #6c5a00;
+}
+
+.cb-category-tag--more {
+    .cb-category-tag-icon {
+        font-size: 24rpx;
+        letter-spacing: 2rpx;
+        color: #6c5a00;
+    }
+}