<template>
|
<el-container class="map-setting-container">
|
<el-aside class="map-setting-left">
|
<div class="left-container">
|
<div
|
v-for="(item, index) in leftOptions"
|
:key="item.id"
|
class="left-menu-item"
|
:class="{ active: activeIndex === item.id }"
|
@click="selectHandler(index)"
|
>
|
<span :title="t(item.name)">{{ t(item.name) }}</span>
|
</div>
|
</div>
|
</el-aside>
|
<el-main class="map-setting-right">
|
<div class="right-container">
|
<OnlineMap v-if="activeIndex" />
|
<geometry v-else />
|
</div>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import Geometry from './Geometry.vue'
|
import OnlineMap from './OnlineMap.vue'
|
|
const { t } = useI18n()
|
|
const activeIndex = ref(0)
|
const leftOptions = [
|
{ id: 0, name: 'online_map.geometry' },
|
{ id: 1, name: 'online_map.onlinemap' }
|
]
|
|
const selectHandler = (index: number) => {
|
activeIndex.value = index
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.map-setting-container {
|
width: 100%;
|
height: 100%;
|
.map-setting-left {
|
width: 200px !important;
|
height: 100%;
|
border-right: 1px solid #1f232926;
|
.left-container {
|
padding: 16px 16px 16px 16px;
|
width: 100%;
|
height: 100%;
|
.left-menu-item {
|
width: 168px;
|
height: 40px;
|
padding: 9px 8px;
|
line-height: 22px;
|
border-radius: 4px;
|
font-size: 14px;
|
font-weight: 400;
|
cursor: pointer;
|
&:hover {
|
background: #1f232926;
|
}
|
span {
|
display: block;
|
width: 150px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
.active {
|
background: var(--ed-color-primary-1a, #3370ff1a);
|
color: var(--ed-color-primary);
|
font-weight: 500;
|
}
|
}
|
}
|
.map-setting-right {
|
padding: 0 !important;
|
.right-container {
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
