jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

调整
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
liqian
2025-12-18 16:16:47 +08:00
parent b7e09aeb04
commit d9000fbe1c
14 changed files with 309 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
public/static/index/pc/css/topic_laptop/amd.css
View File

@@ -1,16 +1,16 @@
.amd-box {
width: 100%;
width: auto;
background: #000;
overflow: hidden;
max-width: 1440px;
min-width: 1280px;
/* overflow: hidden; */
max-width: 14.4rem;
/* min-width: 1280px; */
margin: 0 auto;
margin-top:-2rem;
}
.amd-img-box {
width: 100%;
max-width: 14.4rem;
/* 移除height:100%，避免继承高度导致比例失效 */
}
@@ -21,7 +21,7 @@
.amd-img-4,
.amd-img-5,
.amd-img-6 {
width: 100%;
max-width: 14.4rem;
}
.amd-img-2,
@@ -29,7 +29,7 @@
.amd-img-4,
.amd-img-5,
.amd-img-6 {
margin-top:0.15rem;
margin-top:0.2rem;
}
.fade-in {
opacity: 1 !important;
@@ -39,15 +39,9 @@
/* 原有图片样式（重点修改） */
.amd-img-1-1 {
max-width: 14.4rem;
width: 100%;
/* 移除height:100%，改用auto保持比例 */
height: auto;
/* aspect-ratio: 1440/429; */
display: block;
width: 14.4rem;
display: block;
}
.amd-img-2 {
display: flex;
gap: 0.2rem;
@@ -58,17 +52,12 @@
.amd-img-2-2 {
flex: 1;
width: 50%;
/* 固定宽高比：710/210 ≈ 3.38，反向则210/710≈29.58% */
/* aspect-ratio: 711/261; */
overflow: hidden; /* 裁剪超出部分（可选） */
}
.amd-img-2-1 img,
.amd-img-2-2 img {
width: 100%;
height: 100%;
width: 7.11rem;
display: block;
aspect-ratio: 711/261;
}
.amd-img-3 {
@@ -90,7 +79,7 @@
}
.amd-img-3-left img {
display: block;
aspect-ratio: 711/541;
width: 7.11rem;
}
@@ -102,49 +91,41 @@
.amd-img-3-1-right img,
.amd-img-3-2-right img {
width: 100%;
width: 7.11rem;
height: 100%;
display: block;
aspect-ratio: 711/261;
}
/* 统一处理其他图片容器的比例 */
.amd-img-4 {
max-width: 1440px;
aspect-ratio: 1440/178; /* 按原始1440:178比例固定 */
width: 14.4rem;
}
.amd-img-4 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}
.amd-img-5 {
max-width: 1440px;
/* max-width: 1440px; */
width: 100%;
display: flex;
gap: 0.2rem;
aspect-ratio: 1440/260; /* 1440:260比例 */
}
.amd-img-5 img {
flex: 1;
width: 50%;
height: 100%;
/* object-fit: cover; */
width: 7.11rem;
display: block;
}
.amd-img-6 {
max-width: 1440px;
aspect-ratio: 1440/260; /* 1440:260比例 */
overflow: hidden;
width: 14.4rem;
}
.amd-img-6 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}

5
public/static/index/pc/css/topic_laptop/bly.css
View File

