feat：新增酒店页面
This commit is contained in:
zjc
224
src/views/hotel/components/info-box.vue
Normal file
224
src/views/hotel/components/info-box.vue
Normal file
@@ -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>
|
||||
68
src/views/hotel/components/video-box.vue
Normal file
68
src/views/hotel/components/video-box.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user