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.

src/pages/booking/components/UserSection/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bg-white rounded-12 overflow-hidden mb-12">
+    <div class="flex flex-items-center border-box p-12 border-bottom">
+      <div class="font-size-16 font-500 color-000 line-height-24 flex-full">
+        入住信息
+      </div>
+      <div class="right">
+        <Stepper v-model="count" unit="间" />
+      </div>
+    </div>
+
+    <div class="border-box pl-12 pr-12">
+      <div
+        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
+        v-for="(item, index) in userFormList"
+        :key="index"
+      >
+        <div class="font-size-14 font-500 color-525866 mr-12">住客姓名</div>
+        <div class="right">
+          <input
+            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model.trim="item.visitorName"
+            placeholder="请输入姓名"
+            maxlength="11"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-items-center border-box pt-12 pb-12">
+        <div class="font-size-14 font-500 color-525866 mr-12">联系手机</div>
+        <div class="right">
+          <input
+            class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
+            v-model.trim="userFormList[0].contactPhone"
+            placeholder="请输入联系手机"
+            maxlength="11"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps, defineEmits } from "vue";
+import Stepper from "@/components/Stepper/index.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  userFormList: {
+    type: Object,
+    default: () => ({
+      visitorName: "",
+      contactPhone: "",
+    }),
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const count = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+</script>
+
+<style></style>