新增酒店详情判断

src/components/hotel/list/hotelDetails.vue

 <template>
-  <q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
-    <div class="q-px-lg q-mb-lg" :class="{ 'row justify-between': $q.platform.is.desktop }">
-      <div :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
+  <q-card
+    class="bg-white q-py-lg column"
+    style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh"
+  >
+    <div
+      class="q-px-lg q-mb-lg"
+      :class="{ 'row justify-between': $q.platform.is.desktop }"
+    >
+      <div
+        :class="{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }"
+      >
         <div class="mobile-only row items-center">
-          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{ h.Name }}{{ h.Name }}{{ h.Name }}</div>
-          <q-icon class="text-grey-13 cursor-pointer text-right q-ml-sm" name="close" size="md" v-close-popup></q-icon>
+          <div class="text-weight-bold fz20 ellipsis" style="width: 280px">
+            {{ h.Name }}{{ h.Name }}{{ h.Name }}
+          </div>
+          <q-icon
+            class="text-grey-13 cursor-pointer text-right q-ml-sm"
+            name="close"
+            size="md"
+            v-close-popup
+          ></q-icon>
         </div>
         <div class="text-weight-bold fz20 ellipsis desktop-only">{{ h.Name }}</div>
         <div :class="{ 'q-ml-md': $q.platform.is.desktop }">
           <q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly />
         </div>
       </div>
-      <q-icon class="text-grey-13 cursor-pointer desktop-only" name="close" size="md" v-close-popup></q-icon>
+      <q-icon
+        class="text-grey-13 cursor-pointer desktop-only"
+        name="close"
+        size="md"
+        v-close-popup
+      ></q-icon>
     </div>
-    <q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col q-px-lg">
-      <!-- <div class="q-py-md text-blue">
-        <span class="fz14 text-weight-bold q-pr-sm">{{ $t('hotel.col.four') }}</span>
-        <span class="text-h5 text-weight-bold">500-700</span>
-        <span class="fz14 text-weight-bold">{{ $t('unit.jp') }}</span>
-      </div> -->
+    <q-scroll-area
+      :thumb-style="scrollStyle.thumbStyle"
+      :bar-style="scrollStyle.barStyle"
+      class="col q-px-lg"
+    >
       <div class="row nowrap">
         <q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
         <span class="col fz14 text-weight-bold text-blick">{{ h.Address }}</span>
       </div>
-      <div class="q-pt-sm" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
+      <div
+        class="q-pt-sm"
+        :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
+      >
         <div>
           <q-icon class="text-grey-13 q-mr-xs" name="phone" size="xs"></q-icon>
-          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.zuoji') }}:</span>
+          <span class="fz14 text-weight-bold text-blick"
+            >{{ $t("hotel.details.zuoji") }}:</span
+          >
           <span class="fz14 text-weight-bold text-blue q-ml-sm q-mr-md">{{ h.Tel }}</span>
         </div>
-        <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
-          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.chuanzhen') }}:</span>
-          <span class="fz14 text-weight-bold text-blue q-ml-sm">{{ h.Fax == '' ? $t('noneFax') : h.Fax }}</span>
-        </div>
-        <div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
-          <span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.guanwang') }}:</span>
-          <a class="fz14 text-weight-bold text-blue q-ml-sm" :href="h.URL" target="_blank">{{ h.URL }}</a>
-        </div>
+        <div
+          :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }"
+        >
+          <span class="fz14 text-weight-bold text-blick"
+            >{{ $t("hotel.details.chuanzhen") }}:</span
+          >
+          <span class="fz14 text-weight-bold text-blue q-ml-sm">{{
+            h.Fax == "" ? $t("noneFax") : h.Fax
+          }}</span>
         </div>
