From 06fee9863c32fa59829fb61c1a59503e902cf73b Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Fri, 19 Jun 2026 07:49:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=95=8C=E9=9D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E5=A4=A7=E8=B0=83=E6=95=B4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/collect-card/collect-card.vue  | 504 ++++++++++++++++++
 src/pages.json                                |  18 +-
 src/pages/banknote/index.vue                  | 155 +++---
 src/pages/index.vue                           | 178 +++----
 src/pages/metal/index.vue                     | 191 ++++---
 src/pages/mine.vue                            | 192 ++++++-
 .../images/tabbar/tab-banknote-active.png     | Bin 0 -> 1084 bytes
 src/static/images/tabbar/tab-banknote.png     | Bin 0 -> 1088 bytes
 src/static/images/tabbar/tab-coin-active.png  | Bin 0 -> 1333 bytes
 src/static/images/tabbar/tab-coin.png         | Bin 0 -> 1313 bytes
 src/static/images/tabbar/tab-metal-active.png | Bin 0 -> 645 bytes
 src/static/images/tabbar/tab-metal.png        | Bin 0 -> 643 bytes
 src/static/scss/collect-page.scss             | 495 +++++++++++++++++
 src/static/scss/index.scss                    |   3 +-
 14 files changed, 1447 insertions(+), 289 deletions(-)
 create mode 100644 src/components/collect-card/collect-card.vue
 create mode 100644 src/static/images/tabbar/tab-banknote-active.png
 create mode 100644 src/static/images/tabbar/tab-banknote.png
 create mode 100644 src/static/images/tabbar/tab-coin-active.png
 create mode 100644 src/static/images/tabbar/tab-coin.png
 create mode 100644 src/static/images/tabbar/tab-metal-active.png
 create mode 100644 src/static/images/tabbar/tab-metal.png
 create mode 100644 src/static/scss/collect-page.scss

