|
@@ -12,7 +12,7 @@
|
|
|
class="card"
|
|
|
@click="handleClick(item)"
|
|
|
>
|
|
|
- <el-icon :size="40" class="card-icon">
|
|
|
+ <el-icon :size="40" class="card-icon" :style="{ color: item.color }">
|
|
|
<component :is="item.icon" />
|
|
|
</el-icon>
|
|
|
|
|
@@ -25,8 +25,8 @@
|
|
|
|
|
|
<script setup lang="ts" name="InfoCards">
|
|
|
import {
|
|
|
- Coin, Box, Document, Avatar, Folder,
|
|
|
- Monitor, ShoppingCart, User, Setting, Tools
|
|
|
+ Goods, Box, Collection, Timer, RefreshRight,
|
|
|
+ DataLine, User
|
|
|
} from '@element-plus/icons-vue'
|
|
|
import { defineProps,computed } from 'vue'
|
|
|
|
|
@@ -38,13 +38,13 @@ const props = defineProps({
|
|
|
})
|
|
|
|
|
|
const infoList = computed(()=>[
|
|
|
- { label: '设备总数', value: props.summaryData.total_devices, icon: Coin },
|
|
|
- { label: '在借数', value: props.summaryData.borrowed_devices, icon: Box },
|
|
|
- { label: '在库数', value: props.summaryData.available_devices, icon: Document },
|
|
|
- { label: '今日借出', value: props.summaryData.today_borrowed, icon: Avatar },
|
|
|
- { label: '今日归还', value: props.summaryData.today_returned, icon: Folder },
|
|
|
- { label: '累计借用次数', value: props.summaryData.total_borrows, icon: Monitor },
|
|
|
- { label: '累计借用人数', value: props.summaryData.total_borrowers, icon: User },
|
|
|
+ { label: '设备总数', value: props.summaryData.total_devices, icon: Goods, color: '#409EFF' },
|
|
|
+ { label: '在借数', value: props.summaryData.borrowed_devices, icon: Box, color: '#F56C6C' },
|
|
|
+ { label: '在库数', value: props.summaryData.available_devices, icon: Collection, color: '#67C23A' },
|
|
|
+ { label: '今日借出', value: props.summaryData.today_borrowed, icon: Timer, color: '#E6A23C' },
|
|
|
+ { label: '今日归还', value: props.summaryData.today_returned, icon: RefreshRight, color: '#909399' },
|
|
|
+ { label: '累计借用次数', value: props.summaryData.total_borrows, icon: DataLine, color: '#9B59B6' },
|
|
|
+ { label: '累计借用人数', value: props.summaryData.total_borrowers, icon: User, color: '#3498DB' },
|
|
|
]);
|
|
|
function handleClick(item: any) {
|
|
|
console.log('点击信息卡片:', item.label);
|
|
@@ -80,7 +80,7 @@ function handleClick(item: any) {
|
|
|
text-align: center;
|
|
|
padding: 10px;
|
|
|
cursor: pointer;
|
|
|
- box-sizing: border-box;
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
.card-icon {
|
|
|
width: 40px;
|