193 lines
4.1 KiB
SCSS
193 lines
4.1 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) {
|
||
aspect-ratio: 0.526673640167364;
|
||
}
|
||
|
||
@include media-breakpoint-up(md) {
|
||
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,xl){
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 50px;
|
||
font-family: PingFangSC-Thin;
|
||
font-weight: 100;
|
||
text-align: left;
|
||
line-height: 55px;
|
||
}
|
||
|
||
@include media-breakpoint-up(xl) {
|
||
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,xl){
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 50px;
|
||
font-family: PingFangSC-Semibold;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
line-height: 55px;
|
||
}
|
||
|
||
@include media-breakpoint-up(xl) {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.normalcontentdiv{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height:auto;
|
||
@include media-breakpoint-between(xs, md) {
|
||
margin-left: 32px;
|
||
margin-right: 32px;
|
||
margin-top: 64px;
|
||
}
|
||
@include media-breakpoint-between(md,xxl){
|
||
margin-left: 100px;
|
||
margin-right: 100px;
|
||
margin-top: 96px;
|
||
}
|
||
@include media-breakpoint-up(xxl) {
|
||
margin-left: 256px;
|
||
margin-right: 256px;
|
||
margin-top: 96px;
|
||
}
|
||
}
|
||
//这是span!
|
||
.normalcontenttitle{
|
||
margin-left: 0px;
|
||
margin-right: 0px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(13, 13, 13, 1);
|
||
@include media-breakpoint-between(xs, md) {
|
||
font-size: 24px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
//line-height: 48px;
|
||
}
|
||
@include media-breakpoint-between(md,xl){
|
||
|
||
}
|
||
@include media-breakpoint-up(md) {
|
||
width: auto;
|
||
height: auto;
|
||
font-size: 48px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 48px;
|
||
}
|
||
}
|
||
|
||
.normalcontenttext{
|
||
margin-left: 0px;
|
||
margin-right: 0px;
|
||
width:100%;
|
||
white-space: pre-line;
|
||
@include media-breakpoint-between(xs, md) {
|
||
overflow-wrap: break-word;
|
||
color: rgba(13, 13, 13, 1);
|
||
font-size: 15px;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: normal;
|
||
text-align: justify;
|
||
line-height: 24px;
|
||
margin-top: 8px;
|
||
}
|
||
@include media-breakpoint-between(md,xl){
|
||
|
||
}
|
||
@include media-breakpoint-up(md) {
|
||
margin-top: 35px;
|
||
overflow-wrap: break-word;
|
||
color: rgba(13, 13, 13, 1);
|
||
font-size: 24px;
|
||
font-family: PingFangSC-Regular;
|
||
font-weight: normal;
|
||
text-align: justify;
|
||
line-height: 42px;
|
||
}
|
||
}
|