<template>
  <view class="bg-white rounded-12 overflow-hidden mb-12">
    <view class="flex flex-items-center border-box p-12 border-bottom">
      <view class="font-size-16 font-500 color-000 line-height-24 flex-full"
        >入住信息</view
      >
      <view class="right">
        <Stepper v-model="quantity" unit="间" />
      </view>
    </view>

    <view class="border-box pl-12 pr-12">
      <view
        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
        v-for="item in quantity"
        :key="item"
      >
        <view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
        <view class="right">
          <input
            class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
            placeholder="请输入姓名"
            maxlength="11"
          />
        </view>
      </view>

      <view class="flex flex-items-center border-box pt-12 pb-12">
        <view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
        <view class="right">
          <input
            class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
            placeholder="请输入联系手机"
            maxlength="11"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Stepper from "@/components/Stepper/index.vue";

const quantity = ref(1);
</script>

<style></style>