diff --git a/src/components/collect-card/collect-card.vue b/src/components/collect-card/collect-card.vue
new file mode 100644
index 0000000..eaa926d
--- /dev/null
+++ b/src/components/collect-card/collect-card.vue
@@ -0,0 +1,504 @@
+<template>
+  <view class="collect-card" :class="variantClass">
+    <view class="collect-card__top">
+      <view class="collect-card__copy">
+        <view class="collect-card__eyebrow" v-if="eyebrow">
+          <text>{{ eyebrow }}</text>
+        </view>
+        <text class="collect-card__title">{{ title }}</text>
+        <view class="collect-card__header-meta" v-if="headerMeta && headerMeta.length">
+          <view v-for="(item, index) in headerMeta" :key="index" class="collect-card__header-meta-item">
+            <text>{{ item }}</text>
+          </view>
+        </view>
+        <text class="collect-card__subtitle" v-if="subtitle">{{ subtitle }}</text>
+
+        <view class="collect-card__tags" v-if="tags && tags.length">
+          <text v-for="(tag, index) in tags" :key="index" class="collect-card__tag">{{ tag }}</text>
+        </view>
+      </view>
+
+      <view class="collect-card__cover" @click.stop="previewCover">
+        <image v-if="coverUrl" :src="coverUrl" mode="aspectFill" class="collect-card__cover-image" />
+        <view v-else class="collect-card__cover-placeholder">
+          <uni-icons :type="placeholderIcon" size="26" color="#ffffff"></uni-icons>
+          <text>暂无图片</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="collect-card__stats" v-if="stats && stats.length">
+      <view v-for="(stat, index) in stats" :key="index" class="collect-card__stat">
+        <text class="collect-card__stat-label">{{ stat.label }}</text>
+        <text class="collect-card__stat-value">{{ stat.value || '--' }}</text>
+      </view>
+    </view>
+
+    <view class="collect-card__details" v-if="expanded">
+      <view class="collect-card__section-title" v-if="hasDetails">更多信息</view>
+
+      <view class="collect-card__detail-grid" v-if="hasDetails">
+        <view v-for="(detail, index) in details" :key="index" class="collect-card__detail">
+          <text class="collect-card__detail-label">{{ detail.label }}</text>
+          <text class="collect-card__detail-value">{{ detail.value || '--' }}</text>
+        </view>
+      </view>
+
+      <view class="collect-card__remark" v-if="remark">
+        <text class="collect-card__remark-label">发行公告</text>
+        <text class="collect-card__remark-text">{{ remark }}</text>
+      </view>
+
+      <view class="collect-card__gallery" v-if="imageCount">
+        <view
+          v-for="(image, index) in images"
+          :key="index"
+          class="collect-card__thumb"
+          @click.stop="previewImage(index)"
+        >
+          <image :src="image" mode="aspectFit" class="collect-card__thumb-image" />
+        </view>
+      </view>
+    </view>
+
+    <view class="collect-card__footer">
+      <view class="collect-card__meta">
+        <text class="collect-card__meta-label">{{ imageCount }} 张图片</text>
+        <text class="collect-card__meta-hint">{{ expanded ? '已展开详情' : '展开查看更多信息' }}</text>
+      </view>
+      <view class="collect-card__toggle" @click.stop="emit('toggle')">
+        <text>{{ expanded ? '收起' : '展开' }}</text>
+        <uni-icons :type="expanded ? 'arrow-up' : 'arrow-down'" size="12" color="#ffffff"></uni-icons>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'coin'
+  },
+  eyebrow: {
+    type: String,
+    default: ''
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  headerMeta: {
+    type: Array,
+    default: () => []
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  tags: {
+    type: Array,
+    default: () => []
+  },
+  stats: {
+    type: Array,
+    default: () => []
+  },
+  details: {
+    type: Array,
+    default: () => []
+  },
+  images: {
+    type: Array,
+    default: () => []
+  },
+  remark: {
+    type: String,
+    default: ''
+  },
+  expanded: {
+    type: Boolean,
+    default: false
+  },
+  placeholderIcon: {
+    type: String,
+    default: 'image'
+  }
+})
+
+const emit = defineEmits(['toggle', 'preview'])
+
+const variantClass = computed(() => `collect-card--${props.variant}`)
+const coverUrl = computed(() => props.images?.[0] || '')
+const imageCount = computed(() => props.images?.length || 0)
+const hasDetails = computed(() => props.details?.length > 0)
+
+const previewCover = () => {
+  if (imageCount.value > 0) {
+    emit('preview', 0)
+  }
+}
+
+const previewImage = (index) => {
+  emit('preview', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.collect-card {
+  margin-bottom: 20rpx;
+  padding: 20rpx;
+  background: #ffffff;
+  border: 1rpx solid #e6edf5;
+  border-radius: 24rpx;
+  box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
+  overflow: hidden;
+}
+
+.collect-card__top {
+  display: flex;
+  gap: 18rpx;
+  align-items: center;
+}
+
+.collect-card__copy {
+  flex: 1;
+  min-width: 0;
+}
+
+.collect-card__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  padding: 4rpx 12rpx;
+  border-radius: 999rpx;
+  background: rgba(15, 23, 42, 0.05);
+  color: #64748b;
+  font-size: 20rpx;
+  line-height: 1.2;
+}
+
+.collect-card__title {
+  display: block;
+  color: #102033;
+  font-size: 38rpx;
+  font-weight: 800;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.collect-card__eyebrow + .collect-card__title {
+  margin-top: 10rpx;
+}
+
+.collect-card__header-meta {
+  margin-top: 14rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx;
+}
+
+.collect-card__header-meta-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 10rpx 16rpx;
+  border-radius: 999rpx;
+  background: #f8fafc;
+  border: 1rpx solid #e2e8f0;
+  color: #334155;
+}
+
+.collect-card__header-meta-item text {
+  font-size: 25rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.collect-card__subtitle {
+  display: block;
+  margin-top: 8rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.collect-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  margin-top: 12rpx;
+}
+
+.collect-card__tag {
+  padding: 5rpx 12rpx;
+  border-radius: 999rpx;
+  background: #f8fafc;
+  color: #334155;
+  font-size: 21rpx;
+  line-height: 1.2;
+}
+
+.collect-card__cover {
+  width: 176rpx;
+  height: 176rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
+  border: 1rpx solid #e2e8f0;
+}
+
+.collect-card__cover-image {
+  width: 100%;
+  height: 100%;
+}
+
+.collect-card__cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+  color: #ffffff;
+  background: linear-gradient(135deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.6));
+}
+
+.collect-card__cover-placeholder text {
+  font-size: 22rpx;
+  line-height: 1.2;
+}
+
+.collect-card__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12rpx;
+  margin-top: 18rpx;
+}
+
+.collect-card__stat {
+  padding: 14rpx 16rpx;
+  border-radius: 18rpx;
+  background: #f8fafc;
+  border: 1rpx solid #edf2f7;
+}
+
+.collect-card__stat-label {
+  display: block;
+  color: #64748b;
+  font-size: 21rpx;
+  line-height: 1.2;
+}
+
+.collect-card__stat-value {
+  display: block;
+  margin-top: 8rpx;
+  color: #102033;
+  font-size: 28rpx;
+  font-weight: 700;
+  line-height: 1.3;
+  word-break: break-word;
+}
+
+.collect-card__details {
+  margin-top: 18rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx dashed #e2e8f0;
+}
+
+.collect-card__section-title {
+  color: #334155;
+  font-size: 24rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.collect-card__detail-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12rpx;
+  margin-top: 14rpx;
+}
+
+.collect-card__detail {
+  padding: 14rpx 16rpx;
+  border-radius: 16rpx;
+  background: #f8fafc;
+  border: 1rpx solid #edf2f7;
+}
+
+.collect-card__detail-label {
+  display: block;
+  color: #64748b;
+  font-size: 21rpx;
+  line-height: 1.2;
+}
+
+.collect-card__detail-value {
+  display: block;
+  margin-top: 8rpx;
+  color: #1f2937;
+  font-size: 26rpx;
+  font-weight: 600;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.collect-card__remark {
+  margin-top: 14rpx;
+  padding: 16rpx 18rpx;
+  border-radius: 18rpx;
+  background: #fff7ed;
+  border: 1rpx solid #fed7aa;
+}
+
+.collect-card__remark-label {
+  display: block;
+  color: #c2410c;
+  font-size: 21rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.collect-card__remark-text {
+  display: block;
+  margin-top: 8rpx;
+  color: #7c2d12;
+  font-size: 24rpx;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.collect-card__gallery {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 16rpx;
+}
+
+.collect-card__thumb {
+  height: 240rpx;
+  border-radius: 18rpx;
+  overflow: hidden;
+  background: #ffffff;
+  border: 1rpx solid #e2e8f0;
+  box-shadow: inset 0 0 0 8rpx #f8fafc;
+}
+
+.collect-card__thumb-image {
+  width: 100%;
+  height: 100%;
+}
+
+.collect-card__footer {
+  margin-top: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12rpx;
+}
+
+.collect-card__meta {
+  min-width: 0;
+  flex: 1;
+}
+
+.collect-card__meta-label {
+  display: block;
+  color: #475569;
+  font-size: 22rpx;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.collect-card__meta-hint {
+  display: block;
+  margin-top: 6rpx;
+  color: #94a3b8;
+  font-size: 20rpx;
+  line-height: 1.2;
+}
+
+.collect-card__toggle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  height: 64rpx;
+  padding: 0 20rpx;
+  border-radius: 999rpx;
+  color: #ffffff;
+  background: linear-gradient(135deg, var(--collect-accent) 0%, rgba(15, 23, 42, 0.9) 120%);
+  box-shadow: 0 10rpx 20rpx rgba(15, 23, 42, 0.16);
+}
+
+.collect-card__toggle text {
+  font-size: 24rpx;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.collect-card--coin {
+  --collect-accent: #0f766e;
+  --collect-accent-soft: rgba(15, 118, 110, 0.09);
+}
+
+.collect-card--banknote {
+  --collect-accent: #1d4ed8;
+  --collect-accent-soft: rgba(29, 78, 216, 0.09);
+}
+
+.collect-card--metal {
+  --collect-accent: #b45309;
+  --collect-accent-soft: rgba(180, 83, 9, 0.09);
+}
+
+.collect-card--coin .collect-card__eyebrow,
+.collect-card--coin .collect-card__tag {
+  background: var(--collect-accent-soft);
+  color: #0f766e;
+}
+
+.collect-card--banknote .collect-card__eyebrow,
+.collect-card--banknote .collect-card__tag {
+  background: var(--collect-accent-soft);
+  color: #1d4ed8;
+}
+
+.collect-card--metal .collect-card__eyebrow,
+.collect-card--metal .collect-card__tag {
+  background: var(--collect-accent-soft);
+  color: #b45309;
+}
+
+.collect-card--coin .collect-card__cover {
+  background: linear-gradient(135deg, rgba(15, 118, 110, 0.12) 0%, rgba(22, 163, 74, 0.1) 100%);
+}
+
+.collect-card--banknote .collect-card__cover {
+  background: linear-gradient(135deg, rgba(29, 78, 216, 0.12) 0%, rgba(14, 165, 233, 0.1) 100%);
+}
+
+.collect-card--metal .collect-card__cover {
+  background: linear-gradient(135deg, rgba(180, 83, 9, 0.12) 0%, rgba(245, 158, 11, 0.1) 100%);
+}
+
+.collect-card--coin .collect-card__stat-value,
+.collect-card--coin .collect-card__detail-value {
+  color: #0f172a;
+}
+
+.collect-card--banknote .collect-card__stat-value,
+.collect-card--banknote .collect-card__detail-value {
+  color: #0f172a;
+}
+
+.collect-card--metal .collect-card__stat-value,
+.collect-card--metal .collect-card__detail-value {
+  color: #0f172a;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index a78b1c2..5647779 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -113,28 +113,28 @@
 
   ],
   "tabBar": {
-    "color": "#999999",
-    "selectedColor": "#667eea",
-    "borderStyle": "white",
+    "color": "#64748b",
+    "selectedColor": "#0f766e",
+    "borderStyle": "black",
     "backgroundColor": "#ffffff",
     "list": [
       {
         "pagePath": "pages/index",
-        "iconPath": "static/images/tabbar/home.png",
-        "selectedIconPath": "static/images/tabbar/home_.png",
+        "iconPath": "static/images/tabbar/tab-coin.png",
+        "selectedIconPath": "static/images/tabbar/tab-coin-active.png",
         "text": "纪念币"
       },
       {
         "pagePath": "pages/banknote/index",
-        "iconPath": "static/images/tabbar/work.png",
-        "selectedIconPath": "static/images/tabbar/work_.png",
+        "iconPath": "static/images/tabbar/tab-banknote.png",
+        "selectedIconPath": "static/images/tabbar/tab-banknote-active.png",
         "text": "纪念钞"
       }
       ,
       {
         "pagePath": "pages/metal/index",
-        "iconPath": "static/images/tabbar/statistic.png",
-        "selectedIconPath": "static/images/tabbar/statistic.png",
+        "iconPath": "static/images/tabbar/tab-metal.png",
+        "selectedIconPath": "static/images/tabbar/tab-metal-active.png",
         "text": "贵金属"
       }
     ]
diff --git a/src/pages/banknote/index.vue b/src/pages/banknote/index.vue
index b40ce8f..1ed108d 100644
--- a/src/pages/banknote/index.vue
+++ b/src/pages/banknote/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <view class="container">
+  <view class="container collect-page collect-page--banknote">
+    <view class="page-hero">
+      <view class="hero-copy">
+        <text class="hero-kicker">BANKNOTE QUERY</text>
+        <view class="hero-title-row">
+          <text class="hero-title">纪念钞档案</text>
+          <text class="hero-count">已加载 {{ dataList.length }} / {{ total || 0 }}</text>
+        </view>
+      </view>
+    </view>
     <!-- 查询条件区域 -->
     <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
@@ -18,19 +27,19 @@
           <uni-icons 
             type="calendar" 
             size="18" 
-            color="#667eea" 
+            color="#1d4ed8" 
             class="search-icon"
             @click="showYearPicker = true">
           </uni-icons>
         </view>
         
         <view class="reset-btn" @click="handleResetAll()">
-          <uni-icons type="reload" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="reload" size="18" color="#1d4ed8"></uni-icons>
           <text>重置</text>
         </view>
         
         <view class="filter-btn" @click="filterPanel = !filterPanel">
-          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="list" size="18" color="#ffffff"></uni-icons>
           <text>筛选</text>
         </view>
       </view>
@@ -38,7 +47,17 @@
     
     <!-- 筛选面板 -->
     <u-transition :show="filterPanel" mode="slide-down">
-      <view class="filter-panel">
+      <view class="filter-panel" @click="filterPanel = false">
+        <view class="filter-sheet" @click.stop>
+          <view class="filter-sheet-header">
+            <view>
+              <text class="filter-sheet-title">筛选纪念钞</text>
+              <text class="filter-sheet-subtitle">选择材质后确认查询</text>
+            </view>
+            <view class="filter-close" @click="filterPanel = false">
+              <uni-icons type="closeempty" size="18" color="#64748b"></uni-icons>
+            </view>
+          </view>
         <view class="filter-panel-content">
           <view class="filter-title">材质选择</view>
           <view class="state-list">
@@ -63,81 +82,26 @@
             <text>确定</text>
           </view>
         </view>
+        </view>
       </view>
     </u-transition>
 
     <!-- 数据列表 -->
     <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
-        <view class="list-item" >
-          <view class="item-header">
-            <view class="card-name-section">
-              <view class="card-icon">
-                <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
-              </view>
-              <view class="card-info">
-                <text class="card-name">{{ item.fullName }}</text>
-              </view>
-            </view>
-          </view>
-          
-          <view class="card-body">
-            <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">名称</text>
-                <text class="info-value">{{ item.shortName || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">发行时间</text>
-                <text class="info-value">{{ item.issueDate || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">面值</text>
-                <text class="info-value">{{ item.faceValue }}元</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">发行量</text>
-                <text class="info-value">{{ item.mintage }}</text>
-              </view>
-       
-              <view class="info-item">
-                <text class="info-label">材质</text>
-                <text class="info-value">{{ getCompositionLabel(item.composition) }}</text>
-              </view>
-      
-               <view class="info-item">
-                <text class="info-label">发行单位</text>
-                <text class="info-value">{{ item.coinageUnit || '--' }}</text>
-              </view>
-                 <view class="info-item info-item-full" >
-                <text class="info-label">发行公告</text>
-                <text class="info-value">{{ item.remark || '--' }}</text>
-              </view>
-        
-              
-              <!-- 图片展示区域 -->
-              <view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
-  
-                <view class="image-list">
-                  <view 
-                    v-for="(file, idx) in item.collectFileList.slice(0, 4)" 
-                    :key="idx"
-                    class="image-wrapper"
-                    @click.stop="handlePreviewImages(item.collectFileList, idx)">
-                    <image 
-                      :src="getFullImageUrl(file.url)" 
-                      mode="aspectFit"
-                      class="item-image"
-                    />
-                  </view>
-                  <view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
-                    <text>+{{ item.collectFileList.length - 4 }}</text>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
+        <collect-card
+          variant="banknote"
+          placeholderIcon="wallet"
+          :title="item.fullName"
+          :headerMeta="getHeaderMeta(item)"
+          :stats="getBanknoteStats(item)"
+          :details="getBanknoteDetails(item)"
+          :images="getItemImages(item)"
+          :remark="item.remark || ''"
+          :expanded="isCardExpanded(item, index)"
+          @toggle="toggleCard(item, index)"
+          @preview="handlePreviewImages(item.collectFileList, $event)"
+        />
       </u-list-item>
       <view></view>
       <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
@@ -157,6 +121,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { listCommemorativeBanknote } from '@/api/collect/CommemorativeBanknote'
+import CollectCard from '@/components/collect-card/collect-card.vue'
 import request from '@/utils/request'
 import config from '@/config'
 import dayjs from 'dayjs'
@@ -175,6 +140,48 @@ const total = ref(0)
 const status = ref('loadmore')
 const showYearPicker = ref(false)
 const filterPanel = ref(false)
+const expandedCards = ref({})
+
+const getCardKey = (item, index) => {
+  return item.id || item.banknoteId || item.code || item.fullName || index
+}
+
+const isCardExpanded = (item, index) => {
+  return !!expandedCards.value[getCardKey(item, index)]
+}
+
+const toggleCard = (item, index) => {
+  const key = getCardKey(item, index)
+  expandedCards.value[key] = !expandedCards.value[key]
+}
+
+const formatMoney = (value) => {
+  return value || value === 0 ? `${value}元` : '--'
+}
+
+const getItemImages = (item) => {
+  return (item.collectFileList || []).map(file => getFullImageUrl(file.url)).filter(Boolean)
+}
+
+const getHeaderMeta = (item) => {
+  return [
+    item.issueDate ? `发行时间 ${item.issueDate}` : '发行时间待补充',
+    `面值 ${formatMoney(item.faceValue)}`
+  ]
+}
+
+const getBanknoteStats = (item) => {
+  return [
+    { label: '简称', value: item.shortName || '--' },
+    { label: '发行量', value: item.mintage || '--' },
+    { label: '材质', value: getCompositionLabel(item.composition) },
+    { label: '发行单位', value: item.coinageUnit || '--' }
+  ]
+}
+
+const getBanknoteDetails = (item) => {
+  return []
+}
 
 // 生成年份选项（最近100年）
 const yearColumns = ref([
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ffe02b7..a70433b 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <view class="container">
+  <view class="container collect-page collect-page--coin">
+    <view class="page-hero">
+      <view class="hero-copy">
+        <text class="hero-kicker">COLLECTION QUERY</text>
+        <view class="hero-title-row">
+          <text class="hero-title">纪念币图鉴</text>
+          <text class="hero-count">已加载 {{ dataList.length }} / {{ total || 0 }}</text>
+        </view>
+      </view>
+    </view>
     <!-- 查询条件区域 -->
     <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
@@ -18,19 +27,19 @@
           <uni-icons 
             type="calendar" 
             size="18" 
-            color="#667eea" 
+            color="#0f766e" 
             class="search-icon"
             @click="showYearPicker = true">
           </uni-icons>
         </view>
         
         <view class="reset-btn" @click="handleResetAll()">
-          <uni-icons type="reload" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="reload" size="18" color="#0f766e"></uni-icons>
           <text>重置</text>
         </view>
         
         <view class="filter-btn" @click="filterPanel = !filterPanel">
-          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="list" size="18" color="#ffffff"></uni-icons>
           <text>筛选</text>
         </view>
       </view>
@@ -38,7 +47,17 @@
     
     <!-- 筛选面板 -->
     <u-transition :show="filterPanel" mode="slide-down">
-      <view class="filter-panel">
+      <view class="filter-panel" @click="filterPanel = false">
+        <view class="filter-sheet" @click.stop>
+          <view class="filter-sheet-header">
+            <view>
+              <text class="filter-sheet-title">筛选纪念币</text>
+              <text class="filter-sheet-subtitle">选择系列后确认查询</text>
+            </view>
+            <view class="filter-close" @click="filterPanel = false">
+              <uni-icons type="closeempty" size="18" color="#64748b"></uni-icons>
+            </view>
+          </view>
         <view class="filter-panel-content">
           <view class="filter-title">系列选择</view>
           <view class="state-list">
@@ -63,98 +82,25 @@
             <text>确定</text>
           </view>
         </view>
+        </view>
       </view>
     </u-transition>
 
     <!-- 数据列表 -->
     <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
-        <view class="list-item">
-          <view class="item-header">
-            <view class="card-name-section">
-              <view class="card-icon">
-                <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
-              </view>
-              <view class="card-info">
-                <text class="card-name">{{ item.fullName }}</text>
-              </view>
-            </view>
-          </view>
-          
-          <view class="card-body">
-            <view class="info-row">
-              <view class="info-item">
-                <text class="info-label">名称</text>
-                <text class="info-value">{{ item.shortName || '--' }}</text>
-              </view>
-            <view class="info-item">
-                <text class="info-label">系列</text>
-                <text class="info-value">{{ getSeriesLabel(item.series) }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">发行时间</text>
-                <text class="info-value">{{ item.issueDate || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">面值</text>
-                <text class="info-value">{{ item.faceValue }}元</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">发行量</text>
-                <text class="info-value">{{ item.mintage }}</text>
-              </view>
-       
-              <view class="info-item">
-                <text class="info-label">材质</text>
-                <text class="info-value">{{ getCompositionLabel(item.composition) }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">形状</text>
-                <text class="info-value">{{ getShapeLabel(item.shape) }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">重量</text>
-                <text class="info-value">{{ item.weight || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">规格尺寸</text>
-                <text class="info-value">{{ item.dimension || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">厚度</text>
-                <text class="info-value">{{ item.thickness || '--' }}</text>
-              </view>
-               <view class="info-item">
-                <text class="info-label">序号</text>
-                <text class="info-value">{{ item.setNumber || '--' }}</text>
-              </view>
-              <view class="info-item">
-                <text class="info-label">币齿</text>
-                <text class="info-value">{{ getCoinTeethLabel(item.coinTeeth) }}</text>
-              </view>
-              
-              <!-- 图片展示区域 -->
-              <view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
-                <view class="image-list">
-                  <view 
-                    v-for="(file, idx) in item.collectFileList.slice(0, 4)" 
-                    :key="idx"
-                    class="image-wrapper"
-                    @click.stop="handlePreviewImages(item.collectFileList, idx)">
-                    <image 
-                      :src="getFullImageUrl(file.url)" 
-                      mode="aspectFit"
-                      class="item-image"
-                    />
-                  </view>
-                  <view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
-                    <text>+{{ item.collectFileList.length - 4 }}</text>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
+        <collect-card
+          variant="coin"
+          placeholderIcon="star"
+          :title="item.fullName"
+          :headerMeta="getHeaderMeta(item)"
+          :stats="getCoinStats(item)"
+          :details="getCoinDetails(item)"
+          :images="getItemImages(item)"
+          :expanded="isCardExpanded(item, index)"
+          @toggle="toggleCard(item, index)"
+          @preview="handlePreviewImages(item.collectFileList, $event)"
+        />
       </u-list-item>
       <view></view>
       <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
@@ -174,6 +120,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { listCommemorativeCoin } from '@/api/collect/commemorativeCoin'
+import CollectCard from '@/components/collect-card/collect-card.vue'
 import request from '@/utils/request'
 import config from '@/config'
 import dayjs from 'dayjs'
@@ -192,6 +139,55 @@ const total = ref(0)
 const status = ref('loadmore')
 const showYearPicker = ref(false)
 const filterPanel = ref(false)
+const expandedCards = ref({})
+
+const getCardKey = (item, index) => {
+  return item.id || item.coinId || item.code || item.fullName || index
+}
+
+const isCardExpanded = (item, index) => {
+  return !!expandedCards.value[getCardKey(item, index)]
+}
+
+const toggleCard = (item, index) => {
+  const key = getCardKey(item, index)
+  expandedCards.value[key] = !expandedCards.value[key]
+}
+
+const formatMoney = (value) => {
+  return value || value === 0 ? `${value}元` : '--'
+}
+
+const getItemImages = (item) => {
+  return (item.collectFileList || []).map(file => getFullImageUrl(file.url)).filter(Boolean)
+}
+
+const getHeaderMeta = (item) => {
+  return [
+    item.issueDate ? `发行时间 ${item.issueDate}` : '发行时间待补充',
+    `面值 ${formatMoney(item.faceValue)}`
+  ]
+}
+
+const getCoinStats = (item) => {
+  return [
+    { label: '简称', value: item.shortName || '--' },
+    { label: '系列', value: getSeriesLabel(item.series) },
+    { label: '发行量', value: item.mintage || '--' },
+    { label: '材质', value: getCompositionLabel(item.composition) }
+  ]
+}
+
+const getCoinDetails = (item) => {
+  return [
+    { label: '形状', value: getShapeLabel(item.shape) },
+    { label: '重量', value: item.weight || '--' },
+    { label: '规格尺寸', value: item.dimension || '--' },
+    { label: '厚度', value: item.thickness || '--' },
+    { label: '序号', value: item.setNumber || '--' },
+    { label: '币齿', value: getCoinTeethLabel(item.coinTeeth) }
+  ]
+}
 
 // 生成年份选项（最近100年）
 const yearColumns = ref([
diff --git a/src/pages/metal/index.vue b/src/pages/metal/index.vue
index a7c00b0..bab55bd 100644
--- a/src/pages/metal/index.vue
+++ b/src/pages/metal/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <view class="container">
+  <view class="container collect-page collect-page--metal">
+    <view class="page-hero">
+      <view class="hero-copy">
+        <text class="hero-kicker">METAL QUERY</text>
+        <view class="hero-title-row">
+          <text class="hero-title">贵金属收藏</text>
+          <text class="hero-count">已加载 {{ dataList.length }} / {{ total || 0 }}</text>
+        </view>
+      </view>
+    </view>
     <!-- 查询条件区域 -->
     <u-sticky offsetTop="0" customNavHeight="0">
       <view class="search-view">
@@ -18,19 +27,19 @@
           <uni-icons 
             type="calendar" 
             size="18" 
-            color="#667eea" 
+            color="#b45309" 
             class="search-icon"
             @click="showYearPicker = true">
           </uni-icons>
         </view>
         
         <view class="reset-btn" @click="handleResetAll()">
-          <uni-icons type="reload" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="reload" size="18" color="#b45309"></uni-icons>
           <text>重置</text>
         </view>
         
         <view class="filter-btn" @click="filterPanel = !filterPanel">
-          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <uni-icons type="list" size="18" color="#ffffff"></uni-icons>
           <text>筛选</text>
         </view>
       </view>
@@ -38,7 +47,17 @@
         
     <!-- 筛选面板 -->
     <u-transition :show="filterPanel" mode="slide-down">
-      <view class="filter-panel">
+      <view class="filter-panel" @click="filterPanel = false">
+        <view class="filter-sheet" @click.stop>
+          <view class="filter-sheet-header">
+            <view>
+              <text class="filter-sheet-title">筛选贵金属</text>
+              <text class="filter-sheet-subtitle">选择题材或系列后确认查询</text>
+            </view>
+            <view class="filter-close" @click="filterPanel = false">
+              <uni-icons type="closeempty" size="18" color="#64748b"></uni-icons>
+            </view>
+          </view>
         <view class="filter-panel-content">
           <view class="filter-title">项目题材选择</view>
           <view class="state-list">
@@ -75,6 +94,7 @@
             <text>确定</text>
           </view>
         </view>
+        </view>
       </view>
     </u-transition>
 
@@ -90,102 +110,19 @@
     <!-- 数据列表 -->
     <u-list @scrolltolower="loadmore" lowerThreshold="100">
       <u-list-item v-for="(item, index) in dataList" :key="index">
-        <view class="list-item" @click="handleViewDetail(item)">
-          <view class="item-header">
-            <view class="card-name-section">
-              <view class="card-icon">
-                <uni-icons type="star" size="20" color="#ffffff"></uni-icons>
-              </view>
-              <view class="card-info">
-                <text class="card-name">{{ item.fullName }}</text>
-              </view>
-            </view>
-          </view>
-          
-          <view class="card-body">
-            <view class="info-row">
-              <view class="info-item" v-if="item.shortName">
-                <text class="info-label">名称</text>
-                <text class="info-value">{{ item.shortName }}</text>
-              </view>
-              <view class="info-item" v-if="item.issueDate">
-                <text class="info-label">发行时间</text>
-                <text class="info-value">{{ item.issueDate }}</text>
-              </view>
-              <view class="info-item" v-if="item.faceValue">
-                <text class="info-label">面额</text>
-                <text class="info-value">{{ item.faceValue }}元</text>
-              </view>
-              <view class="info-item" v-if="item.mintage">
-                <text class="info-label">最大发行量（枚）</text>
-                <text class="info-value">{{ item.mintage }}</text>
-              </view>
-              <view class="info-item" v-if="item.weight">
-                <text class="info-label">重量</text>
-                <text class="info-value">{{ item.weight }}</text>
-              </view>
-              <view class="info-item" v-if="item.shape">
-                <text class="info-label">形状</text>
-                <text class="info-value">{{ getShapeLabel(item.shape) }}</text>
-              </view>
-              <view class="info-item" v-if="item.composition">
-                <text class="info-label">材质</text>
-                <text class="info-value">{{ item.composition }}</text>
-              </view>
-              <view class="info-item" v-if="item.dimension">
-                <text class="info-label">规格尺寸</text>
-                <text class="info-value">{{ item.dimension }}</text>
-              </view>
-              <view class="info-item" v-if="item.code">
-                <text class="info-label">编码</text>
-                <text class="info-value">{{ item.code }}</text>
-              </view>
-              <view class="info-item" v-if="item.craft">
-                <text class="info-label">工艺</text>
-                <text class="info-value">{{ item.craft }}</text>
-              </view>
-              <view class="info-item" v-if="item.quality">
-                <text class="info-label">质量</text>
-                <text class="info-value">{{ item.quality }}</text>
-              </view>
-              <view class="info-item" v-if="item.fineness">
-                <text class="info-label">成色</text>
-                <text class="info-value">{{ item.fineness }}</text>
-              </view>
-              <view class="info-item" v-if="item.blockType">
-                <text class="info-label">项目题材</text>
-                <text class="info-value">{{ getBlockTypeLabel(item.blockType) }}</text>
-              </view>
-              <view class="info-item" v-if="item.series">
-                <text class="info-label">系列</text>
-                <text class="info-value">{{ getSeriesLabel(item.series) }}</text>
-              </view>
-               <view class="info-item info-item-full" v-if="item.remark">
-                <text class="info-label">发行公告</text>
-                <text class="info-value">{{ item.remark }}</text>
-              </view>
-              <!-- 图片展示区域 -->
-              <view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
-                <view class="image-list">
-                  <view 
-                    v-for="(file, idx) in item.collectFileList.slice(0, 4)" 
-                    :key="idx"
-                    class="image-wrapper"
-                    @click.stop="handlePreviewImages(item.collectFileList, idx)">
-                    <image 
-                      :src="getFullImageUrl(file.url)" 
-                      mode="aspectFit"
-                      class="item-image"
-                    />
-                  </view>
-                  <view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
-                    <text>+{{ item.collectFileList.length - 4 }}</text>
-                  </view>
-                </view>
-              </view>
-            </view>
-          </view>
-        </view>
+        <collect-card
+          variant="metal"
+          placeholderIcon="medal"
+          :title="item.fullName"
+          :headerMeta="getHeaderMeta(item)"
+          :stats="getMetalStats(item)"
+          :details="getMetalDetails(item)"
+          :images="getItemImages(item)"
+          :remark="item.remark || ''"
+          :expanded="isCardExpanded(item, index)"
+          @toggle="toggleCard(item, index)"
+          @preview="handlePreviewImages(item.collectFileList, $event)"
+        />
       </u-list-item>
       <view></view>
       <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
@@ -198,6 +135,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { listPreciousMetalCoin } from '@/api/collect/preciousMetalCoin'
+import CollectCard from '@/components/collect-card/collect-card.vue'
 import request from '@/utils/request'
 import config from '@/config'
 import dayjs from 'dayjs'
@@ -217,6 +155,57 @@ const total = ref(0)
 const status = ref('loadmore')
 const showYearPicker = ref(false)
 const filterPanel = ref(false)
+const expandedCards = ref({})
+
+const getCardKey = (item, index) => {
+  return item.id || item.metalId || item.code || item.fullName || index
+}
+
+const isCardExpanded = (item, index) => {
+  return !!expandedCards.value[getCardKey(item, index)]
+}
+
+const toggleCard = (item, index) => {
+  const key = getCardKey(item, index)
+  expandedCards.value[key] = !expandedCards.value[key]
+}
+
+const formatMoney = (value) => {
+  return value || value === 0 ? `${value}元` : '--'
+}
+
+const getItemImages = (item) => {
+  return (item.collectFileList || []).map(file => getFullImageUrl(file.url)).filter(Boolean)
+}
+
+const getHeaderMeta = (item) => {
+  return [
+    item.issueDate ? `发行时间 ${item.issueDate}` : '发行时间待补充',
+    `面额 ${formatMoney(item.faceValue)}`
+  ]
+}
+
+const getMetalStats = (item) => {
+  return [
+    { label: '简称', value: item.shortName || '--' },
+    { label: '项目题材', value: getBlockTypeLabel(item.blockType) },
+    { label: '系列', value: getSeriesLabel(item.series) },
+    { label: '发行量', value: item.mintage || '--' },
+    { label: '重量', value: item.weight || '--' },
+    { label: '材质', value: item.composition || '--' }
+  ]
+}
+
+const getMetalDetails = (item) => {
+  return [
+    { label: '形状', value: getShapeLabel(item.shape) },
+    { label: '规格尺寸', value: item.dimension || '--' },
+    { label: '编码', value: item.code || '--' },
+    { label: '工艺', value: item.craft || '--' },
+    { label: '质量', value: item.quality || '--' },
+    { label: '成色', value: item.fineness || '--' }
+  ]
+}
 
 // 生成年份选项（最近100年）
 const yearColumns = ref([
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index 96e4382..be41cec 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="mine-container">
+  <view class="mine-container mine-page">
     <!--顶部个人信息栏-->
     <view class="header-section">
       <view class="header-content">
@@ -27,33 +27,55 @@
           <uni-icons type="list" size="24" color="#ffffff"></uni-icons>
         </view>
       </view>
+      <view class="profile-summary">
+        <view class="summary-card">
+          <text class="summary-label">收藏入口</text>
+          <text class="summary-value">纪念币 / 纪念钞 / 贵金属</text>
+        </view>
+        <view class="summary-card">
+          <text class="summary-label">服务状态</text>
+          <text class="summary-value">在线支持 / 资料查询</text>
+        </view>
+      </view>
     </view>
 
     <view class="content-section">
       <view class="quick-actions">
         <view class="action-card" @click="handleJiaoLiuQun">
-          <view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+          <view class="action-icon action-icon--community">
             <uni-icons type="chatboxes" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">交流社区</text>
+          <view class="action-copy">
+            <text class="action-text">交流社区</text>
+            <text class="action-desc">群号与交流</text>
+          </view>
         </view>
         <view class="action-card" @click="handleService">
-          <view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+          <view class="action-icon action-icon--service">
             <uni-icons type="contact" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">联系客服</text>
+          <view class="action-copy">
+            <text class="action-text">联系客服</text>
+            <text class="action-desc">问题协助</text>
+          </view>
         </view>
         <view class="action-card" @click="handleBuilding">
-          <view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+          <view class="action-icon action-icon--feedback">
             <uni-icons type="compose" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">意见反馈</text>
+          <view class="action-copy">
+            <text class="action-text">意见反馈</text>
+            <text class="action-desc">体验建议</text>
+          </view>
         </view>
         <view class="action-card" @click="handleUs">
-          <view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+          <view class="action-icon action-icon--praise">
             <uni-icons type="star" size="24" color="#ffffff"></uni-icons>
           </view>
-          <text class="action-text">给个好评</text>
+          <view class="action-copy">
+            <text class="action-text">给个好评</text>
+            <text class="action-desc">支持我们</text>
+          </view>
         </view>
       </view>
 
@@ -65,7 +87,7 @@
         <view class="menu-card">
           <view class="menu-item" @click="handleToEditInfo">
             <view class="item-left">
-              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+              <view class="menu-icon-wrapper menu-icon-wrapper--profile">
                 <uni-icons type="person" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="menu-text">编辑资料</text>
@@ -75,7 +97,7 @@
           <view class="menu-divider"></view>
           <view class="menu-item" @click="handleToSetting">
             <view class="item-left">
-              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+              <view class="menu-icon-wrapper menu-icon-wrapper--setting">
                 <uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="menu-text">应用设置</text>
@@ -93,7 +115,7 @@
         <view class="menu-card">
           <view class="menu-item" @click="handleHelp">
             <view class="item-left">
-              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+              <view class="menu-icon-wrapper menu-icon-wrapper--help">
                 <uni-icons type="help" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="menu-text">常见问题</text>
@@ -103,7 +125,7 @@
           <view class="menu-divider"></view>
           <view class="menu-item" @click="handleAbout">
             <view class="item-left">
-              <view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
+              <view class="menu-icon-wrapper menu-icon-wrapper--about">
                 <uni-icons type="info" size="20" color="#ffffff"></uni-icons>
               </view>
               <text class="menu-text">关于我们</text>
@@ -482,6 +504,150 @@ page {
   }
 }
 
+.mine-page .header-section {
+  padding-bottom: 34rpx;
+}
+
+.mine-page .profile-summary {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16rpx;
+  margin-top: 28rpx;
+}
+
+.mine-page .summary-card {
+  padding: 18rpx 20rpx;
+  border-radius: 20rpx;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1rpx solid rgba(255, 255, 255, 0.18);
+  backdrop-filter: blur(12rpx);
+}
+
+.mine-page .summary-label {
+  display: block;
+  font-size: 22rpx;
+  opacity: 0.82;
+}
+
+.mine-page .summary-value {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 26rpx;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.mine-page .content-section {
+  padding-top: 48rpx;
+}
+
+.mine-page .quick-actions {
+  border-radius: 22rpx;
+  background: #ffffff;
+  display: grid !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16rpx;
+  padding: 20rpx !important;
+}
+
+.mine-page .menu-card {
+  background: #ffffff;
+}
+
+.mine-page .quick-actions .action-card {
+  min-width: 0;
+  padding: 20rpx;
+  border-radius: 18rpx;
+  background: #f8fafc;
+  border: 1rpx solid #edf2f7;
+  flex-direction: row !important;
+  align-items: center !important;
+}
+
+.mine-page .quick-actions .action-icon {
+  width: 72rpx !important;
+  height: 72rpx !important;
+  border-radius: 20rpx !important;
+  margin-bottom: 0 !important;
+  margin-right: 16rpx;
+  box-shadow: none !important;
+}
+
+.mine-page .action-icon--community {
+  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
+}
+
+.mine-page .action-icon--service {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+}
+
+.mine-page .action-icon--feedback {
+  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
+}
+
+.mine-page .action-icon--praise {
+  background: linear-gradient(135deg, #be123c 0%, #fb7185 100%);
+}
+
+.mine-page .action-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.mine-page .quick-actions .action-text {
+  color: #1f2937 !important;
+  font-size: 27rpx !important;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mine-page .action-desc {
+  margin-top: 8rpx;
+  color: #64748b;
+  font-size: 22rpx;
+  line-height: 1.2;
+}
+
+.mine-page .menu-card {
+  border-radius: 20rpx !important;
+  box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06) !important;
+  border: 1rpx solid #edf2f7;
+}
+
+.mine-page .menu-card .menu-item {
+  padding: 28rpx 24rpx !important;
+}
+
+.mine-page .menu-card .menu-text {
+  color: #1f2937 !important;
+  font-size: 29rpx !important;
+  font-weight: 600;
+}
+
+.mine-page .menu-card .menu-icon-wrapper {
+  border-radius: 18rpx !important;
+  box-shadow: none !important;
+}
+
+.mine-page .menu-icon-wrapper--profile {
+  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
+}
+
+.mine-page .menu-icon-wrapper--setting {
+  background: linear-gradient(135deg, #475569 0%, #64748b 100%);
+}
+
+.mine-page .menu-icon-wrapper--help {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+}
+
+.mine-page .menu-icon-wrapper--about {
+  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
+}
+
 @keyframes pulse {
   0%, 100% {
     transform: scale(1) rotate(0deg);
diff --git a/src/static/images/tabbar/tab-banknote-active.png b/src/static/images/tabbar/tab-banknote-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..393bec5535fe3a62df6566446ec4cf1e65d3cf55
GIT binary patch
literal 1084
zcmV-C1jGA@P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000C7Nkl<Zc-rlp
zO=#3W6vqoI)r*LDs24%;D0tB-=-Hd4CqZutex3Y;TJVD&D&hy8l;Vm~Yeg$k@E|Ry
zprvY2#DiK{>lcF9id#@x(9^j8U?hE=WRp$ePA2~!JXki#Z1UdBdv9i5wxNL#LI@#*
z5JCtcgb+dqA%qY@2qA<JLaI?HG|pYO=E(eATR$#n+oNm{JPV!)&t|ml=PX~g(I&;~
z41s4fQu&Q5S8TUc@lx=t#`XNXDBl%xMnc6e+U$0M+>sG60l_J6%6G*H%=ISC-rsci
zpxSn=TlGF0QA6+EMiN|uYtcrkqoCfT^>9$$!05}!ikE^m&{kUaSy<fEY?T34o$6G@
zM?<j{F9mI)ZR;|kus6E2qh0Op>s1H(Z~98t@B=mWZNib##JGC=;r$FHp1e1xwp_WW
zn$H|pOOCavg@^V!g3tI4$8e6H5gv|}RBQ2^U2!0+^6!`4sMlY=_{!(WvYPt+Ylcit
zPdnG`xZdL^IjmA}F0L6IeWf+T=I&x*2AH>gZHMs&K+g|S{-^TyS;~iu|NNo$_xIJT
z92ny0o!eR?BsCH;ZveO(o$@gva2(ghRT5m2&K)HY6Eb0dAQx1go|>h6j0haVHMmx`
zxB7Ia+I0DX+Ii!uBlwK(g6^TE(&Kf3ITr@-3&K55pZp8Du3Q=!c8=j(ukshQ?{k!W
z>&0{5Ad6!-2j_+z32{@@%osp7$&z_K{I%}f4d>4WDqd#@T%&7C#su6$oXJ{d4S=5K
zRRl5?U8V!~QfuyyYjuHHW=C;GL1qmgmlu#W>Uw_M37Bpq;J4(mMeYnB6(xH={CE_%
z6XcF$Ou%o+^J>kAtS|s(uktv8X;RA&XiK&)XUw&_Au9}k>_i?<qW618LA8wN#NC1X
z8UX7!GS5$XF;31C@S91*0V@n3{ePUyCu~L};{ejp+!_EYnrZoezc_&3luHvd01ZGF
z#30Nd%ruk}F;2v|6v4$fF2->=nj13QkV&^NOO67+j3~~Qq<1S6+nsU?6x*WSZBn@v
zYPA6%x+=JqDkURfH|4#>0J_o_6a?rB1^kKutTX_!4=e+O9SKpyEr-z+eL*k+{K{p*
zmcwM;0FYKq$%q>hqEy65K~WcqyL8HTOJ8V!zk+f>oe_|+)LNPdSAz0JzoIWc$(0L|
zBSGhm;uPniz!!zSZqP*ma8QA8)F7OR;#`)e^92oiU(nzyN_FOcy`%^C0fl1O7|KP@
zM!bOFGrq$yoRfyDG4>@rzNTsbd{Nr~_*Vsnj0FB!hXFBxe^+CQEh;%OhAVC!Q}!$g
z?iu%9_dK5vLI@#*5JCtcgb+dqA%qY@2qA=!===d*?pcLJ@ZpUB0000<MNUMnLSTXt
Ctou&@

literal 0
HcmV?d00001

diff --git a/src/static/images/tabbar/tab-banknote.png b/src/static/images/tabbar/tab-banknote.png
new file mode 100644
index 0000000000000000000000000000000000000000..482aa8f9abc5c3c9baf5392e44947d2285deebf8
GIT binary patch
literal 1088
zcmV-G1i$-<P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000CBNkl<Zc-rlp
zOKa3n6vvANzk%RJH!cJhf`W*y#g!kx4^R~s;zk8^6n9c>5giv6X6nLfeJ~2vanXtt
zYLyCVeHNW+DN5D8s514nx$=)j(la+{GD)1|=Kq5O!zA}ka!&3!=iYlVO-+OlLI@#*
z5JCtcgb+dqA%qY@2qA<JvIt9>o0qQJv?aHF=b^EdeJ7O(f_uR|;ocIh{FSTLY%@vm
zIz!+d6RG^wYd5x-s(2~5*Tg;fSy8?%i5Us-izd4rFL#uPn1JAvHRaoadvCY_;(Ypd
zA3UWxx_Z>ThtJi>=y)JO8?;3qagKt98z8QmgYt%7js{k|6!d|<;=0ad%U5hL$^eI3
z3+nFR<Iswif<Do=aT$@{3*CD(uR1T^R$Zk&SGhCrNPV1~v1H=&w0iUI{Q@QS^xaoy
z&)-l-P88Li+!?iFf14%vjPGy^=eQc8GOpS?u9_7G{3`#&>oN6VV#-yfXTPW)KYuNd
z>il=BUExyMQnFvA;9RtM`s%IL5c$sQkr`n9=B>vPZvZ^`Udo@EnX6GgWbSKKT`2X|
ztsEHQ+O2-A5uzFisW-r<$yu%PF(PmrZNn-Fu1V*PqKFBpFo2f}s?L9_Q9eclj-d_O
z%Kmb#MRmGZQiblaCHRc*ysn|`+!bwL&V&Kng7Co5vwuO?mi`CB)-jyxRQ|35?Uu5K
zo{YE#SscSTIM?q;2%Dm&#sIoWmdx|vuXX1h&tLRZyv`74qw7n?1YARy$y#a+fG5wX
z2xKg}Ob70z-rOH;b%9xCM`1=mY7HQl7mzmUp8T*AFx^PNZ^>ng%o#u`N<RJY<3Zex
zmphU%0ly{Bt2ZMu!T^}P);y)%<;a#H(3k9A&Y0_ULq-??*@-+J#nbN`1&d`wH+u)O
zYXGd{$UHyl#W*=nz;8wo2aGU)^#5TpAHNxqi~~qVGiv~>XvXFL-Qoa#Q!Y)=05kwy
z5Q8v-Fw;;@#5fV-QUn*{xEROfXl}@GLnhwBEIA6?GNLeBlFqGAY<J2nP;84jw@Kwz
zsL=+1=&Inbf$r7D@20%77(iG0f`R~Dp@3U4fRP43_JL&pzat@t*yS*~qAv(aV%*AQ
z{FcL{-T)93N$Fe){B@9uI4LOVLUET)`F80G4e(b`E~qmCGM0Kv6X8lw-so2J<tCYO
zK{X?x;-1~qQ=E$eUljV<K^FzUUIoHIgK#Q}b6K9w7c|U$L4&U-HJJbPk{;X#6pCeI
zDAyVtl|MUK_>Avx4Cln*Y7+aB9$!;U0DMt90r0O15;79_XB`QM3H-a7gn%3w!xa~g
zDSMg(*Nkg#c%DxPA%qY@2qA<JLI@#*5JCtcgb+eVaDD?QWpn%CJ{qe40000<MNUMn
GLSTZsUi<?9

literal 0
HcmV?d00001

diff --git a/src/static/images/tabbar/tab-coin-active.png b/src/static/images/tabbar/tab-coin-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca2859b66931dcf651448c1602db637a76bc8f42
GIT binary patch
literal 1333
zcmV-51<Lw~P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000F1Nkl<Zc-rk;
z&ubGw6mF8XY0{*zrPlhhP$Sk>J=7mqief8RMJ*NDDpV`2Rcs52RRqDmKoGpy-o=|&
z5%DT`@T4FJ9tE!+MDe8aEhcOx)7{zKBs-gaA1s93**9<J?Y#HBH=Ai_AP9mW2!bF8
zf*=TjAP9mW2!g0Gnhy>vWaef*<{sSsTgwA|qVEkm@J)Stro$L`l_8+Zh8g(yrrhrI
z#JQJY54?OpC+Jr9?k2ag^xL$-FCId-x^+vb(<9G}9eC-0u5~l;v2<#4>!pit1NrHz
z)9+hOop{=Opnop0ed}=Z{(ZA@8=SMQi8g49dxG={ouPZ={k`8n+d4V^3WFI-r8;G~
z=?iCGl=*ORuFUx2UdVtfzX3Y3aRG{FZ_Ix2JpIp)J&$*^_c_VdH9(0zLMCK;)d$ZI
zIU``|2BDbAV}~C)$#3lKIV<0Tb58d_W)P|xDR<<>=Vz{8`K&tc_P`i$y!ANT1|PD#
z^u1n8s5`ck8XH|pbax$6T}y1~8npcP^u!zAfmGaU1#Tfr*@x&GI@Aq2vUt9(n>jjo
zzi?l6asHeATHBplKiZZTzE_G?LKb9}_;%4}(LD)WbY&TvCm>MiCRunZOWaA%&QqEB
znNQaBd&_^S#_|8lMqlW&<mC}M=_YGN24&syf;{*|*EKe}>KH3#FMnt`IsCY3Z+<e-
z*)b4HCUXt3SR4m_;~cJ`4cfZ6zE$N6)-(d1)wsf%SGQA~Ic?dV%*@m~rR%u6_!9$)
z!S$*W?!mo~p){!I6MdJlB~5o^Q~^(iaw6E34Sr`wfA;3Jud4PKJnJnFN{NLG$Wn5A
z(KmEZ%*HhxY8siq3%Uo!A;0;m!H4@uZ0jDXw4RWua!r;Iq?rI+bttM40ohB!1?Eu*
zek!+<7MZH$*Q=Hx#^Py3HVj<~WI$$Q#?J!JS*2hgs(@Qdj;+d7pi_~Fc{rN#z2lKG
zfRa_<&960U^HCQvk`cKT*4E?VcAsBWx8vZB%3^{d2hl0u8EXJkAnipkIUBXg0aXaN
zUIKF&^|k2;-SG^OGyrPw_F@?7F>-kU^f2rgCR0@C2wm;PK)3Y-BMl&DymFR_1j#SY
zkGJRYSOH589eIQUzj4lQo**Y{Zn{Up0P;$fT-EgR_BZa@G159U@p|1^C$6DQ&{+Uo
z<(0Ka8360CZtc957x1QQS6W3|uVo9j7szRi**F7WQQWDW#eAwX_<oHbGa|XxgJ+72
z0aO)FzwQSv#V<$q;*MlD)G~7XiEbP)&H(s4#Hk(1#=7#Ie7@_7n7CKFqAPTAiUWA2
z=*$4YO62ugKmH%gCTOOr%Z}tYfFhlJ-C6Z5lJSX{{fmW?0H;YmogP|y2~o(<rK2S@
zd1dLBZXd=QK>m(LxAfpA`1%gULMOj{&;T?5T@ZsXgD`0*6EP-YEJd&w$6_4I(Oi(>
zf((}=jY!0}C?B!`_*se}r3ikQWsm{*X<~)Jk8?u?KTkIR{DVfw;9rys0RN;HGWa)D
z1HeCO8vt%qU;rw;SqI9&2zpqh!k~h^*cZ+58|QEhZP3<U4&P9lbrc?$+tnBll(}J(
z0Y>1KWd^t-ZrT?ycEoKftC=To<JR!w0=F(Uq=3iGyA5$m+`is~8IkWDuZ3$uAE7TJ
r5(GgI1VIo4K@bE%5ClOGL~Zd83pV1U>Xn3a00000NkvXXu0mjfl(~4(

literal 0
HcmV?d00001

diff --git a/src/static/images/tabbar/tab-coin.png b/src/static/images/tabbar/tab-coin.png
new file mode 100644
index 0000000000000000000000000000000000000000..4076a6a3c07edbb543bbc4594f2c17252101c6db
GIT binary patch
literal 1313
zcmV++1>X9JP)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h000E&Nkl<Zc-rlp
zOK2295QdEhjSpfpYvLmkpNSaXqER9w@g0K?Od=$~m}nG5#8(gn@gj;Sf;aUZym=K7
zuYw0p3WDHK@ajPnPnr)L7(1QWp4sef&*uN3A(`o}s;-);s;-{xDN_VN5ClOG1VIo4
zK@bE%5ClOG@{ES{O+&{{Ui~mM{P0g98$97XX%)Y`VZ-raDBflWWSKOIuc)kAvFAwt
zi()I@Y{-OcCGTzqFW>v+oAQH(Y$fZKn)e=i;;Z7#hO8x{`0^RE<{#`n`z9BK9O=9G
zZu_pokL%ZN9jsZrw0TwImVUDj*SJR?`Z6XLp2&>ssrUCu1MU9K(=Soxs1h<J-L{V2
z=VpJdS&W~72DFj}=+wpq1n)k5{d3$&w|4Z5RL-kj9Yx#K0AWBA+HvJ!4yiK&uWl|W
z=EkO7H>2p+E?eDhj^SF=7-;5_s;0^v#qs%_gTtR}*UM){PZ)*s)YGylA6jvEj~5e4
zF5B6;uj^T6LG2dXy-dyG&G_&3?lZ5GKDmsA2DGd^MtLJc$z(_5(5{nNx3y(B7}s;|
z*4Oa8{)>0M_np7}ZKBdjXhAc44W0piWO1eC?K*)#<+{k?sSJ-@RJUq(=fJg(+&gvU
z{_lL{_W^Bq!80raGPy3+ybQ{&<popu0e0@~d>S?G=!r}3x3zRUSXRHjYi_2daoY6q
zIb~&KQ)&FoHSW=ezLBnPl$T8gS0gZ2?+R;i-A;hn6?5wj^<H>u>pyVm?hh1-a^uRx
z7{)@wMjM{+HpjWTBd-d0E-5F$Zj6$uYStVdy79%<ALa36=PDaCpk?C$Z)6zrHaY}m
z=A4?qOS(tKVLtgb<>Nl87uD^UXgQ&2b4|!#z6r?clA?MMkmD@4$UK7JXLCEP9lay?
z^nA$*ZFtz+QIHIn8JYKQLEKD)48#_23z=iv)+)#pWMXkz-O9$psWO1Q{?j{BXt`}~
zLeh;KZw+88ewlebemS3RC(0d}F~PP5aVg+=YXB;c;Ubv18l~kU;Km8eraWO8k)1iD
z(g4)p!^JS_F=lyz^sv}5%uG>{5n02<z-;>oUK+q$@tUhl7D!3+{EEt|mF$3R+P?c1
zjla2;be&)>*0RZ-3ImusS!Pu;$<x1Z$%?iEU1wg6$CG>X$@MKjR&!@9RR&-`He0{A
z<prK}*UW^zamyCj9-yc_X73EZrg&68vX6WzKdBMSjL59@FsIZQz*g~0>V9x3Npti#
z?#OgQO|6F>xyAwS48Z3hQT-?zyV8&H`Pmv{UHKqWR2*PVsWAXqiMd~!#Q&4o<hoLI
z&5q1CK#?xI?`-=P$@_&^_=|<`|E}q0)TCV-G+fis|I*~k_kOza@ZJFCcRa48ha|x_
zX)s2nq&#E*89**bL0CapX{Z)rT8OC>p<<khaVke^Lq;1i+LH8QA*N0FA{#)TrFc?`
z(1%$b89<*VPB8RwZjqtS(>;KGpiyM#CrTbbKhi5Q^fOftpdV^`03B7}0Veve4$8p<
zJ$9*3D%neT)11G##y$GbH(U;%REKr^Q<#pc@gXSdz$Oojpd-sXa7Q|{FJ;-0j;+k&
zIzb1wdJq?Mbg?G|JRRQciCfa~^&Wt&y+XJqcocmbQ4j<{5ClOG1VIo4K@bE%5DJUG
X;}hs85Y1IS00000NkvXXu0mjf{z-vL

literal 0
HcmV?d00001

diff --git a/src/static/images/tabbar/tab-metal-active.png b/src/static/images/tabbar/tab-metal-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0e29ad76c3360d3fc0d1cb47dc14430799fe00e
GIT binary patch
literal 645
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>VDj;FaSW-r^>&t__hAQ-<GMlF
z(b3{-UFWa}s&8DHv9Y<yTU^wo{ZU9^z=e&?N*3L-o104t1plz)@#!i3(7ke!U$FMp
zG=WQV)=pRRt+TICa4I_ffBx?3_3zn0mY{$I?mT`y`bWe*n{xiV{rY<gmtgjmvYZ*p
zwOjsY{++M&X5Pf|#Ty=VzYTfe*F5#Xfe%?PFXb|)@Jz{bepT@PFqpYb(aL!5%WXf-
zPS_Z5$0=!VO}<#>t2JpkSJ(HRdh6@1c>cs@KeiJQ8hJ`W{r!<g_g7V!yo-z9#Z?)W
z+SJqeiMQ?3=i_OGPqg2K{Yg7vJ%?w4Vc@=lC*GYaUe60;{!{;c{>hq0Uy`_gt>rYb
zEc$P@bN}pi15?NT;`%Hm`6vIbu+*RUyS9Ca-o(r7SIx7ST;JtSS9@iouygN62j2xJ
z{=Rj&_>K9F*UP3^4ikUh&gH(v6A@<<o?E`~{NJ~HZgbgI@cjw6%2F1qzxztSbjFQK
z4|Qri<#pYzGs!3A@zbrluCGkrJz?ibndY5uebTyDHow{(e>8vXf%lfDVwk@_{oec|
zO_*t`(4ReTEppu(4Hw)$l7CgnF_QIfmP1M2wkAe7w>1$KM;Z8?xh!}NFns5EvF-Iz
z?U1{h9i%_p-?x5U!7F+8TMV-1@+Gdjr9~tf7;_wD4#^x^vJl9Gq66y}eqlCf=##L0
zxUV@{(5|7{(JqqnPS58~!AXf8v($HPo32<qVP}g|1xmz1IM;tNoeBIO`{a!vH%P$K
L)z4*}Q$iB}g0>vN

literal 0
HcmV?d00001

diff --git a/src/static/images/tabbar/tab-metal.png b/src/static/images/tabbar/tab-metal.png
new file mode 100644
index 0000000000000000000000000000000000000000..3692d70f3bac98aaa991d41d94c53d6e440aa716
GIT binary patch
literal 643
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>VDj>GaSW-r^>&uM_hAQ_Hrc6<
zmV|6{W{-85xXpRBQkUqG2l6bA8_M1Ud^oSd7q)P-)r$uzO{*0wx)wKElzf$rP`7t^
z%OAy|c=Bdd=A|c<57?Dr-c{Ux@^0_FuU{E~)*u6i=@MPXCK<ncDy;eQ_Uq>@T!O1B
zY9h_U68C>f{x^Tsnp-C}2S$86woSWa_tEJO9MUrXp2}rj!arr3V!YM=vfB(VnV0Hz
z`1|DV)U8{+L|?>w;$00JDOW3v`&ZV#pZ97z|M}dhTPAMvWAljD$XigaV3Z^F|LfYQ
z`t@~XA(z5Zo4#~@@?93h?e13iME70DpRkk0b9g4$1@1ff?A}B7?Yto7!4Dofsbb5e
zgC|V+;`?p;$$xozhu(1Rn)COj@DGLGo7I0fe>2ygw9Dn5?%djq>H#VBt7oh@-EgPu
zW2<eW((mZbMW-9ST)M?t&E)!R`z)~%$qBRK*REK$`$BsC>ej&JjH_7fL#mlp2kWoS
z0BUnlt6tT$XQ73zbO%qL-m|iId;8{<sU}Z0WDEN9BBExUAbWP5=zW36Y@=%j_Ws<f
zu<v4vLoH|Bys|mV79Wtfko{=8mO;GZdMN|DnP-w4+NaKl)dW(i(iS`i7{2qo_;STN
ze5K!crrZPd=W9!+UjA9QfcHY-XUFiHcNZLB;7Q<05=;|RYfEBaOMs&NZAEeojB`2)
z)$SA*XdhxP&_AIb&t(3%CaFb*r?Ya>*1bBC%{{6jhnSIL6~f+ePXCeRCC~M{JOV)i
Mp00i_>zopr07Z%y`v3p{

literal 0
HcmV?d00001

diff --git a/src/static/scss/collect-page.scss b/src/static/scss/collect-page.scss
new file mode 100644
index 0000000..ce1cd6a
--- /dev/null
+++ b/src/static/scss/collect-page.scss
@@ -0,0 +1,495 @@
+.collect-page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #edf4fb 0%, #f7f9fc 28%, #f5f7fa 100%);
+}
+
+.page-hero {
+  margin: 20rpx 24rpx 16rpx;
+  padding: 28rpx 28rpx 26rpx;
+  border-radius: 24rpx;
+  color: #ffffff;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 16rpx 40rpx rgba(15, 23, 42, 0.14);
+}
+
+.page-hero::before {
+  content: '';
+  position: absolute;
+  right: -40rpx;
+  top: -40rpx;
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.page-hero::after {
+  content: '';
+  position: absolute;
+  left: -30rpx;
+  bottom: -50rpx;
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.hero-copy {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-kicker {
+  display: block;
+  font-size: 22rpx;
+  opacity: 0.9;
+  letter-spacing: 0;
+}
+
+.hero-title {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 40rpx;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.hero-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.hero-title-row .hero-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.hero-count {
+  flex-shrink: 0;
+  margin-top: 8rpx;
+  padding: 8rpx 14rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+  font-size: 22rpx;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.hero-desc {
+  display: block;
+  margin-top: 10rpx;
+  font-size: 26rpx;
+  line-height: 1.6;
+  opacity: 0.92;
+}
+
+.collect-page .search-view {
+  margin: 0 24rpx !important;
+  padding: 14rpx !important;
+  border-radius: 22rpx !important;
+  background: rgba(255, 255, 255, 0.94) !important;
+  backdrop-filter: blur(16rpx);
+  box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.08) !important;
+  border: 1rpx solid rgba(226, 232, 240, 0.9);
+  gap: 12rpx !important;
+}
+
+.collect-page .search-input {
+  border-radius: 18rpx !important;
+  height: 74rpx !important;
+  background: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+}
+
+.collect-page .filter-panel {
+  top: 0 !important;
+  bottom: 0 !important;
+  background: rgba(15, 23, 42, 0.42) !important;
+  justify-content: flex-end !important;
+  z-index: 10000 !important;
+}
+
+.collect-page .filter-sheet {
+  width: 100%;
+  max-height: 78vh;
+  background: #ffffff;
+  border-radius: 32rpx 32rpx 0 0;
+  overflow: hidden;
+  box-shadow: 0 -18rpx 40rpx rgba(15, 23, 42, 0.16);
+}
+
+.collect-page .filter-sheet-header {
+  padding: 28rpx 30rpx 22rpx;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20rpx;
+  border-bottom: 1rpx solid #edf2f7;
+}
+
+.collect-page .filter-sheet-title {
+  display: block;
+  color: #102033;
+  font-size: 34rpx;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.collect-page .filter-sheet-subtitle {
+  display: block;
+  margin-top: 8rpx;
+  color: #64748b;
+  font-size: 24rpx;
+  line-height: 1.3;
+}
+
+.collect-page .filter-close {
+  width: 58rpx;
+  height: 58rpx;
+  border-radius: 50%;
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.collect-page .filter-panel-content {
+  border-radius: 0 !important;
+  padding: 4rpx 30rpx 24rpx !important;
+  max-height: 52vh;
+  overflow-y: auto;
+}
+
+.collect-page .filter-panel-content .filter-title::before {
+  background: currentColor !important;
+}
+
+.collect-page .filter-title {
+  color: #243b53 !important;
+  font-size: 28rpx !important;
+  padding: 28rpx 0 18rpx !important;
+  margin: 0 !important;
+}
+
+.collect-page .state-item {
+  border-radius: 999rpx !important;
+  min-width: 140rpx;
+  height: 70rpx !important;
+  line-height: 70rpx !important;
+  padding: 0 28rpx !important;
+  background: #f8fafc !important;
+  border: 1rpx solid #e2e8f0 !important;
+  color: #334155 !important;
+  box-shadow: none !important;
+  font-size: 26rpx !important;
+}
+
+.collect-page .btn-box {
+  padding: 20rpx 30rpx calc(24rpx + env(safe-area-inset-bottom)) !important;
+  gap: 16rpx !important;
+  background: #ffffff !important;
+  border-top: 1rpx solid #edf2f7;
+  box-shadow: none !important;
+}
+
+.collect-page .reset-btn,
+.collect-page .filter-btn {
+  min-width: 88rpx;
+  height: 74rpx !important;
+  padding: 0 18rpx !important;
+  border-radius: 18rpx !important;
+  border-width: 1rpx !important;
+  border-style: solid !important;
+  box-shadow: none !important;
+}
+
+.collect-page .reset-btn {
+  background: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+}
+
+.collect-page .filter-btn {
+  border-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.collect-page .reset-btn text,
+.collect-page .filter-btn text {
+  font-size: 26rpx !important;
+  font-weight: 700 !important;
+}
+
+.collect-page .filter-btn text {
+  color: #ffffff !important;
+}
+
+.collect-page .btn-confirm text,
+.collect-page .filter-btn text {
+  color: #ffffff !important;
+}
+
+.collect-page .btn-reset,
+.collect-page .btn-confirm {
+  height: 88rpx !important;
+  border-radius: 18rpx !important;
+  font-size: 30rpx !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 8rpx !important;
+}
+
+.collect-page .btn-reset {
+  background: #f8fafc !important;
+  border: 1rpx solid #e2e8f0 !important;
+  box-shadow: none !important;
+}
+
+.collect-page .btn-reset text {
+  color: #475569 !important;
+}
+
+.collect-page .list-item {
+  margin: 16rpx 24rpx !important;
+  border-radius: 20rpx !important;
+  overflow: hidden;
+  box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.08) !important;
+}
+
+.collect-page .item-header {
+  padding: 20rpx 22rpx !important;
+}
+
+.collect-page .card-body {
+  margin: 0 !important;
+  padding: 18rpx 18rpx 20rpx !important;
+  background: #ffffff !important;
+  border: none !important;
+}
+
+.collect-page .card-info {
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  gap: 10rpx !important;
+}
+
+.collect-page .card-name {
+  flex: none !important;
+  width: 100% !important;
+  min-width: 0;
+}
+
+.collect-page .card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  width: 100%;
+}
+
+.collect-page .card-tag {
+  max-width: 100%;
+  padding: 5rpx 12rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.18);
+  color: #ffffff;
+  font-size: 21rpx;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.collect-page .info-row {
+  margin: 0 !important;
+  gap: 12rpx !important;
+}
+
+.collect-page .info-item {
+  width: calc(50% - 6rpx) !important;
+  padding: 16rpx !important;
+  border-radius: 16rpx !important;
+  background: #f8fafc !important;
+  border: 1rpx solid #edf2f7 !important;
+  margin-bottom: 0 !important;
+}
+
+.collect-page .info-label {
+  border-radius: 999rpx !important;
+  padding: 0 !important;
+  background: transparent !important;
+  color: #64748b !important;
+  font-size: 22rpx !important;
+}
+
+.collect-page .info-value {
+  margin-top: 8rpx !important;
+  color: #1f2937 !important;
+  font-size: 27rpx !important;
+  font-weight: 600 !important;
+}
+
+.collect-page .info-item-full {
+  width: 100% !important;
+}
+
+.collect-page .image-list {
+  display: grid !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  gap: 12rpx !important;
+  margin-top: 10rpx !important;
+  width: 100% !important;
+}
+
+.collect-page .image-wrapper,
+.collect-page .image-more {
+  height: 220rpx !important;
+  border-radius: 14rpx !important;
+  width: 100% !important;
+  background: #f8fafc !important;
+}
+
+.collect-page .image-more {
+  min-height: 220rpx;
+}
+
+.collect-page--coin .page-hero {
+  background: linear-gradient(135deg, #0f766e 0%, #16a34a 58%, #f59e0b 130%);
+}
+
+.collect-page--banknote .page-hero {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 58%, #14b8a6 130%);
+}
+
+.collect-page--metal .page-hero {
+  background: linear-gradient(135deg, #b45309 0%, #f59e0b 58%, #0f766e 130%);
+}
+
+.collect-page--coin .item-header {
+  background: linear-gradient(135deg, #0f766e 0%, #16a34a 100%);
+}
+
+.collect-page--banknote .item-header {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+}
+
+.collect-page--metal .item-header {
+  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
+}
+
+.collect-page--coin .search-input,
+.collect-page--coin .reset-btn,
+.collect-page--coin .filter-btn,
+.collect-page--coin .btn-confirm,
+.collect-page--coin .state-item.active,
+.collect-page--coin .info-label {
+  border-color: rgba(15, 118, 110, 0.3);
+}
+
+.collect-page--coin .filter-btn,
+.collect-page--coin .btn-confirm,
+.collect-page--coin .state-item.active {
+  background: linear-gradient(135deg, #0f766e 0%, #16a34a 100%) !important;
+}
+
+.collect-page--coin .state-item.active {
+  color: #ffffff !important;
+  border-color: transparent !important;
+  box-shadow: 0 8rpx 18rpx rgba(15, 118, 110, 0.18) !important;
+}
+
+.collect-page--banknote .search-input,
+.collect-page--banknote .reset-btn,
+.collect-page--banknote .filter-btn,
+.collect-page--banknote .btn-confirm,
+.collect-page--banknote .state-item.active,
+.collect-page--banknote .info-label {
+  border-color: rgba(29, 78, 216, 0.3);
+}
+
+.collect-page--banknote .filter-btn,
+.collect-page--banknote .btn-confirm,
+.collect-page--banknote .state-item.active {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%) !important;
+}
+
+.collect-page--banknote .state-item.active {
+  color: #ffffff !important;
+  border-color: transparent !important;
+  box-shadow: 0 8rpx 18rpx rgba(29, 78, 216, 0.18) !important;
+}
+
+.collect-page--metal .search-input,
+.collect-page--metal .reset-btn,
+.collect-page--metal .filter-btn,
+.collect-page--metal .btn-confirm,
+.collect-page--metal .state-item.active,
+.collect-page--metal .info-label {
+  border-color: rgba(180, 83, 9, 0.3);
+}
+
+.collect-page--metal .filter-btn,
+.collect-page--metal .btn-confirm,
+.collect-page--metal .state-item.active {
+  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
+}
+
+.collect-page--metal .state-item.active {
+  color: #ffffff !important;
+  border-color: transparent !important;
+  box-shadow: 0 8rpx 18rpx rgba(180, 83, 9, 0.18) !important;
+}
+
+.collect-page--coin .reset-btn,
+.collect-page--coin .filter-btn,
+.collect-page--coin .info-label,
+.collect-page--coin .state-item.active,
+.collect-page--coin .btn-confirm {
+  color: #0f766e;
+}
+
+.collect-page--coin .reset-btn text {
+  color: #0f766e !important;
+}
+
+.collect-page--banknote .reset-btn,
+.collect-page--banknote .filter-btn,
+.collect-page--banknote .info-label,
+.collect-page--banknote .state-item.active,
+.collect-page--banknote .btn-confirm {
+  color: #1d4ed8;
+}
+
+.collect-page--banknote .reset-btn text {
+  color: #1d4ed8 !important;
+}
+
+.collect-page--metal .reset-btn,
+.collect-page--metal .filter-btn,
+.collect-page--metal .info-label,
+.collect-page--metal .state-item.active,
+.collect-page--metal .btn-confirm {
+  color: #b45309;
+}
+
+.collect-page--metal .reset-btn text {
+  color: #b45309 !important;
+}
+
+.collect-page--coin .btn-confirm,
+.collect-page--banknote .btn-confirm,
+.collect-page--metal .btn-confirm {
+  border: none !important;
+  box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.12) !important;
+}
+
+.collect-page--coin .btn-confirm text,
+.collect-page--banknote .btn-confirm text,
+.collect-page--metal .btn-confirm text {
+  color: #ffffff;
+}
diff --git a/src/static/scss/index.scss b/src/static/scss/index.scss
index 9ec3cd7..1984b44 100644
--- a/src/static/scss/index.scss
+++ b/src/static/scss/index.scss
@@ -1,3 +1,4 @@
 @import "./global.scss";
+@import "./collect-page.scss";
 @import "@/static/scss/colorui.css";
-@import "@/static/font/iconfont.css";
\ No newline at end of file
+@import "@/static/font/iconfont.css";