haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align collection page with home

Browse Source
This commit is contained in:
hajimi
2026-08-03 21:06:50 +08:00
parent 9ed85c4830
commit f440ece7f8
1 changed files with 68 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/collection/collection.vue
+68 -56
View File
@@ -11,7 +11,7 @@
<view class="collection-page">
<view class="collection-hero">
<view class="collection-hero__copy">
<text class="collection-hero__eyebrow">PERSONAL ARCHIVE</text>
<text class="collection-hero__eyebrow">个人内容库</text>
<text class="collection-hero__title">把喜欢的内容收好</text>
<text class="collection-hero__desc">资讯、帖子、比赛与行情，随时回看</text>
</view>
@@ -233,7 +233,7 @@ onShow(() => {
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #f3f6fc 0%, #f8faff 44%, #f4f7fb 100%);
background: #f6f7f9;
}
.collection-hero {
@@ -242,13 +242,14 @@ onShow(() => {
align-items: flex-end;
justify-content: space-between;
flex-shrink: 0;
min-height: 176rpx;
margin: 20rpx 20rpx 16rpx;
padding: 28rpx 30rpx 26rpx;
min-height: 156rpx;
margin: 16rpx 24rpx 14rpx;
padding: 24rpx 24rpx 22rpx;
overflow: hidden;
border-radius: 26rpx;
background: linear-gradient(132deg, #101c36 0%, #18396f 57%, #1468f5 100%);
box-shadow: 0 14rpx 32rpx rgba(21, 70, 140, 0.18);
border: 1rpx solid #e7eaf0;
border-radius: 22rpx;
background: #fff;
box-shadow: 0 8rpx 30rpx rgba(29, 45, 78, 0.04);
&__copy,
&__stat {
@@ -263,7 +264,7 @@ onShow(() => {
}
&__eyebrow {
color: rgba(224, 236, 255, 0.72);
color: #1468f5;
font-size: 18rpx;
font-weight: 700;
letter-spacing: 3rpx;
@@ -271,41 +272,40 @@ onShow(() => {
&__title {
margin-top: 10rpx;
color: #fff;
font-size: 36rpx;
color: #151b26;
font-size: 34rpx;
font-weight: 700;
line-height: 1.2;
}
&__desc {
margin-top: 10rpx;
color: rgba(232, 240, 255, 0.76);
color: #7d8797;
font-size: 21rpx;
line-height: 1.35;
}
&__stat {
min-width: 96rpx;
min-width: 90rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 12rpx;
border: 1rpx solid rgba(255, 255, 255, 0.2);
border-radius: 18rpx;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
padding: 12rpx 10rpx;
border: 1rpx solid #dce8ff;
border-radius: 16rpx;
background: #edf3ff;
}
&__stat-number {
color: #fff;
font-size: 38rpx;
color: #1468f5;
font-size: 36rpx;
font-weight: 700;
line-height: 1;
}
&__stat-label {
margin-top: 8rpx;
color: rgba(232, 240, 255, 0.76);
color: #6d7d9a;
font-size: 19rpx;
}
@@ -316,56 +316,68 @@ onShow(() => {
pointer-events: none;
&--one {
top: -90rpx;
right: 78rpx;
width: 250rpx;
height: 250rpx;
background: rgba(111, 168, 255, 0.16);
top: -110rpx;
right: 90rpx;
width: 230rpx;
height: 230rpx;
background: rgba(20, 104, 245, 0.05);
}
&--two {
right: -56rpx;
bottom: -110rpx;
width: 240rpx;
height: 240rpx;
border: 1rpx solid rgba(255, 255, 255, 0.16);
right: -80rpx;
bottom: -126rpx;
width: 260rpx;
height: 260rpx;
border: 1rpx solid rgba(20, 104, 245, 0.12);
}
}
}
.collection-tabs {
flex-shrink: 0;
margin: 0 20rpx 12rpx;
border: 1rpx solid #e1e9f7;
border-radius: 18rpx;
background: #eaf0fb;
width: 100%;
margin: 0 0 0;
border-bottom: 1rpx solid #edf0f5;
background: #fff;
&__inner {
display: inline-flex;
min-width: 100%;
box-sizing: border-box;
padding: 6rpx;
padding: 0 24rpx;
gap: 18rpx;
}
}
.collection-tab {
min-width: 150rpx;
height: 72rpx;
min-width: 120rpx;
height: 86rpx;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8rpx;
position: relative;
color: #697386;
border-radius: 14rpx;
font-size: 25rpx;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
padding: 0 10rpx;
box-sizing: border-box;
color: #252b36;
font-size: 27rpx;
white-space: nowrap;
&--active {
color: #1468f5;
font-weight: 600;
background: #fff;
box-shadow: 0 6rpx 14rpx rgba(48, 91, 158, 0.1);
font-weight: 700;
&::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 48rpx;
height: 6rpx;
border-radius: 999rpx;
background: #1468f5;
transform: translateX(-50%);
}
}
&__count {
@@ -385,7 +397,7 @@ onShow(() => {
}
.collection-list {
padding: 8rpx 20rpx 36rpx;
padding: 16rpx 24rpx 42rpx;
}
.article-item,
@@ -393,12 +405,12 @@ onShow(() => {
display: flex;
align-items: center;
gap: 18rpx;
margin-bottom: 14rpx;
padding: 18rpx;
background: rgba(255, 255, 255, 0.94);
border: 1rpx solid #e3eaf4;
border-radius: 20rpx;
box-shadow: 0 8rpx 22rpx rgba(30, 71, 120, 0.06);
margin-bottom: 16rpx;
padding: 20rpx;
background: #fff;
border: 1rpx solid #e7eaf0;
border-radius: 22rpx;
box-shadow: 0 8rpx 30rpx rgba(29, 45, 78, 0.04);
animation: collection-rise 0.32s ease both;
}
@@ -563,7 +575,7 @@ onShow(() => {
.collection-state {
min-height: 480rpx;
margin: 8rpx 20rpx 24rpx;
margin: 16rpx 24rpx 24rpx;
padding: 40rpx 28rpx;
box-sizing: border-box;
display: flex;
@@ -571,10 +583,10 @@ onShow(() => {
align-items: center;
justify-content: center;
gap: 14rpx;
border: 1rpx solid #e4ebf5;
border: 1rpx solid #e7eaf0;
border-radius: 22rpx;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 8rpx 22rpx rgba(30, 71, 120, 0.04);
background: #fff;
box-shadow: 0 8rpx 30rpx rgba(29, 45, 78, 0.04);
color: #8d98a8;
font-size: 24rpx;