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

style: refine collection page visual design

Browse Source
This commit is contained in:
hajimi
2026-08-03 20:48:09 +08:00
parent 0ecdd18495
commit 8ba72c9a8f
1 changed files with 183 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/collection/collection.vue
+183 -25
View File
@@ -9,6 +9,20 @@
</page-meta>
<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__title">把喜欢的内容收好</text>
<text class="collection-hero__desc">资讯、帖子、比赛与行情，随时回看</text>
</view>
<view class="collection-hero__stat">
<text class="collection-hero__stat-number">{{ collectionCount }}</text>
<text class="collection-hero__stat-label">已收藏</text>
</view>
<view class="collection-hero__orb collection-hero__orb--one"></view>
<view class="collection-hero__orb collection-hero__orb--two"></view>
</view>
<scroll-view scroll-x class="collection-tabs" :show-scrollbar="false">
<view class="collection-tabs__inner">
<view v-for="tab in collectionTabs" :key="tab.key" class="collection-tab"
@@ -38,6 +52,10 @@
<u-icon name="file-text" size="38" color="#8cb4f4" />
</view>
<view class="article-item__body">
<view class="article-item__kicker">
<text class="article-item__tag">资讯文章</text>
<text class="article-item__saved">已收藏</text>
</view>
<text class="article-item__title">{{ item.title || '未命名文章' }}</text>
<text v-if="item.desc" class="article-item__desc">{{ item.desc }}</text>
<view class="article-item__meta">
@@ -122,6 +140,7 @@ const refreshing = ref(false)
const articleCount = computed(() => articles.value.length)
const cryptoCount = computed(() => coins.value.length)
const collectionCount = computed(() => articleCount.value + cryptoCount.value)
const activeTabLabel = computed(() => collectionTabs.find((tab) => tab.key === activeType.value)?.label || '')
const loadArticles = async () => {
@@ -211,46 +230,142 @@ onShow(() => {
<style lang="scss" scoped>
.collection-page {
min-height: 100vh;
background: #f5f7fb;
height: 100vh;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #f3f6fc 0%, #f8faff 44%, #f4f7fb 100%);
}
.collection-hero {
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-shrink: 0;
min-height: 176rpx;
margin: 20rpx 20rpx 16rpx;
padding: 28rpx 30rpx 26rpx;
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);
&__copy,
&__stat {
position: relative;
z-index: 1;
}
&__copy {
min-width: 0;
display: flex;
flex-direction: column;
}
&__eyebrow {
color: rgba(224, 236, 255, 0.72);
font-size: 18rpx;
font-weight: 700;
letter-spacing: 3rpx;
}
&__title {
margin-top: 10rpx;
color: #fff;
font-size: 36rpx;
font-weight: 700;
line-height: 1.2;
}
&__desc {
margin-top: 10rpx;
color: rgba(232, 240, 255, 0.76);
font-size: 21rpx;
line-height: 1.35;
}
&__stat {
min-width: 96rpx;
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);
}
&__stat-number {
color: #fff;
font-size: 38rpx;
font-weight: 700;
line-height: 1;
}
&__stat-label {
margin-top: 8rpx;
color: rgba(232, 240, 255, 0.76);
font-size: 19rpx;
}
&__orb {
position: absolute;
z-index: 0;
border-radius: 50%;
pointer-events: none;
&--one {
top: -90rpx;
right: 78rpx;
width: 250rpx;
height: 250rpx;
background: rgba(111, 168, 255, 0.16);
}
&--two {
right: -56rpx;
bottom: -110rpx;
width: 240rpx;
height: 240rpx;
border: 1rpx solid rgba(255, 255, 255, 0.16);
}
}
}
.collection-tabs {
background: #fff;
border-bottom: 1rpx solid #edf0f5;
flex-shrink: 0;
margin: 0 20rpx 12rpx;
border: 1rpx solid #e1e9f7;
border-radius: 18rpx;
background: #eaf0fb;
&__inner {
display: inline-flex;
min-width: 100%;
padding: 0 24rpx;
box-sizing: border-box;
padding: 6rpx;
}
}
.collection-tab {
min-width: 150rpx;
height: 88rpx;
height: 72rpx;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8rpx;
position: relative;
color: #697386;
font-size: 27rpx;
border-radius: 14rpx;
font-size: 25rpx;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
&--active {
color: #1468f5;
font-weight: 600;
&::after {
content: '';
position: absolute;
left: 34rpx;
right: 34rpx;
bottom: 0;
height: 5rpx;
border-radius: 5rpx 5rpx 0 0;
background: #1468f5;
}
background: #fff;
box-shadow: 0 6rpx 14rpx rgba(48, 91, 158, 0.1);
}
&__count {
@@ -265,11 +380,12 @@ onShow(() => {
}
.collection-scroll {
height: calc(100vh - 88rpx);
flex: 1;
min-height: 0;
}
.collection-list {
padding: 16rpx 20rpx 36rpx;
padding: 8rpx 20rpx 36rpx;
}
.article-item,
@@ -279,10 +395,11 @@ onShow(() => {
gap: 18rpx;
margin-bottom: 14rpx;
padding: 18rpx;
background: #fff;
border: 1rpx solid #e8edf5;
border-radius: 18rpx;
box-shadow: 0 5rpx 18rpx rgba(30, 71, 120, 0.04);
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);
animation: collection-rise 0.32s ease both;
}
.article-item {
@@ -309,6 +426,27 @@ onShow(() => {
flex-direction: column;
}
&__kicker {
display: flex;
align-items: center;
gap: 8rpx;
margin-bottom: 7rpx;
}
&__tag {
padding: 3rpx 9rpx;
border-radius: 6rpx;
background: #edf4ff;
color: #1468f5;
font-size: 18rpx;
line-height: 1.3;
}
&__saved {
color: #a4adba;
font-size: 18rpx;
}
&__title {
display: -webkit-box;
overflow: hidden;
@@ -354,6 +492,7 @@ onShow(() => {
.coin-item {
min-height: 92rpx;
background: linear-gradient(105deg, #fff 0%, #fff 66%, #f6f9ff 100%);
&__icon {
width: 64rpx;
@@ -423,12 +562,19 @@ onShow(() => {
.is-down { color: #ef5350; }
.collection-state {
min-height: 50vh;
min-height: 480rpx;
margin: 8rpx 20rpx 24rpx;
padding: 40rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14rpx;
border: 1rpx solid #e4ebf5;
border-radius: 22rpx;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 8rpx 22rpx rgba(30, 71, 120, 0.04);
color: #8d98a8;
font-size: 24rpx;
@@ -443,4 +589,16 @@ onShow(() => {
font-size: 22rpx;
}
}
@keyframes collection-rise {
from {
opacity: 0;
transform: translateY(10rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>