feat: 适配手机端

This commit is contained in:
yarnom 2025-07-04 13:29:50 +08:00
parent 71c56c6eb3
commit c0ba5fc4b9

View File

@ -255,8 +255,7 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.layuimini-main { .layuimini-main {
height: calc(100vh - 20px); height: 108vh;
height: calc(100dvh - 20px); /* 动态视口高度,支持移动端 */
overflow: hidden; overflow: hidden;
} }
@ -322,7 +321,7 @@
/* 移动端工具栏适配 */ /* 移动端工具栏适配 */
.map-toolbar { .map-toolbar {
position: static; position: absolute;
transform: none; transform: none;
left: auto; left: auto;
margin: 8px; margin: 8px;
@ -332,11 +331,13 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 6px;
padding: 6px 10px; padding: 6px 10px;
top:0px;
} }
.toolbar-item { .toolbar-item {
gap: 4px; gap: 4px;
flex: 0 0 auto; flex: 0 0 auto;
width:100%
} }
.toolbar-label { .toolbar-label {
@ -350,8 +351,7 @@
.toolbar-input { .toolbar-input {
font-size: 11px; font-size: 11px;
height: 24px; height: 24px;
min-width: 80px; width: 100%;
width: auto;
} }
.toolbar-btn { .toolbar-btn {
@ -403,12 +403,15 @@
.dropdown-container { .dropdown-container {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%;
} }
.dropdown-toggle { .dropdown-toggle {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%;
justify-content: center;
} }
.dropdown-toggle::after { .dropdown-toggle::after {
@ -635,10 +638,10 @@
<div class="dropdown-group"> <div class="dropdown-group">
<div class="dropdown-group-title">测量工具</div> <div class="dropdown-group-title">测量工具</div>
<div class="dropdown-item" onclick="toggleMeasureDistance()"> <div class="dropdown-item" onclick="toggleMeasureDistance()">
<i class="fa fa-ruler"></i> 测距 测距
</div> </div>
<div class="dropdown-item" onclick="clearMeasure()"> <div class="dropdown-item" onclick="clearMeasure()">
<i class="fa fa-eraser"></i> 清除测距 清除测距
</div> </div>
</div> </div>
</div> </div>