feat: 完成首页UI展示初版开发

This commit is contained in:
R524809
2026-03-31 10:59:25 +08:00
parent 1b45ba7d11
commit b18dbcb0d1
17 changed files with 258 additions and 10 deletions
+76 -6
View File
@@ -1,6 +1,8 @@
@import '../../style/theme3.less';
@home-padding: 28rpx;
@home-section-mt: 48rpx;
@home-track-gap: 16rpx;
.home-page {
min-height: 100vh;
@@ -68,12 +70,12 @@
}
.home-tabs-wrap {
// margin-top: 28rpx;
margin-top: 48rpx;
}
.home-hero-placeholder {
// margin: 8rpx auto 0;
margin: 0 24rpx;
margin: 48rpx 24rpx 0;
// width: 684rpx;
height: 480rpx;
border-radius: 40rpx;
@@ -81,13 +83,13 @@
}
.home-section-panel {
margin-top: 48rpx;
margin-top: @home-section-mt;
padding: 0 @home-padding;
box-sizing: border-box;
}
.home-section-panel--hot {
margin-top: 32rpx;
margin-top: @home-section-mt;
}
.home-section-head {
@@ -107,6 +109,73 @@
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%;
@@ -116,12 +185,13 @@
.home-age-row {
display: inline-flex;
flex-direction: row;
gap: 20rpx;
gap: 12rpx;
padding-right: @home-padding;
}
.home-age-item {
width: calc((750rpx - 48rpx - 40rpx) / 3.2);
/* 目标:首屏露出 3.5 个(第 4 个露出约 50% */
width: calc((750rpx - 48rpx - 36rpx) / 3.5);
display: flex;
flex-direction: column;
align-items: center;