6c353163df
- Delete unused local image asset and unused GoodInfo SCSS stylesheet - Replace legacy border utility classes with modern Tailwind border-t syntax - Fix incorrect 100px font size on date selector input labels, update to 10px - Refactor LocationCard to use Lucide Phone/Navigation icons instead of VanIcons, improve button styling - Overhaul ImageSwiper component: add proper refs, improve scroll logic, replace VanIcons with Lucide icons, clean up redundant code - Update goods detail and quick booking pages to properly use Pinia selected date store, add date data normalization - Fix scrollbar styles and linear gradient syntax in goods detail page - Update development environment auth token for local development
64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex items-end justify-between my-[12px] px-[12px]" @click="showCalendar">
|
|
<div class="flex-1 relative">
|
|
<div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">入住日期</div>
|
|
<div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
|
|
<div class="flex items-baseline gap-[4px]">
|
|
<span class="text-[16px] font-medium text-[#333]">{{ checkInDate }}</span>
|
|
<span class="text-[10px] text-[#666]">{{ checkInDay }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center min-w-[40px] mx-[8px] mb-[10px]">
|
|
<span class="text-[12px] text-[#666]">{{ nights }}晚</span>
|
|
</div>
|
|
|
|
<div class="flex-1 relative">
|
|
<div class="absolute top-[-6px] left-[12px] text-[10px] text-ink-600 bg-white px-[4px]">退房日期</div>
|
|
<div class="flex items-center justify-start border border-[#f0f0f0] rounded-[8px] px-[12px] py-[10px] bg-white">
|
|
<div class="flex items-baseline gap-[4px]">
|
|
<span class="text-[16px] font-medium text-[#333]">{{ checkOutDate }}</span>
|
|
<span class="text-[10px] text-[#666]">{{ checkOutDay }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from "vue";
|
|
|
|
// 定义事件
|
|
const emit = defineEmits(["showCalendar"]);
|
|
|
|
// 定义方法
|
|
const showCalendar = () => {
|
|
emit("showCalendar");
|
|
};
|
|
|
|
// Props定义
|
|
const props = defineProps({
|
|
checkInDate: {
|
|
type: String,
|
|
default: "08月25日",
|
|
},
|
|
checkOutDate: {
|
|
type: String,
|
|
default: "08月25日",
|
|
},
|
|
checkInDay: {
|
|
type: String,
|
|
default: "周一",
|
|
},
|
|
checkOutDay: {
|
|
type: String,
|
|
default: "周一",
|
|
},
|
|
nights: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
});
|
|
</script>
|