Compare commits
2 Commits
3664861ef0
...
55a75b56b1
| Author | SHA1 | Date | |
|---|---|---|---|
| 55a75b56b1 | |||
| 005457e13e |
@@ -19,7 +19,7 @@
|
|||||||
width: 6.8rem;
|
width: 6.8rem;
|
||||||
margin: 1.5rem 0.35rem;
|
margin: 1.5rem 0.35rem;
|
||||||
/* font-size: 0.16rem; */
|
/* font-size: 0.16rem; */
|
||||||
color: #cbcfd8;
|
color: #909399;
|
||||||
/* white-space: normal; */
|
/* white-space: normal; */
|
||||||
/* margin-top: 1.5rem;
|
/* margin-top: 1.5rem;
|
||||||
margin-bottom: 1.5rem; */
|
margin-bottom: 1.5rem; */
|
||||||
@@ -28,10 +28,10 @@
|
|||||||
.footer-texts p {
|
.footer-texts p {
|
||||||
width: 6.8rem;
|
width: 6.8rem;
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
padding-left: 0.05rem;
|
padding-left: 0.1rem;
|
||||||
text-indent: -0.1rem;
|
text-indent: -0.2rem;
|
||||||
line-height: 1.5;
|
/* line-height: 1.5;
|
||||||
margin-bottom: 0.1rem;
|
margin-bottom: 0.1rem; */
|
||||||
font-family: 'HarmonyOS-Light';
|
font-family: 'HarmonyOS-Light';
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,10 +3,7 @@
|
|||||||
}
|
}
|
||||||
.fs-box {
|
.fs-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16/9; /* 2560/1440=16/9,核心比例约束 */
|
aspect-ratio: 16/9;
|
||||||
position: relative;
|
|
||||||
will-change: contents; /* 告诉浏览器该元素即将变化,提前优化 */
|
|
||||||
contain: layout paint; /* 限制重排重绘范围 */
|
|
||||||
}
|
}
|
||||||
.fs-img,
|
.fs-img,
|
||||||
.fs-video {
|
.fs-video {
|
||||||
@@ -17,7 +14,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.fs-box-img {
|
.fs-box-img {
|
||||||
display: flex;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
@@ -27,15 +23,19 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0.11rem;
|
gap: 0.11rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
.fs-h-img img {
|
.fs-h-img img {
|
||||||
width: 3.35rem;
|
width: 3.35rem;
|
||||||
|
aspect-ratio: 335/95;
|
||||||
|
|
||||||
}
|
}
|
||||||
.fs-b-img {
|
.fs-b-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 0.1rem;
|
margin-top: 0.1rem;
|
||||||
|
aspect-ratio: 681/122;
|
||||||
}
|
}
|
||||||
.fs-b-img img {
|
.fs-b-img img {
|
||||||
width: 6.81rem;
|
width: 6.81rem;
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
.swiper-container-texts {
|
.swiper-container-texts {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 0.91rem;
|
top: 1.2rem;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -39,13 +39,13 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
.swiper-container-texts-p {
|
.swiper-container-texts-p {
|
||||||
padding-top: 0.68rem;
|
padding-top: 0.54rem;
|
||||||
font-size: 0.16rem;
|
font-size: 0.16rem;
|
||||||
/* text-align: center; */
|
/* text-align: center; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
letter-spacing: 1.3px;
|
letter-spacing: 1px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.swiper-container-texts-p div {
|
.swiper-container-texts-p div {
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 0.63rem;
|
padding-top: 0.54rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.swiper-container-texts-img a {
|
.swiper-container-texts-img a {
|
||||||
@@ -73,6 +73,7 @@
|
|||||||
max-width: 1.18rem;
|
max-width: 1.18rem;
|
||||||
}
|
}
|
||||||
.swiper-slide-t {
|
.swiper-slide-t {
|
||||||
|
padding-top: 0.3rem;
|
||||||
font-size: 0.2rem;
|
font-size: 0.2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
/* 改为inline-flex,宽度由子元素决定 */
|
/* 改为inline-flex,宽度由子元素决定 */
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid #cbcfd8;
|
border-bottom: 1px solid #909399;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 1.75rem;
|
width: 1.75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -36,10 +36,10 @@
|
|||||||
.tab-indicator {
|
.tab-indicator {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 2px;
|
height:1px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
width: 0.87rem;
|
width: auto;
|
||||||
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||||
width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||||
will-change: transform, width;
|
will-change: transform, width;
|
||||||
|
|||||||
@@ -55,4 +55,10 @@
|
|||||||
/* 确保p标签是块级,且换行正常 */
|
/* 确保p标签是块级,且换行正常 */
|
||||||
display: block;
|
display: block;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
white-space: nowrap;
|
||||||
|
/* 2. 超出元素宽度的内容隐藏 */
|
||||||
|
overflow: hidden;
|
||||||
|
/* 3. 将超出的文本替换为省略号... */
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* 可选:给元素设置一个固定宽度(确保省略效果生效) */
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user