yangg 1 день назад
Родитель
Сommit
28e013938b

+ 11 - 11
src/views/system/screenconsole/component/InfoCards.vue

@@ -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;

+ 7 - 8
src/views/system/screenconsole/component/StatusCards.vue

@@ -17,7 +17,7 @@
           :lg="8"
         >
           <div 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>
             <div class="card-value">{{ item.value }}</div>
@@ -31,7 +31,7 @@
   
   <script setup lang="ts" name="StatusCards">
 import {
-  Edit, Refresh, Tools, Box, Folder, Monitor
+  DocumentChecked, Timer, Tools, Warning
 } from '@element-plus/icons-vue'
 import { defineProps ,computed} from 'vue'
 import { useRouter } from 'vue-router'
@@ -46,10 +46,10 @@ const props = defineProps({
 
 
 const statusList = computed(()=>[
-  { label: '待审核', value: props.statusData.pending_approval, icon: Edit },
-  { label: '待归还', value: props.statusData.pending_return, icon: Refresh },
-  { label: '待维修', value: props.statusData.pending_maintenance, icon: Tools },
-  { label: '已逾期', value: props.statusData.pending_overdue, icon: Box },
+  { label: '待审核', value: props.statusData.pending_approval, icon: DocumentChecked, color: '#409EFF' },
+  { label: '待归还', value: props.statusData.pending_return, icon: Timer, color: '#E6A23C' },
+  { label: '待维修', value: props.statusData.pending_maintenance, icon: Tools, color: '#67C23A' },
+  { label: '已逾期', value: props.statusData.pending_overdue, icon: Warning, color: '#F56C6C' },
 ])
 
 const router = useRouter()
@@ -99,7 +99,7 @@ const router = useRouter()
     text-align: center;
     padding: 10px;
     cursor: pointer;
-    box-sizing: border-box;
+    border: none !important;
     margin-bottom: 10px;
   }
   .card-icon {
@@ -110,7 +110,6 @@ const router = useRouter()
   .card-value {
     font-size: 20px;
     font-weight: bold;
-    color: #409EFF;
   }
   .card-label {
     font-size: 14px;