feat(order): add order detail and list pages with components for order management

- Implemented order detail page with components for displaying order status, user info, and refund options.
- Created order list page with pagination and order cards for displaying all orders.
- Added styles for order detail and list pages.
- Developed a prompt document outlining component requirements for the order management system.
- Introduced a new Card component for quick booking with a responsive design.
- Enhanced Tabs component for better navigation between different categories.
- Integrated z-paging for efficient data loading and management in order and quick booking lists.
- Added service order card component for displaying service requests with call functionality.
- Updated main CSS for improved viewport handling.
This commit is contained in:
duanshuwen
2026-05-26 15:38:33 +08:00
parent fa76435e38
commit ad93ca5e8e
194 changed files with 17069 additions and 2 deletions

View File

@@ -0,0 +1,62 @@
.date-scroll {
width: 100%;
}
.date-list {
display: flex;
padding: 8px 12px 12px;
}
.date-item {
width: 76px;
min-width: 76px;
height: 86px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
margin-right: 12px;
padding: 8px 10px;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.date-item .label {
margin-bottom: 6px;
color: #999;
}
.date-item .md {
margin-bottom: 6px;
color: #000;
}
.date-item .status {
font-size: 12px;
color: #999; }
.date-item.selected {
border: 1px solid $theme-color-500;
background: $theme-color-50;
}
.date-item.selected .label,
.date-item.selected .md,
.date-item.selected .status {
color: $theme-color-500;
}
.date-item.disabled {
opacity: 0.45;
}
.date-item .check {
position: absolute;
right: 0;
bottom: 0;
background: $theme-color-500;
color: #fff;
width: 18px;
height: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}