style(exceptionWorkorder):优化异常工单页面样式和交互
- 调整搜索区域布局和间距,统一组件尺寸 - 更新操作按钮样式,增加悬停效果 - 优化表格样式,改进表头和单元格布局 - 统一字体大小和颜色规范 - 重构分页控件样式,提升视觉一致性 - 修复导出功能参数传递问题 - 改进状态标签显示样式和颜色搭配
Showing
1 changed file
with
136 additions
and
111 deletions
| ... | @@ -116,7 +116,7 @@ | ... | @@ -116,7 +116,7 @@ |
| 116 | <th>异常类型</th> | 116 | <th>异常类型</th> |
| 117 | <th>严重程度</th> | 117 | <th>严重程度</th> |
| 118 | <th class="sortable">日期 ↕️</th> | 118 | <th class="sortable">日期 ↕️</th> |
| 119 | - <th>操作</th> | 119 | + <th class="action-header">操作</th> |
| 120 | </tr> | 120 | </tr> |
| 121 | </thead> | 121 | </thead> |
| 122 | <tbody> | 122 | <tbody> |
| ... | @@ -744,7 +744,7 @@ const handleExport = async () => { | ... | @@ -744,7 +744,7 @@ const handleExport = async () => { |
| 744 | 744 | ||
| 745 | ElMessage.info('正在导出数据,请稍候...') | 745 | ElMessage.info('正在导出数据,请稍候...') |
| 746 | 746 | ||
| 747 | - const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams.value) | 747 | + const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams) |
| 748 | 748 | ||
| 749 | // 创建下载链接 | 749 | // 创建下载链接 |
| 750 | const blob = new Blob([response as unknown as BlobPart], { | 750 | const blob = new Blob([response as unknown as BlobPart], { |
| ... | @@ -899,21 +899,20 @@ onMounted(() => { | ... | @@ -899,21 +899,20 @@ onMounted(() => { |
| 899 | 899 | ||
| 900 | <style scoped> | 900 | <style scoped> |
| 901 | .exception-workorder-container { | 901 | .exception-workorder-container { |
| 902 | - padding: 0px; | ||
| 903 | background: #f5f5f5; | 902 | background: #f5f5f5; |
| 904 | min-height: 100vh; | 903 | min-height: 100vh; |
| 905 | } | 904 | } |
| 906 | 905 | ||
| 907 | -/* 搜索区域样式 */ | 906 | +/* 搜索区域 */ |
| 908 | .search-section { | 907 | .search-section { |
| 909 | background: white; | 908 | background: white; |
| 910 | - padding: 16px 20px; | 909 | + padding: 16px; |
| 911 | border-bottom: 1px solid #e0e0e0; | 910 | border-bottom: 1px solid #e0e0e0; |
| 912 | } | 911 | } |
| 913 | 912 | ||
| 914 | .search-row { | 913 | .search-row { |
| 915 | display: flex; | 914 | display: flex; |
| 916 | - gap: 25px; | 915 | + gap: 16px; |
| 917 | align-items: center; | 916 | align-items: center; |
| 918 | flex-wrap: wrap; | 917 | flex-wrap: wrap; |
| 919 | margin-bottom: 12px; | 918 | margin-bottom: 12px; |
| ... | @@ -927,127 +926,147 @@ onMounted(() => { | ... | @@ -927,127 +926,147 @@ onMounted(() => { |
| 927 | display: flex; | 926 | display: flex; |
| 928 | align-items: center; | 927 | align-items: center; |
| 929 | gap: 8px; | 928 | gap: 8px; |
| 930 | - flex: 0 0 auto; | ||
| 931 | } | 929 | } |
| 932 | 930 | ||
| 933 | .search-item label { | 931 | .search-item label { |
| 934 | - color: #666; | 932 | + font-size: 12px; |
| 935 | - font-size: 14px; | 933 | + color: #333; |
| 936 | - width: 90px; | ||
| 937 | white-space: nowrap; | 934 | white-space: nowrap; |
| 938 | - text-align: right; | ||
| 939 | } | 935 | } |
| 940 | 936 | ||
| 941 | -.search-input { | 937 | +.search-input, .search-select { |
| 942 | - width: 180px; | 938 | + padding: 6px 8px; |
| 943 | - height: 32px; | 939 | + border: 1px solid #d9d9d9; |
| 944 | - border: 1px solid #ddd; | ||
| 945 | border-radius: 4px; | 940 | border-radius: 4px; |
| 946 | - padding: 0 8px; | 941 | + font-size: 12px; |
| 947 | - font-size: 14px; | 942 | + width: 120px; |
| 948 | } | 943 | } |
| 949 | 944 | ||
| 950 | -.search-select { | 945 | +.search-input:focus, .search-select:focus { |
| 951 | - width: 160px; | 946 | + outline: none; |
| 952 | - height: 32px; | 947 | + border-color: #1890ff; |
| 953 | - border: 1px solid #ddd; | ||
| 954 | - border-radius: 4px; | ||
| 955 | - padding: 0 8px; | ||
| 956 | - font-size: 14px; | ||
| 957 | - background: white; | ||
| 958 | } | 948 | } |
| 959 | 949 | ||
| 960 | .search-actions { | 950 | .search-actions { |
| 961 | - margin-left: auto; | ||
| 962 | display: flex; | 951 | display: flex; |
| 963 | - gap: 10px; | 952 | + gap: 8px; |
| 964 | } | 953 | } |
| 965 | 954 | ||
| 966 | -.search-btn, .reset-btn { | 955 | +.search-btn { |
| 967 | - padding: 6px 16px; | 956 | + background: #1890ff; |
| 957 | + color: white; | ||
| 968 | border: none; | 958 | border: none; |
| 969 | - border-radius: 4px; | 959 | + padding: 4px 8px; |
| 960 | + border-radius: 3px; | ||
| 961 | + font-size: 11px; | ||
| 970 | cursor: pointer; | 962 | cursor: pointer; |
| 971 | - font-size: 14px; | ||
| 972 | - height: 32px; | ||
| 973 | } | 963 | } |
| 974 | 964 | ||
| 975 | -.search-btn { | 965 | +.search-btn:hover { |
| 976 | - background: #007bff; | 966 | + background: #40a9ff; |
| 977 | - color: white; | ||
| 978 | } | 967 | } |
| 979 | 968 | ||
| 980 | .reset-btn { | 969 | .reset-btn { |
| 981 | - background: #6c757d; | 970 | + background: #ff7875; |
| 982 | color: white; | 971 | color: white; |
| 972 | + border: none; | ||
| 973 | + padding: 4px 8px; | ||
| 974 | + border-radius: 3px; | ||
| 975 | + font-size: 11px; | ||
| 976 | + cursor: pointer; | ||
| 977 | + height: 24px; | ||
| 978 | + display: flex; | ||
| 979 | + align-items: center; | ||
| 980 | +} | ||
| 981 | + | ||
| 982 | +.reset-btn:hover { | ||
| 983 | + background: #ff9c99; | ||
| 983 | } | 984 | } |
| 984 | 985 | ||
| 985 | -/* 操作按钮区域样式 */ | 986 | +/* 操作区域 */ |
| 986 | .action-section { | 987 | .action-section { |
| 987 | background: white; | 988 | background: white; |
| 988 | - padding: 12px 20px 12px 20px; | 989 | + padding: 12px 16px; |
| 989 | border-bottom: 1px solid #e0e0e0; | 990 | border-bottom: 1px solid #e0e0e0; |
| 990 | } | 991 | } |
| 991 | 992 | ||
| 992 | -.action-section .action-buttons { | 993 | +.action-buttons { |
| 993 | display: flex; | 994 | display: flex; |
| 994 | - gap: 10px; | 995 | + gap: 6px; |
| 995 | - justify-content: flex-start; | ||
| 996 | - align-items: center; | ||
| 997 | - margin: 0; | ||
| 998 | - padding: 0; | ||
| 999 | } | 996 | } |
| 1000 | 997 | ||
| 1001 | .action-btn { | 998 | .action-btn { |
| 1002 | - padding: 6px 16px; | 999 | + padding: 4px 8px; |
| 1003 | border: none; | 1000 | border: none; |
| 1004 | - border-radius: 4px; | 1001 | + border-radius: 3px; |
| 1002 | + font-size: 11px; | ||
| 1005 | cursor: pointer; | 1003 | cursor: pointer; |
| 1006 | - font-size: 14px; | 1004 | + transition: all 0.2s; |
| 1007 | - height: 32px; | ||
| 1008 | - font-weight: 500; | ||
| 1009 | } | 1005 | } |
| 1010 | 1006 | ||
| 1011 | .action-btn.primary { | 1007 | .action-btn.primary { |
| 1012 | - background: #007bff; | 1008 | + background: #1890ff; |
| 1013 | color: white; | 1009 | color: white; |
| 1014 | } | 1010 | } |
| 1015 | 1011 | ||
| 1012 | +.action-btn.primary:hover { | ||
| 1013 | + background: #40a9ff; | ||
| 1014 | +} | ||
| 1015 | + | ||
| 1016 | .action-btn.success { | 1016 | .action-btn.success { |
| 1017 | - background: #28a745; | 1017 | + background: #52c41a; |
| 1018 | color: white; | 1018 | color: white; |
| 1019 | } | 1019 | } |
| 1020 | 1020 | ||
| 1021 | +.action-btn.success:hover { | ||
| 1022 | + background: #73d13d; | ||
| 1023 | +} | ||
| 1024 | + | ||
| 1021 | .action-btn.secondary { | 1025 | .action-btn.secondary { |
| 1022 | - background: #6c757d; | 1026 | + background: #52c41a; |
| 1023 | color: white; | 1027 | color: white; |
| 1024 | } | 1028 | } |
| 1025 | 1029 | ||
| 1026 | -/* 表格区域样式 */ | 1030 | +.action-btn.secondary:hover { |
| 1031 | + background: #73d13d; | ||
| 1032 | +} | ||
| 1033 | + | ||
| 1034 | +/* 表格区域 */ | ||
| 1027 | .table-section { | 1035 | .table-section { |
| 1028 | background: white; | 1036 | background: white; |
| 1029 | - margin-bottom: 0; | 1037 | + margin: 16px; |
| 1038 | + border-radius: 6px; | ||
| 1039 | + overflow: hidden; | ||
| 1040 | + box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||
| 1030 | } | 1041 | } |
| 1031 | 1042 | ||
| 1032 | .table-header { | 1043 | .table-header { |
| 1033 | - padding: 10px 20px; | 1044 | + padding: 8px 16px; |
| 1034 | - border-bottom: 1px solid #eee; | 1045 | + background: #fafafa; |
| 1046 | + border-bottom: 1px solid #e0e0e0; | ||
| 1035 | display: flex; | 1047 | display: flex; |
| 1036 | justify-content: flex-end; | 1048 | justify-content: flex-end; |
| 1037 | } | 1049 | } |
| 1038 | 1050 | ||
| 1039 | .table-controls { | 1051 | .table-controls { |
| 1040 | display: flex; | 1052 | display: flex; |
| 1041 | - gap: 5px; | 1053 | + gap: 4px; |
| 1042 | } | 1054 | } |
| 1043 | 1055 | ||
| 1044 | .control-btn { | 1056 | .control-btn { |
| 1045 | - padding: 4px 8px; | ||
| 1046 | - border: 1px solid #ddd; | ||
| 1047 | background: white; | 1057 | background: white; |
| 1048 | - border-radius: 4px; | 1058 | + border: 1px solid #d9d9d9; |
| 1059 | + border-radius: 3px; | ||
| 1060 | + padding: 4px 8px; | ||
| 1061 | + font-size: 11px; | ||
| 1049 | cursor: pointer; | 1062 | cursor: pointer; |
| 1050 | - font-size: 12px; | 1063 | + transition: all 0.2s; |
| 1064 | +} | ||
| 1065 | + | ||
| 1066 | +.control-btn:hover { | ||
| 1067 | + background: #f0f8ff; | ||
| 1068 | + border-color: #1890ff; | ||
| 1069 | + color: #1890ff; | ||
| 1051 | } | 1070 | } |
| 1052 | 1071 | ||
| 1053 | .table-container { | 1072 | .table-container { |
| ... | @@ -1077,31 +1096,29 @@ onMounted(() => { | ... | @@ -1077,31 +1096,29 @@ onMounted(() => { |
| 1077 | .data-table { | 1096 | .data-table { |
| 1078 | width: 100%; | 1097 | width: 100%; |
| 1079 | border-collapse: collapse; | 1098 | border-collapse: collapse; |
| 1080 | - font-size: 14px; | ||
| 1081 | } | 1099 | } |
| 1082 | 1100 | ||
| 1083 | -.data-table th { | 1101 | +.data-table th, |
| 1084 | - background: #f8f9fa; | 1102 | +.data-table td { |
| 1085 | - border: 1px solid #ddd; | 1103 | + padding: 8px 12px; |
| 1086 | - padding: 12px 8px; | ||
| 1087 | text-align: left; | 1104 | text-align: left; |
| 1105 | + border-bottom: 1px solid #f0f0f0; | ||
| 1106 | + font-size: 12px; | ||
| 1107 | +} | ||
| 1108 | + | ||
| 1109 | +.data-table th { | ||
| 1110 | + background: #fafafa; | ||
| 1088 | font-weight: 600; | 1111 | font-weight: 600; |
| 1089 | color: #333; | 1112 | color: #333; |
| 1090 | white-space: nowrap; | 1113 | white-space: nowrap; |
| 1091 | } | 1114 | } |
| 1092 | 1115 | ||
| 1093 | -.data-table td { | 1116 | +.data-table th.action-header { |
| 1094 | - border: 1px solid #ddd; | 1117 | + text-align: center; |
| 1095 | - padding: 12px 8px; | ||
| 1096 | - vertical-align: middle; | ||
| 1097 | -} | ||
| 1098 | - | ||
| 1099 | -.data-table tbody tr:nth-child(even) { | ||
| 1100 | - background: #f8f9fa; | ||
| 1101 | } | 1118 | } |
| 1102 | 1119 | ||
| 1103 | .data-table tbody tr:hover { | 1120 | .data-table tbody tr:hover { |
| 1104 | - background: #e9ecef; | 1121 | + background: #f5f7fa; |
| 1105 | } | 1122 | } |
| 1106 | 1123 | ||
| 1107 | .sortable { | 1124 | .sortable { |
| ... | @@ -1109,26 +1126,31 @@ onMounted(() => { | ... | @@ -1109,26 +1126,31 @@ onMounted(() => { |
| 1109 | user-select: none; | 1126 | user-select: none; |
| 1110 | } | 1127 | } |
| 1111 | 1128 | ||
| 1129 | +.table-checkbox { | ||
| 1130 | + width: 14px; | ||
| 1131 | + height: 14px; | ||
| 1132 | + cursor: pointer; | ||
| 1133 | +} | ||
| 1134 | + | ||
| 1112 | .select-all, .row-select { | 1135 | .select-all, .row-select { |
| 1113 | margin: 0; | 1136 | margin: 0; |
| 1114 | } | 1137 | } |
| 1115 | 1138 | ||
| 1116 | .status-badge, .severity-badge { | 1139 | .status-badge, .severity-badge { |
| 1117 | - padding: 2px 8px; | 1140 | + padding: 2px 6px; |
| 1118 | - border-radius: 12px; | 1141 | + border-radius: 3px; |
| 1119 | - font-size: 12px; | 1142 | + font-size: 10px; |
| 1120 | - font-weight: 500; | ||
| 1121 | display: inline-block; | 1143 | display: inline-block; |
| 1122 | } | 1144 | } |
| 1123 | 1145 | ||
| 1124 | .status-badge.pending { | 1146 | .status-badge.pending { |
| 1125 | - background: #fff3cd; | 1147 | + background: #fff7e6; |
| 1126 | - color: #856404; | 1148 | + color: #fa8c16; |
| 1127 | } | 1149 | } |
| 1128 | 1150 | ||
| 1129 | .status-badge.processing { | 1151 | .status-badge.processing { |
| 1130 | - background: #d1ecf1; | 1152 | + background: #e6f7ff; |
| 1131 | - color: #0c5460; | 1153 | + color: #1890ff; |
| 1132 | } | 1154 | } |
| 1133 | 1155 | ||
| 1134 | .status-badge.resolved { | 1156 | .status-badge.resolved { |
| ... | @@ -1200,24 +1222,24 @@ onMounted(() => { | ... | @@ -1200,24 +1222,24 @@ onMounted(() => { |
| 1200 | /* 表格内操作按钮容器 */ | 1222 | /* 表格内操作按钮容器 */ |
| 1201 | .table-actions { | 1223 | .table-actions { |
| 1202 | display: flex; | 1224 | display: flex; |
| 1203 | - gap: 8px; | 1225 | + gap: 4px; |
| 1204 | justify-content: center; | 1226 | justify-content: center; |
| 1205 | align-items: center; | 1227 | align-items: center; |
| 1206 | flex-wrap: wrap; | 1228 | flex-wrap: wrap; |
| 1207 | padding: 0 4px; | 1229 | padding: 0 4px; |
| 1208 | } | 1230 | } |
| 1209 | 1231 | ||
| 1210 | -/* 操作按钮样式 */ | 1232 | +/* 表格内操作按钮样式 */ |
| 1211 | -.action-btn { | 1233 | +.table-actions .action-btn { |
| 1212 | - padding: 4px 8px; | 1234 | + padding: 2px 6px; |
| 1213 | - font-size: 12px; | 1235 | + margin-right: 4px; |
| 1214 | - border-radius: 4px; | 1236 | + border: none; |
| 1215 | - font-weight: 500; | 1237 | + border-radius: 3px; |
| 1216 | - min-width: 60px; | 1238 | + font-size: 10px; |
| 1217 | - height: 28px; | 1239 | + cursor: pointer; |
| 1218 | display: inline-flex; | 1240 | display: inline-flex; |
| 1219 | align-items: center; | 1241 | align-items: center; |
| 1220 | - justify-content: center; | 1242 | + gap: 2px; |
| 1221 | white-space: nowrap; | 1243 | white-space: nowrap; |
| 1222 | } | 1244 | } |
| 1223 | 1245 | ||
| ... | @@ -1228,49 +1250,52 @@ onMounted(() => { | ... | @@ -1228,49 +1250,52 @@ onMounted(() => { |
| 1228 | 1250 | ||
| 1229 | /* 分页区域样式 */ | 1251 | /* 分页区域样式 */ |
| 1230 | .pagination-section { | 1252 | .pagination-section { |
| 1231 | - background: white; | ||
| 1232 | - padding: 12px 20px; | ||
| 1233 | - border-top: 1px solid #e0e0e0; | ||
| 1234 | display: flex; | 1253 | display: flex; |
| 1235 | justify-content: space-between; | 1254 | justify-content: space-between; |
| 1236 | align-items: center; | 1255 | align-items: center; |
| 1256 | + padding: 8px 16px; | ||
| 1257 | + background: #fafafa; | ||
| 1258 | + border-top: 1px solid #e0e0e0; | ||
| 1237 | } | 1259 | } |
| 1238 | 1260 | ||
| 1239 | .pagination-info { | 1261 | .pagination-info { |
| 1240 | - display: flex; | 1262 | + font-size: 12px; |
| 1241 | - align-items: center; | ||
| 1242 | - gap: 10px; | ||
| 1243 | - font-size: 14px; | ||
| 1244 | color: #666; | 1263 | color: #666; |
| 1245 | } | 1264 | } |
| 1246 | 1265 | ||
| 1247 | .page-size-select { | 1266 | .page-size-select { |
| 1248 | - height: 28px; | 1267 | + padding: 4px 8px; |
| 1249 | - border: 1px solid #ddd; | 1268 | + border: 1px solid #d9d9d9; |
| 1250 | border-radius: 4px; | 1269 | border-radius: 4px; |
| 1251 | - padding: 0 8px; | 1270 | + font-size: 12px; |
| 1252 | - font-size: 14px; | 1271 | + background: white; |
| 1272 | + cursor: pointer; | ||
| 1253 | } | 1273 | } |
| 1254 | 1274 | ||
| 1255 | .pagination-controls { | 1275 | .pagination-controls { |
| 1256 | display: flex; | 1276 | display: flex; |
| 1257 | align-items: center; | 1277 | align-items: center; |
| 1258 | gap: 8px; | 1278 | gap: 8px; |
| 1259 | - font-size: 14px; | ||
| 1260 | } | 1279 | } |
| 1261 | 1280 | ||
| 1262 | .page-btn { | 1281 | .page-btn { |
| 1263 | - padding: 4px 12px; | 1282 | + padding: 4px 8px; |
| 1264 | - border: 1px solid #ddd; | 1283 | + border: 1px solid #d9d9d9; |
| 1284 | + border-radius: 3px; | ||
| 1265 | background: white; | 1285 | background: white; |
| 1266 | - border-radius: 4px; | ||
| 1267 | cursor: pointer; | 1286 | cursor: pointer; |
| 1268 | - font-size: 14px; | 1287 | + font-size: 11px; |
| 1288 | + transition: all 0.2s; | ||
| 1289 | +} | ||
| 1290 | + | ||
| 1291 | +.page-btn:hover:not(:disabled) { | ||
| 1292 | + background: #f0f8ff; | ||
| 1293 | + border-color: #1890ff; | ||
| 1294 | + color: #1890ff; | ||
| 1269 | } | 1295 | } |
| 1270 | 1296 | ||
| 1271 | .page-btn:disabled { | 1297 | .page-btn:disabled { |
| 1272 | - background: #f8f9fa; | 1298 | + opacity: 0.5; |
| 1273 | - color: #6c757d; | ||
| 1274 | cursor: not-allowed; | 1299 | cursor: not-allowed; |
| 1275 | } | 1300 | } |
| 1276 | 1301 | ... | ... |
-
Please register or login to post a comment