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

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

@home-padding: 28rpx;
@home-section-mt: 48rpx;
@home-track-gap: 16rpx;

.home-page {
    min-height: 100vh;
    background: @bg-page;
    padding-bottom: 48rpx;
    box-sizing: border-box;
    color: @text-secondary;
    // padding: 0 24rpx 48rpx;
}

.home-nav {
    background: @bg-header;
    box-sizing: content-box;
}

.home-nav__inner {
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
}

.home-nav__logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 16px;
}

.home-nav__name {
    font-size: 17px;
    font-weight: 700;
    color: @text-title;
    line-height: 1;
}

.home-search-wrap {
    margin-top: 28rpx;
    padding: 0 @home-padding;
    box-sizing: border-box;
}

.home-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16rpx;
    background: #e5dcc9;
    border-radius: 999rpx;
    padding: 22rpx 32rpx;
    box-sizing: border-box;
}

.home-search__icon {
    flex-shrink: 0;
    line-height: 1;
}

.home-search__placeholder {
    font-size: 28rpx;
    color: rgba(50, 46, 37, 0.45);
    flex: 1;
}

.home-tabs-wrap {
    margin-top: 48rpx;
}

.home-hero-placeholder {
    // margin: 8rpx auto 0;
    margin: 48rpx 24rpx 0;
    // width: 684rpx;
    height: 480rpx;
    border-radius: 40rpx;
    background: rgba(50, 46, 37, 0.04);
}

.home-section-panel {
    margin-top: @home-section-mt;
    padding: 0 @home-padding;
    box-sizing: border-box;
}

.home-section-panel--hot {
    margin-top: @home-section-mt;
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-section-head__title {
    font-size: 32rpx;
    font-weight: 700;
    color: @text-title;
}

.home-section-head__more {
    font-size: 24rpx;
    color: @text-selected-btn;
}

.home-section-head__title--module {
    font-size: 28rpx;
    font-weight: 700;
}

.home-track-scroll {
    margin-top: 24rpx;
    width: 100%;
    white-space: nowrap;
}

.home-track-row {
    display: inline-flex;
    flex-direction: row;
    gap: @home-track-gap;
    padding-right: @home-padding;
}

/* 可视约 2.2 张：2*w + 2*gap + 0.2*w ≈ 屏宽减左右 padding */
.home-track-card {
    width: calc((750rpx - 2 * @home-padding - 2 * @home-track-gap) / 2.2);
    flex-shrink: 0;
    border-radius: 24rpx;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6rpx 20rpx rgba(50, 46, 37, 0.06);
}

.home-track-card__top {
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-track-card__icon {
    font-size: 72rpx;
    line-height: 1;
}

.home-track-card__body {
    padding: 20rpx 18rpx 22rpx;
    background: #ffffff;
}

.home-track-card__title {
    font-size: 28rpx;
    font-weight: 600;
    color: @text-title;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.home-track-card__sub {
    margin-top: 8rpx;
    font-size: 22rpx;
    color: @text-gray;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-age-scroll {
    margin-top: 32rpx;
    width: 100%;
    white-space: nowrap;
}

.home-age-row {
    display: inline-flex;
    flex-direction: row;
    gap: 12rpx;
    padding-right: @home-padding;
}

.home-age-item {
    /* 目标：首屏露出 3.5 个（第 4 个露出约 50%） */
    width: calc((750rpx - 48rpx - 36rpx) / 3.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.home-age-item__icon-wrap {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: rgba(248, 240, 224, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-age-item__icon-wrap--active {
    background: rgba(255, 215, 9, 0.28);
}

.home-age-item__icon {
    font-size: 44rpx;
    line-height: 1;
}

.home-age-item__label {
    margin-top: 12rpx;
    font-size: 26rpx;
    color: @text-title;
    font-weight: 600;
    white-space: nowrap;
}

.home-hot-list {
    margin-top: 36rpx;
    display: flex;
    flex-direction: column;
    gap: 28rpx;
}

.home-hot-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.home-hot-card__thumb {
    width: 144rpx;
    height: 144rpx;
    border-radius: 24rpx;
    background: linear-gradient(140deg, #ad060f 0%, #d93b0d 40%, #a20606 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-hot-card__thumb-emoji {
    font-size: 56rpx;
}

.home-hot-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.home-hot-card__title {
    font-size: 30rpx;
    color: #2f2f2f;
    font-weight: 600;
}

.home-hot-card__desc {
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #616161;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hot-card__meta {
    margin-top: 16rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.home-hot-card__tag {
    font-size: 22rpx;
    color: @text-selected-btn;
    background: #ffd709;
    border-radius: 999rpx;
    padding: 4rpx 16rpx;
}

.home-hot-card__score {
    font-size: 24rpx;
    color: #6b6b6b;
}

.home-hot-card__action {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
    background: #ffd709;
    color: #2b2b2b;
    font-size: 36rpx;
    line-height: 56rpx;
    text-align: center;
    flex-shrink: 0;
}

.home-page .category-tabs {
    background: @bg-page;
}

.home-page .category-tabs__pill {
    background: rgba(96, 91, 80, 0.08);
    color: @text-secondary;
}

.home-page .category-tabs__pill--active {
    background: #ffd709;
    color: @text-selected-btn;
    font-weight: 600;
}