R524809
574 lines
11 KiB
Plaintext
574 lines
11 KiB
Plaintext
@import '../../style/theme.less';
|
||
@import '../../style/tags.less';
|
||
|
||
@home-track-gap: 16rpx;
|
||
|
||
.home-page {
|
||
min-height: 100vh;
|
||
background: @bg-page;
|
||
padding-bottom: 48rpx;
|
||
box-sizing: border-box;
|
||
color: @text-secondary;
|
||
}
|
||
|
||
.home-body {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-search-wrap {
|
||
margin-top: @section-gap-xs;
|
||
padding: 0 @page-padding-x;
|
||
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-notice-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 24rpx @page-padding-x 0;
|
||
padding: 0 24rpx;
|
||
height: 64rpx;
|
||
border-radius: 999rpx;
|
||
background: fade(#ff8f1f, 10%);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-notice-bar__label {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
padding-right: 16rpx;
|
||
border-right: 2rpx solid fade(#b06b1a, 30%);
|
||
height: 36rpx;
|
||
}
|
||
|
||
.home-notice-bar__icon {
|
||
font-size: 26rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.home-notice-bar__label-text {
|
||
margin-left: 8rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
color: #b06b1a;
|
||
line-height: 1;
|
||
}
|
||
|
||
.home-notice-bar__viewport {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.home-notice-bar__track {
|
||
display: inline-flex;
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
animation: home-notice-scroll 12s linear infinite;
|
||
will-change: transform;
|
||
}
|
||
|
||
.home-notice-bar__group {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.home-notice-bar__item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.home-notice-bar__text {
|
||
font-size: 24rpx;
|
||
color: #7a4c12;
|
||
line-height: 1;
|
||
}
|
||
|
||
.home-notice-bar__sep {
|
||
margin: 0 24rpx;
|
||
font-size: 24rpx;
|
||
color: fade(#b06b1a, 50%);
|
||
line-height: 1;
|
||
}
|
||
|
||
@keyframes home-notice-scroll {
|
||
0% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
transform: translate3d(-50%, 0, 0);
|
||
}
|
||
}
|
||
|
||
/** 紧凑预览轮播：按发布时仅裁头部后的比例展示，标题悬浮于图内。 */
|
||
.home-hero-gallery {
|
||
margin-top: 16rpx;
|
||
background: radial-gradient(ellipse at center, #f3e8cc 0%, @bg-page 70%);
|
||
}
|
||
|
||
.home-hero-swiper {
|
||
width: 100%;
|
||
// 单张宽 750 - 156 * 2 - 16 * 2 = 406rpx；裁头后预览约高 500rpx。
|
||
// 包含上下阴影留白，不再给副标题、年龄等信息预留高度。
|
||
height: 548rpx;
|
||
}
|
||
|
||
.home-hero-swiper-item {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-hero-card-wrap {
|
||
padding: 16rpx 16rpx 28rpx;
|
||
box-sizing: border-box;
|
||
transform-origin: center center;
|
||
transform: translateY(12rpx) scale(0.88);
|
||
opacity: 0.55;
|
||
transition:
|
||
transform 0.45s ease,
|
||
opacity 0.45s ease;
|
||
}
|
||
|
||
.home-hero-card-wrap--active {
|
||
transform: translateY(0) scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
.home-hero-card {
|
||
width: 100%;
|
||
position: relative;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
background: #ffffff;
|
||
box-shadow:
|
||
0 12rpx 30rpx rgba(96, 75, 33, 0.12),
|
||
0 2rpx 6rpx rgba(96, 75, 33, 0.06);
|
||
}
|
||
|
||
.home-hero-card__top {
|
||
width: 100%;
|
||
height: 0;
|
||
// 与 debugPublish 的 header-only 一致：595 × (842 - 110)。
|
||
padding-top: 123.02521%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.home-hero-card__cover {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.home-hero-card__fallback {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 24rpx;
|
||
background: #fffdf7;
|
||
}
|
||
|
||
.home-hero-card__icon {
|
||
font-size: 100rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.home-hero-card__title-overlay {
|
||
position: absolute;
|
||
left: 12rpx;
|
||
right: 12rpx;
|
||
bottom: 12rpx;
|
||
padding: 10rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(255, 252, 244, 0.94);
|
||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.08);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.home-hero-card__title {
|
||
display: block;
|
||
color: @text-title;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 700;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.home-hero-pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.home-hero-pagination__dots {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.home-hero-pagination__target {
|
||
min-width: 32rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.home-hero-pagination__dot {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 999rpx;
|
||
background: #d5c9ad;
|
||
transition:
|
||
width 0.3s ease,
|
||
background 0.3s ease;
|
||
}
|
||
|
||
.home-hero-pagination__dot--active {
|
||
width: 28rpx;
|
||
background: @text-title;
|
||
}
|
||
|
||
.home-hero-pagination__count {
|
||
color: @text-gray;
|
||
font-size: 20rpx;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.home-section-panel {
|
||
margin-top: 48rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-section-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 @page-padding-x;
|
||
}
|
||
|
||
.home-section-head__title {
|
||
font-size: @fs-section-head-title;
|
||
font-weight: 700;
|
||
color: @text-title;
|
||
}
|
||
|
||
.home-section-head__more {
|
||
font-size: 24rpx;
|
||
color: @text-selected-btn;
|
||
}
|
||
|
||
.home-section-head__title--module {
|
||
font-size: @fs-section-head-title;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.home-track-scroll {
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
// padding: 16rpx 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-track-row {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
gap: @section-gap-sm;
|
||
// padding-right: @page-padding-x;
|
||
padding: 16rpx @page-padding-x 20rpx;
|
||
}
|
||
|
||
.home-track-card {
|
||
width: calc((750rpx - 2 * @page-padding-x - 2 * @home-track-gap) / 2.2);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.home-age-scroll {
|
||
margin-top: @section-gap-xs;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.home-age-row {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
gap: 12rpx;
|
||
padding-right: @page-padding-x;
|
||
}
|
||
|
||
.home-age-item {
|
||
width: calc((750rpx - 2 * @page-padding-x - 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-age-item__desc {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: @text-gray;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.home-hot-list {
|
||
margin-top: @section-gap-xs;
|
||
padding: 0 @page-padding-x;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: @section-gap-stack;
|
||
}
|
||
|
||
.home-hot-card {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx @page-padding-inner-x;
|
||
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: 180rpx;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
border: 1rpx solid rgba(50, 46, 37, 0.08);
|
||
background: #f5edd8;
|
||
}
|
||
|
||
.home-hot-card__thumb-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.home-hot-card__thumb-emoji {
|
||
font-size: 56rpx;
|
||
}
|
||
|
||
.home-hot-card__content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
flex: 1;
|
||
justify-content: space-between;
|
||
align-self: stretch;
|
||
padding: 6rpx 0;
|
||
}
|
||
|
||
.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: @brand;
|
||
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: @brand;
|
||
color: #2b2b2b;
|
||
font-size: 36rpx;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.home-section-panel__sub {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.5;
|
||
color: @text-gray;
|
||
display: block;
|
||
}
|
||
|
||
.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: @brand;
|
||
color: @text-selected-btn;
|
||
font-weight: 600;
|
||
}
|
||
|
||
// ── Skeleton ──
|
||
@keyframes home-skeleton-pulse {
|
||
0% {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
50% {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
100% {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.home-hero-card--skeleton {
|
||
pointer-events: none;
|
||
|
||
.home-hero-card__top {
|
||
background: #f3efe5;
|
||
animation: home-skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.home-hero-card__title {
|
||
background: #e8e2d5;
|
||
border-radius: 8rpx;
|
||
color: transparent;
|
||
animation: home-skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.home-hero-card__title {
|
||
width: 50%;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.home-hot-card--skeleton {
|
||
pointer-events: none;
|
||
|
||
.home-hot-card__thumb {
|
||
animation: home-skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.home-hot-card__title,
|
||
.home-hot-card__desc {
|
||
background: #e8e2d5;
|
||
border-radius: 8rpx;
|
||
color: transparent;
|
||
animation: home-skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
.home-hot-card__title {
|
||
width: 40%;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.home-hot-card__desc {
|
||
width: 65%;
|
||
height: 24rpx;
|
||
}
|
||
}
|