120 lines
2.5 KiB
Vue
120 lines
2.5 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.value) }}</view>
|
|
<view
|
|
class="card-trend"
|
|
:class="{ 'trend-up': card.trend > 0, 'trend-down': card.trend < 0, 'trend-flat': card.trend === 0 }"
|
|
>
|
|
<text v-if="card.trend !== 0">
|
|
<uni-icons
|
|
:type="card.trend > 0 ? 'arrowup' : 'arrowdown'"
|
|
size="16"
|
|
></uni-icons>
|
|
{{ Math.abs(card.trend) }}%
|
|
{{ card.trend > 0 ? '环比上月' : '环比昨日' }}
|
|
</text>
|
|
<text v-else>持平</text>
|
|
</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) {
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
}
|
|
}
|
|
};
|
|
</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>
|