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 0000000..393bec5
Binary files /dev/null and b/src/static/images/tabbar/tab-banknote-active.png differ
diff --git a/src/static/images/tabbar/tab-banknote.png b/src/static/images/tabbar/tab-banknote.png
new file mode 100644
index 0000000..482aa8f
Binary files /dev/null and b/src/static/images/tabbar/tab-banknote.png differ
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 0000000..ca2859b
Binary files /dev/null and b/src/static/images/tabbar/tab-coin-active.png differ
diff --git a/src/static/images/tabbar/tab-coin.png b/src/static/images/tabbar/tab-coin.png
new file mode 100644
index 0000000..4076a6a
Binary files /dev/null and b/src/static/images/tabbar/tab-coin.png differ
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 0000000..f0e29ad
Binary files /dev/null and b/src/static/images/tabbar/tab-metal-active.png differ
diff --git a/src/static/images/tabbar/tab-metal.png b/src/static/images/tabbar/tab-metal.png
new file mode 100644
index 0000000..3692d70
Binary files /dev/null and b/src/static/images/tabbar/tab-metal.png differ
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";