|
|
@@ -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;
|