@@ -1,6 +1,7 @@
.bly {
max-width: 1440px;
min-width: 1280px;
/* max-width: 1440px;
min-width: 1280px; */
max-width: 14.4rem;
margin: 0 auto;
aspect-ratio: 1437/679;
/* max-height: 6.97rem; */

29
public/static/index/pc/css/topic_laptop/bottom.css
View File

@@ -1,12 +1,13 @@
.bottom-img-box {
width: 100%;
min-width: 1280px;
/* min-width: 1280px; */
padding: 3rem 0;
}
.bottom-img {
/* width: 14.416rem; */
width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
width: 14.4rem;
/* min-width:12.8rem; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@@ -32,16 +33,32 @@
margin-bottom: 4.3rem;
}
.bottom-p {
max-width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
/* min-width: 1280px; */
margin:0 auto;
font-size:clamp(16px, 1vw, 0.22rem);
color:#cbcfd8;
white-space: normal;
}
.bottom-p p {
text-indent: -10px;
text-indent:clamp(-16px, -1vw, -0.22rem);
line-height: 1.8;
margin-bottom: 0.1rem;
font-family: "HarmonyOS-Light";
letter-spacing:1px;
}
.bottom-p1 {
max-width: 14.4rem;
/* min-width: 1280px; */
margin:0 auto;
font-size:clamp(16px, 1vw, 0.22rem);
color:#cbcfd8;
white-space: normal;
}
.bottom-p1 p{
text-indent:clamp(-16px, -1vw, -0.22rem);
/* line-height: 1.8; */
/* margin-bottom: 0.1rem; */
font-family: "HarmonyOS-Light";
/* letter-spacing:1px; */
}

7
public/static/index/pc/css/topic_laptop/header.css
View File

@@ -244,9 +244,10 @@
display: none;
width: 340px; /* 3.4rem*100=340px */
background-color: white;
position: fixed;
right: 5%;
top: 80px; /* 0.8rem*100=80px */
/* position: fixed; */
position: absolute;
right: -150px;
top: 50px; /* 0.8rem*100=80px */
border-radius: 15px; /* 0.15rem*100=15px */
box-shadow: 2px 2px 10px 1px #88909a; /* 0.02/0.02/0.1/0.01rem 转px */
font-size: 16px; /* 基础字号16px */

15
public/static/index/pc/css/topic_laptop/ips.css
View File

@@ -18,7 +18,7 @@
}
.ips-t {
font-size: 0.63rem;
padding-top: 3.19rem;
padding-top:3.9rem;
padding-left: 5.63rem;
}
.ips-p {
@@ -36,7 +36,7 @@
justify-content: space-between; /* 左对齐，也可设为center（居中） */
margin-left: 5.63rem;
width: 6.9rem;
padding-top: 2.65rem;
padding-top: 2rem;
}
.ips-img img {
@@ -66,22 +66,25 @@
.ips-img1 img:nth-child(1) {
width: 100%;
max-width: 2.76rem;
aspect-ratio: 276/168;
/* aspect-ratio: 276/168; */
}
.ips-img1 img:nth-child(2) {
width: 100%;
max-width: 3.35rem;
aspect-ratio: 335/130;
max-height:1.3rem ;
/* aspect-ratio: 335/130; */
}
.ips-img1 img:nth-child(3) {
width: 100%;
max-width: 2.67rem;
aspect-ratio: 267/118;
max-height: 1.18rem;
/* aspect-ratio: 267/118; */
margin-top: 1.36rem;
}
.ips-img1 img:nth-child(4) {
width: 100%;
max-width: 3.39rem;
aspect-ratio: 339/122;
/* aspect-ratio: 339/122; */
margin-top: 1.36rem;
max-height: 1.22rem;
}

136
public/static/index/pc/css/topic_laptop/lb.css
View File

@@ -1,47 +1,58 @@
/* 外层容器：改用Flex布局承载轮播图+箭头（核心修改） */
/* 外层容器：完全保留你的REM样式 */
.carousel-wrapper {
width: 100%;
margin: 0 auto;
/* 移除position: relative（无需定位） */
display: flex; /* 核心：Flex布局 */
align-items: center; /* 箭头与轮播图垂直居中 */
justify-content: center; /* 整体水平居中 */
gap: 0; /* 初始间距为0，后续通过箭头margin控制更灵活 */
padding: 0; /* 可选：清除默认内边距 */
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: 0;
padding-top: 0.4rem;
position: relative;
box-sizing: border-box;
}
/* 轮播容器整体样式（仅承载图片） */
/* 轮播容器：核心 - REM控制最大宽度，宽度100%自适应 */
.carousel-container {
width: 1440px;
max-width: 1440px;
min-width: 1280px;
/* 移除margin: 0 auto（Flex容器已居中） */
overflow: hidden;
width: 100%;
max-width: 14.4rem; /* 你的REM限制，保留 */
overflow: hidden !important;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
flex-shrink: 0; /* 防止轮播图容器被Flex挤压 */
flex-shrink: 0;
box-sizing: border-box !important;
transform: translateZ(0);
clip-path: inset(0 1px 0 0);
}
/* 轮播图片列表 */
/* 轮播图片列表：flex布局，无固定宽度，靠子元素撑满 */
.carousel-imgs {
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
transition: transform 0.5s ease-out; /* 顺滑过渡 */
will-change: transform; /* 性能优化 */
height: auto;
flex-wrap: nowrap; /* 禁止换行 */
margin: 0 !important;
padding: 0 !important;
}
/* 单张轮播图样式 */
/* 单张图片：REM控制最大宽度，宽度100%继承容器 */
.carousel-img {
width: 100%;
height: 100%;
flex-shrink: 0;
object-fit: cover;
max-width: 14.4rem; /* 你的REM限制，保留 */
flex-shrink: 0; /* 禁止收缩 */
object-fit: cover; /* 保持比例，不拉伸 */
height: auto; /* 高度自适应 */
display: block; /* 去除默认间隙 */
margin: 0 !important;
padding: 0 !important;
image-rendering: crisp-edges;
box-sizing: border-box;
}
/* 图片版箭头样式（Flex版，移除定位相关属性） */
/* 箭头样式：完全保留你的REM样式 */
.carousel-arrow {
/* 箭头容器尺寸（保留原有） */
width: 0.77rem;
height: 0.77rem;
background: transparent;
@@ -55,80 +66,93 @@
transition: all 0.3s ease;
opacity: 0.85;
user-select: none;
flex-shrink: 0; /* 防止箭头被Flex挤压 */
/* 控制箭头与轮播图的间距（核心：替代定位的left/right） */
margin: 0 20px; /* 可自定义箭头与轮播图的左右间距，比如改10px/30px */
flex-shrink: 0;
margin: 0 20px;
/* position: absolute;
top: 50%;
transform: translateY(-50%); */
}
/* 箭头图片样式（保留原有） */
.carousel-arrow img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
/* hover动效（修改transform，移除translateY(-50%)） */
.carousel-arrow:hover {
opacity: 1;
transform: scale(1.1); /* 仅保留缩放，无需 translateY */
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 120, 255, 0.4);
}
/* 移除定位相关的箭头位置控制（Flex布局无需） */
.arrow-left {
margin-right: 1rem;
/* left: 0; */
}
.arrow-right {
margin-left: 1rem;
margin-left: 1rem;
/* right: 0; */
}
/* 轮播下方文字区域（保留原有） */
/* 文字区域：完全保留你的REM样式 */
.carousel-texts {
max-width: 1440px;
min-width: 1280px;
box-sizing: border-box;
max-width: 14.4rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-top: 1rem;
/* padding-top: 1rem; */
position: relative;
z-index: 10;
padding:1rem 0.28rem 0 0.52rem;
}
/* 文字高亮样式（保留原有） */
.carousel-text {
border-bottom: 3px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 4px;
color:#48494D
color:#48494D;
user-select: none;
}
.carousel-text.active {
/* font-weight: bold; */
transform: translateY(-3px);
color: #fff !important;
/* border-bottom-color: #fff; */
}
.carousel-text-t {
font-size: 0.32rem;
text-align: center;
/* color:#48494D */
}
.carousel-text-t1{
font-size: clamp(18px, 1vw, 0.26rem);
font-size: clamp(0.18rem, 1vw, 0.26rem); /* REM版clamp */
text-align: center;
/* color:#48494D */
}
.carousel-text-p1 {
font-size:clamp(16px, 1vw, 0.22rem);
padding-top: 0.28rem;
text-align: center;
font-family: "HarmonyOS-Light";
font-size: clamp(0.16rem, 1vw, 0.22rem); /* REM版clamp */
padding-top: 0.28rem;
text-align: center;
font-family: "HarmonyOS-Light";
}
.carousel-text-p {
font-size:clamp(16px, 1vw, 0.22rem);
font-size: clamp(0.16rem, 1vw, 0.22rem); /* REM版clamp */
padding-top: 0.3rem;
text-align: center;
font-family: "HarmonyOS-Light";
/* color:#48494D */
font-family: "HarmonyOS-Light";
}
/* 响应式适配：小屏幕REM缩放 */
@media (max-width: 768px) {
.carousel-arrow {
width: 0.6rem;
height: 0.6rem;
margin: 0 0.1rem;
}
.arrow-left {
margin-right: 0.5rem;
}
.arrow-right {
margin-left: 0.5rem;
}
.carousel-text-t {
font-size: 0.28rem;
}
}

