yangprivate-web/kdofficial
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

初步实现宽高比固定

Browse Source
This commit is contained in:
zhcnyuyang 2025-05-03 20:14:35 +08:00
parent 7b1de0bb78
commit 4f62c6e8b1
3 changed files with 80 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Homepage.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div id="homepageroot" class="pageroot"> <div id="homepageroot" class="pageroot">
<div id="hpbanner" class="pagebanner"> <div id="hpbanner" class="pagebanner">
<div class="bannercontent">
<span class="banner1">以体验设计重构用户关系<br /></span>
<span class="banner2">从「流量收割」转向「价值共生」</span>
</div>
</div> </div>
</div> </div>
</template> </template>

2
src/components/ServiceProcess.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div class="pageroot" id="serviceprocessroot"> <div class="pageroot" id="serviceprocessroot">
<div id="serviceprocessbanner" class="pagebanner"> <div id="serviceprocessbanner" class="pagebanner">
<div class="bannercontent">
</div>
</div> </div>
</div> </div>
</template> </template>

76
src/publicstyle.scss
View File

@ -20,11 +20,83 @@
background-size: 100% 100%; /* 图片宽高100%填充div */ background-size: 100% 100%; /* 图片宽高100%填充div */
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@include media-breakpoint-between(xs, md) { @include media-breakpoint-between(xs, md) {
padding-bottom: 192%; //padding-bottom: 192%;
padding-top: 96%;
padding-bottom: 96%;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding-bottom: 52.6673640167364%; //padding-bottom: 52.6673640167364%;
padding-top: 26.3336820083682%;
padding-bottom: 26.3336820083682%;
}
.bannercontent{
text-align: left;
position: relative;
@include media-breakpoint-between(xs, md) {
//margin-left: 45px;
}
@include media-breakpoint-up(md) {
//margin-left: 368px;
}
}
.banner1 {
@include media-breakpoint-between(xs, md) {
width: 285px;
height: 80px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 32px;
font-family: PingFangSC-Thin;
font-weight: 100;
text-align: left;
line-height: 40px;
}
@include media-breakpoint-up(md) {
//width: 1125px;
//height: 188px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 76px;
font-family: PingFangSC-Thin;
font-weight: 100;
text-align: left;
line-height: 94px;
}
}
.banner2 {
@include media-breakpoint-between(xs, md) {
//width: 285px;
//height: 80px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 32px;
font-family: PingFangSC-Semibold;
font-weight: 600;
text-align: left;
line-height: 40px;
}
@include media-breakpoint-up(md) {
//width: 1125px;
//height: 188px;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 76px;
font-family: PingFangSC-Semibold;
font-weight: 600;
text-align: left;
line-height: 94px;
}
} }
} }