120 lines
2.8 KiB
SCSS
120 lines
2.8 KiB
SCSS
@import "node_modules/bootstrap/scss/_functions.scss";
|
|
@import "node_modules/bootstrap/scss/_variables.scss";
|
|
@import "node_modules/bootstrap/scss/_mixins.scss";
|
|
|
|
.pageroot{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
@include media-breakpoint-between(xs, md) {
|
|
}
|
|
|
|
@include media-breakpoint-between(md, xl) {
|
|
}
|
|
}
|
|
|
|
.pagebanner{
|
|
width: 100%;
|
|
background-size:100% 100%;
|
|
background-attachment: scroll;
|
|
background-size: 100%; /* 图片宽高100%填充div */
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-height: 100vh;
|
|
@include media-breakpoint-between(xs, md) {
|
|
//padding-bottom: 192%;
|
|
//padding-top: 96%;
|
|
//padding-bottom: 96%;
|
|
aspect-ratio: 0.526673640167364;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
//padding-bottom: 52.6673640167364%;
|
|
//padding-top: 26.3336820083682%;
|
|
//padding-bottom: 26.3336820083682%;
|
|
aspect-ratio: 1.92;
|
|
}
|
|
|
|
.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-between(md,lg){
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 55px;
|
|
font-family: PingFangSC-Thin;
|
|
font-weight: 100;
|
|
text-align: left;
|
|
line-height: 60px;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
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) {
|
|
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-between(md,lg){
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 55px;
|
|
font-family: PingFangSC-Semibold;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
line-height: 60px;
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
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;
|
|
}
|
|
}
|
|
}
|