style: refine collection page visual design

uniapp/src/pages/collection/collection.vue

@@ -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;
+    height: 100vh;
-    background: #f5f7fb;
+    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;
+    flex-shrink: 0;
-    border-bottom: 1rpx solid #edf0f5;
+    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;
-
+        background: #fff;
-        &::after {
+        box-shadow: 0 6rpx 14rpx rgba(48, 91, 158, 0.1);
-            content: '';
-            position: absolute;
-            left: 34rpx;
-            right: 34rpx;
-            bottom: 0;
-            height: 5rpx;
-            border-radius: 5rpx 5rpx 0 0;
-            background: #1468f5;
-        }
     }
 
     &__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;
+    background: rgba(255, 255, 255, 0.94);
-    border: 1rpx solid #e8edf5;
+    border: 1rpx solid #e3eaf4;
-    border-radius: 18rpx;
+    border-radius: 20rpx;
-    box-shadow: 0 5rpx 18rpx rgba(30, 71, 120, 0.04);
+    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>