-      <div class="q-py-lg no-wrap col" :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }">
-        <div class="row rounded-borders relative-position"
-          :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden"
-          v-if="h.List">
-          <div v-if="h.ChainBrand" class="f12 absolute-left bg-white"
-            style="padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px">
+        <div
+          :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }"
+        >
+          <span class="fz14 text-weight-bold text-blick"
+            >{{ $t("hotel.details.guanwang") }}:</span
+          >
+          <a
+            class="fz14 text-weight-bold text-blue q-ml-sm"
+            :href="h.URL"
+            target="_blank"
+            >{{ h.URL }}</a
+          >
+        </div>
+      </div>
+      <div
+        class="q-py-lg no-wrap col"
+        :class="{ row: $q.platform.is.desktop, column: $q.platform.is.mobile }"
+      >
+        <div
+          class="row rounded-borders relative-position"
+          :class="{
+            'col-6': $q.platform.is.desktop,
+            'height-320': $q.platform.is.mobile,
+          }"
+          style="overflow: hidden"
+          v-if="h.List"
+        >
+          <div
+            v-if="h.ChainBrand"
+            class="f12 absolute-left bg-white"
+            style="
+              padding: 5px;
+              bottom: unset;
+              z-index: 1;
+              border-bottom-right-radius: 4px;
+            "
+          >
             <div class="row items-center rounded-borders" style="overflow: hidden">
-              <div class="bg-dark text-white" style="padding: 0 4px; font-size: 12px">品牌</div>
-              <div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86">{{ h.ChainBrand }}
-              </div>
-            </div>
-          </div>
-          <div class="col-7"
-            :class="{ 'col-7': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
-            <q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[0].Path}`)"
-              :src="`http://imgfile.oytour.com${h.List[0].Path}`" spinner-color="drk" spinner-size="20px" height="100%"
-              mode="cover" />
+              <div class="bg-dark text-white" style="padding: 0 4px; font-size: 12px">
+                品牌
+              </div>
+              <div
+                class="text-dark"
+                style="padding: 0 4px; font-size: 12px; background: #f0bd86"
+              >
+                {{ h.ChainBrand }}
+              </div>
+            </div>
+          </div>
+          <div
+            class="col-7"
+            :class="{
+              'col-7': h.List.length >= 3,
+              'col-6': h.List.length == 2,
+              'col-12': h.List.length == 1,
+            }"
+          >
+            <q-img
+              @click="showImageHandler(`http://imgfile.oytour.com${h.List[0].Path}`)"
+              :src="`http://imgfile.oytour.com${h.List[0].Path}`"
+              spinner-color="drk"
+              spinner-size="20px"
+              height="100%"
+              mode="cover"
+            />
           </div>
           <div class="col q-pl-sm" v-if="h.List.length > 1">
             <div :style="{ height: h.List.length > 2 ? '50%' : '100%' }">
-              <q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[1].Path}`)"
-                :src="`http://imgfile.oytour.com${h.List[1].Path}`" spinner-color="drk" spinner-size="20px"
-                height="100%" mode="cover" />
-            </div>
-            <div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length > 2">
-              <q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[2].Path}`)"
-                :src="`http://imgfile.oytour.com${h.List[2].Path}`" spinner-color="drk" spinner-size="20px"
-                height="100%" mode="cover">
-                <div class="absolute-full text-subtitle2 flex flex-center" v-if="h.List.length > 3">
+              <q-img
+                @click="showImageHandler(`http://imgfile.oytour.com${h.List[1].Path}`)"
+                :src="`http://imgfile.oytour.com${h.List[1].Path}`"
+                spinner-color="drk"
+                spinner-size="20px"
+                height="100%"
+                mode="cover"
+              />
+            </div>
+            <div
+              class="row items-end q-pt-sm"
+              style="height: 50%"
+              v-if="h.List.length > 2"
+            >
+              <q-img
+                @click="showImageHandler(`http://imgfile.oytour.com${h.List[2].Path}`)"
+                :src="`http://imgfile.oytour.com${h.List[2].Path}`"
+                spinner-color="drk"
+                spinner-size="20px"
+                height="100%"
+                mode="cover"
+              >
+                <div
+                  class="absolute-full text-subtitle2 flex flex-center"
+                  v-if="h.List.length > 3"
+                >
                   <span class="fz20 text-weight-bold">+</span>
                   <span class="text-h5 text-weight-bold">{{ h.List.length - 3 }}</span>
                 </div>
