doodle-mini/miniprogram/pages/age/age.less

@import '../../style/theme.less';

@age-tab-gap: 32rpx;
@age-tab-w: 226rpx;
@age-tab-h: 156rpx;
@age-badge-current: #005e17;
/* 选中态 box-shadow + scale 外溢；内层留白 + 外层负 margin 抵消，整体上下不占更多间距 */
@age-tab-shadow-bleed-t: 36rpx;
@age-tab-shadow-bleed-b: 52rpx;

.age-page {
    min-height: 100vh;
    background: @bg-page;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.age-body {
    width: 100%;
    box-sizing: border-box;
}

/* 横向年龄 Tab — Stitch 为你推荐版 */
.age-tab-scroll {
    width: 100%;
    white-space: nowrap;
    padding: @section-gap-sm 0 @section-gap-xs;
    box-sizing: border-box;
    margin-top: -@age-tab-shadow-bleed-t;
    margin-bottom: -@age-tab-shadow-bleed-b;
}

.age-tab-scroll__inner {
    padding: @age-tab-shadow-bleed-t 0 @age-tab-shadow-bleed-b;
    box-sizing: border-box;
}

.age-tab-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: @age-tab-gap;
    padding: 0 @page-padding-x;
}

.age-tab {
    position: relative;
    width: @age-tab-w;
    height: @age-tab-h;
    flex-shrink: 0;
    padding: 24rpx 16rpx;
    border-radius: @radius-lg;
    background: @bg-muted;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    border: 2rpx solid transparent;
}

.age-tab--active {
    background: @brand;
    border-color: @bg-white;
    box-shadow: 0 16rpx 48rpx rgba(255, 215, 9, 0.38);
    transform: scale(1.05);
    z-index: 1;
}

.age-tab__current {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
    padding: 4rpx 14rpx;
    border-radius: 999rpx;
    font-size: 18rpx;
    font-weight: 700;
    color: @text-white;
    background: @age-badge-current;
    line-height: 1.2;
}

.age-tab__range {
    font-size: 36rpx;
    font-weight: 800;
    color: @text-title;
    line-height: 1.2;
}

.age-tab--active .age-tab__range {
    color: @text-selected-btn;
}

.age-tab__sub {
    font-size: 22rpx;
    color: @text-light;
    line-height: 1.3;
    font-weight: 600;
}

.age-tab--active .age-tab__sub {
    color: fade(@text-selected-btn, 85%);
}

.age-panel {
    margin: 0 @page-padding-x;
    background: @bg-white;
    border-radius: @radius-lg;
    border: 1rpx solid fade(@bg-gray, 90%);
    box-shadow: @shadow;
    overflow: hidden;
}

.age-goal-panel {
    padding: 36rpx @page-padding-x 40rpx;
    box-sizing: border-box;
}

.age-goal-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12rpx;
    margin-bottom: @section-gap-sm;
}

.age-goal-head__icon-wrap {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: @brand-light;
    display: flex;
    align-items: center;
    justify-content: center;
}

.age-goal-head__icon {
    font-size: 28rpx;
    line-height: 1;
}

.age-goal-head__title {
    font-size: @fs-section-head-title;
    font-weight: 800;
    color: @text-selected-btn;
    letter-spacing: -0.02em;
}

.age-goal-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.age-goal-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12rpx;
    padding: 28rpx @page-padding-inner-x;
    border-radius: @radius;
    background: @bg-header;
    box-sizing: border-box;
    border: 1rpx solid rgba(229, 220, 201, 0.55);
}

.age-goal-item__top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12rpx;
}

.age-goal-item__emoji {
    font-size: 40rpx;
    line-height: 1;
    flex-shrink: 0;
}

.age-goal-item__title {
    font-size: 28rpx;
    font-weight: 700;
    color: @text-selected-btn;
    line-height: 1.2;
}

.age-goal-item__desc {
    font-size: 24rpx;
    line-height: 1.5;
    color: @text-secondary;
}

.age-path-head {
    margin: @section-gap-lg @page-padding-x @section-gap-xs;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
}

.age-path-head__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20rpx;
    min-width: 0;
}

.age-path-head__bar {
    width: 16rpx;
    height: 64rpx;
    border-radius: 999rpx;
    background: @text-selected-btn;
    flex-shrink: 0;
}

.age-path-head__title {
    font-size: 40rpx;
    font-weight: 800;
    color: @text-title;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.age-path-head__badge {
    flex-shrink: 0;
    font-size: 20rpx;
    font-weight: 700;
    color: @text-secondary;
    background: @bg-header;
    padding: 10rpx 20rpx;
    border-radius: 999rpx;
    border: @border;
}

.age-week-list {
    padding: 0 @page-padding-x;
    display: flex;
    flex-direction: column;
    gap: @section-gap-lg;
}

.age-week-card {
    background: @bg-white;
    border-radius: @radius-lg;
    overflow: hidden;
    border: 1rpx solid rgba(50, 46, 37, 0.08);
    box-shadow: @shadow;
}

.age-week-card__head {
    padding: 28rpx @page-padding-x;
    background: @bg-week-head;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 16rpx;
}

.age-week-card__week {
    font-size: @fs-section-head-title;
    font-weight: 800;
    color: @text-title;
}

.age-week-card__theme {
    font-size: 26rpx;
    font-weight: 600;
    color: @text-gray;
}

.age-week-card__body {
    padding: 0 @page-padding-x 8rpx;
}

.age-week-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f2f2f2;
}

.age-week-row:last-child {
    border-bottom: none;
}

.age-week-row__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.age-week-row__title {
    font-size: 28rpx;
    font-weight: 700;
    color: @text-title;
}

.age-week-row__subtitle {
    font-size: 22rpx;
    font-weight: 500;
    color: @text-gray;
    line-height: 1.35;
}

.age-week-row__btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6rpx;
    padding: 14rpx 28rpx;
    border-radius: 999rpx;
    background: @brand;
    font-size: 24rpx;
    font-weight: 700;
    color: @text-selected-btn;
    box-shadow: 0 4rpx 12rpx rgba(255, 215, 9, 0.35);
}

.age-week-row__btn-arrow {
    font-size: 22rpx;
    font-weight: 700;
}

/* [为你推荐] — Stitch 栅格 */
.age-rec {
    margin-top: @section-gap-lg;
    padding: 0 @page-padding-x @section-gap-xs;
    box-sizing: border-box;
}

.age-rec-loading {
    margin-top: @section-gap-lg;
    padding: 48rpx @page-padding-x @section-gap-xs;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.age-rec-loading__icon {
    margin-right: 12rpx;
    font-size: 30rpx;
    color: @text-secondary;
    animation: age-rec-loading-spin 0.8s linear infinite;
}

.age-rec-loading__text {
    font-size: 26rpx;
    font-weight: 700;
    color: @text-secondary;
}

@keyframes age-rec-loading-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.age-rec__head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: @section-gap-xs;
}

.age-rec__title {
    font-size: @fs-section-head-title;
    font-weight: 800;
    color: @text-title;
    letter-spacing: -0.02em;
}

.age-rec__more {
    font-size: 26rpx;
    font-weight: 700;
    color: @text-selected-btn;
    padding: 8rpx 0 8rpx 24rpx;
}

.age-rec__grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 32rpx;
}

.age-rec__card {
    width: calc(50% - 16rpx);
    box-sizing: border-box;
}