|
@@ -0,0 +1,95 @@
|
|
|
+<template>
|
|
|
+ <div class="info-cards">
|
|
|
+ <div class="info-title">
|
|
|
+ 数据简报
|
|
|
+ </div>
|
|
|
+ <div class="custom-line"></div>
|
|
|
+ <div class="card-grid">
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in infoList"
|
|
|
+ :key="index"
|
|
|
+ class="card"
|
|
|
+ @click="handleClick(item)"
|
|
|
+ >
|
|
|
+ <el-icon :size="40" class="card-icon">
|
|
|
+ <component :is="item.icon" />
|
|
|
+ </el-icon>
|
|
|
+
|
|
|
+ <div class="card-value">{{ item.value }}</div>
|
|
|
+ <div class="card-label">{{ item.label }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="InfoCards">
|
|
|
+import {
|
|
|
+ Coin, Box, Document, Avatar, Folder,
|
|
|
+ Monitor, ShoppingCart, User, Setting, Tools
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+const infoList = [
|
|
|
+ { label: '借用数', value: 195, icon: Coin },
|
|
|
+ { label: '设备柜', value: 15, icon: Box },
|
|
|
+ { label: '审核数', value: 14, icon: Document },
|
|
|
+ { label: '学生数', value: 114, icon: Avatar },
|
|
|
+ { label: '盘点数', value: 3, icon: Folder },
|
|
|
+ { label: '设备数', value: 95, icon: Monitor },
|
|
|
+ { label: '仓库数', value: 3, icon: ShoppingCart },
|
|
|
+ { label: '库位数', value: 5, icon: Setting },
|
|
|
+ { label: '管理员', value: 10, icon: User },
|
|
|
+ { label: '维修数', value: 10, icon: Tools },
|
|
|
+];
|
|
|
+function handleClick(item: any) {
|
|
|
+ console.log('点击信息卡片:', item.label);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.custom-line {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #ccc;
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.info-title{
|
|
|
+ padding-left: 10%;
|
|
|
+ padding-top:10px;
|
|
|
+ font-size: 30px;
|
|
|
+}
|
|
|
+.info-cards{
|
|
|
+ background: #fff;
|
|
|
+ height: 400px;
|
|
|
+}
|
|
|
+.card-grid {
|
|
|
+ padding:30px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+.card {
|
|
|
+ width: calc(20% - 12px);
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.card-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.card-value {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #67C23A;
|
|
|
+}
|
|
|
+.card-label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+</style>
|