<template>
|
<div class="project_list">
|
<div class="left_content">
|
<router-view />
|
</div>
|
<div class="right_content">
|
<div class="map">
|
<Map />
|
</div>
|
<div class="media-wrapper" v-if="root.$route.name === ERouterName.MEDIA">
|
<MediaPanel />
|
</div>
|
<div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK">
|
<TaskPanel />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import Map from '/@/components/cesiumMap/cesium.vue'
|
import MediaPanel from '/@/components/MediaPanel.vue'
|
import TaskPanel from '/@/components/task/TaskPanel.vue'
|
import { EBizCode, ERouterName } from '/@/types'
|
import { getRoot } from '/@/root'
|
const root = getRoot()
|
</script>
|
|
<style scoped lang="scss">
|
.project_list {
|
display: flex;
|
transition: width 0.2s ease;
|
height: 100%;
|
width: 100%;
|
|
.left_content {
|
width: 370px;
|
max-height: 100vh;
|
background-color: black;
|
color: $text-white-basic;
|
}
|
|
.right_content {
|
position: relative;
|
flex: 1;
|
|
.map {
|
width: 100%;
|
height: 100%;
|
}
|
|
.media-wrapper,
|
.task-wrapper {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
z-index: 100;
|
background: #f6f8fa;
|
}
|
}
|
}
|
</style>
|