31
public/static/index/pc/css/topic_laptop/progress.css
View File

@@ -1,13 +1,13 @@
.container {
max-width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
/* min-width: 1280px; */
margin: 0 auto;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.progress-section {
max-width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
/* min-width: 1280px; */
}
.progress-title {
font-size: 0.48rem;
@@ -137,27 +137,32 @@
}
.w1440 {
width: 14.4rem;
max-width: 1440px;
min-width: 1280px;
/* max-width: 1440px;
min-width: 1280px; */
}
.w1368 {
width: 1368px;
min-width: 1280px;
width: 13.68rem;
/* min-width: 1280px; */
}
.w1243 {
width: 1243px;
/* width: 1243px; */
width: 12.43rem;
}
.w964 {
width: 964px;
/* width: 964px; */
width:9.64rem;
}
.w681 {
width: 681px;
/* width: 681px; */
width: 6.81rem;
}
.w1274 {
width: 1274px;
/* width: 1274px; */
width: 12.74rem;
}
.w1000 {
width: 1000px;
/* width: 1000px; */
width:10rem;
}
/* .w1368 {
width: 13.68rem;

28
public/static/index/pc/css/topic_laptop/readon.css
View File

@@ -2,26 +2,16 @@
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;
/* max-width: 1440px;
min-width: 1280px; */
width: 14.4rem;
margin: 0 auto;
}
.readon-t {
@@ -56,10 +46,11 @@
margin-top: 0.72rem;
font-family: "HarmonyOS-Light";
}
.readon-img {
.readon-img,.readon-img1 {
width: 100%;
/* max-w
max-width: 1440px;
min-width: 1280px;
min-width: 1280px; */
margin-top:2.37rem;
}
.readon-img img {
@@ -67,6 +58,11 @@
max-width: 3.78rem;
aspect-ratio: 378/218;
}
.readon-img1 img {
width: 100%;
max-width: 3.73rem;
/* aspect-ratio: 378/218; */
}
.readon-img-box {
width: 100%;
min-width: 1280px;

16
public/static/index/pc/css/topic_laptop/th.css
View File

@@ -57,9 +57,9 @@
}
.tab-content {
width: 1440px;
max-width: 1440px;
min-width: 1280px;
width: 14.4rem;
max-width: 14.4rem;
/* min-width: 1280px; */
margin: 0 auto;
}
@@ -108,6 +108,14 @@
color: #cbcfd8;
width: 100%;
text-align: center;
margin-top: 2.97rem;
margin-top: 2.97rem;
margin-bottom: 1rem;
display: none;
}
.tab-t.active {
display: block;
}
/* .tab-ts {
margin-top: 2.97rem;
margin-bottom: 1rem;
} */

