Преглед изворни кода

状态监测左侧菜单:修正搜索框✕清除图标的位置,严格锚定到输入框右侧居中

画安 пре 3 недеља
родитељ
комит
aab22b5224
1 измењених фајлова са 28 додато и 19 уклоњено
  1. 28 19
      src/views/StatusMonitoring.vue

+ 28 - 19
src/views/StatusMonitoring.vue

@@ -33,14 +33,16 @@
                 <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
                     <TechTabPane label="总览" name="overview" class="menu-scroll-view" :loading="menuData.length === 0">
                         <div class="menu-search">
-                            <input
-                                v-model="menuQueries.overview"
-                                class="menu-search-input"
-                                placeholder="请输入路口名"
-                                @compositionstart="menuSearchComposing = true"
-                                @compositionend="menuSearchComposing = false"
-                            />
-                            <i v-if="menuQueries.overview" class="menu-search-clear" @click="menuQueries.overview = ''">✕</i>
+                            <div class="menu-search-box">
+                                <input
+                                    v-model="menuQueries.overview"
+                                    class="menu-search-input"
+                                    placeholder="请输入路口名"
+                                    @compositionstart="menuSearchComposing = true"
+                                    @compositionend="menuSearchComposing = false"
+                                />
+                                <i v-if="menuQueries.overview" class="menu-search-clear" @click="menuQueries.overview = ''">✕</i>
+                            </div>
                         </div>
                         <div v-if="menuQueries.overview && !menuSearchComposing && filteredOverviewMenu.length === 0" class="menu-search-empty">无匹配路口</div>
                         <MenuItem theme="tech" v-for="item in filteredOverviewMenu" :key="item.id" :node="item" :level="0"
@@ -48,14 +50,16 @@
                     </TechTabPane>
                     <TechTabPane label="路口" name="crossing" class="menu-scroll-view" :loading="menuData.length === 0">
                         <div class="menu-search">
-                            <input
-                                v-model="menuQueries.crossing"
-                                class="menu-search-input"
-                                placeholder="请输入路口名"
-                                @compositionstart="menuSearchComposing = true"
-                                @compositionend="menuSearchComposing = false"
-                            />
-                            <i v-if="menuQueries.crossing" class="menu-search-clear" @click="menuQueries.crossing = ''">✕</i>
+                            <div class="menu-search-box">
+                                <input
+                                    v-model="menuQueries.crossing"
+                                    class="menu-search-input"
+                                    placeholder="请输入路口名"
+                                    @compositionstart="menuSearchComposing = true"
+                                    @compositionend="menuSearchComposing = false"
+                                />
+                                <i v-if="menuQueries.crossing" class="menu-search-clear" @click="menuQueries.crossing = ''">✕</i>
+                            </div>
                         </div>
                         <div v-if="menuQueries.crossing && !menuSearchComposing && filteredCrossingMenu.length === 0" class="menu-search-empty">无匹配路口</div>
                         <MenuItem theme="tech" v-for="item in filteredCrossingMenu" :key="item.id" :node="item" :level="0"
@@ -832,13 +836,18 @@ export default {
 </script>
 <style scoped>
 .menu-search {
-    position: relative;
     padding: 8px 10px 6px;
     background: #05142e;
 }
-.menu-search-input {
+/* 内层 wrap:以输入框为定位上下文,✕ 严格相对输入框右侧居中 */
+.menu-search-box {
+    position: relative;
     width: 100%;
     height: 32px;
+}
+.menu-search-input {
+    width: 100%;
+    height: 100%;
     padding: 0 28px 0 10px;
     background: rgba(5, 22, 45, 0.9);
     border: 1px solid #1e4d8e;
@@ -857,7 +866,7 @@ export default {
 }
 .menu-search-clear {
     position: absolute;
-    right: 18px;
+    right: 8px;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;