请帮我完善该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
: $i18n.locale === 'en' }"> {{ $t('Business') }}</p>
<p class="content margin-top-20"
:class="{ textEn
: $i18n.locale === 'en' }">
{{ $t('text7') }}
</p>
<p class="more"
:class="{ textEn
: $i18n.locale === 'en' }">
{{ $t("more14") }}
</p>
</div>
</div>
<!-- 度假之行 -->
<div class="tourism margin-top-50">
<div class="text-box">
<p class="title-zh text-center"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('trip') }}</p>
<p class="content margin-top-20"
:class="{ textEn
: $i18n.locale === 'en' }">
{{ $t('text8') }}
</p>
<p class="more"
:class="{ textEn
: $i18n.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
: $i18n.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
: $i18n.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
: $i18n.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
: $i18n.locale === 'en' }">{{ $t('WiFi') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('individually') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('TV') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('laundry') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('safes') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('coffee') }}</li>
<li class="text"
:class="{ textEn
: $i18n.locale === 'en' }">{{ $t('Minibar') }}</li>
</ul>
</div>
</div>
</div>
</div>
</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>
/* 全局响应式设置 */
.experience {
width
: 100%;
overflow-x
: hidden;
}
.container {
width
: 100%;
max-width
: 2560px;
margin
: 0 auto;
}
/* 顶部横幅区域 */
.content-banner {
width
: 100%;
height
: 50vh; /* 使用视口高度 */
min-height
: 300px; /* 最小高度 */
max-height
: 600px; /* 最大高度 */
background-image
: url("../../assets/banner/banner-04.jpg");
background-size
: cover;
background-position
: center;
background-repeat
: no-repeat;
}
/* 内容区域 */
.content-wrapper {
width
: 90%;
max-width
: 1400px;
margin
: 0 auto;
padding
: 4rem 0;
}
/* 商务/旅游模块 - 响应式网格布局 */
.business, .tourism {
display
: grid;
grid-template-columns
: repeat(2, 1fr);
gap
: 4rem;
align-items
: center;
margin
: 6rem 0;
}
/* 文本区域 */
.text-box {
flex: 1 1 45%; /* 基础宽度45% */
min-width
: 300px; /* 最小宽度 */
}
.title-zh {
font-size
: clamp(2.4rem, 3.5vw, 3.6rem); /* 响应式字体 */
color
: rgb(202, 171, 98);
margin-bottom
: 2rem;
}
.content {
font-size
: clamp(1.6rem, 2vw, 2rem);
line-height
: 1.8;
margin
: 2rem 0;
font-family
: "Fangsong";
}
.more {
display
: inline-block;
padding
: 1rem 2.5rem;
font-size
: clamp(1.4rem, 1.8vw, 1.6rem);
color
: rgb(202, 171, 98);
background-color
: rgb(238, 235, 235);
border-radius
: 4px;
cursor
: pointer;
transition
: all 0.3s ease;
}
.more
:hover {
background-color
: #e0dcdc;
transform
: translateY(-2px);
}
/* 新增底部导航适配 */
.footer {
width
: 100%;
margin-top
: auto; /* 确保底部固定 */
}
/* 优化视口单位使用 */
:root {
--vh
: 1vh;
}
/* 强制图片覆盖容器 */
.responsive-image img {
position
: absolute;
width
: 100%;
height
: 100%;
object-fit
: cover; /* 关键属性：保持比例填充 */
object-position
: center;
font-family
: 'object-fit
: cover'; /* 兼容旧版浏览器 */
}
/* 图片容器基础样式强化 */
.img-box {
height
: auto;
max-height
: 400px;
overflow: hidden;
}
.img-box img {
width
: 100%;
height
: auto;
}
.img-box
:hover img {
transform
: scale(1.03);
}
/* 轮播图区域 */
.content-swiper {
width
: 90%;
max-width
: 1400px;
margin
: 0 auto;
padding
: 4rem 0;
}
.content-kefang {
margin-bottom
: 6rem;
}
.foot-swiper-box {
margin-top
: 3rem;
}
/* 设施区域 */
.device {
margin-top
: 2rem;
}
.device-content {
display
: grid;
grid-template-columns
: repeat(2, 1fr);
gap
: 4rem;
align-items
: center;
margin-top
: 4rem;
}
.device-list {
display
: grid;
grid-template-columns
: repeat(2, 1fr);
gap
: 2rem;
font-size
: clamp(1.6rem, 1.8vw, 1.8rem);
line-height
: 1.8;
}
.device-list li {
position
: relative;
padding-left
: 1rem;
}
/* 通用类 */
.text-center {
text-align
: center;
}
.textEn {
font-family
: "Times New Roman", Times, serif !important;
}
/* 新增4K屏幕适配样式 */
@media screen and (min-width
: 2560px) {
/* 主容器扩展 */
.content-wrapper, .content-swiper {
width
: 80%;
max-width
: 2200px;
}
/* 首图区域优化 */
.content-banner {
height
: 50vh; /* 全视口高度 */
min-height
: 900px;
}
/* 商务/旅游模块优化 */
.business, .tourism {
grid-template-columns
: repeat(2, 1fr);
gap
: 6rem;
align-items
: stretch; /* 垂直拉伸 */
}
/* 文本区域优化 */
.text-box {
flex: 1 1 48%; /* 增加基础宽度 */
min-width
: 400px;
}
/* 字体大小增强 */
.title-zh {
font-size
: clamp(3rem, 4.5vw, 5rem);
}
.content {
font-size
: clamp(1.8rem, 2.8vw, 3rem);
}
.more {
font-size
: clamp(1.6rem, 2.2vw, 2.4rem);
padding
: 1.5rem 3rem;
}
/* 设施列表优化 */
.device-list {
grid-template-columns
: repeat(3, 1fr);
font-size
: clamp(1.8rem, 2vw, 2.2rem);
}
}
/* 新增4K+超宽屏适配 */
@media screen and (min-width
: 3000px) {
.content-wrapper, .content-swiper {
width
: 90%;
max-width
: 2800px;
}
.business, .tourism {
gap
: 8rem;
}
.content-banner {
background-size
: contain; /* 保持背景完整 */
}
.device-list {
grid-template-columns
: repeat(4, 1fr);
}
}
/* 优化现有媒体查询 */
@media screen and (max-width
: 1024px) {
.content-banner {
height
: 60vh;
}
.business, .tourism {
gap
: 3rem;
}
}
@media screen and (max-width
: 768px) {
.content-banner {
height
: 50vh;
background-image
: url("../../assets/banner/banner-04-mobile.jpg");
}
.business, .tourism {
grid-template-columns
: 1fr;
}
}
</style>
探讨弹性盒子（Flexbox）布局与overflow属性之间的冲突，当两者同时应用时，overflow：hidden可能无法正常工作，揭示了这一常见布局问题及其潜在解决方案。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2335
