qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 界面功能整体大调整。

Browse Source
This commit is contained in:
tianyongbao
2026-06-19 07:49:49 +08:00
parent ae55f61051
commit 06fee9863c
14 changed files with 1447 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

504
src/components/collect-card/collect-card.vue Normal file
View File

@@ -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>

18
src/pages.json
View File

@@ -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": "贵金属"
}
]

155
src/pages/banknote/index.vue
View File

@@ -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([

178
src/pages/index.vue
View File

@@ -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([

191
src/pages/metal/index.vue
View File

@@ -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([

192
src/pages/mine.vue
View File

@@ -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);

BIN
src/static/images/tabbar/tab-banknote-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/images/tabbar/tab-banknote.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/images/tabbar/tab-coin-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/images/tabbar/tab-coin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/images/tabbar/tab-metal-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 645 B

BIN
src/static/images/tabbar/tab-metal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 643 B

495
src/static/scss/collect-page.scss Normal file
View File

@@ -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;
}

3
src/static/scss/index.scss
View File

@@ -1,3 +1,4 @@
@import "./global.scss";
@import "./collect-page.scss";
@import "@/static/scss/colorui.css";
@import "@/static/font/iconfont.css";
@import "@/static/font/iconfont.css";