feat：新增酒店页面

src/components/Header/index.vue

@@ -168,7 +168,8 @@
         ]
         navRight.value = [
           { name: '工单', path: '/workOrder' },
-          { name: '舆情', path: '/sentiment' }
+          { name: '舆情', path: '/sentiment' },
+          { name: '酒店', path: '/hotel' }
         ]
         break
       case '/scenic':
@@ -246,6 +247,27 @@
         ]
         isBack.value = true
         break
+
+      case '/hotel':
+        title.value = '酒店管理'
+        isSkip.value = false
+        current.vlaue = ''
+        isBack.value = true
+        navLeft.value = [
+          {
+            name: '酒店一'
+          },
+          {
+            name: '酒店二'
+          },
+          {
+            name: '酒店三'
+          },
+          {
+            name: '酒店四'
+          }
+        ]
+        break
     }
   }
   watch(

src/router/index.js

@@ -53,6 +53,11 @@ const router = createRouter({
           path: '/roadTesting',
           name: 'roadTesting',
           component: () => import('@/views/testing/road.vue')
+        },
+        {
+          path: '/hotel',
+          name: 'hotel',
+          component: () => import('@/views/hotel/index.vue')
         }
       ]
     },

src/styles/common.scss

@@ -70,3 +70,14 @@
 .pr-20 {
   padding-right: vh(20) !important;
 }
+
+.el-pager li,
+.btn-prev:disabled,
+.btn-next,
+.btn-prev {
+  color: #ffffff !important;
+  background-color: #004dc2 !important;
+}
+.el-pagination.is-background .el-pager li.is-active {
+  background-color: #00d0ff !important;
+}

src/utils/config.js

@@ -5,7 +5,7 @@ export const proBaseUrl = 'http://192.168.77.200'
 export const socketBaseUrl = 'ws://36.138.38.16:81' // ws://36.138.38.16:81
 export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
 
-export const mode = 'pro' // 测试 dev  正式 pro
+export const mode = 'dev' // 测试 dev  正式 pro
 
 export const devToken =
   'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'

