107 lines
2.1 KiB
Vue
107 lines
2.1 KiB
Vue
<template>
|
||
<view class="summary-cards-container">
|
||
<scroll-view
|
||
scroll-x="true"
|
||
class="cards-scroll"
|
||
show-scrollbar="false"
|
||
>
|
||
<view class="cards-wrapper">
|
||
<view
|
||
class="summary-card"
|
||
v-for="(card, index) in cardsData"
|
||
:key="index"
|
||
>
|
||
<view class="card-title">{{ card.title }}</view>
|
||
<view class="card-value">人民币：{{ formatNumber(card.valueCNY) }}</view>
|
||
<view class="card-value">美元：{{ formatNumber(card.valueUSD) }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'SummaryCards',
|
||
props: {
|
||
// 接收卡片数据，格式为数组对象
|
||
cardsData: {
|
||
type: Array,
|
||
default: () => [
|
||
{ title: '当前总库存量', value: 0, trend: 0 },
|
||
{ title: '在途物料数量', value: 0, trend: 0 },
|
||
{ title: '今日入库量', value: 0, trend: 0 },
|
||
{ title: '今日出库量', value: 0, trend: 0 },
|
||
{ title: '预警信息', value: 0, trend: 0 }
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
formatNumber(num) {
|
||
if (isNaN(num)) return '0'; // 兜底处理
|
||
return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 保留2位小数+千位分隔符
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.summary-cards-container {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.cards-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
.cards-wrapper {
|
||
display: inline-flex;
|
||
gap: 16rpx;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
.summary-card {
|
||
min-width: 240rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-trend {
|
||
font-size: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.trend-up {
|
||
color: #00b42a;
|
||
}
|
||
|
||
.trend-down {
|
||
color: #f53f3f;
|
||
}
|
||
|
||
.trend-flat {
|
||
color: #888888;
|
||
}
|
||
</style>
|