Files
doodle-mini/miniprogram/pages/age/age.less
T
2026-03-26 17:33:04 +08:00

109 lines
1.8 KiB
Plaintext

.age-page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 48rpx;
box-sizing: border-box;
}
.age-hero {
background: #fff;
padding: 40rpx 32rpx 36rpx;
margin-bottom: 24rpx;
}
.age-hero__title {
display: block;
font-size: 44rpx;
font-weight: 700;
color: rgba(0, 0, 0, 0.88);
margin-bottom: 12rpx;
}
.age-hero__subtitle {
display: block;
font-size: 26rpx;
line-height: 1.5;
color: #999;
}
.age-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 24rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.age-card {
width: calc((100% - 24rpx) / 2);
background: #fff;
border-radius: 32rpx;
overflow: hidden;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
box-sizing: border-box;
}
.age-card__art {
height: 160rpx;
display: flex;
align-items: center;
justify-content: center;
}
.age-card__emoji {
font-size: 72rpx;
line-height: 1;
}
.age-card__body {
padding: 24rpx 24rpx 28rpx;
}
.age-card__label {
display: block;
font-size: 32rpx;
font-weight: 700;
color: rgba(0, 0, 0, 0.88);
margin-bottom: 8rpx;
}
.age-card__desc {
display: block;
font-size: 24rpx;
color: #999;
margin-bottom: 12rpx;
}
.age-card__count {
display: block;
font-size: 22rpx;
color: #ccc;
}
.age-tip {
margin: 40rpx 24rpx 0;
background: #fff;
border-radius: 24rpx;
padding: 28rpx 24rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20rpx;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}
.age-tip__duck {
font-size: 64rpx;
line-height: 1;
flex-shrink: 0;
}
.age-tip__text {
flex: 1;
font-size: 26rpx;
line-height: 1.55;
color: rgba(0, 0, 0, 0.65);
}