choose start end point
This commit is contained in:
@ -3,12 +3,13 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||||
|
<link rel="shortcut icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue</title>
|
<title>Vite + Vue</title>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window._AMapSecurityConfig = {
|
window._AMapSecurityConfig = {
|
||||||
securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
|
securityJsCode: '2b65e7751cb17e4605f4c4cdccf885f6',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -5,75 +5,205 @@
|
|||||||
direction="ltr"
|
direction="ltr"
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
modal-class="control-drawer-modal"
|
modal-class="control-drawer-modal"
|
||||||
|
size="25%"
|
||||||
:modal="false"
|
:modal="false"
|
||||||
|
:show-close="false"
|
||||||
|
:with-header="false"
|
||||||
>
|
>
|
||||||
<ElForm :model="formData">
|
<el-row justify="center">
|
||||||
<ElFormItem label="起点" prop="startName">
|
<el-radio-group v-model="carType" size="small">
|
||||||
<ElSelect
|
<el-radio-button label="car">小车</el-radio-button>
|
||||||
v-model="formData.startName"
|
<el-radio-button label="truck">货车</el-radio-button>
|
||||||
clearable
|
</el-radio-group>
|
||||||
filterable
|
|
||||||
remote
|
|
||||||
placeholder="请选择起点"
|
|
||||||
remote-show-suffix
|
|
||||||
:remote-method="getAutoComplete"
|
|
||||||
@change="setCenter"
|
|
||||||
>
|
|
||||||
<ElOption
|
|
||||||
v-for="item in searchStartTips"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.name"
|
|
||||||
/>
|
|
||||||
</ElSelect>
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="终点">
|
|
||||||
<ElInput />
|
|
||||||
</ElFormItem>
|
|
||||||
</ElForm>
|
|
||||||
<el-row>
|
|
||||||
<ElButton type="primary" @click="searchRoute">查询</ElButton>
|
|
||||||
<ElButton type="success" @click="searchPoint">搜索</ElButton>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- :direction="direction"
|
<el-row :gutter="10" justify="space-between">
|
||||||
:before-close="handleClose" -->
|
<el-col :span="2">
|
||||||
<!-- <span>Hi, there!</span> -->
|
<div
|
||||||
|
:style="{
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-icon color="#30a1f0"><Sort /></el-icon>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
<el-form ref="routeFormRef" id="route-form" :model="formData">
|
||||||
|
<el-form-item prop="startName">
|
||||||
|
<el-popover
|
||||||
|
:width="300"
|
||||||
|
:visible="showStartSuggestion && !!formData.startName"
|
||||||
|
title="搜索建议"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="item in searchTips"
|
||||||
|
:key="item.id"
|
||||||
|
class="suggestion-item"
|
||||||
|
@click="searchPoint(item.name)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<template #reference>
|
||||||
|
<el-input
|
||||||
|
v-model="formData.startName"
|
||||||
|
size="small"
|
||||||
|
@keydown.enter="searchPoint(formData.startName)"
|
||||||
|
@input="getAutoComplete"
|
||||||
|
@focus="
|
||||||
|
nowSearch = 'start';
|
||||||
|
// map.clearMap();
|
||||||
|
showStartSuggestion = true;
|
||||||
|
"
|
||||||
|
@blur="
|
||||||
|
showStartSuggestion = false;
|
||||||
|
nowSearch = '';
|
||||||
|
"
|
||||||
|
:suffix-icon="
|
||||||
|
formData.startLngLat.length ? `circle-check-filled` : null
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #prepend>起</template>
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="endName">
|
||||||
|
<el-popover
|
||||||
|
:width="300"
|
||||||
|
:visible="showEndSuggestion && !!formData.endName"
|
||||||
|
title="搜索建议"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="item in searchTips"
|
||||||
|
:key="item.id"
|
||||||
|
class="suggestion-item"
|
||||||
|
@click="searchPoint(item.name)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
<template #reference>
|
||||||
|
<el-input
|
||||||
|
v-model="formData.endName"
|
||||||
|
size="small"
|
||||||
|
@input="map.clearMap(), getAutoComplete"
|
||||||
|
@keydown.enter="searchPoint(formData.endName)"
|
||||||
|
@focus="
|
||||||
|
nowSearch = 'end';
|
||||||
|
// map.clearMap();
|
||||||
|
showEndSuggestion = true;
|
||||||
|
"
|
||||||
|
@blur="
|
||||||
|
showEndSuggestion = false;
|
||||||
|
nowSearch = '';
|
||||||
|
// searchTips = [];
|
||||||
|
"
|
||||||
|
:suffix-icon="
|
||||||
|
formData.endLngLat.length ? `circle-check-filled` : null
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<template #prepend>终</template>
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
height: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-icon color="#30a1f0"><CirclePlusFilled /></el-icon>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row justify="space-between">
|
||||||
|
<el-button link @click="clearRoute" size="small">清除路线</el-button>
|
||||||
|
<el-button type="primary" @click="searchRoute" size="small"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
<!-- <ElButton type="success" @click="searchStartPoint">搜索</ElButton> -->
|
||||||
|
</el-row>
|
||||||
|
<el-tabs v-model="activeTabName" @tab-click="handleTabClick">
|
||||||
|
<el-tab-pane label="费用最低" name="LEAST_FEE">
|
||||||
|
<div v-for="item in routeList" :key="item.start_location.lng">
|
||||||
|
{{ item.instruction }}
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="时间最短" name="LEAST_TIME"
|
||||||
|
><div v-for="item in routeList" :key="item.start_location.lng">
|
||||||
|
{{ item.instruction }}
|
||||||
|
</div></el-tab-pane
|
||||||
|
>
|
||||||
|
<el-tab-pane label="距离最短" name="LEAST_DISTANCE"
|
||||||
|
><div v-for="item in routeList" :key="item.start_location.lng">
|
||||||
|
{{ item.instruction }}
|
||||||
|
</div></el-tab-pane
|
||||||
|
>
|
||||||
|
</el-tabs>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
<!-- <el-button id="drawer-switch" type="primary" circle></el-button> -->
|
<el-button
|
||||||
|
id="drawer-switch"
|
||||||
|
type="primary"
|
||||||
|
circle
|
||||||
|
:icon="drawer ? ArrowLeftBold : ArrowRightBold"
|
||||||
|
@click="switchDrawer"
|
||||||
|
></el-button>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
import { onMounted, reactive, ref, shallowRef, toRefs } from "vue";
|
import { onMounted, reactive, ref, shallowRef, toRefs } from "vue";
|
||||||
|
const carType = ref("car"); // car: 小车, truck: 卡车
|
||||||
const map = shallowRef(null);
|
const map = shallowRef(null);
|
||||||
|
const driving = shallowRef(null);
|
||||||
|
const truckDriving = shallowRef(null);
|
||||||
|
const startMarker = shallowRef(null);
|
||||||
|
const endMarker = shallowRef(null);
|
||||||
|
const geocoder = shallowRef(null);
|
||||||
|
const routeList = ref([]);
|
||||||
|
const routePlugins = {
|
||||||
|
car: driving,
|
||||||
|
truck: truckDriving,
|
||||||
|
};
|
||||||
|
const placeSearch = shallowRef(null);
|
||||||
|
const autoComplete = shallowRef(null);
|
||||||
const drawer = ref(true);
|
const drawer = ref(true);
|
||||||
const searchStartTips = ref([]);
|
const routeFormRef = ref(null);
|
||||||
const amapPlugins = reactive({
|
const searchTips = ref([]);
|
||||||
driving: undefined,
|
const nowSearch = ref("");
|
||||||
placeSearch: undefined,
|
const showStartSuggestion = ref(false);
|
||||||
autoComplete: undefined,
|
const showEndSuggestion = ref(false);
|
||||||
});
|
const activeTabName = ref("LEAST_FEE");
|
||||||
|
const routePolicy = ref("LEAST_FEE");
|
||||||
const { driving, placeSearch, autoComplete } = toRefs(amapPlugins);
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
formData: {
|
formData: {
|
||||||
startLngLat: "",
|
startLngLat: [],
|
||||||
startName: "",
|
startName: "",
|
||||||
|
endName: "",
|
||||||
|
endLngLat: [],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { formData } = toRefs(data);
|
const { formData } = toRefs(data);
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
// map.value=
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
// key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
plugins: [
|
plugins: [
|
||||||
"AMap.Driving",
|
"AMap.Driving",
|
||||||
"AMap.Scale",
|
"AMap.Scale",
|
||||||
"AMap.PlaceSearch",
|
"AMap.PlaceSearch",
|
||||||
"AMap.AutoComplete",
|
"AMap.AutoComplete",
|
||||||
|
"AMap.Geocoder",
|
||||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
AMapUI: {
|
AMapUI: {
|
||||||
// 是否加载 AMapUI，缺省不加载
|
// 是否加载 AMapUI，缺省不加载
|
||||||
@ -86,66 +216,176 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((AMap) => {
|
.then((AMap) => {
|
||||||
var map = new AMap.Map("map-container");
|
console.log(AMap.DrivingPolicy);
|
||||||
|
|
||||||
// AMap.plugin("AMap.Driving", () => {
|
map.value = new AMap.Map("map-container", {
|
||||||
|
zoom: 16, //级别
|
||||||
|
center: [117.290345, 31.797813],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载插件
|
||||||
driving.value = new AMap.Driving({
|
driving.value = new AMap.Driving({
|
||||||
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
||||||
policy: AMap.DrivingPolicy.LEAST_TIME,
|
policy: AMap.DrivingPolicy.LEAST_TIME,
|
||||||
map: map,
|
map: map.value,
|
||||||
});
|
});
|
||||||
placeSearch.value = new AMap.PlaceSearch({
|
placeSearch.value = new AMap.PlaceSearch({
|
||||||
map: map,
|
map: map.value,
|
||||||
});
|
|
||||||
console.log(AMap);
|
|
||||||
AMap.Event.addListener(placeSearch.value, "markerClick", function (e) {
|
|
||||||
//添加事件
|
|
||||||
console.log(e); //获取点标注位置
|
|
||||||
formData.value.startName = e.data.name;
|
|
||||||
formData.value.startLngLat = [e.data.location.lng, e.data.location.lat];
|
|
||||||
});
|
});
|
||||||
autoComplete.value = new AMap.AutoComplete({});
|
autoComplete.value = new AMap.AutoComplete({});
|
||||||
// autoComplete.value.
|
|
||||||
var clickHandler = function (e) {
|
|
||||||
console.log(
|
|
||||||
"您在[ " +
|
|
||||||
e.lnglat.getLng() +
|
|
||||||
"," +
|
|
||||||
e.lnglat.getLat() +
|
|
||||||
" ]的位置点击了地图！"
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 绑定事件
|
startMarker.value = new AMap.Marker();
|
||||||
map.on("click", clickHandler);
|
endMarker.value = new AMap.Marker();
|
||||||
// 解绑事件
|
geocoder.value = new AMap.Geocoder();
|
||||||
// map.off("click", clickHandler);
|
// city: "010", //城市设为北京，默认：“全国”
|
||||||
// });
|
// radius: 1000, //范围，默认：500
|
||||||
map.addControl(new AMap.Scale());
|
AMap.Event.addListener(placeSearch.value, "markerClick", (e) => {
|
||||||
|
//添加事件
|
||||||
|
console.log(e); //获取点标注位置
|
||||||
|
if (nowSearch.value === "start") {
|
||||||
|
formData.value.startName = e.data.name;
|
||||||
|
formData.value.startLngLat = [
|
||||||
|
e.data.location.lng,
|
||||||
|
e.data.location.lat,
|
||||||
|
];
|
||||||
|
} else if (nowSearch.value === "end") {
|
||||||
|
formData.value.endName = e.data.name;
|
||||||
|
formData.value.endLngLat = [e.data.location.lng, e.data.location.lat];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.value.on("click", (ev) => {
|
||||||
|
if (nowSearch.value === "start") {
|
||||||
|
startMarker.value.setPosition(
|
||||||
|
new AMap.LngLat(ev.lnglat.lng, ev.lnglat.lat)
|
||||||
|
);
|
||||||
|
map.value.add(startMarker.value);
|
||||||
|
regeoCode([ev.lnglat.lng, ev.lnglat.lat])
|
||||||
|
.then((address) => {
|
||||||
|
formData.value.startName = address;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
formData.value.startName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||||
|
});
|
||||||
|
formData.value.startLngLat = [ev.lnglat.lng, ev.lnglat.lat];
|
||||||
|
} else if (nowSearch.value === "end") {
|
||||||
|
endMarker.value.setPosition(
|
||||||
|
new AMap.LngLat(ev.lnglat.lng, ev.lnglat.lat)
|
||||||
|
);
|
||||||
|
map.value.add(endMarker.value);
|
||||||
|
regeoCode([ev.lnglat.lng, ev.lnglat.lat])
|
||||||
|
.then((address) => {
|
||||||
|
formData.value.endName = address;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// formData.value.startName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||||
|
formData.value.endName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||||
|
});
|
||||||
|
formData.value.endLngLat = [ev.lnglat.lng, ev.lnglat.lat];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.value.addControl(new AMap.Scale());
|
||||||
|
console.log(map.value.getAllOverlays());
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error(e); //加载错误提示
|
console.error(e); //加载错误提示
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据经纬度获取地址
|
||||||
|
const regeoCode = (lnglat) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
geocoder.value.getAddress(lnglat, (status, result) => {
|
||||||
|
if (status === "complete" && result.regeocode) {
|
||||||
|
const address = result.regeocode.formattedAddress;
|
||||||
|
resolve(address);
|
||||||
|
} else {
|
||||||
|
reject("根据经纬度查询地址失败");
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const addMark = (data) => {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(data.lng, data.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||||
|
// title: "北京",
|
||||||
|
// content: "<b>起</b>",
|
||||||
|
});
|
||||||
|
map.value.add(marker);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTabClick = (tab, ev) => {
|
||||||
|
activeTabName.value = tab.paneName;
|
||||||
|
if (formData.value.startLngLat.length && formData.value.endLngLat.length) {
|
||||||
|
searchRoute();
|
||||||
|
} else {
|
||||||
|
ElMessage.error("err");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清除路线，reset form
|
||||||
|
const clearRoute = () => {
|
||||||
|
if (routeFormRef.value) {
|
||||||
|
routeFormRef.value.resetFields();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索路线
|
||||||
const searchRoute = () => {
|
const searchRoute = () => {
|
||||||
if (!driving.value) return;
|
if (!driving.value) return;
|
||||||
const startLngLat = [117.122166, 31.821747];
|
return new Promise((resolve, reject) => {
|
||||||
const endLngLat = [117.136588, 31.844244];
|
map.value.clearMap();
|
||||||
|
driving.value.opt.policy = AMap.DrivingPolicy[activeTabName.value];
|
||||||
|
const startLngLat = formData.value.startLngLat;
|
||||||
|
const endLngLat = formData.value.endLngLat;
|
||||||
driving.value.search(startLngLat, endLngLat, (status, result) => {
|
driving.value.search(startLngLat, endLngLat, (status, result) => {
|
||||||
// 未出错时，result即是对应的路线规划方案
|
// 未出错时，result即是对应的路线规划方案
|
||||||
console.log(JSON.stringify(result));
|
if (status === "complete") {
|
||||||
|
routeList.value = result.routes[0].steps;
|
||||||
|
console.log(result.routes);
|
||||||
|
resolve(result);
|
||||||
|
} else {
|
||||||
|
reject("获取路线失败");
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const searchPoint = () => {
|
const switchDrawer = () => {
|
||||||
placeSearch.value.search("大蜀山");
|
drawer.value = !drawer.value;
|
||||||
|
if (drawer.value) {
|
||||||
|
document.querySelector("#drawer-switch").style.left = "25%";
|
||||||
|
document.querySelector("#drawer-switch").style.transform =
|
||||||
|
"translate(-50%, -50%)";
|
||||||
|
} else {
|
||||||
|
document.querySelector("#drawer-switch").style.left = "0";
|
||||||
|
document.querySelector("#drawer-switch").style.transform =
|
||||||
|
"translate(0, -50%)";
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
const searchPoint = (val /** 搜索建议选项 */) => {
|
||||||
|
if (val) {
|
||||||
|
if (nowSearch.value === "start") {
|
||||||
|
formData.value.startName = val;
|
||||||
|
} else if (nowSearch.value === "end") {
|
||||||
|
formData.value.endName = val;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
placeSearch.value.search(val, (status, result) => {
|
||||||
|
console.log(status, result);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取搜索建议
|
||||||
const getAutoComplete = (val) => {
|
const getAutoComplete = (val) => {
|
||||||
|
console.log("changed");
|
||||||
if (!autoComplete.value) return;
|
if (!autoComplete.value) return;
|
||||||
autoComplete.value.search(val, (status, result) => {
|
autoComplete.value.search(val, (status, result) => {
|
||||||
console.log(status, result);
|
console.log(status, result);
|
||||||
if (status === "complete") {
|
if (status === "complete") {
|
||||||
searchStartTips.value = result.tips;
|
searchTips.value = result.tips;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -155,18 +395,41 @@ const setCenter = (val) => {
|
|||||||
console.log(status, result);
|
console.log(status, result);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMap();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
#map-container {
|
#map-container {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
#route-form {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
#drawer-switch {
|
#drawer-switch {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 100px;
|
left: 25%;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
transform: translateY(-50%);
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.suggestion-item {
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 32px 0 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #606266;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
&:hover {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -175,6 +438,9 @@ const setCenter = (val) => {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
.el-drawer {
|
.el-drawer {
|
||||||
pointer-events: initial;
|
pointer-events: initial;
|
||||||
|
.el-input__suffix {
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user