<template>
|
<div>
|
<!-- 顶部统计卡片 -->
|
<div class="stats-cards">
|
<div
|
v-for="item in statItems"
|
:key="item.name"
|
class="stat-card"
|
>
|
<img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
|
<div class="card-content">
|
<span class="card-label">{{ item.name }}</span>
|
<span class="card-value">{{ item.value }}</span>
|
<div class="card-compare" :class="compareClass(Number(item.rate))">
|
<span>同比</span>
|
<span class="compare-value">{{ formatPercent(item.rate) }}</span>
|
<span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { orderCount } from '@/api/viewIndex.js'
|
|
const statItems = ref([])
|
|
const formatPercent = (val) => {
|
const num = Number(val) || 0
|
return `${num.toFixed(2)}%`
|
}
|
|
const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')
|
|
const fetchData = () => {
|
orderCount()
|
.then((res) => {
|
if (res.code === 200 && Array.isArray(res.data)) {
|
statItems.value = res.data.map((item) => ({
|
name: item.name,
|
value: item.value,
|
rate: item.rate,
|
}))
|
}
|
})
|
.catch((err) => {
|
console.error('获取订单数量统计失败:', err)
|
})
|
}
|
|
onMounted(() => {
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.stats-cards {
|
display: flex;
|
gap: 30px;
|
}
|
|
.stat-card {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
background-image: url('@/assets/BI/border@2x.png');
|
background-size: 100% 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
height: 142px;
|
}
|
|
.card-icon {
|
width: 100px;
|
height: 100px;
|
margin: 20px 20px 0 10px;
|
}
|
|
.card-content {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.card-value {
|
font-weight: 500;
|
font-size: 40px;
|
background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
background-clip: text;
|
}
|
|
.card-label {
|
font-weight: 400;
|
font-size: 16px;
|
color: rgba(208, 231, 255, 0.7);
|
}
|
|
.card-compare {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
font-size: 15px;
|
color: #d0e7ff;
|
}
|
|
.card-compare > span:first-child {
|
font-size: 13px;
|
opacity: 0.8;
|
}
|
|
.compare-value {
|
font-weight: 600;
|
}
|
|
.compare-icon {
|
font-size: 14px;
|
position: relative;
|
top: -1px; /* 轻微上移，让箭头与文字垂直居中对齐 */
|
}
|
|
.compare-up .compare-value,
|
.compare-up .compare-icon {
|
color: #00c853;
|
}
|
|
.compare-down .compare-value,
|
.compare-down .compare-icon {
|
color: #ff5252;
|
}
|
|
</style>
|