@@ -74,122 +164,170 @@
             </div>
           </div>
         </div>
-        <div class="rounded-borders"
-          :class="{ 'q-ml-sm col': $q.platform.is.desktop, 'q-mt-sm height-320': $q.platform.is.mobile }"
-          style="overflow: hidden" id="baiduMap">
-          <GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%"
-            :center="center" :zoom="15" v-if="center">
+        <div
+          class="rounded-borders"
+          :class="{
+            'q-ml-sm col': $q.platform.is.desktop,
+            'q-mt-sm height-320': $q.platform.is.mobile,
+          }"
+          style="overflow: hidden"
+          id="baiduMap"
+        >
+          <GoogleMap
+            api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg"
+            style="width: 100%; height: 100%"
+            :center="center"
+            :zoom="15"
+            v-if="center"
+          >
             <Marker :options="{ position: center }" />
           </GoogleMap>
         </div>
       </div>
-
-
-      
       <div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
-        <div class="text-weight-bold">{{ $t('hotel.details.xiangqing') }}</div>
+        <div class="text-weight-bold">{{ $t("hotel.details.xiangqing") }}</div>
         <div class="text-grey-8 q-mt-sm">{{ h.Descriptions }}</div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.a') }}</div>
-          <div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.InTangTax) }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.a") }}</div>
+          <div class="col text-subtitle2 text-weight-bolder">
+            {{ moneyFormat(h.InTangTax) }}
+          </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.b') }}</div>
-          <div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.CityTax) }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.b") }}</div>
+          <div class="col text-subtitle2 text-weight-bolder">
+            {{ moneyFormat(h.CityTax) }}
+          </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.c') }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.c") }}</div>
           <div class="col text-subtitle2 text-weight-bolder">
-            {{ h.IsHavearking == 0 ? $t('none') : $t('have') }}
+            {{ h.IsHavearking == 0 ? $t("none") : $t("have") }}
             <span class="q-ml-md hotel-info-item" v-if="h.IsHavearking == 1">{{
-              h.ParkFee == 0 ? $t('free') :
-                moneyFormat(h.ParkFee) + $t('unit.jp')
+              h.ParkFee == 0 ? $t("free") : moneyFormat(h.ParkFee) + $t("unit.jp")
             }}</span>
           </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.d') }}</div>
-          <div class="col text-subtitle2 text-weight-bolder">{{ $t('before') + h.DieLine + $t('unit.day') }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.d") }}</div>
+          <div class="col text-subtitle2 text-weight-bolder">
+            {{ $t("before") + h.DieLine + $t("unit.day") }}
+          </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.e') }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.e") }}</div>
           <div class="col text-subtitle2 text-weight-bolder">
-            {{ !h.isDinner ? $t('none') : $t('have') }}
-            <span v-if="h.isDinner" class="q-ml-md hotel-info-item" v-for="x in h.Dinners">{{ x.Name }}</span>
+            {{ !h.isDinner ? $t("none") : $t("have") }}
+            <span
+              v-if="h.isDinner"
+              class="q-ml-md hotel-info-item"
+              v-for="x in h.Dinners"
+              >{{ x.Name }}</span
+            >
           </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.f') }}</div>
-          <div class="col text-subtitle2 text-weight-bolder">{{ h.HotelTypeInfo?.Name }}</div>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.f") }}</div>
+          <div class="col text-subtitle2 text-weight-bolder">
+            {{ h.HotelTypeInfo?.Name }}
+          </div>
         </div>
       </div>
       <div :class="{ 'q-px-lg': $q.platform.is.desktop }">
         <div class="q-mt-lg row">
-          <div class="col-3 f12 text-grey-500">{{ $t('hd.item.g') }}</div>
-          <div class="col text-subtitle2 text-weight-bolder row items-center q-gutter-sm" v-if="h.CheckHotelService">
-            <span class="hotel-info-item" v-for="(x, i) in h.CheckHotelService">{{ x.Content }}</span>
+          <div class="col-3 f12 text-grey-500">{{ $t("hd.item.g") }}</div>
+          <div
+            class="col text-subtitle2 text-weight-bolder row items-center q-gutter-sm"
+            v-if="h.CheckHotelService"
+          >
+            <span class="hotel-info-item" v-for="(x, i) in h.CheckHotelService">{{
+              x.Content
+            }}</span>
           </div>
         </div>
       </div>
       <div class="q-mt-lg">
-        <div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
-          <div class="text-weight-bold">{{ $t('hd.item.h') }}</div>
+        <div
+          class="bg-orange-1 q-pa-md rounded-borders fz14"
+          style="border: 1px dashed orange"
+        >
+          <div class="text-weight-bold">{{ $t("hd.item.h") }}</div>
           <div class="text-grey-700 q-mt-sm">{{ h.WarmTip }}</div>
         </div>
       </div>
     </q-scroll-area>
   </q-card>
-  <q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
-  <q-dialog class="no-padding" v-model="showImagePriview" persistent v-if="images && images.length > 0">
+  <q-inner-loading
+    :showing="loading"
+    :label="$t('loading')"
+    label-class="text-grey-6 f12"
+  />
+  <q-dialog
+    class="no-padding"
+    v-model="showImagePriview"
+    persistent
+    v-if="images && images.length > 0"
+  >
     <image-preview :current="currentImage" :images="images"></image-preview>
   </q-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useQuasar } from 'quasar'
