feat：新增酒店页面

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>