74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<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" @click="emit('click')">
|
|
<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, defineEmits } from "vue";
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
selectedDate: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
startDate: "",
|
|
endDate: "",
|
|
};
|
|
},
|
|
},
|
|
});
|
|
const emit = defineEmits(["click"]);
|
|
</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>
|