This commit is contained in:
@@ -107,6 +107,13 @@ abstract class Common extends BaseController
|
||||
'status' => 1
|
||||
])
|
||||
->where('status', '=', 1)
|
||||
->where(function($query) {
|
||||
// 临时代码，移动端暂时不显示 "AI PC"
|
||||
if (request()->from == 'mobile') {
|
||||
$table_name = SysNavigationItemModel::getTable();
|
||||
$query->whereNotIn($table_name . ".id", [77, 78]);
|
||||
}
|
||||
})
|
||||
->order(['sort' => 'asc', 'id' => 'asc'])
|
||||
->select();
|
||||
if ($nav->isEmpty()) {
|
||||
|
||||
@@ -186,12 +186,16 @@
|
||||
<div class="readon-t">{$gpu_first_section.title|default=''|raw}</div>
|
||||
{eq name=":cookie('think_lang')" value="en-us"}
|
||||
<div class="readon-js1">{$gpu_first_section.short_title|default=''|raw}</div>
|
||||
<div class="readon-img1 opacity0" data-order="10">
|
||||
<img src="{$gpu_first_section.extra_image|default=''}" alt="">
|
||||
</div>
|
||||
{else/}
|
||||
<div class="readon-js">{$gpu_first_section.short_title|default=''|raw}</div>
|
||||
{/eq}
|
||||
<div class="readon-img opacity0" data-order="10">
|
||||
<img src="{$gpu_first_section.extra_image|default=''}" alt="">
|
||||
</div>
|
||||
{/eq}
|
||||
|
||||
</div>
|
||||
<div class="readon-img-box opacity0" data-order="11">
|
||||
{volist name="data.gpu" id="go"}
|
||||
@@ -299,7 +303,7 @@
|
||||
src="{$data.cooling_system.0.video|default=''}"
|
||||
class="fs-video" muted loop playsinline autoplay
|
||||
preload="auto"
|
||||
style="display: none;width:1440px;height: 100%;margin:0 auto;">
|
||||
style="display: none;width: 100%;">
|
||||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||
</video>
|
||||
<div class="fs-ts">{$data.cooling_system.0.desc|raw}</div>
|
||||
@@ -490,11 +494,11 @@
|
||||
</div>
|
||||
{/notempty}
|
||||
{notempty name="data.camare_microphone_security"}
|
||||
{assign name="cms_section_title" value=":array_shift($data.camare_microphone_security)"/}
|
||||
{assign name="camare_microphone" value=":array_shift($data.camare_microphone_security)"/}
|
||||
{assign name="security" value=":array_shift($data.camare_microphone_security)"/}
|
||||
<div class="tabs-container">
|
||||
<div class="tab-t opacity0" data-order="30">{$cms_section_title.title|default=''}</div>
|
||||
<div class="tab-t active opacity0" data-index="0" data-order="30">{$camare_microphone.title|default=''}</div>
|
||||
<div class="tab-t opacity0" data-index="1" data-order="30">{$security.title|default=''}</div>
|
||||
<div class="tab-content">
|
||||
{notempty name="camare_microphone"}
|
||||
<div class="tab-panel active">
|
||||
@@ -508,7 +512,7 @@
|
||||
<video
|
||||
src="{$security.video}"
|
||||
id="securityVideo" class="content-video" muted loop playsinline autoplay
|
||||
style="width: 100%;margin:0 auto;max-width: 1440px;min-width: 1280px">
|
||||
style="width: 100%;margin:0 auto;max-width: 1440px;">
|
||||
您的浏览器不支持HTML5视频播放，请升级浏览器
|
||||
</video>
|
||||
</div>
|
||||
@@ -516,16 +520,16 @@
|
||||
</div>
|
||||
<div class="tabs-header-box">
|
||||
<div class="tabs-header">
|
||||
{notempty name="camare_microphone"}<div class="tab-item active" data-index="0">{$camare_microphone.title}</div>{/notempty}
|
||||
{notempty name="security"}<div class="tab-item" data-index="1">{$security.title}</div>{/notempty}
|
||||
{notempty name="camare_microphone"}<div class="tab-item active" data-index="0">{$camare_microphone.short_title|default=''}</div>{/notempty}
|
||||
{notempty name="security"}<div class="tab-item" data-index="1">{$security.short_title|default=''}</div>{/notempty}
|
||||
<div class="tab-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
{notempty name="camare_microphone"}
|
||||
<div class="tabs-p active" data-index="0">{$camare_microphone.short_title}</div>
|
||||
<div class="tabs-p active" data-index="0">{$camare_microphone.desc|default=''|raw}</div>
|
||||
{/notempty}
|
||||
{notempty name="security"}
|
||||
<div class="tabs-p" data-index="1">{$security.short_title}</div>
|
||||
<div class="tabs-p" data-index="1">{$security.desc|default=''|raw}</div>
|
||||
{/notempty}
|
||||
</div>
|
||||
{/notempty}
|
||||
@@ -543,7 +547,11 @@
|
||||
{/notempty}
|
||||
{notempty name="data.webpage_footnotes"}
|
||||
<div class="bottom-text">
|
||||
{eq name=":cookie('think_lang')" value="en-us"}
|
||||
<div class="bottom-p1">{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}</div>
|
||||
{else/}
|
||||
<div class="bottom-p">{$data.webpage_footnotes.desc|raw|htmlspecialchars_decode}</div>
|
||||
{/eq}
|
||||
</div>
|
||||
{/notempty}
|
||||
{/block}
|
||||
@@ -1225,9 +1233,10 @@
|
||||
const tabItems = document.querySelectorAll('.tab-item');
|
||||
const tabPanels = document.querySelectorAll('.tab-panel');
|
||||
const tabPs = document.querySelectorAll('.tabs-p');
|
||||
const tabT = document.querySelectorAll('.tab-t');
|
||||
const indicator = document.querySelector('.tab-indicator');
|
||||
const securityVideo = document.getElementById('securityVideo');
|
||||
|
||||
console.log(tabT,'=========tabT=============')
|
||||
let prevIndex = 0;
|
||||
const tabRects = [];
|
||||
|
||||
@@ -1279,9 +1288,13 @@
|
||||
|
||||
tabPanels[prevIndex].classList.remove('active');
|
||||
tabPanels[index].classList.add('active');
|
||||
|
||||
tabPs[prevIndex].classList.remove('active');
|
||||
tabPs[index].classList.add('active');
|
||||
|
||||
tabT[prevIndex].classList.remove('active');
|
||||
tabT[index].classList.add('active');
|
||||
console.log(tabT,'=tabT=')
|
||||
if (index === 1) {
|
||||
playVideo();
|
||||
} else if (prevIndex === 1) {
|
||||
@@ -1318,140 +1331,108 @@
|
||||
resetVideo();
|
||||
});
|
||||
|
||||
// 自定义轮播
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 1. 获取元素（匹配你的结构）
|
||||
const carouselImgs = document.querySelector('.carousel-imgs');
|
||||
const imgItems = document.querySelectorAll('.carousel-img');
|
||||
const leftArrow = document.querySelector('.arrow-left');
|
||||
const rightArrow = document.querySelector('.arrow-right');
|
||||
const textItems = document.querySelectorAll('.carousel-text');
|
||||
const carouselWrapper = document.querySelector('.carousel-wrapper');
|
||||
const carouselContainer = document.querySelector('.carousel-container');
|
||||
|
||||
// 容错处理
|
||||
if (!carouselImgs || imgItems.length === 0) {
|
||||
console.warn('轮播图片为空，初始化终止');
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 核心变量（仅索引，无尺寸计算）
|
||||
const imgCount = imgItems.length;
|
||||
const imgWidth = 1440;
|
||||
let currentOffset = -imgWidth;
|
||||
let currentIndex = 0;
|
||||
let autoPlayTimer = null;
|
||||
let isAnimating = false;
|
||||
let isResizing = false; // 缩放锁，避免重复触发
|
||||
|
||||
const firstImgClone = imgItems[0].cloneNode(true);
|
||||
carouselImgs.appendChild(firstImgClone);
|
||||
const lastImgClone = imgItems[imgCount - 1].cloneNode(true);
|
||||
carouselImgs.insertBefore(lastImgClone, imgItems[0]);
|
||||
const allImgItems = document.querySelectorAll('.carousel-img');
|
||||
// 3. 切换到指定索引（核心：百分比偏移，无尺寸计算）
|
||||
const goToIndex = (index) => {
|
||||
// 边界处理
|
||||
if (index < 0) index = imgCount - 1;
|
||||
if (index >= imgCount) index = 0;
|
||||
|
||||
carouselImgs.style.transform = `translateX(-${imgWidth}px)`;
|
||||
carouselImgs.style.transition = 'transform 0.5s ease-out';
|
||||
|
||||
const slideToRight = () => {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
|
||||
currentOffset -= imgWidth;
|
||||
carouselImgs.style.transform = `translateX(${currentOffset}px)`;
|
||||
|
||||
if (currentOffset <= -(imgWidth * (imgCount + 1))) {
|
||||
setTimeout(() => {
|
||||
carouselImgs.style.transition = 'none';
|
||||
currentOffset = -imgWidth;
|
||||
carouselImgs.style.transform = `translateX(${currentOffset}px)`;
|
||||
setTimeout(() => {
|
||||
carouselImgs.style.transition = 'transform 0.5s ease-out';
|
||||
isAnimating = false;
|
||||
}, 50);
|
||||
}, 500);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
updateTextActive();
|
||||
};
|
||||
|
||||
const slideToLeft = () => {
|
||||
if (isAnimating) return;
|
||||
isAnimating = true;
|
||||
|
||||
currentOffset += imgWidth;
|
||||
carouselImgs.style.transform = `translateX(${currentOffset}px)`;
|
||||
|
||||
if (currentOffset >= 0) {
|
||||
setTimeout(() => {
|
||||
carouselImgs.style.transition = 'none';
|
||||
currentOffset = -(imgWidth * imgCount);
|
||||
carouselImgs.style.transform = `translateX(${currentOffset}px)`;
|
||||
setTimeout(() => {
|
||||
carouselImgs.style.transition = 'transform 0.5s ease-out';
|
||||
isAnimating = false;
|
||||
}, 50);
|
||||
}, 500);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
updateTextActive();
|
||||
};
|
||||
|
||||
const updateTextActive = () => {
|
||||
let currentIndex = Math.abs(Math.round(currentOffset / imgWidth)) - 1;
|
||||
currentIndex = currentIndex % imgCount;
|
||||
if (currentIndex < 0) currentIndex = imgCount - 1;
|
||||
// 关键：用百分比偏移，彻底避开rem/px计算误差
|
||||
carouselImgs.style.transform = `translateX(-${index * 100}%)`;
|
||||
currentIndex = index;
|
||||
|
||||
// 更新文字激活态
|
||||
textItems.forEach((item, idx) => {
|
||||
item.classList.toggle('active', idx === currentIndex);
|
||||
});
|
||||
};
|
||||
|
||||
// 4. 左右切换逻辑
|
||||
const slideNext = () => goToIndex(currentIndex + 1);
|
||||
const slidePrev = () => goToIndex(currentIndex - 1);
|
||||
|
||||
// 5. 自动播放逻辑
|
||||
const autoPlay = () => {
|
||||
clearInterval(autoPlayTimer);
|
||||
autoPlayTimer = setInterval(() => {
|
||||
slideToRight();
|
||||
}, 2500);
|
||||
autoPlayTimer = setInterval(slideNext, 3000); // 3秒切换，可改
|
||||
};
|
||||
|
||||
const restartAutoPlay = () => {
|
||||
clearInterval(autoPlayTimer);
|
||||
// 6. 绑定事件
|
||||
// 箭头点击
|
||||
leftArrow?.addEventListener('click', () => {
|
||||
slidePrev();
|
||||
autoPlay(); // 点击后重启自动播放
|
||||
});
|
||||
rightArrow?.addEventListener('click', () => {
|
||||
slideNext();
|
||||
autoPlay();
|
||||
});
|
||||
|
||||
// 文字指示器点击
|
||||
textItems.forEach((item, idx) => {
|
||||
item.addEventListener('click', () => {
|
||||
goToIndex(idx);
|
||||
autoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标悬停暂停
|
||||
carouselContainer?.addEventListener('mouseenter', () => {
|
||||
clearInterval(autoPlayTimer);
|
||||
});
|
||||
carouselContainer?.addEventListener('mouseleave', autoPlay);
|
||||
|
||||
// 7. 窗口缩放响应（核心：仅重新定位，无计算）
|
||||
const handleResize = () => {
|
||||
if (isResizing) return;
|
||||
isResizing = true;
|
||||
|
||||
// 缩放时直接重新定位当前索引（百分比偏移无需计算）
|
||||
goToIndex(currentIndex);
|
||||
|
||||
// 解锁
|
||||
setTimeout(() => {
|
||||
isResizing = false;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
if (leftArrow) {
|
||||
leftArrow.addEventListener('click', () => {
|
||||
slideToLeft();
|
||||
restartAutoPlay();
|
||||
});
|
||||
}
|
||||
if (rightArrow) {
|
||||
rightArrow.addEventListener('click', () => {
|
||||
slideToRight();
|
||||
restartAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
if (carouselWrapper) {
|
||||
carouselWrapper.addEventListener('mouseenter', () => {
|
||||
clearInterval(autoPlayTimer);
|
||||
});
|
||||
carouselWrapper.addEventListener('mouseleave', () => {
|
||||
autoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
autoPlay();
|
||||
updateTextActive();
|
||||
// 防抖监听窗口缩放
|
||||
let resizeTimer;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(handleResize, 150);
|
||||
});
|
||||
|
||||
// 8. 初始化
|
||||
goToIndex(0); // 初始定位到第一张
|
||||
autoPlay(); // 启动自动播放
|
||||
|
||||
// 9. 页面卸载清理定时器
|
||||
window.addEventListener('beforeunload', () => {
|
||||
const carouselWrapper = document.querySelector('.carousel-wrapper');
|
||||
if (carouselWrapper && carouselWrapper.autoPlayTimer) {
|
||||
clearInterval(carouselWrapper.autoPlayTimer);
|
||||
}
|
||||
clearInterval(autoPlayTimer);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
|
||||
@@ -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; */
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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; */
|
||||
|
||||
@@ -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; */
|
||||
}
|
||||
@@ -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 */
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
/* 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);
|
||||
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 */
|
||||
}
|
||||
|
||||
/* 响应式适配：小屏幕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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -110,4 +110,12 @@
|
||||
text-align: center;
|
||||
margin-top: 2.97rem;
|
||||
margin-bottom: 1rem;
|
||||
display: none;
|
||||
}
|
||||
.tab-t.active {
|
||||
display: block;
|
||||
}
|
||||
/* .tab-ts {
|
||||
margin-top: 2.97rem;
|
||||
margin-bottom: 1rem;
|
||||
} */
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user