请帮我完善该vue项目下的响应式，使其网页设计的可以像香格里拉酒店官网一样简洁美观，<template>
<!
-- 体验页面
-->
<div class="experience">
<!
-- 顶部导航栏
-->
<NavBar />
<div class="container">
<!
-- 首图内容区域
-->
<div class="content
-banner"></div>
<div class="content
-wrapper">
<!
-- 商务之旅
-->
<div class="business margin
-top
-50">
<div class="img
-box">
<responsive
-image
class="hd01"
:small
-image="hd01
.smallImage1"
:medium
-image="hd01
.mediumImage1"
:large
-image="hd01
.largeImage1"
alt
-text="Description of image"
/>
<!
-- <img src="
../
../assets/experience/hd
-01
.png" alt="" />
-->
</div>
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i1
8n
.locale === 'en' }"> {{ $t('Business') }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i1
8n
.locale === 'en' }">
{{ $t('text7') }}
</p>
<p class="more" :class="{ textEn: $i1
8n
.locale === 'en' }">
{{ $t("more1
4") }}
</p>
</div>
</div>
<!
-- 旅游度假
-->
<div class="tourism margin
-top
-50">
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('trip') }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i1
8n
.locale === 'en' }">
{{ $t('text
8') }}
</p>
<p class="more" :class="{ textEn: $i1
8n
.locale === 'en' }">
{{ $t("more15") }}
</p>
</div>
<div class="img
-box">
<responsive
-image
class="hd02"
:small
-image="hd02
.smallImage2"
:medium
-image="hd02
.mediumImage2"
:large
-image="hd02
.largeImage2"
alt
-text="Description of image"
/>
<!
-- <img src="
../
../assets/experience/hd
-02
.png" alt="" />
-->
</div>
</div>
</div>
<!
-- 查看客房
-->
<div class="content
-swiper">
<div class="content
-kefang">
<p class="title
-zh text
-center" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('Guest') }}</p>
<!
-- 轮播图
-->
<div class="foot
-swiper
-box margin
-top
-50">
<RoomSwiper :bannerList="roomBannerList" />
</div>
</div>
<div class="content
-kefang">
<p class="title
-zh text
-center" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('Apartment') }}</p>
<!
-- 轮播图
-->
<div class="foot
-swiper
-box margin
-top
-50">
<RoomSwiper :bannerList="apartBannerList" />
</div>
</div>
<div class="device">
<p class="title
-zh text
-center" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('Facilities') }}</p>
<div class="device
-content margin
-top
-50">
<div class="img
-box">
<img src="
../
../assets/experience/hd
-01
.png" alt="" />
</div>
<div class="text
-box">
<ul class="device
-list">
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('WiFi') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('individually') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('TV') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('laundry') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('safes') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('coffee') }}</li>
<li class="text" :class="{ textEn: $i1
8n
.locale === 'en' }">{{ $t('Minibar') }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!
-- 滚动宣传图文本页面
-->
<!
-- <div v
-for="item in roomBannerList" :key="item
.id">
<h2>{{ $t(item
.titleKey) }}</h2>
<p>{{ $t(item
.promptKey) }}</p>
</div>
-->
<!
-- 底部导航栏
-->
<Footer />
</div>
</template>
<script>
import RoomSwiper from "@/components/swiper/RoomSwiper
.vue";
export default {
name: "experience",
components: {
RoomSwiper,
},
data() {
return {
msg: "Welcome to Your Vue
.js App",
// 响应式图片数据
hd01: {
smallImage1: require("
../
../assets/experience/hd
-01
-mobile
.jpg"),
mediumImage1: require("
../
../assets/experience/hd
-01
.png"),
largeImage1: require("
../
../assets/experience/hd
-01
.png"),
},
hd02: {
smallImage2: require("
../
../assets/experience/hd
-02
-mobile
.jpg"),
mediumImage2: require("
../
../assets/experience/hd
-02
.png"),
largeImage2: require("
../
../assets/experience/hd
-02
.png"),
},
roomBannerList: [
{
id: 1,
imgUrl: require("
../
../assets/room/room
-01
.png"),
title: "豪华套房",
prompt: "尊享私人空间，尽享奢华体验",
},
{
id: 2,
imgUrl: require("
../
../assets/room/room
-02
.png"),
title: "豪华楼层/豪华雅致大床房",
prompt:
"面积约为
42平方米，装饰现代，舒适典雅。卧室
和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
{
id: 3,
imgUrl: require("
../
../assets/room/room
-03
.png"),
title: "豪华双床房",
prompt:
"面积约为
42平方米，装饰现代，舒适典雅。卧室
和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
],
apartBannerList: [
{
id: 1,
imgUrl: require("
../
../assets/room/room
-01
.png"),
title: "豪华套房",
prompt: "尊享私人空间，尽享奢华体验",
},
{
id: 2,
imgUrl: require("
../
../assets/room/room
-02
.png"),
title: "豪华楼层/豪华雅致大床房",
prompt:
"面积约为
42平方米，装饰现代，舒适典雅。卧室
和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
{
id: 3,
imgUrl: require("
../
../assets/room/room
-03
.png"),
title: "豪华双床房",
prompt:
"面积约为
42平方米，装饰现代，舒适典雅。卧室
和大理石浴室设气派的落地窗玻璃，可以俯瞰草原城市胜景或乌兰木伦湖滨美景。",
},
],
};
},
};
</script>
<style scoped>
.content
-banner {
width: 100vw;
height: 72rem;
background
-image: url("
../
../assets/banner/banner
-02
.png");
background
-size: 100% 100%;
}
.business {
width: 130rem;
margin: 0 auto;
display: flex;
justify
-content: space
-between;
margin
-bottom:10rem;
}
.title
-en,
.title
-zh {
font
-size: 3
.6rem;
color: rgb(202, 171, 9
8);
text
-align: left;
}
.content {
width: 60rem;
font
-size: 2rem;
line
-height: 2;
font
-family: "Fangsong";
text
-align: justify;
}
.img
-box {
width: 50rem;
height: 30rem;
}
.more {
width: 15rem;
font
-size: 2rem;
line
-height: 2em;
color: rgb(202, 171, 9
8);
text
-align: center;
cursor: pointer;
background
-color: rgb(23
8, 235, 235);
}
/* 通用属性 */
/* 文本居中 */
.text
-center {
text
-align: center;
}
/* div居中 */
.div
-center {
margin: 2rem auto;
}
/* 上外边距2rem */
.margin
-top
-20 {
margin
-top: 2rem;
}
/* 上外边距5rem */
.margin
-top
-50 {
margin
-top: 5rem;
}
/* 下外边距2rem */
.margin
-bottom
-20 {
margin
-bottom: 2rem;
}
/* 度假旅行 */
.tourism {
width: 120rem;
margin: 0 auto;
display: flex;
justify
-content: space
-between;
margin
-bottom: 10rem;
}
/* 查看客房 */
.content
-kefang {
width: 100vw;
height:
85rem;
}
/* 客房设施 */
.device
-content {
width: 100rem;
margin: 10rem auto;
display: flex;
margin
-bottom: 1rem;
}
.device
-list {
margin
-left: 2rem;
font
-size: 2rem;
text
-align: left;
line
-height: 2em;
font
-family: 'FangSong';
}
.device {
width: 100rem;
margin: 0 auto;
display: flex;
flex
-direction: column;
align
-items: center;
justify
-content: center;
margin
-bottom: 10rem;
}
.textEn {
font
-family: "Times New Roman", Times, serif !important;
}
/* 102
4px以下 */
@media screen and (max
-width: 102
4px) {
.content
-banner {
height: 70rem;
}
.business {
flex
-direction: column;
align
-items: center;
}
.tourism {
flex
-direction: column;
align
-items: center;
}
.content
-wrapper {
width: 160rem;
}
.title
-en {
font
-size:
4.8rem;
}
.title
-zh {
font
-size: 5
.6rem;
}
.content {
width: 7
4rem;
font
-size: 3rem;
}
.img
-box{
width: 7
4rem;
height:
42rem;
}
.more {
width: 20rem;
font
-size: 2
.4rem;
}
}
.device
-content {
width: 100rem;
margin: 10rem auto;
display: flex;
margin
-bottom: 1rem;
}
.device
-list {
margin
-left: 2rem;
font
-size: 2rem;
text
-align: left;
line
-height: 2em;
font
-family: 'FangSong';
}
.device {
width: 100rem;
margin: 0 auto;
display: flex;
flex
-direction: column;
align
-items: center;
justify
-content: center;
margin
-bottom: 10rem;
}
@media screen and (max
-width: 76
8px) {
.content
-banner {
height:
82rem;
background
-image: url("
../
../assets/banner/banner
-02
-mobile
.jpg");
}
.business {
flex
-direction: column;
align
-items: center;
}
.tourism {
flex
-direction: column;
align
-items: center;
}
.content
-wrapper {
width: 190rem;
}
.img
-box {
order: 2;
}
.text
-box {
order: 1;
}
.title
-en {
font
-size: 6rem;
}
.title
-zh {
font
-size: 6
.2rem;
}
.content {
width: 160rem;
font
-size:
4rem;
}
.img
-box {
width: 110rem;
height: 60rem;
}
.more {
width: 30rem;
font
-size: 3
.2rem;
margin
-bottom: 5rem;
margin
-left:
80rem;
}
}
.device
-content {
width: 120rem;
margin: 10rem auto;
display: flex;
margin
-bottom: 1rem;
flex
-direction: row;
margin
-right: 10rem;
}
.device
-list {
margin
-left: 10rem;
font
-size: 2rem;
text
-align: left;
line
-height: 2em;
font
-family: 'FangSong';
margin
-right: 10rem;
}
.device {
width: 150rem;
margin: 0 auto;
display: flex;
flex
-direction: column;
align
-items: center;
justify
-content: center;
margin
-bottom: 10rem;
margin
-right: 10rem;
}
</style>
扫一扫
3390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
