diff --git a/design1.html b/design1.html
index fc446ed..ae3f866 100644
--- a/design1.html
+++ b/design1.html
@@ -1,5 +1,6 @@
+
@@ -10,17 +11,23 @@
/* ==================================================
1. 全局布局 (Flex 自适应：完美兼容 Windows/Mac)
================================================== */
-
- * { box-sizing: border-box; }
- html, body, .layui-fluid, .layui-row {
+ * {
+ box-sizing: border-box;
+ }
+
+ html,
+ body,
+ .layui-fluid,
+ .layui-row {
height: 100%;
width: 100%;
overflow: hidden !important;
margin: 0;
padding: 0;
- background-color: #1E1E1E; /* 画布底色保持深黑 */
- -webkit-font-smoothing: antialiased;
+ background-color: #1E1E1E;
+ /* 画布底色保持深黑 */
+ -webkit-font-smoothing: antialiased;
}
/* --- 左侧主区域 --- */
@@ -29,12 +36,14 @@
display: flex !important;
flex-direction: column;
overflow: hidden;
- border-right: 1px solid #1E1E1E; /* 分隔线 */
+ border-right: 1px solid #1E1E1E;
+ /* 分隔线 */
}
/* --- 右侧属性栏 (修复：恢复灰色背景) --- */
.col-right {
- background-color: #31373D; /* 【颜色修复】 */
+ background-color: #31373D;
+ /* 【颜色修复】 */
height: 100%;
display: flex;
flex-direction: column;
@@ -43,20 +52,25 @@
/* --- 顶部工具栏 (修复：恢复灰色背景) --- */
.tools-bar {
- background-color: #31373D; /* 【颜色修复】 */
- flex-shrink: 0;
+ background-color: #31373D;
+ /* 【颜色修复】 */
+ flex-shrink: 0;
/* 保持你原有的高度或内边距设定，如果有的话 */
}
/* --- 修复切换按钮被挤压换行的问题 --- */
#version_change {
- white-space: nowrap; /* 【按钮修复】禁止文字换行 */
- flex-shrink: 0; /* 【按钮修复】禁止被压缩 */
- min-width: 60px; /* 给一个最小宽度 */
+ white-space: nowrap;
+ /* 【按钮修复】禁止文字换行 */
+ flex-shrink: 0;
+ /* 【按钮修复】禁止被压缩 */
+ min-width: 60px;
+ /* 给一个最小宽度 */
display: flex;
align-items: center;
justify-content: center;
}
+
/* 确保所有顶部图标容器不被压缩 */
.img-warp {
flex-shrink: 0;
@@ -64,31 +78,36 @@
/* --- 中间主要容器 --- */
.container {
- flex: 1;
- display: flex;
+ flex: 1;
+ display: flex;
overflow: hidden;
- height: 0;
- min-height: 0;
+ height: 0;
+ min-height: 0;
}
/* 左侧工具箱 */
.container .left {
- width: 50px;
+ width: 50px;
flex-shrink: 0;
overflow-y: auto;
- background-color: #31373D; /* 保持灰色 */
- -ms-overflow-style: none;
- scrollbar-width: none;
+ background-color: #31373D;
+ /* 保持灰色 */
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ .container .left::-webkit-scrollbar {
+ display: none;
}
- .container .left::-webkit-scrollbar { display: none; }
/* 右侧画布区域 */
.container .right {
- flex: 1;
+ flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
- background-color: #1E252D; /* 画布背景深色 */
+ background-color: #1E252D;
+ /* 画布背景深色 */
position: relative;
}
@@ -105,30 +124,31 @@
.canvas-wrapper {
width: 100%;
height: 100%;
- overflow: auto;
+ overflow: auto;
position: relative;
}
/* 底部状态栏 (X: Y:) */
.footer {
- height: 30px;
+ height: 30px;
background-color: #31373D;
color: #ccc;
padding-left: 10px;
- flex-shrink: 0;
+ flex-shrink: 0;
z-index: 100;
border-top: 1px solid #1E1E1E;
/* 2. 使用 Flex 布局来控制文字位置 */
display: flex;
- align-items: center; /* 让文字垂直居中 */
+ align-items: center;
+ /* 让文字垂直居中 */
/* 3. 【核心修复】增加底部内边距，把文字往上顶 */
/* 这样文字距离窗口底部就有 10px 的安全距离，不会被切掉 */
- padding-bottom: 5px;
-
+ padding-bottom: 5px;
+
/* 4. 兼容性设置 */
- box-sizing: border-box;
+ box-sizing: border-box;
}
/* ==================================================
@@ -136,27 +156,31 @@
================================================== */
.obj_list {
width: 100%;
- overflow-y: auto;
+ overflow-y: auto;
overflow-x: hidden;
/* 这里的背景色也跟随父容器，或者设为透明 */
- background-color: #31373D;
+ background-color: #31373D;
}
.layer-row {
display: flex !important;
- justify-content: space-between;
+ justify-content: space-between;
align-items: center;
height: 36px;
padding: 0 5px;
cursor: pointer;
- border-bottom: 1px solid #444; /* 线条稍微深一点 */
- background-color: transparent; /* 默认透明，显示底色 */
+ border-bottom: 1px solid #444;
+ /* 线条稍微深一点 */
+ background-color: transparent;
+ /* 默认透明，显示底色 */
color: #ccc;
font-size: 12px;
position: relative;
}
+
.layer-row:hover {
- background-color: #4A525A; /* 悬停颜色稍微亮一点 */
+ background-color: #4A525A;
+ /* 悬停颜色稍微亮一点 */
}
.layer-left {
@@ -164,7 +188,7 @@
align-items: center;
overflow: hidden;
white-space: nowrap;
- max-width: 180px;
+ max-width: 180px;
}
.layer-index {
@@ -180,16 +204,18 @@
================================================== */
/* 1. 保留：背景图样式 (不动) */
- #source_front, #source_front2, #source_back {
- width: 2787px;
- height: 2787px;
+ #source_front,
+ #source_front2,
+ #source_back {
+ width: 2787px;
+ height: 2787px;
border-radius: 50%;
}
-
+
.ruler-container {
- position: relative;
+ position: relative;
background-color: #2C2C2C;
- border: 1px solid #1E1E1E;
+ border: 1px solid #1E1E1E;
overflow: hidden;
}
@@ -200,11 +226,11 @@
left: 0;
height: 20px;
/* 改为 rgba 实现 70% 透明 */
- background-color: rgba(44, 44, 44, 0.7) !important;
+ background-color: rgba(44, 44, 44, 0.7) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1000;
/* 鼠标移上去显示上下调整箭头，提示可拖拽 */
- cursor: row-resize;
+ cursor: row-resize;
}
.ruler-vertical {
@@ -231,16 +257,18 @@
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1001;
}
-
+
/* 3. 新增：拖拽过程中的辅助线样式 */
.guide-line-drag {
position: absolute;
- background-color: #00FFFF; /* 青色高亮 */
+ background-color: #00FFFF;
+ /* 青色高亮 */
z-index: 9999;
- pointer-events: none; /* 让鼠标穿透，不影响拖拽事件 */
- box-shadow: 0 0 4px #00FFFF; /* 发光效果 */
+ pointer-events: none;
+ /* 让鼠标穿透，不影响拖拽事件 */
+ box-shadow: 0 0 4px #00FFFF;
+ /* 发光效果 */
}
-
@@ -293,7 +321,8 @@
-