针对这个Vue项目进行响应式布局调整，主要目标是让页面在不同设备上都能自适应显示：<template>
<div class="family">
<!
-- 顶部导航栏
-->
<NavBar />
<!
-- 首页内容区域
-->
<div class="content
-banner">
<hotel
-reservation class="hotel
-reservation"></hotel
-reservation>
</div>
<div class="banner
-text">
<p class="text" :class="{ textEn: $i18n
.locale === 'en' }">{{ $t('Family') }}</p>
<!
-- <span class="top1" >Wedding Banquet & Conference</span>
-->
</div>
<div class="content
-wrapper">
<div class="title
-box">
<p class="title
-zh" :class="{ textEn: $i18n
.locale === 'en' }">{{ $t('trip2') }}</p>
</div>
<!
-- 一起脉动
-->
<div class="content
-box">
<div class="text
-box">
<p class="content margin
-bottom
-20" :class="{ textEn: $i18n
.locale === 'en' }">
{{ $t('text28') }}
</p>
<p class="more":class="{ textEn: $i18n
.locale === 'en' }">{{ $t('more7') }}</p>
</div>
<div class="img
-box">
<img src="@/assets/wedding/cup
.png" alt="" />
</div>
</div>
<!
-- 专业策划
-->
<div class="content
-box">
<div class="img
-box">
<img src="@/assets/wedding/table
.png" alt="" />
</div>
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i18n
.locale === 'en' }">{{ $t('Professional') }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i18n
.locale === 'en' }">
{{ $t('text20') }}
</p>
<p class="content">
</p>
<p class="more div
-center" :class="{ textEn: $i18n
.locale === 'en' }">{{$t('more8')}}</p>
</div>
</div>
<!
-- 婚宴进行中
-->
<div class="content
-box">
<div class="text
-box">
<p class="title
-zh text
-center" :class="{ textEn: $i18n
.locale === 'en' }">{{ $t('progress') }}</p>
<p class="content margin
-top
-20" :class="{ textEn: $i18n
.locale === 'en' }">
{{ $t('text21') }}
</p>
<p class="more div
-center" :class="{ textEn: $i18n
.locale === 'en' }">{{ $t('more9') }}</p>
</div>
<div class="img
-box">
<img src="@/assets/wedding/flower
.png" alt="" />
</div>
</div>
</div>
<!
-- 底部导航栏
-->
<Footer />
</div>
</template>
<script>
export default {
name: "family",
data() {
return {
};
},
};
</script>
<style scoped>
.content
-banner {
width: 100vw;
height:
62rem;
margin: 0 auto;
background
-image: url("@/assets/wedding/flower
.png");
background
-size: 100% 100%;
position: relative;
}
.hotel
-reservation {
width: 120rem;
height: 12rem;
margin: 0 auto;
position: relative;
top:
45rem;
}
.content
-wrapper {
width: 120rem;
margin: 0 auto;
}
.title
-box {
text
-align: center;
margin:
6rem 0;
}
.content
-box {
display:
flex;
justify
-content: space
-between;
margin
-bottom: 10rem;
}
.title
-en{
font
-size: 3rem;
font
-weight: bold;
line
-height: 2em;
font
-family: "Times New Roman", Times, serif;
}
.textEn {
font
-family: "Times New Roman", Times, serif !important;
}
.banner
-text {
position: absolute;
top: 10rem;
left: 20%;
padding: 1rem 2
4rem;
font
-size: 3
.2rem;
line
-height: 2em;
font
-weight: bold;
color: #fff;
text
-align: center;
background
-color: rgba(1, 1, 1 1
.5);
}
.text {
margin
-top: 2rem;
font
-family: "FangSong";
font
-size: 10rem;
line
-height: 2em;
text
-align: left;
padding: 0
4rem;
text
-align: justify;
-webkit
-text
-justify: inter
-word;
text
-justify: inter
-word;
}
.top1{
font
-family: "Times New Roman", Times, serif;
font
-size:
6rem;
font
-weight: bold;
}
.title
-zh {
font
-size:
4.6rem;
/* font
-weight: bold; */
color: rgb(202, 171, 98);
text
-align: left;
}
.content {
width:
60rem;
font
-size: 2rem;
line
-height: 2;
font
-family: "Fangsong";
text
-align: justify;
}
.img
-box img {
width: 50rem;
height: 30rem;
}
.more {
width: 15rem;
font
-size: 2rem;
line
-height: 2em;
color: rgb(202, 171, 98);
text
-align: center;
cursor: pointer;
background
-color: rgb(238, 235, 235);
}
.text
-box{
text
-align: left;
}
/* 通用属性 */
/* 文本居中 */
.text
-center {
text
-align: left;
}
/* div居中 */
.div
-center {
margin: 5rem auto;
text
-align: center;
}
/* 上外边距2rem */
.margin
-top
-20 {
margin
-top: 2rem;
}
/* 下外边距2rem */
.margin
-bottom
-20 {
margin
-bottom: 2rem;
}
/* 页面修改区域 */
/* 响应式调整 */
@media screen and (max
-width: 102
4px) {
.content
-banner {
height: 70rem;
}
.hotel
-reservation {
width: 1
60rem;
top: 5
4rem;
}
.content
-wrapper {
width: 1
60rem;
}
.title
-en {
font
-size:
4.8rem;
}
.title
-zh {
font
-size: 5
.6rem;
}
.content {
width: 7
4rem;
font
-size: 3rem;
}
.img
-box{
width: 5
4rem;
height:
42rem;
}
.img
-box img {
width: 5
4rem;
height:
42rem;
}
.more {
width: 20rem;
font
-size: 2
.4rem;
}
}
@media screen and (max
-width: 7
68px) {
.content
-banner {
height: 82rem;
background
-image: url("@/assets/wedding/flower
.png");
}
.hotel
-reservation {
width: 1
60rem;
top:
66rem;
}
.content
-wrapper {
width: 1
60rem;
}
.content
-box {
flex-direction: column;
}
.img
-box {
order: 2;
}
.img
-box img {
width: 100rem;
height: auto;
}
.text
-box {
order: 1;
}
.title
-en {
font
-size:
6rem;
}
.title
-zh {
font
-size:
6.2rem;
}
.content {
width: 1
60rem;
font
-size:
4rem;
}
.img
-box {
width: 1
60rem;
height: 90rem;
}
.more {
width: 30rem;
font
-size: 3
.2rem;
margin
-bottom: 5rem;
margin
-left: 130rem;
}
}
</style>
Flex 4.x 版本破解教程
本文提供了一种有效的方法来破解 Flex 4.x 版本的软件，包括防止注册弹窗、过期提示及错误提示。教程详细介绍了如何通过修改 MANIFEST.MF 和 feature.xml 文件中的版本号，并创建 config_builder.xml 文件来实现这一目的。
扫一扫
3065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
