feat: 快速预定页面调整

2025-10-25 14:05:34 +08:00
parent ea36177f05
commit b9c1f45b29
24 changed files with 458 additions and 1301 deletions
--- a/src/pages-booking/components/FooterSection/index.vue
+++ b/src/pages-booking/components/FooterSection/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <view
+    class="booking-footer border-box bg-white flex flex-items-center font-family-misans-vf"
+  >
+    <text class="font-size-14 font-500 color-525866 mr-4"> 在线付 </text>
+    <text
+      class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
+      >88</text
+    >
+    <!-- <view class="flex flex-items-center" @click="emit('detailClick')">
+      <text class="font-size-12 color-A3A3A3 mr-4">明细</text>
+      <uni-icons type="up" size="16" color="#A3A3A3" />
+    </view> -->
+    <view
+      class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
+      @click="handleBooking"
+    >
+      <image
+        class="icon"
+        src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
+      />
+      <text class="font-size-16 font-500 color-white">立即预定</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["detailClick"]);
+</script>
+
+<style scoped lang="scss">
+.booking-footer {
+  border-radius: 15px 15px 0 0;
+  padding: 12px 12px 42px;
+}
+
+.amt {
+  &::before {
+    content: "¥";
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.btn {
+  width: 120px;
+  height: 48px;
+  background: linear-gradient(90deg, #ff3d60 57%, #ff990c 100%);
+}
+
+.icon {
+  height: 48px;
+  width: 34px;
+}
+</style>