225 lines
7.1 KiB
Vue
225 lines
7.1 KiB
Vue
<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>
|