feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -1,88 +1,452 @@
|
||||
.favorites-page {
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@fav-seg-track: #f0e7d6;
|
||||
@fav-thumb-placeholder: #e5dcc9;
|
||||
@fav-secondary-cta-bg: #ffc697;
|
||||
@fav-secondary-cta-text: #6d3b00;
|
||||
@fav-heart: #b02500;
|
||||
|
||||
.fav-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
background: @bg-page;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__title {
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
.fav-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
background: fade(@bg-header, 82%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
}
|
||||
|
||||
.favorites-page__tabs {
|
||||
.fav-nav__inner {
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
.fav-nav__title {
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
}
|
||||
|
||||
.favorites-page__tab--active {
|
||||
color: #333;
|
||||
.fav-nav__actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.fav-nav__icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fav-nav__clear {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: fade(@text-selected-btn, 65%);
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.favorites-page__tab--active::after {
|
||||
content: '';
|
||||
.fav-scroll {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fav-body {
|
||||
padding: @section-gap-xs @page-padding-x;
|
||||
padding-bottom: calc(48rpx + env(safe-area-inset-bottom) + 120rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Segmented（Stitch 胶囊） */
|
||||
.fav-seg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
padding: 12rpx;
|
||||
margin-bottom: @section-gap-sm;
|
||||
border-radius: 999rpx;
|
||||
background: @fav-seg-track;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-seg__pill {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 22rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-seg__pill--active {
|
||||
background: @brand;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-seg__text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.fav-seg__pill--active .fav-seg__text {
|
||||
color: @text-selected-btn;
|
||||
}
|
||||
|
||||
/* 收藏列表卡片 */
|
||||
.fav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.fav-card {
|
||||
border-radius: @radius-lg;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-card--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: @bg-header;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-card__thumb {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: @radius;
|
||||
flex-shrink: 0;
|
||||
background: @fav-thumb-placeholder;
|
||||
}
|
||||
|
||||
.fav-card__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.fav-card__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.fav-card__meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.fav-card__meta-text {
|
||||
font-size: 22rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.fav-card__stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.fav-card__badge {
|
||||
margin-top: 4rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
color: @text-gray;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @fav-seg-track;
|
||||
}
|
||||
|
||||
.fav-card__heart {
|
||||
flex-shrink: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Bento 大卡 */
|
||||
.fav-card--bento {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 48rpx 140rpx 48rpx 40rpx;
|
||||
background: @fav-seg-track;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-bento__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fav-bento__title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.fav-bento__meta {
|
||||
font-size: 26rpx;
|
||||
color: @text-secondary;
|
||||
margin-top: 8rpx;
|
||||
margin-bottom: 28rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.fav-bento__tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.fav-bento__tag {
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: @fav-secondary-cta-text;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.fav-bento__deco {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
background: #f7ee47;
|
||||
border-radius: 3rpx;
|
||||
right: -40rpx;
|
||||
bottom: -48rpx;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.favorites-page__empty {
|
||||
.fav-bento__heart {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 32rpx;
|
||||
z-index: 2;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 底部去发现 */
|
||||
.fav-cta {
|
||||
margin-top: @section-gap;
|
||||
padding: 48rpx 0 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 48rpx 0;
|
||||
}
|
||||
|
||||
.favorites-page__emoji {
|
||||
font-size: 96rpx;
|
||||
line-height: 1.2;
|
||||
.fav-cta__hint {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: @text-gray;
|
||||
}
|
||||
|
||||
.fav-cta__btn {
|
||||
margin-top: 32rpx;
|
||||
padding: 22rpx 64rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
background: @fav-secondary-cta-bg !important;
|
||||
color: @fav-secondary-cta-text !important;
|
||||
border: none !important;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-cta__btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 下载历史 */
|
||||
.fav-dl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.fav-dl__section-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: @text-gray;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 8rpx 16rpx 16rpx;
|
||||
}
|
||||
|
||||
.fav-dl__items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.favorites-page__empty-msg {
|
||||
margin-bottom: 48rpx;
|
||||
.fav-dl-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: @bg-header;
|
||||
border-radius: @radius-lg;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__empty-line {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8rpx;
|
||||
.fav-dl-row--muted {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.favorites-page__btn {
|
||||
width: 280rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #f7ee47;
|
||||
color: #333;
|
||||
.fav-dl-row__thumb {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: @radius;
|
||||
flex-shrink: 0;
|
||||
background: @fav-thumb-placeholder;
|
||||
}
|
||||
|
||||
.fav-dl-row__thumb--ph {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, @fav-secondary-cta-bg 0%, fade(@brand, 35%) 100%);
|
||||
}
|
||||
|
||||
.fav-dl-row__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fav-dl-row__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fav-dl-row__meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: fade(@text-secondary, 88%);
|
||||
}
|
||||
|
||||
.fav-dl-row__time {
|
||||
color: fade(@text-secondary, 88%);
|
||||
}
|
||||
|
||||
.fav-dl-row__dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: @text-gray;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.fav-dl-row__status {
|
||||
color: fade(@text-secondary, 65%);
|
||||
}
|
||||
|
||||
.fav-dl-row__status--hi {
|
||||
color: #006b1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fav-dl-row__more {
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.fav-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 32rpx 64rpx;
|
||||
}
|
||||
|
||||
.fav-empty__emoji {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fav-empty__icon {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fav-empty__msg {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 40rpx;
|
||||
color: @text-title;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fav-empty__sub {
|
||||
font-size: 26rpx;
|
||||
color: @text-secondary;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fav-empty__btn {
|
||||
padding: 20rpx 56rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.favorites-page__btn::after {
|
||||
.fav-empty__btn::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user