src/views/hotel/components/info-box.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="info">
+    <div class="info-header">
+      <img src="@/assets/images/icon-12.png" alt="" />
+      <div class="info-header__content">
+        <h2>阔越云栖酒店(奉节高铁站店)</h2>
+        <div>
+          <img class="info-header__icon" src="@/assets/images/address.png" alt="" />
+          <span class="info-header__text">地址：奉节奉节夔州街道诗诚西路1992号附6号</span>
+        </div>
+        <div>
+          <img class="info-header__icon" src="@/assets/images/user.png" alt="" />
+          <span class="info-header__text">负责人：王民</span>
+        </div>
+        <div>
+          <img class="info-header__icon" src="@/assets/images/phone.png" alt="" />
+          <span class="info-header__text">联系电话：+86-23-56636999</span>
+        </div>
+      </div>
+    </div>
+    <div class="statistic-box">
+      <div class="statistic-item">
+        <div class="statistic-item__label">
+          <img src="@/assets/images/dot-primary.svg" alt="" />
+          <span>房间数</span>
+        </div>
+        <div class="statistic-item__value">
+          <countup :end-val="200" />
+          <span>间</span>
+        </div>
+      </div>
+      <div class="statistic-item">
+        <div class="statistic-item__label">
+          <img src="@/assets/images/dot-primary.svg" alt="" />
+          <span>床位数</span>
+        </div>
+        <div class="statistic-item__value">
+          <countup :end-val="640" />
+          <span>床</span>
+        </div>
+      </div>
+      <div class="statistic-item">
+        <div class="statistic-item__label">
+          <img src="@/assets/images/dot-primary.svg" alt="" />
+          <span>车位数</span>
+        </div>
+        <div class="statistic-item__value">
+          <countup :end-val="1000" />
+          <span>位</span>
+        </div>
+      </div>
+      <div class="statistic-item">
+        <div class="statistic-item__label">
+          <img src="@/assets/images/dot-primary.svg" alt="" />
+          <span>空余房间数</span>
+        </div>
+        <div class="statistic-item__value">
+          <countup :end-val="10" />
+          <span>间</span>
+        </div>
+      </div>
+      <div class="statistic-item">
+        <div class="statistic-item__label">
+          <img src="@/assets/images/dot-primary.svg" alt="" />
+          <span>空余床位</span>
+        </div>
+        <div class="statistic-item__value">
+          <countup :end-val="15" />
+          <span>床</span>
+        </div>
+      </div>
+    </div>
+    <div class="desc-box">
+      <title2 title="酒店简介" />
+      <div class="desc-container">
+        <p class="desc-content">
+          酒店位于奉节县西部新区夔州街道诗诚西路1992号，一家拥有独立茶室、餐厅、健身房、洗衣房、棋牌室，集住宿、餐厅、娱乐为一体的高档酒店。酒店距离奉节高铁站仅10分钟车程，距离人民广场步行街驾车20分钟，距离白帝城瞿塘峡景区、夔州古城、夔州博物馆驾车约30分钟，三峡之巅约1个小时。我们为您提供优质的早餐服务和24小时的管家服务，洗衣服务，拥有亲子房、影院房、浴缸房、套房等多种房型，每个房间内都配有小度智能客控，可以语音控制所有家电（空调、电视、窗帘、灯光等），只为给您带来更舒适的入住体验，是您旅游、商务出行的不二选择。在这里，您可以在茶室择一芳茶席，沏一壶清茶，一起看云卷云舒，静看花开花落，不争不急；也可以在棋牌室里和朋友一起玩转机麻，还可以在健身房里挥洒汗水，塑造自我，挑战自我。我们在这里欢迎您的到来。
+        </p>
+        <div>
+          <el-carousel indicator-position="outside">
+            <el-carousel-item v-for="item in 4" :key="item">
+              <el-image class="cover-item" :src="map"></el-image>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  import map from '@/assets/images/map-img-1.jpg'
+</script>
+
+<style scoped lang="scss">
+  :deep(.el-carousel__container) {
+    margin-top: vh(20);
+    height: vh(350) !important;
+  }
+  .cover-item {
+    width: 100%;
+    height: vh(350);
+  }
+  .info {
+    margin-top: vh(120);
+    width: vw(626);
+    height: vh(950);
+    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+    &-header {
+      padding: vh(12) vw(12);
+      height: vh(167);
+      box-sizing: border-box;
+      display: flex;
+      align-items: flex-start;
+      background-image: url('@/assets/images/hotel-header-bg.png');
+      background-size: 100% 100%;
+      > img {
+        width: vw(74);
+        height: vw(74);
+      }
+      &__content {
+        margin-left: vw(20);
+        > h2 {
+          font-weight: 800;
+          font-size: vw(20);
+          color: #ffffff;
+          margin-bottom: vh(12);
+          margin-top: vh(10);
+        }
+        > div {
+          margin-bottom: vh(12);
+          display: flex;
+          align-items: center;
+        }
+      }
+      &__icon {
+        width: vw(20);
+        height: vw(20);
+        margin-right: vw(8);
+      }
+      &__text {
+        font-weight: 400;
+        font-size: vw(16);
+        color: #0096ff;
+      }
+    }
+    .statistic {
+      &-box {
+        height: vh(114);
+        margin: 0 vw(26);
+        gap: vw(20);
+        display: flex;
+        align-items: center;
+      }
+      &-item {
+        flex: 1;
+      }
+      &-item__label {
+        margin-bottom: vh(16);
+        display: flex;
+        align-items: center;
+        > span {
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+          margin-left: vw(4);
+        }
+      }
+      &-item__value {
+        width: vw(100);
+        height: vh(30);
+        padding-left: vw(12);
+        padding-bottom: vh(12);
+        display: flex;
+        align-items: flex-end;
+        background-image: url('@/assets/images/mask-primary.png');
+        background-size: 100% 100%;
+        .countup-wrap {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+        }
+        > span {
+          font-size: vw(12);
+          color: #02f9fa;
+          margin-left: vw(4);
+        }
+      }
+    }
+    .desc {
+      &-box {
+        margin: 0 vw(20);
+        background-image: url('@/assets/images/bg-3.png');
+        background-size: 100% 100%;
+      }
+      &-container {
+        padding: vh(20) vw(20) 0 vw(20);
+      }
+      &-content {
+        overflow-y: auto;
+        height: vh(200);
+        font-weight: 400;
+        font-size: vw(16);
+        color: #ffffff;
+        line-height: vw(26);
+        text-align: justify;
+        /* 滚动条整体样式 */
+        &::-webkit-scrollbar {
+          width: vw(4); /* 滚动条的宽度 */
+        }
+        /* 滚动条轨道 */
+        &::-webkit-scrollbar-track {
+          background: 'transparent'; /* 轨道的背景色 */
+        }
+        /* 滚动条滑块 */
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+          border-radius: 5px; /* 滑块的圆角 */
+        }
+      }
+    }
+  }
+</style>

src/views/hotel/components/video-box.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="video-box">
+    <ul class="videos">
+      <li class="video-item" v-for="item in 8" :key="item">
+        <img src="@/assets/images/map-img-1.jpg" alt="" />
+        <p>
+          <span>核心路段：这是一条信息说明</span>
+        </p>
+      </li>
+    </ul>
+    <div class="pagination-box">
+      <el-pagination background layout="prev, pager, next" :total="1000" />
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+<style></style>
+<style scoped lang="scss">
+  .video-box {
+    flex: 1;
+    height: vh(950);
+    margin-top: vh(120);
+    margin-left: vw(10);
+    padding: vh(34) vw(26);
+    box-sizing: border-box;
+    background-image: url('@/assets/images/one-video-bg.png');
+    background-size: 100% 100%;
+    .videos {
+      display: flex;
+      flex-wrap: wrap;
+      gap: vw(6);
+      .video-item {
+        position: relative;
+        width: vw(610);
+        height: vh(420);
+        padding: vh(12) vw(12);
+        box-sizing: border-box;
+        background-image: url('@/assets/images/item-primary.png');
+        background-size: 100% 100%;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+        > p {
+          position: absolute;
+          width: calc(100% - vw(24));
+          height: vh(32);
+          bottom: vh(12);
+          background: rgba(4, 30, 69, 0.72);
+          > span {
+            padding-left: vw(10);
+            font-weight: 400;
+            font-size: vw(14);
+            color: #ffffff;
+            line-height: vh(32);
+          }
+        }
+      }
+    }
+    .pagination-box {
+      margin-top: vh(10);
+      margin-right: vw(50);
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+</style>

src/views/hotel/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex flex-1">
+    <info-box />
+    <video-box />
+  </div>
+</template>
+
+<script setup>
+  import infoBox from './components/info-box'
+  import videoBox from './components/video-box'
+</script>
+
+<style scoped lang="scss"></style>