feat: 快速预定页面调整

src/pages-booking/components/DateRangeSection/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="border-box flex flex-items-center flex-justify-between mb-12">
+    <view class="left flex flex-items-center">
+      <text class="font-size-12 color-99A0AE mr-4">入住</text>
+      <text class="font-size-12 color-171717 mr-16">
+        {{ selectedDate.startDate }}
+      </text>
+      <text
+        class="total border-box rounded-50 flex flex-items-center font-size-11 color-43669A relative"
+        >1晚</text
+      >
+      <text class="font-size-12 color-99A0AE ml-16">离店</text>
+      <text class="font-size-12 color-171717 ml-4">
+        {{ selectedDate.endDate }}
+      </text>
+    </view>
+    <view class="flex flex-items-center">
+      <text class="font-size-12 color-2D91FF line-height-16">房间详情</text>
+      <uni-icons type="right" size="15" color="#99A0AE" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+// Props
+const props = defineProps({
+  selectedDate: {
+    type: Object,
+    default: () => {
+      return {
+        startDate: "",
+        endDate: "",
+      };
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.total {
+  border: 1px solid #43669a;
+  padding: 3px 6px;
+
+  &::after,
+  &::before {
+    content: "";
+    width: 8px;
+    height: 1px;
+    position: absolute;
+  }
+
+  &::before {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 1),
+      rgba(67, 102, 154, 0)
+    );
+    left: -9px;
+  }
+
+  &::after {
+    background: linear-gradient(
+      270deg,
+      rgba(67, 102, 154, 0),
+      rgba(67, 102, 154, 1)
+    );
+    right: -9px;
+  }
+}
+</style>