feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -1,115 +1,357 @@
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@profile-premium-bg: #2d2a26;
|
||||
|
||||
/* 整页滚动：避免 scroll-view 在真机因未给出明确高度而高度为 0 */
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: @bg-header;
|
||||
}
|
||||
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
padding-bottom: 48rpx;
|
||||
background: @bg-header;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__header {
|
||||
/* 顶栏：固定于顶部，正文区独立滚动 */
|
||||
.profile-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
background: fade(@bg-header, 85%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
}
|
||||
|
||||
.profile-nav__inner {
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: #f7ee47;
|
||||
padding: 48rpx 32rpx;
|
||||
justify-content: flex-start;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 56rpx;
|
||||
flex-shrink: 0;
|
||||
.profile-nav__title {
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
}
|
||||
|
||||
.profile-page__header-info {
|
||||
margin-left: 28rpx;
|
||||
.profile-nav__brand {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: @brand;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
padding: @section-gap-xs @page-padding-x;
|
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 120rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 用户主卡 */
|
||||
.profile-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile-page__name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.profile-page__stat {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.profile-page__group {
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
margin: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-page__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
padding: 80rpx @page-padding-inner-x 64rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-page__item--last {
|
||||
border-bottom: none;
|
||||
.profile-hero__tint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 192rpx;
|
||||
background: @brand;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-page__icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 44rpx;
|
||||
.profile-hero__avatar-wrap {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.profile-hero__avatar {
|
||||
width: 256rpx;
|
||||
height: 256rpx;
|
||||
border-radius: 50%;
|
||||
border: 8rpx solid @bg-white;
|
||||
background: @bg-gray;
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__avatar-emoji {
|
||||
font-size: 112rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-hero__avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.profile-hero__edit-badge {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
bottom: 8rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand;
|
||||
border: 8rpx solid @bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__name {
|
||||
margin-top: 32rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-page__label {
|
||||
.profile-hero__stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
margin-top: 64rpx;
|
||||
padding: 0 @page-padding-inner-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__stat {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background: @bg-header;
|
||||
border-radius: @radius;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
padding: 32rpx 24rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__badge {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background: #ff4757;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 12rpx;
|
||||
.profile-hero__stat+.profile-hero__stat {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.profile-page__arrow {
|
||||
.profile-hero__stat-num {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
font-weight: 300;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-page__footer {
|
||||
.profile-hero__stat-label {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: @text-secondary;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 双格 */
|
||||
.profile-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-grid__cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 64rpx 32rpx 32rpx;
|
||||
padding: 48rpx 24rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__footer-emoji {
|
||||
font-size: 72rpx;
|
||||
margin-bottom: 16rpx;
|
||||
.profile-grid__cell+.profile-grid__cell {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.profile-page__footer-slogan {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
.profile-grid__icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.profile-page__footer-version {
|
||||
.profile-grid__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.profile-grid__sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
color: @text-secondary;
|
||||
text-align: center;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* 圆角列表 */
|
||||
.profile-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 40rpx;
|
||||
background: @bg-white;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.profile-row--last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-row__left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-row__icon-bg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: fade(@brand, 18%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-row__label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.profile-row__chevron {
|
||||
font-size: 40rpx;
|
||||
color: @text-gray;
|
||||
font-weight: 300;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 专业版卡 */
|
||||
.profile-upsell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: @profile-premium-bg;
|
||||
border-radius: @radius-xl;
|
||||
padding: 64rpx 48rpx;
|
||||
box-shadow: @shadow-lg;
|
||||
margin-bottom: @section-gap-sm;
|
||||
}
|
||||
|
||||
.profile-upsell__deco {
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: -32rpx;
|
||||
pointer-events: none;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.profile-upsell__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile-upsell__title {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: @text-white;
|
||||
}
|
||||
|
||||
.profile-upsell__desc {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.45;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
max-width: 400rpx;
|
||||
}
|
||||
|
||||
.profile-upsell__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 48rpx;
|
||||
padding: 24rpx 64rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: @shadow-lg;
|
||||
}
|
||||
|
||||
.profile-version {
|
||||
text-align: center;
|
||||
padding: 24rpx 0 0;
|
||||
}
|
||||
|
||||
.profile-version__text {
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: @text-secondary;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
Reference in New Issue
Block a user