<template>
    <q-card class="bg-white q-pb-md column reactive" style="width: 228px;height: 285px;overflow: hidden;">
      <div class="hotelCard-img" style="border-radius: 0; border-top-left-radius: 5px;border-top-right-radius: 5px;
      ">
        <q-img
          style="height: 100%;"
          src="https://placeimg.com/500/300/nature"
          :ratio="4/3"
        />
      </div>
      <div class="q-py-sm q-px-sm" style="width: 100%;">
        <div class="hotelCard-title text-weight-bold fz14">
          東京上野康福酒店H0TELCO東京上野康福酒店H0TELCO
        </div>
      </div>
      <div class="q-px-sm">
          <img v-for="item in 5" class="q-mr-xs" width="15" height="11" src="../../../assets/images/hotelCard0.png" />
      </div>
      <div class="q-px-sm row items-center justify-between no-wrap absolute" style="left: 0;right: 0;bottom: 16px;">
        <div>
          <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
          <span class="fz12 text-weight-bold text-grey-7">日本东京</span>
        </div>
        <div class="text-blue">
          <span class="fz18 text-weight-bold">521</span>
          <span class="fz15 text-weight-bold">{{$t('unit.jp')}}</span>
          <span class="fz15 q-pl-sm">{{$t('hotel.col.low')}}</span>
        </div>
      </div>
    </q-card>
  </template>

  <script lang="ts">
  import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  import useScrollModule from '../../../module/scrollbar/scrollModule'
  import { useQuasar } from 'quasar'
  export default defineComponent({
    props: {},
    setup(props, context) {
      const { t } = useI18n()
      const $q = useQuasar()
      const data = reactive({
        scrollStyle:{} as any
      })
      data.scrollStyle = useScrollModule().scrollStyle
      const methods = {

      }
      return { ...toRefs(data), ...methods}
    }
  })
  </script>

  <style>
  .hotelCard-img{
    width: 228px;
    height: 162px;
    overflow: hidden;
  }
  .hotelCard-title{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  </style>
