酒店详情

src/router/index.js

@@ -161,6 +161,15 @@ const routes = [{
         },
         component: () => import('../views/Serve/HotelList.vue')
       },
+      {
+        path: '/layout/serve/hotel-detail',
+        name: 'HotelDetail',
+        meta: {
+          myInd: 2,
+          myTitle: '',
+        },
+        component: () => import('../views/Serve/HotelDetail.vue')
+      },
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */

src/views/Serve/HotelDetail.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="hotel-detail">
+    <div class="banner">
+    </div>
+    <div class="title-area">
+      <div class="title-bar">
+        <div class="left">
+          <h2>芜湖金鹰尚美酒店</h2>
+          <div class="star">5星级</div>
+        </div>
+        <div class="right">
+          427余套客房· 684张床位
+        </div>
+      </div>
+      <div class="address-bar">
+        <div class="left-wrap">
+          <img class="icon" src="@/assets/img/service/address-gray.png" alt="" draggable="false">
+          <div class="info">
+            <div class="address">芜湖市镜湖区中山北路77号</div>
+            <div class="distance">距您2.8km</div>
+          </div>
+        </div>
+        <button>
+          <img class="icon" src="@/assets/img/service/navigation.png" alt="" draggable="false">
+          <span>开启导航</span>
+        </button>
+      </div>
+      <div class="phone-bar">
+        <div class="left-wrap">
+          <img class="icon" src="@/assets/img/service/phone-gray.png" alt="" draggable="false">
+          <div class="info">
+            <div class="title">
+              咨询电话
+            </div>
+            <div class="phone">
+              0533-3888999
+            </div>
+          </div>
+        </div>
+        <button>
+          <img class="icon" src="@/assets/img/service/phone-blue.png" alt="" draggable="false">
+          <span>快速拨通</span>
+        </button>
+      </div>
+    </div>
+    <div class="splitter">
+    </div>
+    <div
+      class="desc"
+    >
+      <h2>酒店概况</h2>
+      <div
+        class="content"
+        :class="{
+          expand: isExpanded
+        }"
+      >
+        酒店位于芜湖市中心位置—中山北路，毗邻八佰伴、凤凰美食街、华强吾悦广场、苏宁广场，以及一步之遥的中山路步行街。酒店“闹中取静”，背靠繁华交通主干道，拥有独立的地下及地面停车场。<br>
+        酒店有三百余间客房，客房位于酒店21F以上，透过房间落地窗，可以饱览赭山或长江美景。房内提供无线宽带、频道选择、私人保险箱、咖啡和茶、配有浴缸和独立淋浴间的宽敞浴室。同时，酒店还为儿童们准备了独具特色的儿童主题房，希望能成为您和家人心中“行业的佼佼者”。
+        <button
+          class="expand-content"
+          v-show="!isExpanded"
+          @click="isExpanded = true"
+        >
+          收起
+        </button>
+      </div>
+    </div>
+    <div class="splitter" />
+    <div class="food">
+      <h2>周边美食</h2>
+      <button class="more">
+        更多
+        <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
+      </button>
+      <div class="food-photo-wrap"
+        v-for="n in 2"
+        :key="n"
+      >
+        <img class="food-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
+        <div class="food-name">无为板鸭</div>
+      </div>
+    </div>
+    <div class="attractions">
+      <h2>周边景点</h2>
+      <button class="more">
+        更多
+        <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
+      </button>
+      <div class="attraction-photo-wrap"
+        v-for="n in 2"
+        :key="n"
+      >
+        <img class="attraction-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
+        <div class="attraction-name">鸠兹古镇</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isExpanded: false,
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.hotel-detail {
+  background-color: #fff;
+  height: calc(100% - 80px);
+  overflow: auto;
+  .banner {
+    height: 62.9vw;
+    background-image: url(~@/assets/img/service/hotel-detail-banner.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    overflow: hidden;
+  }
+  .title-area {
+    padding: 4vw;
+    .title-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-bottom: 3.9vw;
+      .left {
+        display: flex;
+        align-items: flex-end;
+        > h2 {
+          font-size: 4.8vw;
+          font-weight: bold;
+          color: #515151;
+          white-space: nowrap;
+        }
+        .star {
+          white-space: nowrap;
+          padding: 1.1vw 1.9vw;
+          font-size: 2.7vw;
+          font-weight: 500;
+          color: #f5c706;
+          background: rgba(217, 28, 28, 1);
+          border-radius: 2.3vw;
+        }
+      }
+      .right {
+        font-size: 2.9vw;
+        color: #B2B2B2;
+      }
+    }
+    .address-bar {
+      height: 13.3vw;
+      background: #F8F8F8;
+      border-radius: 1.3vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2.7vw;
+      padding-left: 3vw;
+      padding-right: 3vw;
+      > .left-wrap {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .icon {
+          margin-right: 2.5vw;
+          width: 4.7vw;
+          height: 6.4vw;
+        }
+        .info {
+          .address {
+            font-size: 3.7vw;
+            font-weight: 500;
+            color: #656565;
+          }
+          .distance {
+            font-size: 3.2vw;
+            color: #777777;
+          }
+        }
+      }
+      > button {
+        display: flex;
+        align-items: center;
+        .icon {
+          width: 4.8vw;
+          height: 4.8vw;
+          margin-right: 1.5vw;
+        }
+        > span {
+          font-size: 4.0vw;
+          font-weight: 500;
+          color: #00a2ff;
+        }
+      }
+    }
+    .phone-bar {
+      height: 13.3vw;
+      background: #F8F8F8;
+      border-radius: 1.3vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 2.7vw;
+      padding-left: 3vw;
+      padding-right: 3vw;
+      .left-wrap {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .icon {
+          margin-right: 2.5vw;
+          width: 4.7vw;
+          height: 6.4vw;
+        }
+        .info {
+          > .title {
+            font-size: 3.7vw;
+            font-weight: 500;
+            color: #656565;
+          }
+          > .phone {
+            font-size: 3.2vw;
+            color: #777777;
+          }
+        }
+      }
+      > button {
+        display: flex;
+        align-items: center;
+        .icon {
+          width: 4.8vw;
+          height: 4.8vw;
+          margin-right: 1.5vw;
+        }
+        > span {
+          font-size: 4.0vw;
+          font-weight: 500;
+          color: #00a2ff;
+        }
+      }
+    }
+  }
+  > .desc {
+    padding: 4vw 4vw 6vw 4vw;
+    > h2 {
+      font-size: 4.8vw;
+      font-weight: 500;
+      color: #7A7A7A;
+      position: relative;
+      margin-bottom: 3.7vw;
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: calc(100% + 1.5vw);
+        height: 95%;
+        width: 0.7vw;
+        background: #00A2FF;
+      }
+    }
+    > .content {
+      font-size: 4.0vw;
+      color: #7A7A7A;
+      line-height: 6.9vw;
+      max-height: calc(6.9vw * 5);
+      overflow: hidden;
+      position: relative;
+      &.expand {
+        max-height: initial;
+      }
+      > button {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        bottom: 0;
+        height: 1.5em;
+        font-size: 4vw;
+        font-weight: 500;
+        color: #BBBBBB;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
+        text-align: right;
+      }
+    }
+  }
+  > .splitter {
+    height: 0.7vw;
+    background: #F7F7F7;
+  }
+  > .food {
+    padding: 4vw 0 6vw 4vw;
+    position: relative;
+    > h2 {
+      font-size: 4.8vw;
+      font-weight: 500;
+      color: #7A7A7A;
+      position: relative;
+      margin-bottom: 3.7vw;
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: calc(100% + 1.5vw);
+        height: 95%;
+        width: 0.7vw;
+        background: #00A2FF;
+      }
+    }
+    > button.more {
+      position: absolute;
+      right: 4vw;
+      top: 4vw;
+      font-size: 4vw;
+      color: #CECECE;
+      height: 6vw;
+      display: flex;
+      align-items: center;
+      > img {
+        width: 1.9vw;
+        height: 3.6vw;
+        margin-left: 1.3vw;
+      }
+    }
+    > .food-photo-wrap {
+      margin-right: 4vw;
+      margin-bottom: 4vw;
+      display: inline-block;
+      > img.food-photo {
+        width: 44vw;
+        height: 44vw;
+        border-radius: 1.5vw;
+        margin-bottom: 1.6vw;
+      }
+      > .food-name {
+        font-size: 3.7vw;
+        font-weight: 500;
+        color: #9C9C9C;
+        width: 44vw;
+        text-align: center;
+      }
+    }
+  }
+  > .attractions {
+    padding: 4vw 0 6vw 4vw;
+    position: relative;
+    > h2 {
+      font-size: 4.8vw;
+      font-weight: 500;
+      color: #7A7A7A;
+      position: relative;
+      margin-bottom: 3.7vw;
+      &::before {
+        position: absolute;
+        content: '';
+        top: 0;
+        right: calc(100% + 1.5vw);
+        height: 95%;
+        width: 0.7vw;
+        background: #00A2FF;
+      }
+    }
+    > button.more {
+      position: absolute;
+      right: 4vw;
+      top: 4vw;
+      font-size: 4vw;
+      color: #CECECE;
+      height: 6vw;
+      display: flex;
+      align-items: center;
+      > img {
+        width: 1.9vw;
+        height: 3.6vw;
+        margin-left: 1.3vw;
+      }
+    }
+    > .attraction-photo-wrap {
+      margin-right: 4vw;
+      margin-bottom: 4vw;
+      display: inline-block;
+      > img.attraction-photo {
+        width: 44vw;
+        height: 44vw;
+        border-radius: 1.5vw;
+        margin-bottom: 1.6vw;
+      }
+      > .attraction-name {
+        font-size: 3.7vw;
+        font-weight: 500;
+        color: #9C9C9C;
+        width: 44vw;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/Serve/HotelList.vue

@@ -28,6 +28,7 @@
       <article
         v-for="(item, index) in hotelList"
         :key="index"
+        @click="onClickHotelList(index)"
       >
         <div class="img-wrap">
           <img class="photo" :src="item.img" alt="" draggable="false">
@@ -142,6 +143,9 @@ export default {
     onSearch() {
 
     },
+    onClickHotelList(index) {
+      this.$router.push({name: 'HotelDetail'})
+    },
   },
 }
 </script>
@@ -173,6 +177,8 @@ export default {
   > .select-wrap {
     flex: 0 0 auto;
     margin: 0 4vw 4vw 4vw;
+    position: relative;
+    z-index: 1;
     > .select {
       display: inline-block;
       margin-right: 5vw;

src/views/Serve/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="service" id="service-first-page">
-    <div class="banner">
+    <div class="banner" @click="onClickBanner">
       <SearchBar class="search-bar" @search="onSearch" @click.stop></SearchBar>
     </div>
     
@@ -232,6 +232,8 @@ methods: {
   //     })
   //   })
   // },
+  onClickBanner() {
+  },
   onClickPathItem() {
     this.$router.push({name: 'RecommendedPathDetail'})
   }