From 63c94da216189845b66acdd065a9af7115cd8176 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 13 May 2026 15:35:53 +0000
Subject: [PATCH] style(web): update travel reimbursement create view styles

- travel-reimbursement-create-view.css: update travel form styles
---
 .../travel-reimbursement-create-view.css      | 231 ++++++++++++++++++
 1 file changed, 231 insertions(+)

diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view.css b/web/src/assets/styles/views/travel-reimbursement-create-view.css
index 92225e7..1bfb073 100644
--- a/web/src/assets/styles/views/travel-reimbursement-create-view.css
+++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css
@@ -399,6 +399,237 @@
   font-weight: 850;
 }
 
+.expense-query-block {
+  gap: 10px;
+}
+
+.expense-query-window-label {
+  margin: -4px 0 0;
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.expense-query-summary-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.expense-query-summary-chip {
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+  background: #eef2ff;
+  color: #3730a3;
+}
+
+.expense-query-summary-chip.draft {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.expense-query-summary-chip.in_progress {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.expense-query-summary-chip.completed {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.expense-query-summary-chip.other {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.expense-query-record-list {
+  display: grid;
+  gap: 8px;
+}
+
+.expense-query-record-list.compact .expense-query-record-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid #dbe4ee;
+  border-radius: 14px;
+  background: #fbfdff;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.expense-query-record-list.compact .expense-query-record-card:hover {
+  transform: translateY(-1px);
+  border-color: #bfdbfe;
+  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
+}
+
+.expense-query-record-card > i {
+  color: #94a3b8;
+  font-size: 16px;
+}
+
+.expense-query-record-main {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+  flex: 1;
+}
+
+.expense-query-record-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.expense-query-record-top strong {
+  min-width: 0;
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.expense-query-record-top strong,
+.expense-query-record-card p,
+.expense-query-record-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expense-query-record-status {
+  flex-shrink: 0;
+  min-height: 22px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 800;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.expense-query-record-status.draft {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.expense-query-record-status.in_progress {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.expense-query-record-status.completed {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.expense-query-record-card p {
+  margin: 0;
+  color: #334155;
+  font-size: 12px;
+}
+
+.expense-query-record-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.expense-query-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 2px;
+}
+
+.expense-query-pager-btn {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #dbe4ee;
+  border-radius: 999px;
+  background: #fff;
+  color: #475569;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.expense-query-pager-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.expense-query-pager-btn:not(:disabled):hover {
+  border-color: #bfdbfe;
+  color: #2563eb;
+  background: #f8fbff;
+}
+
+.expense-query-pager-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.expense-query-pager-dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #cbd5e1;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.expense-query-pager-dot.active {
+  background: #2563eb;
+  transform: scale(1.15);
+}
+
+.expense-query-empty {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  border: 1px dashed #dbe4ee;
+  border-radius: 16px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.expense-query-empty i {
+  font-size: 18px;
+  color: #94a3b8;
+}
+
+.expense-query-hint {
+  margin: 0;
+  color: #64748b;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
 .message-detail-chip-row,
 .capability-chip-row {
   display: flex;