1
public/static/index/pc/css/topic_laptop/wift.css
View File

@@ -50,6 +50,7 @@
color: #cbcfd8;
text-align: center;
margin-top: 2.95rem;
font-size: 0.72rem;
}
.wift-t div:nth-child(1) {
font-size: 0.72rem;

6
public/static/index/pc/css/topic_laptop/windows.css
View File

@@ -1,12 +1,12 @@
.windows {
max-width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
/* min-width: 1280px; */
position: relative;
width: 100%;
aspect-ratio: 1440/1399; /* 2560/1440=16/9，核心比例约束 */
/* background: url('../img/windows1.png');
background-repeat: no-repeat;
background-size: 100% auto; */
min-width: 1280px;
/* min-width: 1280px; */
margin: 0 auto;
}

8
public/static/index/pc/css/topic_laptop/xn.css
View File

@@ -1,7 +1,7 @@
/* 页面容器（模拟官网宽屏布局） */
.xn-container {
min-width: 1280px;
max-width: 1440px;
/* min-width: 1280px; */
max-width: 14.4rem;
width: 100%;
margin: 0 auto;
}
@@ -12,8 +12,8 @@
border-radius: 16px;
/* 官网图片圆角风格 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
max-width: 1440px;
min-width: 1280px;
max-width: 14.4rem;
/* min-width: 1280px; */
margin: 0 auto;
background: #0d0c10;
border:1px solid #3f3f45;