请帮我调整该vue项目下的响应式，使其网页设计的可以像香格里拉酒店官网中“餐厅与酒吧”页面的效果：<template>
<!
-- 体验页面
-->
<div class="experience">
<!
-- 顶部导航栏
-->
<NavBar />
<div class="container">
<!
-- 首图内容区域
-->
<div class="content
-banner"></div>
<div class="content
-wrapper">
<!
-- 商务之旅
-->
<div class="business">
<div class="img
-box">
<responsive
-image
class="hd01"
:small
-image="hd01.smallImage1"
:medium
-image="hd01.mediumImage1"
:large
-image="hd01.largeImage1"
alt
-text="Business trip"
/>
</div>
<div class="
text-box">
<p class="title"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('Business') }}</p>
<p class="content"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t('
text7') }}
</p>
<p class="more"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t("more14") }}
</p>
</div>
</div>
<!
-- 旅游度假
-->
<div class="tourism">
<div class="
text-box">
<p class="title"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('trip') }}</p>
<p class="content"
: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="Vacation"
/>
</div>
</div>
</div>
<!
-- 查看客房
-->
<div class="content
-swiper">
<div class="content
-kefang">
<p class="title"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('Guest') }}</p>
<div class="foot
-swiper
-box">
<RoomSwiper
:bannerList="roomBannerList" />
</div>
</div>
<div class="content
-kefang">
<p class="title"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('Apartment') }}</p>
<div class="foot
-swiper
-box">
<RoomSwiper
:bannerList="apartBannerList" />
</div>
</div>
<div class="device">
<p class="title"
:class="{
textEn
: $i18n.locale === 'en' }">{{ $t('Facilities') }}</p>
<div class="device
-content">
<div class="img
-box">
<responsive
-image
:small
-image="facilities.smallImage"
:medium
-image="facilities.mediumImage"
:large
-image="facilities.largeImage"
alt
-text="Facilities"
/>
</div>
<div class="
text-box">
<ul class="device
-list">
<li class="
text" v
-for="(item, index) in facilityItems"
:key="index"
:class="{
textEn
: $i18n.locale === 'en' }">
{{ $t(item) }}
</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 {
facilityItems
: ['WiFi', 'individually', 'TV', 'laundry', 'safes', 'coffee', 'Minibar'],
facilities
: {
smallImage
: require("../../assets/experience/facilities
-mobile.jpg"),
mediumImage
: require("../../assets/experience/facilities
-tablet.jpg"),
largeImage
: require("../../assets/experience/facilities
-desktop.jpg")
},
hd01
: {
smallImage1
: require("../../assets/experience/hd
-01
-mobile.jpg"),
mediumImage1
: require("../../assets/experience/hd
-01
-tablet.jpg"),
largeImage1
: require("../../assets/experience/hd
-01
-desktop.jpg"),
},
hd02
: {
smallImage2
: require("../../assets/experience/hd
-02
-mobile.jpg"),
mediumImage2
: require("../../assets/experience/hd
-02
-tablet.jpg"),
largeImage2
: require("../../assets/experience/hd
-02
-desktop.jpg"),
},
roomBannerList
: [
// 保持原有数据
],
apartBannerList
: [
// 保持原有数据
],
};
},
};
</script>
<
style scoped>
/* 基础样式 */
.experience {
font
-family
: 'Helvetica Neue', Arial, sans
-serif;
color
: #333;
background
: #f9f9f9;
}
.content
-banner {
width
: 100%;
height
: 80vh;
max
-height
: 800px;
background
-image
: url("../../assets/banner/banner
-02
-desktop.jpg");
background
-size
: cover;
background
-position
: center;
}
.container {
max
-width
: 1440px;
margin
: 0 auto;
padding
: 0 20px;
}
.title {
font
-size
: 2.8rem;
color
: #c9aa62; /* 香槟金色 */
font
-weight
: 300;
letter
-spacing
: 1px;
margin
-bottom
: 1.5rem;
position
: relative;
padding
-bottom
: 10px;
}
.title
::after {
content
: '';
position
: absolute;
bottom
: 0;
left
: 50%;
transform: translateX(
-50%);
width
: 60px;
height
: 2px;
background
: #c9aa62;
}
.
text-box {
padding
: 2rem;
}
.content {
font
-size
: 1.6rem;
line
-height
: 1.8;
color
: #555;
margin
-bottom
: 2rem;
}
.more {
display
: inline
-block;
font
-size
: 1.6rem;
color
: #c9aa62;
text-decoration
: none;
border
-bottom
: 1px solid #c9aa62;
padding
-bottom
: 5px;
transition
: all 0.3s;
}
.more
:hover {
color
: #a88c4a;
border
-color
: #a88c4a;
}
/* 布局样式 */
.business, .tourism {
display
: flex;
align
-items
: center;
margin
: 8rem 0;
}
.img
-box {
flex
: 1;
overflow
: hidden;
border
-radius
: 4px;
box
-shadow
: 0 5px 15px rgba(0,0,0,0.1);
}
.img
-box img {
width
: 100%;
height
: 100%;
object
-fit
: cover;
transition
: transform 0.5s;
}
.img
-box
:hover img {
transform: scale(1.03);
}
.
text-box {
flex
: 1;
padding
: 0 4rem;
}
/* 设备区域 */
.device
-content {
display
: flex;
align
-items
: center;
gap
: 5rem;
margin
-top
: 5rem;
}
.device
-list {
display
: grid;
grid
-template
-columns
: repeat(2, 1fr);
gap
: 2rem;
list
-style: none;
padding
: 0;
}
.device
-list li {
position
: relative;
padding
-left
: 2.5rem;
font
-size
: 1.6rem;
line
-height
: 1.8;
}
.device
-list li
::before {
content
: '•';
position
: absolute;
left
: 0;
color
: #c9aa62;
font
-size
: 2rem;
}
/* 响应式调整 */
@media (max
-width
: 1200px) {
.business, .tourism {
margin
: 6rem 0;
}
.device
-content {
gap
: 3rem;
}
}
@media (max
-width
: 992px) {
.content
-banner {
height
: 60vh;
}
.business, .tourism {
flex
-direction
: column;
gap
: 3rem;
}
.tourism .
text-box {
order
: -1;
}
.device
-content {
flex
-direction
: column;
}
.img
-box {
width
: 100%;
height
: 400px;
}
}
@media (max
-width
: 768px) {
.content
-banner {
height
: 50vh;
background
-image
: url("../../assets/banner/banner
-02
-mobile.jpg");
}
.title {
font
-size
: 2.4rem;
}
.content {
font
-size
: 1.4rem;
}
.device
-list {
grid
-template
-columns
: 1fr;
}
.img
-box {
height
: 300px;
}
.
text-box {
padding
: 0 2rem;
}
}
@media (max
-width
: 576px) {
.content
-banner {
height
: 40vh;
}
.title {
font
-size
: 2rem;
}
.img
-box {
height
: 250px;
}
}
.
textEn {
font
-family
: 'Times New Roman', Times, serif;
font
-weight
: 400;
letter
-spacing
: 0.5px;
}
.content
-kefang {
margin
: 8rem 0;
}
.foot
-swiper
-box {
margin
-top
: 3rem;
}
</
style>
本文介绍了如何通过简单的HTML输入框实现小写字母转大写的功能，包括样式设置和基本的JavaScript操作。
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
