From 1afab6f99376a3ac33ab5e0f2dbf5e75f07fc024 Mon Sep 17 00:00:00 2001
From: 快乐的昕的电脑 <快乐的昕的电脑@DESKTOP-C2BQPQU>
Date: 星期一, 13 十月 2025 17:00:18 +0800
Subject: [PATCH] 优化
---
components/mold.vue | 134 +++++++++++++++++++++++++++++++++++---------
1 files changed, 105 insertions(+), 29 deletions(-)
diff --git a/components/mold.vue b/components/mold.vue
index f2dc402..d32fd6e 100644
--- a/components/mold.vue
+++ b/components/mold.vue
@@ -56,37 +56,40 @@
</view>
</view>
- <!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍� -->
+ <!-- 鍒�鍏蜂娇鐢ㄨ褰曡〃鏍硷紙閲嶅啓鏍峰紡浠ヨ创鍚堢ず渚嬪浘锛� -->
<view class="table-section">
- <table>
+ <table class="styled-table">
<thead>
<tr>
- <th>鍒�鍏风紪鍙�</th>
- <th>鍒�鍏峰悕绉�</th>
- <th>涓婂垁鏃堕棿</th>
- <th>涓婂垁璁℃暟</th>
- <th>涓嬪垁鏃堕棿</th>
- <th>涓嬪垁璁℃暟</th>
- <th>浣跨敤娆℃暟</th>
- <th>浣跨敤涓婇檺</th>
- <th>瀵垮懡姣�%</th>
- <th>瀵垮懡姣旈璀﹀��</th>
- <th>棰勮鐘舵��</th>
+ <th style="width:8%">鍒�鍏风紪鍙�</th>
+ <th style="width:14%">鍒�鍏峰悕绉�</th>
+ <th style="width:12%">涓婂垁鏃堕棿 <span class="header-badge">1</span></th>
+ <th class="num" style="width:8%">涓婂垁璁℃暟</th>
+ <th style="width:12%">涓嬪垁鏃堕棿</th>
+ <th class="num" style="width:8%">涓嬪垁璁℃暟</th>
+ <th class="num" style="width:8%">浣跨敤娆℃暟</th>
+ <th class="num" style="width:8%">浣跨敤涓婇檺</th>
+ <th class="num" style="width:8%">瀵垮懡姣�%</th>
+ <th class="num" style="width:8%">瀵垮懡姣旈璀﹀��</th>
+ <th style="width:8%">棰勮鐘舵��</th>
</tr>
</thead>
<tbody>
- <tr v-for="item in toolRecords" :key="item.id">
+ <tr v-for="(item, idx) in toolRecords" :key="item.id" :class="{'row-odd': idx % 2 === 0}">
<td>{{ item.no }}</td>
- <td>{{ item.name }}</td>
+ <td class="left">{{ item.name }}</td>
<td>{{ item.upTime }}</td>
- <td>{{ item.upCount }}</td>
+ <td class="num">{{ item.upCount ?? '' }}</td>
<td>{{ item.downTime }}</td>
- <td>{{ item.downCount }}</td>
- <td>{{ item.useCount }}</td>
- <td>{{ item.useLimit }}</td>
- <td>{{ item.lifePercent }}</td>
- <td>{{ item.lifeWarn }}</td>
- <td :class="item.warnStatus === '棰勮' ? 'warn' : ''">{{ item.warnStatus }}</td>
+ <td class="num">{{ item.downCount ?? '' }}</td>
+ <td class="num">{{ item.useCount ?? '' }}</td>
+ <td class="num">{{ item.useLimit ?? '' }}</td>
+ <td class="num">{{ item.lifePercent }}</td>
+ <td class="num">{{ item.lifeWarn }}</td>
+ <td :class="item.warnStatus === '棰勮' ? 'warn-cell' : (item.warnStatus === '姝ｅ父' ? 'ok-cell' : '')">
+ <span v-if="item.warnStatus === '棰勮'" class="warn-badge">璀﹀憡</span>
+ <span v-else>{{ item.warnStatus }}</span>
+ </td>
</tr>
<tr v-if="!toolRecords.length">
<td colspan="11">鏆傛棤鏁版嵁</td>
@@ -562,16 +565,89 @@
overflow-x: auto;
}
- table {
+ /* 鏂扮殑琛ㄦ牸鏍峰紡锛岃创杩戞埅鍥鹃鏍� */
+ table.styled-table {
width: 100%;
- border-collapse: collapse;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 2px solid #bfbfbf;
+ background: #fff;
}
- th, td {
- border: 1px solid #ccc;
- padding: 8px 4px;
- text-align: center;
- font-size: 1vw;
+ table.styled-table thead th {
+ background: #fafafa;
+ border-bottom: 2px solid #bfbfbf;
+ padding: 10px 6px;
+ font-weight: bold;
+ font-size: 1vw;
+ text-align: center;
+ }
+
+ table.styled-table tbody td {
+ border-bottom: 1px solid #e8e8e8;
+ padding: 10px 6px;
+ font-size: 0.95vw;
+ vertical-align: middle;
+ }
+
+ .table-section table th:first-child,
+ .table-section table td:first-child {
+ border-left: 2px solid #bfbfbf;
+ }
+
+ .table-section table th:last-child,
+ .table-section table td:last-child {
+ border-right: 2px solid #bfbfbf;
+ }
+
+ .row-odd {
+ background: #fff;
+ }
+
+ .row-odd + tr {
+ background: #fafafa;
+ }
+
+ .num {
+ text-align: right;
+ padding-right: 12px;
+ font-variant-numeric: tabular-nums;
+ }
+
+ .left {
+ text-align: left;
+ padding-left: 8px;
+ }
+
+ .warn-cell {
+ color: #d93025;
+ font-weight: bold;
+ }
+
+ .ok-cell {
+ color: #333;
+ }
+
+ .warn-badge {
+ display: inline-block;
+ background: #ff4d4f;
+ color: #fff;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-weight: bold;
+ font-size: 0.9vw;
+ }
+
+ .header-badge {
+ display: inline-block;
+ background: #fff7e6;
+ color: #8a6d00;
+ border: 1px solid #ffe58f;
+ padding: 1px 6px;
+ border-radius: 3px;
+ margin-left: 6px;
+ font-size: 0.8vw;
+ vertical-align: middle;
}
.warn {
--
Gitblit v1.9.3