1

src/components/hotel/list/hotelDetails.vue

@@ -7,7 +7,7 @@
           <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}">
+        <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>
@@ -39,22 +39,33 @@
         </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 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 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="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" />
+              <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">
+              <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>
@@ -63,8 +74,11 @@
             </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>
@@ -90,7 +104,10 @@
           <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') }}
-            <span class="q-ml-md hotel-info-item" v-if="h.IsHavearking == 1">{{ h.ParkFee == 0 ? $t('free') : moneyFormat(h.ParkFee) + $t('unit.jp') }}</span>
+            <span class="q-ml-md hotel-info-item" v-if="h.IsHavearking == 1">{{
+              h.ParkFee == 0 ? $t('free') :
+                moneyFormat(h.ParkFee) + $t('unit.jp')
+            }}</span>
           </div>
         </div>
       </div>
@@ -187,10 +204,10 @@ export default defineComponent({
 
     const methods = {
       initMap(lat: any, lng: any) {
-        let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
-        if(country!='CN'){
+        let country = localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
+        if (country != 'CN') {
           data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
-        }else{
+        } 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)
@@ -250,18 +267,21 @@ export default defineComponent({
   height: 162px;
   overflow: hidden;
 }
+
 .hotelCard-title {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 .hotel-info-item::before {
   display: inline;
   content: '·';
   font-weight: bolder;
   margin-right: 4px;
 }
+
 .height-320 {
   height: 250px;
 }