feat:作业纸
This commit is contained in:
R524809
@@ -134,18 +134,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.home-hero-placeholder {
|
||||
margin: @section-gap @page-padding-x 0;
|
||||
height: 450rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(50, 46, 37, 0.04);
|
||||
/** 紧凑预览轮播：按发布时仅裁头部后的比例展示，标题悬浮于图内。 */
|
||||
.home-hero-gallery {
|
||||
margin-top: 16rpx;
|
||||
background: radial-gradient(ellipse at center, #f3e8cc 0%, @bg-page 70%);
|
||||
}
|
||||
|
||||
/** 首页顶部「精选」swiper 轮播 */
|
||||
.home-hero-swiper {
|
||||
margin-top: 16rpx;
|
||||
width: 100%;
|
||||
height: 450rpx;
|
||||
// 单张宽 750 - 156 * 2 - 16 * 2 = 406rpx；裁头后预览约高 500rpx。
|
||||
// 包含上下阴影留白，不再给副标题、年龄等信息预留高度。
|
||||
height: 548rpx;
|
||||
}
|
||||
|
||||
.home-hero-swiper-item {
|
||||
@@ -153,115 +152,134 @@
|
||||
}
|
||||
|
||||
.home-hero-card-wrap {
|
||||
padding: 24rpx;
|
||||
padding: 16rpx 16rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transform: scale(0.9);
|
||||
opacity: 0.5;
|
||||
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: scale(1);
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.home-hero-card {
|
||||
width: 100%;
|
||||
border-radius: 32rpx;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10rpx 28rpx rgba(50, 46, 37, 0.08);
|
||||
box-shadow:
|
||||
0 12rpx 30rpx rgba(96, 75, 33, 0.12),
|
||||
0 2rpx 6rpx rgba(96, 75, 33, 0.06);
|
||||
}
|
||||
|
||||
.home-hero-card__top {
|
||||
height: 260rpx;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
// 与 debugPublish 的 header-only 一致：595 × (842 - 110)。
|
||||
padding-top: 123.02521%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* 顶部背景用自身圆角裁切，替代 card 的 overflow: hidden */
|
||||
border-top-left-radius: 32rpx;
|
||||
border-top-right-radius: 32rpx;
|
||||
overflow: hidden;
|
||||
border-bottom: 1rpx solid rgba(50, 46, 37, 0.08);
|
||||
background: #f5edd8;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.home-hero-card__cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
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: 96rpx;
|
||||
line-height: 1;
|
||||
font-size: 100rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-hero-card__badge {
|
||||
.home-hero-card__title-overlay {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
right: 24rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(50, 46, 37, 0.12);
|
||||
font-size: 22rpx;
|
||||
color: @text-title;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-hero-card__body {
|
||||
padding: 28rpx @page-padding-inner-x 30rpx;
|
||||
}
|
||||
|
||||
.home-hero-card__title-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
/* 允许 flex 子项在文本过长时正确截断 */
|
||||
min-width: 0;
|
||||
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 {
|
||||
font-size: 34rpx;
|
||||
line-height: 1.35;
|
||||
display: block;
|
||||
color: @text-title;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* 标题与 meta 同行：超出后省略号（避免高度抖动） */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.home-hero-card__sub {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
color: @text-secondary;
|
||||
/* 第二行：超出后省略号 */
|
||||
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-card__meta {
|
||||
margin: 0;
|
||||
font-size: 22rpx;
|
||||
.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;
|
||||
/* meta 也做单行截断，防止极端长文本把布局挤爆 */
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
|
||||
.home-section-panel {
|
||||
@@ -477,7 +495,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.home-page .category-tabs {
|
||||
background: @bg-page;
|
||||
}
|
||||
@@ -512,11 +529,11 @@
|
||||
pointer-events: none;
|
||||
|
||||
.home-hero-card__top {
|
||||
background: #f3efe5;
|
||||
animation: home-skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.home-hero-card__title,
|
||||
.home-hero-card__sub {
|
||||
.home-hero-card__title {
|
||||
background: #e8e2d5;
|
||||
border-radius: 8rpx;
|
||||
color: transparent;
|
||||
@@ -527,11 +544,6 @@
|
||||
width: 50%;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.home-hero-card__sub {
|
||||
width: 70%;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.home-hot-card--skeleton {
|
||||
@@ -558,4 +570,4 @@
|
||||
width: 65%;
|
||||
height: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user