| | |
| | | <template> |
| | | <div class="menus" v-show="fullScreen"> |
| | | <div |
| | | class="menus" |
| | | v-show="fullScreen" |
| | | > |
| | | <div class="logo_box"> |
| | | <img src="../assets/img/logo.png" alt="" class="logo" /> |
| | | <img |
| | | src="../assets/img/logo.png" |
| | | alt="" |
| | | class="logo" |
| | | /> |
| | | <div class="logo_name"> |
| | | <h3>月球大数据地理空间分析展示平台</h3> |
| | | <img src="../assets/img/logob.png" alt="" class="logo_name_b" /> |
| | | <img |
| | | src="../assets/img/logob.png" |
| | | alt="" |
| | | class="logo_name_b" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="menus_box"> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="content_box" v-show="fullScreen"> |
| | | <div |
| | | class="content_box" |
| | | v-show="fullScreen" |
| | | > |
| | | <div |
| | | v-show="checkMenuFlag == 'l1'" |
| | | style="position: relative; display: flex" |
| | |
| | | <search v-if="thematicMapBtnState"> </search> |
| | | </div> |
| | | |
| | | <top-btn v-show="fullScreen" v-if="thematicMapBtnState"></top-btn> |
| | | <top-btn |
| | | v-show="fullScreen" |
| | | v-if="thematicMapBtnState" |
| | | ></top-btn> |
| | | |
| | | <thematic-map v-show="!thematicMapBtnState"></thematic-map> |
| | | <div class="fullScreen_btn" v-show="!fullScreen" @click="screen"></div> |
| | | <div |
| | | class="fullScreen_btn" |
| | | v-show="!fullScreen" |
| | | @click="screen" |
| | | ></div> |
| | | <div |
| | | v-show="store.state.doubleMenu" |
| | | class="setDobuleMap" |
| | | @click="setDoubleScreenMap" |
| | | > |
| | | <Operation /> |
| | | </div> |
| | | <div |
| | | @setDobuleCloseLayer="setDobuleCloseLayer" |
| | | v-show="store.state.doubleMap" |
| | | > |
| | | <double-layer></double-layer> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | |
| | | defineProps, |
| | | defineEmits, |
| | | } from "vue"; |
| | | import { Operation } from "@element-plus/icons-vue"; |
| | | import menuData from "@/assets/js/Map/menuData"; |
| | | import menuTool from "@/assets/js/Map/menuTool"; |
| | | //顶部菜单 |
| | |
| | | import plotting from "@/views/plotting/plotting.vue"; |
| | | //底图切换 |
| | | import baseMapSwitching from "@/views/baseMapSwitching/baseMapSwitching.vue"; |
| | | //分屏菜单 |
| | | import doubleLayer from "@/views/layer/doubleLayer.vue"; |
| | | import store from "@/store"; |
| | | const menuOptions = ref([]); |
| | | const checkMenuFlag = ref(""); |
| | | let fullScreen = ref(true); |
| | | let thematicMapState = ref(true); |
| | | let thematicMapBtnState = ref(true); |
| | | const setDoubleScreenMap = () => { |
| | | store.state.doubleMenu = false; |
| | | store.state.doubleMap = true; |
| | | }; |
| | | const setDobuleCloseLayer = () => { |
| | | store.state.doubleMenu = true; |
| | | store.state.doubleMap = false; |
| | | }; |
| | | const setMenuClick = (res) => { |
| | | if (res.id == "l6") { |
| | | // fullScreen.value = !fullScreen.value; |
| | |
| | | } |
| | | } |
| | | } |
| | | .setDobuleMap { |
| | | position: absolute; |
| | | top: 105px; |
| | | right: calc(50% - 50px); |
| | | z-index: 30; |
| | | width: 20px; |
| | | height: 20px; |
| | | color: #d6e4ff; |
| | | background: rgba(7, 8, 14, 0.8); |
| | | box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1); |
| | | padding: 10px; |
| | | } |
| | | .menu_Image_box { |
| | | height: 778px; |
| | | width: 100%; |