liqian
b7e09aeb04
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
83 lines
1.5 KiB
CSS
83 lines
1.5 KiB
CSS
.readon-box {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */
|
||
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto; /* 宽度铺满，高度自动 */
|
||
|
||
margin-bottom: 2.63rem;
|
||
}
|
||
|
||
/* 背景图适配：铺满比例容器 */
|
||
/* .bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 1280px;
|
||
}
|
||
.bg-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
} */
|
||
.readon-text {
|
||
max-width: 1440px;
|
||
min-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
.readon-t {
|
||
color: #cbcfd8;
|
||
font-size: 0.68rem;
|
||
/* line-height: 1.4; */
|
||
/* padding-top: 1.01rem;
|
||
padding-bottom: 0.50rem; */
|
||
}
|
||
.readon-t div:nth-child(1) {
|
||
padding-top: 1.34rem;
|
||
padding-bottom: 0.41rem;
|
||
}
|
||
.readon-t div:nth-child(2),.readon-t div:nth-child(3){
|
||
font-size:0.63rem;
|
||
}
|
||
.readon-p {
|
||
color: #cbcfd8;
|
||
font-size: 0.64rem;
|
||
}
|
||
.readon-js {
|
||
color: #cbcfd8;
|
||
font-size: 0.27rem;
|
||
line-height: 1.8;
|
||
margin-top: 0.72rem;
|
||
font-family: "HarmonyOS-Light";
|
||
}
|
||
.readon-js1 {
|
||
color: #cbcfd8;
|
||
font-size: 0.22rem;
|
||
line-height: 1.8;
|
||
margin-top: 0.72rem;
|
||
font-family: "HarmonyOS-Light";
|
||
}
|
||
.readon-img {
|
||
width: 100%;
|
||
max-width: 1440px;
|
||
min-width: 1280px;
|
||
margin-top:2.37rem;
|
||
}
|
||
.readon-img img {
|
||
width: 100%;
|
||
max-width: 3.78rem;
|
||
aspect-ratio: 378/218;
|
||
}
|
||
.readon-img-box {
|
||
width: 100%;
|
||
min-width: 1280px;
|
||
position: absolute;
|
||
margin: 0 auto;
|
||
bottom: -0.61rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.2rem;
|
||
}
|
||
.readon-img-box img {
|
||
max-width: 3.45rem;
|
||
aspect-ratio:345/245;
|
||
} |