酒店页面跳转方式

src/components/Hotel/HotelDetail.vue

@@ -76,6 +76,8 @@
         float:left;
         width:345px;
         height:259px;
+        background-position: 50%;
+        background-repeat: no-repeat;
     }
     .HD_Top_ImgList img{
         width:100%;
@@ -91,6 +93,8 @@
         height:126px;
         float:left;
         margin:0 8px 8px 0;
+        background-position: 50%;
+        background-repeat: no-repeat;
     }
     .HD_Top_ImgDiv:nth-child(2n+2){
         margin-right:0;
@@ -478,21 +482,21 @@
                     <input type="button" class="HD_SureBtn" style="display:none;" value="立即预订"/>
                 </div>
                 <div class="HD_Top_ImgList clearfix">
-                    <div class="HD_Top_FirstImg">
-                        <img :src="hotelDetails.hotelImageUrl1" alt=""/>
+                    <div class="HD_Top_FirstImg" :style="`background-image: url(${hotelDetails.hotelImageUrl1})`" @click.stop="showImg(hotelDetails.hotelImageUrl1)">
+                        <!-- <img :src="hotelDetails.hotelImageUrl1" alt=""/> -->
                     </div> 
                     <div class="HD_Top_rightImg clearfix">
-                        <div class="HD_Top_ImgDiv">
-                            <img :src="hotelDetails.hotelImageUrl2" alt=""/>
+                        <div class="HD_Top_ImgDiv" :style="`background-image: url(${hotelDetails.hotelImageUrl2})`" @click.stop="showImg(hotelDetails.hotelImageUrl2)">
+                            <!-- <img :src="hotelDetails.hotelImageUrl2" alt=""/> -->
                         </div>
-                        <div class="HD_Top_ImgDiv">
-                            <img :src="hotelDetails.hotelImageUrl3" alt=""/>
+                        <div class="HD_Top_ImgDiv" :style="`background-image: url(${hotelDetails.hotelImageUrl3})`" @click.stop="showImg(hotelDetails.hotelImageUrl3)">
+                            <!-- <img :src="hotelDetails.hotelImageUrl3" alt=""/> -->
                         </div>
-                        <div class="HD_Top_ImgDiv">
-                            <img :src="hotelDetails.hotelImageUrl4" alt=""/>
+                        <div class="HD_Top_ImgDiv" :style="`background-image: url(${hotelDetails.hotelImageUrl4})`" @click.stop="showImg(hotelDetails.hotelImageUrl4)">
+                            <!-- <img :src="hotelDetails.hotelImageUrl4" alt=""/> -->
                         </div>
-                        <div class="HD_Top_ImgDiv">
-                            <img :src="hotelDetails.hotelImageUrl5" alt=""/>
+                        <div class="HD_Top_ImgDiv" :style="`background-image: url(${hotelDetails.hotelImageUrl5})`" @click.stop="showImg(hotelDetails.hotelImageUrl5)">
+                            <!-- <img :src="hotelDetails.hotelImageUrl5" alt=""/> -->
                         </div>
                     </div> 
                 </div>
@@ -788,6 +792,10 @@
                 </div>
             </div>
         </div>
+        <a :href="blankUrl" id="blankLink" target="_blank" style="display:none">1</a>
+        <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
+            <img v-for="src in images" :src="src" :key="src">
+        </viewer>
     </div>
 </template>
 <script>
@@ -796,6 +804,12 @@ import moment from "moment";
 export default {
   data() {
     return {
+        blankUrl: '',
+        images:[],
+        imageOptions:{
+            navbar:false,
+            title:false
+        },
       //查询条件
       msg:{
          hotelId:'',
@@ -867,6 +881,22 @@ export default {
      HTMap
   },
   methods: {
+      inited (viewer){
+        this.$viewer = viewer
+    },
+    showImg(obj){
+        let isExsit=false
+        this.images.forEach(x=>{
+            if(x==obj)
+            isExsit=true
+        })
+        if(!isExsit) {
+            this.images.push(obj)
+        } else {
+            this.$viewer.view(this.images.indexOf(obj))
+        }
+        this.$viewer.show()
+    },
       disabledDate(time) {
         if(this.isShowTime){
             let today_after7=moment().add(8,'days').format('YYYY-MM-DD');
@@ -1240,11 +1270,15 @@ export default {
         if(sessionStorage.getItem('OpenB2BCode')==null && !localStorage.userInfo){
             return this.Error('请登录！')
         }
-
         let msg = this.SimilarMsg;
         msg.roomOptionCd = roomOptionCd;
         msg.imgUrl = this.hotelDetails.hotelImageUrl1;
         sessionStorage.setItem("HotelSure", JSON.stringify(msg));
+        let dom = document.querySelector("#blankLink")
+        let fullPath = `/HotelSure`;
+        dom.href=`http://${window.location.host}/#${fullPath}`
+        dom.click()
+        return
         this.$router.push({
             path:"/HotelSure"
         })

src/components/Hotel/HotelList.vue

@@ -197,6 +197,7 @@
         float:left;
         width:199px;
         height:148px;
+        background-position: 50%;
     }
     .HL_ListImg img{
         width:100%;
@@ -575,8 +576,8 @@
                         <tr v-for="item in dataList">
                             <td>
                                 <div class="clearfix">
-                                    <div class="HL_ListImg">
-                                        <img :src="item.hotelImageUrl" alt=""/>
+                                    <div class="HL_ListImg" :style="`background-image: url(${item.hotelImageUrl})`">
+                                        <!-- <img :src="item.hotelImageUrl" alt=""/> -->
                                     </div>
                                     <div class="HL_ListContent">
                                         <div class="HL_ListTitle">