feat: 完成首页UI展示初版开发
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user