yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

w
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-21 23:02:29 +08:00
parent 74f21800ff
commit 3c3e46d34e
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/index.css
View File

@@ -70,23 +70,23 @@
pointer-events: auto; pointer-events: auto;
} }
/* 3D 地球容器：位于轮播图偏中右位置 */ /* 3D 地球容器：与 section-content 右对齐（和下方卡片区域右边保持一致） */
.banner-globe { .banner-globe {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 6%; /* 略向中间移动一点，留出更大的展示区域 */ /* 相对于 section-content 右对齐，section-content padding-right 为 20px */
right: 20px;
transform: translateY(-50%); transform: translateY(-50%);
/* 展示区域足够大，球体本身通过 three.js 缩放变小 */
width: 420px; width: 420px;
height: 420px; height: 420px;
z-index: 20; /* 高于轮播图与文案层 */ z-index: 20; /* 高于轮播图与文案层 */
pointer-events: none; /* 不影响轮播图滑动与点击 */ pointer-events: none; /* 不影响轮播图滑动与点击 */
} }
/* 中等屏幕下缩小地球，避免挡住文案 */ /* 中等屏幕下稍微缩小地球，避免挡住文案 */
@media (max-width: 1400px) { @media (max-width: 1400px) {
.banner-globe { .banner-globe {
right: 4%; right: 20px;
width: 360px; width: 360px;
height: 360px; height: 360px;
} }

6
index.html
View File

@@ -38,12 +38,12 @@
style="display: none;" style="display: none;"
></a> ></a>
</div> </div>
</div> <!-- 3D 地球容器（Three.js 渲染输出挂载到这里），与下方卡片区域共用 section-content 对齐 -->
</div>
<!-- 3D 地球容器（Three.js 渲染输出挂载到这里） -->
<div id="bannerGlobe" class="banner-globe"></div> <div id="bannerGlobe" class="banner-globe"></div>
</div> </div>
</div> </div>
</div>
</div>
<div class="banner-s"> <div class="banner-s">
<div class="section-content banner-list"> <div class="section-content banner-list">
<div class="banner-item" id="cloud-box"> <div class="banner-item" id="cloud-box">