-import useScrollModule from 'src/module/scrollbar/scrollModule'
-import HotelService from 'src/api/hotel'
-import message from 'src/utils/message'
-import { ApiResult } from 'src/@types/enumHelper'
-import { getDinners, getHotelType, moneyFormat } from 'src/utils/tools'
-import { DinnerType, HotelType } from 'src/@types'
-import ImagePreview from 'src/components/common/ImagePreview.vue'
-import { GoogleMap, Marker } from 'vue3-google-map'
-import { DirtionmaryHelper } from 'src/config/dictionary'
+import {
+  defineComponent,
+  ref,
+  reactive,
+  toRefs,
+  provide,
+  onMounted,
+  inject,
+  watch,
+  onBeforeUnmount,
+  computed,
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { useQuasar } from "quasar";
+import useScrollModule from "src/module/scrollbar/scrollModule";
+import HotelService from "src/api/hotel";
+import message from "src/utils/message";
+import { ApiResult } from "src/@types/enumHelper";
+import { getDinners, getHotelType, moneyFormat } from "src/utils/tools";
+import { DinnerType, HotelType } from "src/@types";
+import ImagePreview from "src/components/common/ImagePreview.vue";
+import { GoogleMap, Marker } from "vue3-google-map";
+import { DirtionmaryHelper } from "src/config/dictionary";
 export default defineComponent({
   components: { ImagePreview, GoogleMap, Marker },
   props: {
     hotelId: {
       type: Number,
-      required: true
-    }
+      required: true,
+    },
   },
   setup(props, context) {
-    const { t } = useI18n()
+    const { t } = useI18n();
 
     watch(
       () => props.hotelId,
       (n, o) => {
-        data.hotelId = n
-        methods.initHotel()
+        data.hotelId = n;
+        methods.initHotel();
       }
-    )
+    );
 
-    const $q = useQuasar()
+    const $q = useQuasar();
     const data = reactive({
       scrollStyle: {} as any,
       loading: true,
@@ -198,70 +336,82 @@ export default defineComponent({
       dinners: getDinners(),
       hotelTyps: getHotelType(),
       images: [] as Array<string>,
-      currentImage: '',
+      currentImage: "",
       showImagePriview: false,
-      center: null as any
-    })
+      center: null as any,
+    });
 
-    data.scrollStyle = useScrollModule().scrollStyle
+    data.scrollStyle = useScrollModule().scrollStyle;
 
     const methods = {
       initMap(lat: any, lng: any) {
-        let country = localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
-        if (country != 'CN') {
-          data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
+        let country = localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? "GW";
+        if (country != "CN") {
+          data.center = { lat: parseFloat(lng), lng: parseFloat(lat) };
         } else {
-          let Bmap = window.BMapGL // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
-          var b = new Bmap.Map('baiduMap')
-          b.centerAndZoom(new Bmap.Point(lat, lng), 15)
-          b.enableScrollWheelZoom(true)
-          b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
+          let Bmap = window.BMapGL; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
+          var b = new Bmap.Map("baiduMap");
+          b.centerAndZoom(new Bmap.Point(lat, lng), 15);
+          b.enableScrollWheelZoom(true);
+          b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)));
         }
       },
       initHotel() {
-        data.loading = true
+        data.loading = true;
         HotelService.GetHotelDetail(data.hotelId)
-          .then(r => {
+          .then((r) => {
             if (r.data.resultCode == ApiResult.SUCCESS) {
-              let temp = r.data.data
-              temp.isDinner = temp.UseDinnerType && temp.UseDinnerType != ''
+              let temp = r.data.data;
+              temp.isDinner = temp.UseDinnerType && temp.UseDinnerType != "";
               if (temp.isDinner) {
+                if (data.dinners && data.dinners.length > 0) {
                   temp.Dinners = data.dinners.filter((x: DinnerType) => {
-                  return temp.UseDinnerType.split(',').indexOf(x.Id.toString()) != -1
-                })
+                    return temp.UseDinnerType.split(",").indexOf(x.Id.toString()) != -1;
+                  });
                 }
-              temp.HotelTypeInfo = data.hotelTyps.find((x: HotelType) => x.Id == temp.HotelType)
-              let tempService = JSON.parse(temp.FacilityServices)[0] ?? {}
-              temp.CheckHotelService = tempService.list.filter((x: any) => tempService.checked.indexOf(x.ID) != -1)
-              data.h = temp
-              //http://imgfile.oytour.com${h.List[2].Path}
+              }
+              temp.HotelTypeInfo = data.hotelTyps.find(
+                (x: HotelType) => x.Id == temp.HotelType
+              );
+              let tempService = JSON.parse(temp.FacilityServices)[0] ?? {};
+              if (tempService && tempService.list && tempService.list.length > 0) {
+                temp.CheckHotelService = tempService.list.filter(
+                  (x: any) => tempService.checked.indexOf(x.ID) != -1
+                );
+              }
+
+              data.h = temp;
+              if (data.h && data.h.List && data.h.List.length > 0) {
                 data.h.List.forEach((x: any) => {
-                data.images.push(`http://imgfile.oytour.com${x.Path}`)
-              })
-              methods.initMap(data.h.Lng, data.h.Lat)
+                  data.images.push(`http://imgfile.oytour.com${x.Path}`);
+                });
+              }
+              if (data.h && data.h.Lng && data.h.Lat) {
+                methods.initMap(data.h.Lng, data.h.Lat);
+              }
             } else {
-              message.errorMsg(r.data.message)
+              message.errorMsg(r.data.message);
             }
-            data.loading = false
-          })
-          .catch(e => {
-            data.loading = false
-            message.errorMsg(e.message)
+            data.loading = false;
           })
+          .catch((e) => {
+            data.loading = false;
+            message.errorMsg(e.message);
+          });
       },
       showImageHandler(url: string) {
-        data.currentImage = url
-        data.showImagePriview = true
-      }
-    }
+        data.currentImage = url;
+        data.showImagePriview = true;
+      },
+    };
 
     onMounted(() => {
-      methods.initHotel()
-    })
+      methods.initHotel();
+    });
 
-    return { ...toRefs(data), ...methods, moneyFormat }
-  }
-})
+    return { ...toRefs(data), ...methods, moneyFormat };
+  },
+});
 </script>
 
 <style>
@@ -280,7 +430,7 @@ export default defineComponent({
 
 .hotel-info-item::before {
   display: inline;
-  content: '·';
+  content: "·";
   font-weight: bolder;
   margin-right: 4px;
 }