diff --git a/frontend/public/earth/css/base.css b/frontend/public/earth/css/base.css index 589c1feb..62d0e4e5 100644 --- a/frontend/public/earth/css/base.css +++ b/frontend/public/earth/css/base.css @@ -23,32 +23,52 @@ body { cursor: grabbing; } -/* Zoom Toolbar - Top Center */ -#zoom-toolbar { +/* Right Toolbar Group */ +#right-toolbar-group { position: absolute; - top: 20px; - left: 50%; - transform: translateX(-50%); + bottom: 20px; + right: 290px; display: flex; - align-items: center; - gap: 15px; - background: rgba(10, 10, 30, 0.9); - padding: 10px 20px; - border-radius: 30px; - border: 1px solid rgba(77, 184, 255, 0.3); - box-shadow: 0 0 20px rgba(77, 184, 255, 0.2); + flex-direction: column; + align-items: flex-end; + gap: 10px; z-index: 200; } +/* Zoom Toolbar - Right side, vertical */ +#zoom-toolbar { + position: relative; + bottom: auto; + right: auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + background: rgba(10, 10, 30, 0.9); + padding: 8px 4px; + border-radius: 24px; + border: 1px solid rgba(77, 184, 255, 0.3); + box-shadow: 0 0 20px rgba(77, 184, 255, 0.2); +} + +#zoom-toolbar #zoom-slider { + width: 4px; + height: 50px; + margin: 4px 0; + writing-mode: vertical-lr; + direction: rtl; + -webkit-appearance: slider-vertical; +} + #zoom-toolbar .zoom-percent { - font-size: 1.2rem; + font-size: 0.75rem; font-weight: 600; color: #4db8ff; - min-width: 60px; + min-width: 30px; text-align: center; cursor: pointer; - padding: 5px 10px; - border-radius: 5px; + padding: 2px 4px; + border-radius: 3px; transition: all 0.2s ease; } @@ -58,14 +78,14 @@ body { } #zoom-toolbar .zoom-btn { - width: 36px; - height: 36px; - min-width: 36px; + width: 28px; + height: 28px; + min-width: 28px; border: none; border-radius: 50%; background: rgba(77, 184, 255, 0.2); color: #4db8ff; - font-size: 22px; + font-size: 14px; font-weight: bold; cursor: pointer; display: flex; @@ -82,11 +102,6 @@ body { box-shadow: 0 0 10px rgba(77, 184, 255, 0.5); } -#zoom-toolbar #zoom-slider { - width: 100px; - margin-left: 10px; -} - #loading { position: absolute; top: 50%; @@ -212,72 +227,80 @@ input[type="range"]::-webkit-slider-thumb { /* Control Toolbar - Stellarium/Star Walk style */ #control-toolbar { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); + position: relative; + bottom: auto; + right: auto; display: flex; align-items: center; background: rgba(10, 10, 30, 0.9); - border-radius: 30px; - padding: 8px 12px; + border-radius: 24px; + padding: 8px; border: 1px solid rgba(77, 184, 255, 0.3); box-shadow: 0 0 20px rgba(77, 184, 255, 0.2); - z-index: 200; transition: all 0.3s ease; } #control-toolbar.collapsed { - padding: 8px 8px 8px 12px; + padding: 8px; } #control-toolbar.collapsed .toolbar-items { width: 0; padding: 0; + margin: 0; overflow: hidden; opacity: 0; } #toolbar-toggle { - font-size: 0; - min-width: 32px; + min-width: 28px; line-height: 1; transition: all 0.3s ease; + flex-shrink: 0; + background: transparent; + border: none; } -.toggle-circle { - width: 12px; - height: 12px; - border-radius: 50%; - background: rgba(77, 184, 255, 0.8); - box-shadow: 0 0 8px rgba(77, 184, 255, 0.6); +.toggle-arrow { + font-size: 14px; + color: #4db8ff; + transition: transform 0.3s ease; } -#control-toolbar:not(.collapsed) #toolbar-toggle { - background: rgba(77, 184, 255, 0.3); +#control-toolbar.collapsed .toggle-arrow { + transform: rotate(0deg); +} + +#control-toolbar:not(.collapsed) .toggle-arrow { + transform: rotate(180deg); +} + +#control-toolbar.collapsed #toolbar-toggle { + background: transparent; } .toolbar-items { display: flex; - gap: 4px; + gap: 6px; width: auto; - padding: 0 8px 0 4px; + padding: 0 4px 0 2px; overflow: visible; opacity: 1; transition: all 0.3s ease; border-right: 1px solid rgba(77, 184, 255, 0.3); margin-right: 4px; + flex-shrink: 0; } .toolbar-btn { position: relative; - width: 40px; - height: 40px; + width: 28px; + height: 28px; border: none; border-radius: 50%; background: rgba(77, 184, 255, 0.15); color: #4db8ff; - font-size: 18px; + font-size: 14px; cursor: pointer; display: flex; align-items: center; diff --git a/frontend/public/earth/index.html b/frontend/public/earth/index.html index 3645c7b4..21db28a5 100644 --- a/frontend/public/earth/index.html +++ b/frontend/public/earth/index.html @@ -21,13 +21,6 @@
-
- - 100% - - -
-

智能星球计划

现实层宇宙全息感知系统 | 卫星 · 海底光缆 · 算力基础设施
@@ -43,16 +36,25 @@
-
-
- - - - - - +
+
+ + + + 100% + +
+ +
+
+ + + + + +
+
-
diff --git a/frontend/public/earth/js/main.js b/frontend/public/earth/js/main.js index 5baa1672..fcda5cb1 100644 --- a/frontend/public/earth/js/main.js +++ b/frontend/public/earth/js/main.js @@ -92,7 +92,7 @@ function applyCableVisualState() { switch (state) { case CABLE_STATE.LOCKED: - c.material.opacity = CABLE_CONFIG.lockedOpacityMin + pulse * CABLE_CONFIG.pulseCoefficient; + c.material.opacity = 0.3 + pulse * 0.7; c.material.color.setRGB(1, 1, 1); break; case CABLE_STATE.HOVERED: