<template> <!-- 地图 --> <div class="position-r" id="map"> <newFiberMapBox :initJson="`/static/libs/mapbox/style/TemporaryProject.json`"></newFiberMapBox> </div> <!-- 中部搜索框 --> <div class="searchBoxA"> <input class="searchInputA" v-model="AllData.searchV" confirm-type="search" placeholder="请输入站点名称" /> <img :src="getImgPatrol('Search.png')" class="SearchIconA" alt="" @click="getList()" /> </div> </template> <script setup name="informationManagement"> import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue'; import { getImgPatrol } from '@/utils/common.js'; const AllData = reactive({ searchV: '', }); // 查询接口 const getList = async () => { console.log('点击'); }; </script> <style lang="less" scoped> .position-r { position: relative; width: 100%; height: 100%; // background: #c6c6c6; } .searchBoxA { width: 100%; height: 80px; // background: red; position: absolute; top: 100px; z-index: 99; .searchInputA { width: 100%; box-sizing: border-box; padding: 0 36px 0 20px; height: 73px; background: #f3f3f3b3; border-radius: 10px; border: none; } .SearchIconA { width: 45px; height: 45px; position: absolute; right: 50px; top: 15px; } } </style>