116 lines
2.6 KiB
Vue
116 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { onBeforeMount, ref, watch } from 'vue';
|
|
import ThemeSwitch from './components/ThemeSwitch.vue';
|
|
import MarkMenu from './components/left/MarkMenu.vue';
|
|
import CtrlMenu from './components/left/CtrlMenu.vue';
|
|
import { useWindowSize } from '@vueuse/core';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMarkStore } from './store/useMarkStore';
|
|
|
|
const {marks} = useMarkStore();
|
|
const tab = ref('mark');
|
|
const sideStyle = ref('20em,logo');
|
|
const { width } = useWindowSize();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const nowRouter = ref(route.path);
|
|
|
|
watch(nowRouter, (path) => router.push(path));
|
|
|
|
onBeforeMount(() => {
|
|
sideStyle.value = width.value > 600 ? '20em,logo' : '0em,bar';
|
|
});
|
|
|
|
function changeSide(data: string) {
|
|
const _data = data.split(',');
|
|
document.body.style.setProperty('--side', _data[0]);
|
|
document.body.style.setProperty('--logoOrBar', _data[1]);
|
|
}
|
|
|
|
watch(sideStyle, changeSide);
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<h5 class="logo">离线地图</h5>
|
|
<div class="main" ><router-view></router-view></div>
|
|
<div class="bar">
|
|
<q-toggle class="leftctl" v-model="sideStyle" true-value="20em,logo" false-value="0em,bar" />
|
|
<ThemeSwitch></ThemeSwitch>
|
|
</div>
|
|
<div class="left">
|
|
<q-btn-toggle
|
|
v-model="nowRouter"
|
|
spread
|
|
class="my-custom-toggle"
|
|
no-caps
|
|
rounded
|
|
unelevated
|
|
toggle-color="primary"
|
|
color="white"
|
|
text-color="primary"
|
|
:options="[
|
|
{ label: '百度', value: '/baidu' },
|
|
{ label: '高德', value: '/gaode' },
|
|
{ label: '热力图', value: '/echart' },
|
|
]" />
|
|
<q-tabs v-model="tab" glossy>
|
|
<q-tab name="mark" label="标点" />
|
|
<q-tab name="ctrl" label="控制" />
|
|
</q-tabs>
|
|
<q-tab-panels v-model="tab" animated keep-alive>
|
|
<!-- <q-tab-panel name="mark">
|
|
<MarkMenu :marks="marks" @flyTo="flytoMark" @remove="removeMark"></MarkMenu>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="ctrl">
|
|
<CtrlMenu @change="ctrlMap"></CtrlMenu>
|
|
</q-tab-panel> -->
|
|
</q-tab-panels>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.logo {
|
|
margin: unset;
|
|
grid-area: var(--logoOrBar, logo);
|
|
will-change: filter;
|
|
transition: filter 300ms;
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo:hover {
|
|
filter: drop-shadow(0 0 2em #646cffaa);
|
|
}
|
|
|
|
.logo.vue:hover {
|
|
filter: drop-shadow(0 0 2em #42b883aa);
|
|
}
|
|
|
|
.left {
|
|
grid-area: left;
|
|
overflow: auto;
|
|
user-select: none;
|
|
|
|
|
|
.leftctl {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
.main {
|
|
grid-area: main;
|
|
position: relative;
|
|
}
|
|
|
|
.bar {
|
|
grid-area: bar;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|